Урок 4: @Composable функции

Введение

Отличия Compose проекта от XML

• В каталоге с ресурсами мы теперь не увидим каталога layout, так как у нас больше не используются XML файлы для разметки экранов. Ничего не мешает нам создать их, и в настоящее время можно встретить гибридные проекты. Чаще всего, когда команда начинает плавный переход на компоуз с xml, это тема для отдельного урока.
• В основном каталоге видим стандартный MainActivity, в котором можете увидеть знакомый системный метод onCreate, который вызывается при создании Activity. Однако, вместо привычного setContentView (который принимал ID макета) видим специальную функцию setContent. Теперь внутри этой лямбды будут размещаться Composable функции.
• Также из основных отличий вы можете заметить, как в иерархии появился каталог ui – в нем нам предлагают хранить стили, ресурсы цветов и назначать темы. По аналогии с XML, но только теперь на языке Kotiln.
• Есть еще некоторые изменения в Gradle файле, в основном там прописаны импорты плагинов и библиотек для работы специально с Jetpack Compose. В целом пока что это все отличия.

Создание первой Composable функции Text()

setContent {
    Text()
}

• Функции в Compose нужны для описания состояния элемента экрана, то есть концептуально это должно быть нечто осязаемое – они считаются сущностями. Поэтому Composable функции всегда пишутся с заглавной буквы.
• Composable-фунции можно вызывать только из других Composable методов. Это поведение схоже с работой suspend функций, которую нельзя вызвать из обычной функции. Но мы можем вызывать обычные методы внутри suspend или Composable.
• Composable функция получает данные преимущественно из своих параметров (есть еще LocalComposition, на базе которого строятся темы оформления, но о нем позже). При этом Composable-фунция ничего не возвращает. UI рисуется исключительно за счет вызова такого метода.
• Ну и наконец, важно понимать, что эти функции предназначены для отрисовки интерфейса. А как мы помним это важнейший процесс, который выполняется в главном потоке. Следовательно никаких сложных вычислений или бизнес-логики в них содержаться не должно.

Отсутствие отступов по умолчанию

• Например, можно задать такие параметры конкретному элементу с текстом, чтобы он имел стандартные отступы и располагался под статусбаром.
  Параметры задаются с помощью модификаторов. Если мы вернемся к объявлению метода Text, увидим там параметр modifier с типом Modifier – он нам и нужен.
  Важно. Казалось бы, зачем нам обращаться к modifier, если в функции Text и так целая куча параметров для кастомизации. Эти параметры текста отвечают за внешний вид самого текста (цвет, размер, шрифт), а Modifier управляет поведением и размещением текста в интерфейсе (отступы, фон, размеры или на него можно повесить слушатель кликов). Модификатор в принципе универсален и работает с любыми элементами, а не только с текстом.
  Итак, добавлю этот именованный параметр. В значении обращусь к объекту Modifier и вызову у него extension-функцию padding. Метод padding имеет несколько перегруженных вариантов с разными параметрами. Например, передав одно значение, мы задаем все 4 паддинга. Напишем 70.dp. Обращаю внимание, что нужно именно через точку, dp здесь – является свойством-расширением класса Int, которое позволяет преобразовать число 70 в пиксели, независимые от плотности экрана.

setContent {
    Text(
        text = "AndroidSprint.ru",
        modifier = Modifier.padding(70.dp)
    )
}

• Следующий способ решения проблемы с позиционированием – создать собственный контейнер, добавить отступы и уже в нем размещать нужные нам элементы. Тоже неплохой вариант, но все таки пока еще похоже на костыль. Есть вариант получше, специально разработанный для настройки позиционирования.
• Использовать композабл функцию Scaffold – это что-то вроде базового каркаса (от англ. «строительные леса»). Он создан, чтобы упростить структуру и автоматизировать расположение стандартных элементов приложения. Его мы и будем использовать. Тем более при создании проекта среда разработки уже предлагает использовать именно эту функцию.

Как работает функция Scaffold

• Вызываем метод Scaffold и открываем круглые скобки, в которые будем отправлять необходимые нам параметры.
• Внутри есть параметр content, который отвечает за основное содержимое экрана. Это тоже Composable тип, значит внутри этой лямбды можно размещать наши Composable функции. Пишем название этого параметра и в качестве его значения отправляем в лямбду нашу функцию с текстом.
• Последний штрих – передать в лямбду объект типа PaddingValues. Именно он содержит отступы, которые Scaffold автоматически рассчитывает, чтобы контент не перекрывал системные элементы. Переменную с этим объектом отправляем в метод установки паддинга.

Создание собственной composable функции

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Scaffold(
                content = { innerPadding: PaddingValues ->
                    StudyAppHeader(innerPadding)
                }
            )
        }
    }
}

@Composable
fun StudyAppHeader(innerPadding: PaddingValues) {
    Text(
        text = "AndroidSprint.ru",
        fontSize = 28.sp,
        modifier = Modifier.padding(innerPadding)
    )
}

@Preview в Jetpack Compose

@Composable
@Preview(showBackground = true)
private fun StudyAppHeaderPreview() {
    StudyAppHeader(PaddingValues())
}