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

В двух прошлых уроках мы рассмотрели основы Jetpack Compose и сделали простой макет, а в этом внедрим в него некоторые принципы материального дизайна.

Материальный дизайн

Compose создан для поддержки принципов материального дизайна. Многие из его элементов пользовательского интерфейса реализуют материальный дизайн прямо «из коробки». На этом уроке вы создадите интерфейс своего приложения с помощью материальных виджетов.

Меняем форму

Один из столпов системы материального дизайна — форма (Shape). Используйте функцию clip(), чтобы скруглить углы изображения из прошлого урока.

Форма невидима, но изображение обрезается по размеру формы, поэтому теперь у него слегка закругленные углы.

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

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

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

Стиль текста

Compose позволяет легко использовать принципы материального дизайна. Примените MaterialTheme к созданным вами компонентам.

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

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

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

Изменения незначительны, но теперь для текста используется стиль текста по умолчанию из MaterialTheme. Затем примените определенные стили абзаца к каждому текстовому элементу.

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

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

            Text("A day in Shark Fin Cove",
                style = typography.h6)
            Text("Davenport, California",
                style = typography.body2)
            Text("December 2018",
                style = typography.body2)
        }
    }
}

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

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

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

            Text(
                "A day wandering through the sandhills " +
                     "in Shark Fin Cove, and a few of the " +
                     "sights I saw",
                style = typography.h6)
            Text("Davenport, California",
                style = typography.body2)
            Text("December 2018",
                style = typography.body2)
        }
    }
}

Настройте текстовый элемент, чтобы установить максимальную длину в 2 строки. Этот параметр не действует, если текст достаточно короткий, чтобы соответствовать этому пределу, но отображаемый текст автоматически обрезается, если он слишком длинный.

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

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

            Text(
                "A day wandering through the sandhills " +
                     "in Shark Fin Cove, and a few of the " +
                     "sights I saw",
                style = typography.h6,
                maxLines = 2,
                overflow = TextOverflow.Ellipsis)
            Text("Davenport, California",
                style = typography.body2)
            Text("December 2018",
                style = typography.body2)
        }
    }
}
  

Все готово

Отличная работа! Вы узнали основы Compose.

Что было рассказано:

• Определение composable функций
• Использование и стилизация столбцов для улучшения макета
• Стильное оформление приложения в соответствии с принципами материального дизайна

Если вы хотите глубже изучить некоторые из этих шагов, ждите новых статей на нашем ресурсе!

Источник