Текст, изображение и кнопка
Используйте базовые встроенные компонуемые элементы
«Текст, изображение и кнопка» — бесплатный урок Android Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Android Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Android Academy содержит 4 уроков всего.
Встроенные компонуемые функции
Compose поставляется с готовыми компонуемыми функциями для распространённых элементов интерфейса. Три функции, которые вы будете использовать постоянно, — это Text, Image и Button.
Компонуемая функция Text
Text отображает строку. Самый важный её параметр — text.
@Composable
fun Title() {
Text(text = "My App")
}Стилизация текста
Text принимает множество параметров стиля, например fontSize, color и fontWeight.
Text(
text = "Big Bold",
fontSize = 24.sp,
color = Color.Blue,
fontWeight = FontWeight.Bold
)sp и dp
Для размеров шрифта используются .sp (масштабонезависимые пиксели), поэтому они учитывают специальные настройки размера шрифта пользователя. Для размеров макета используются .dp (плотностно-независимые пиксели).
Используйте sp для текста, а dp для всего остального.
Компонуемая функция Image
Image отображает изображение. Используйте painterResource, чтобы загрузить ресурс изображения, и всегда указывайте contentDescription для специальных возможностей.
Image(
painter = painterResource(id = R.drawable.logo),
contentDescription = "App logo"
)contentDescription
contentDescription зачитывается программами чтения с экрана. Для декоративных изображений, не несущих смысла, передавайте null. Для значимых изображений указывайте краткое описание.
Компонуемая функция Button
Button — это интерактивный элемент. Его ключевой параметр — onClick, лямбда-выражение, выполняемое при нажатии. Подпись кнопки помещается в её лямбда-выражение содержимого — обычно это Text.
Button(onClick = { /* do something */ }) {
Text(text = "Tap me")
}Реакция на нажатия
В лямбда-выражении onClick размещается ваша логика: обновление состояния, переход на другой экран или вызов функции.
Button(onClick = { println("Clicked!") }) {
Text(text = "Log")
}Лямбда-выражения содержимого
Обратите внимание: Button принимает замыкающее лямбда-выражение содержимого. Всё, что вы поместите внутрь, отобразится как содержимое кнопки, поэтому кнопка может содержать значок и текст, а не только подпись.
Button(onClick = { }) {
Text(text = "Save")
}Объединяем их
В реальном интерфейсе эти компонуемые функции используются вместе. Здесь заголовок, изображение и кнопка размещены друг под другом внутри Column.
@Composable
fun Card() {
Column {
Text(text = "Profile")
Image(
painter = painterResource(id = R.drawable.avatar),
contentDescription = "Avatar"
)
Button(onClick = { }) { Text("Follow") }
}
}Существует ещё много функций
Помимо этих трёх, Compose предлагает TextField, Icon, Checkbox, Switch и многие другие функции. Применяется тот же принцип: передавайте параметры и лямбда-выражения содержимого.
Быстрая проверка
Какой параметр Button запускает Ваш код, когда пользователь нажимает кнопку?
Повторение
Вы познакомились с тремя основными компонуемыми элементами:
Text— отображает строки; стиль задаётся с помощьюfontSizeиcolor(используйте sp).Image—painterResourceиcontentDescription.Button— лямбдаonClickи лямбда содержимого.
Часто задаваемые вопросы
Урок «Текст, изображение и кнопка» бесплатный?
Да — полный текст урока «Текст, изображение и кнопка» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Android Academy, подпишись на CoddyKit PRO. Курс Android Academy содержит 4 уроков всего.
Чему я научусь в уроке «Текст, изображение и кнопка»?
Используйте базовые встроенные компонуемые элементы Ты практикуешь Android Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Android Academy?
Предыдущий опыт не требуется. Android Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Текст, изображение и кнопка»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Android Academy?
Да. Каждый урок Android Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое Jetpack Compose
- Ваш первый компонуемый элемент
- Текст, изображение и кнопка
- Предпросмотр и горячая перезагрузка