Основы Jetpack Compose: Урок №2

В прошлом уроке мы рассмотрели основы Jetpack Compose, в этом продолжим создавать отличные декларативные интерфейсы для Android-приложений.

Макеты

Элементы пользовательского интерфейса являются иерархическими — одни  содержатся в других. В Compose вы создаете иерархию пользовательского интерфейса, вызывая composable функции из других composable функций.

Начните с текста

Вернитесь к своей Activity и замените функцию Greeting() новой функцией NewsStory(). В оставшейся части руководства вы будете изменять эту функцию NewsStory() и больше не будете касаться кода Activity .

Лучше всего создавать отдельные preview функции, которые не вызываются приложением. Наличие специальных preview функций повышает производительность, а также упрощает создание сложных экранов. Итак, создайте дефолтную preview функцию по умолчанию, которая ничего не делает, кроме вызова функции NewsStory(). Когда вы внесете изменения в NewsStory() с ходе этого туториала, предварительный просмотр отразит изменения.

Этот код создает три текстовых элемента внутри представления. Однако, поскольку мы не предоставили никакой информации о том, как их расположить, три текстовых элемента рисуются друг над другом, что делает текст нечитаемым.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NewsStory()
        }
    }
}

@Composable
fun NewsStory() {
    Text("A day in Shark Fin Cove")
    Text("Davenport, California")
    Text("December 2018")
}

@Preview
@Composable
fun DefaultPreview() {
    NewsStory()
}

Использование Column

Функция Column позволяет размещать элементы вертикально. Добавьте Column в функцию NewsStory().

По умолчанию все дочерние элементы размещаются в стеке, один за другим, без промежутков. Сам столбец помещается в левый верхний угол представления.

@Composable
fun NewsStory() {
    Column {
        Text("A day in Shark Fin Cove")
        Text("Davenport, California")
        Text("December 2018")
    }
}

Добавим стиля

Передавая параметры вызову Column, вы можете настроить размер и положение столбца, а также расположение дочерних элементов внутри него.

Параметр имеет следующее значение:

• modifier: позволяет настроить макет. В данном случае сделайте  Modifier.padding, который отделяет столбец от окружающего представления.

@Composable
fun NewsStory() {
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Text("A day in Shark Fin Cove")
        Text("Davenport, California")
        Text("December 2018")
    }
}

И картинку!

Мы хотим добавить рисунок над текстом. Используйте Resource Manager, чтобы добавить эту фотографию в доступные ресурсы вашего приложения с именем header.

Теперь измените функцию NewsStory(). Нужно добавить вызов Image (), чтобы поместить изображение в столбец. Эти Composable доступны в пакете `foundation`, который вам может понадобиться добавить (посмотрите “Инструкцию по установке Jetpack Compose”). Изображение не будет пропорционально, но это нормально — вы исправите это на следующем шаге.

@Composable
fun NewsStory() {
    val image = imageResource(R.drawable.header)

    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Image(image)

        Text("A day in Shark Fin Cove")
        Text("Davenport, California")
        Text("December 2018")
    }
}

Картинка добавлена в ваш макет, но ее размер еще не установлен. Чтобы сделать графику нормальной, измените размеры в Modifier вашего Image().

• предпочитаемый Height (180.dp): указывает высоту изображения.
• fillMaxWidth (): указывает, что изображение должно быть достаточно широким, чтобы заполнить макет, которому оно принадлежит.

Вам также необходимо передать параметр contentScale в Image ():

• contentScale = ContentScale.Crop: указывает, что рисунок должен заполнять ширину столбца и при необходимости обрезаться до соответствующей высоты.

@Composable
fun NewsStory() {
    val image = imageResource(R.drawable.header)
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        val imageModifier = Modifier
            .preferredHeight(180.dp)
            .fillMaxWidth()

        Image(image,
            modifier = imageModifier,
            contentScale = ContentScale.Crop)

        Text("A day in Shark Fin Cove")
        Text("Davenport, California")
        Text("December 2018")
    }
}

Добавьте разделитель, чтобы отделить графику от заголовков.

Image(image,
            modifier = imageModifier,
            contentScale = ContentScale.Crop)
        Spacer(Modifier.preferredHeight(16.dp))

Готово. В следующий раз перейдем к Материальному дизайну!

Источник