Что такое Jetpack Compose?
Jetpack compose — это новый набор инструментов, представленный Google в Android для создания пользовательского интерфейса для ваших приложений, который помогает упростить и сократить строки кода с помощью мощных инструментов и возможностей Kotlin. Этот набор инструментов состоит из составных функций для описания пользовательского интерфейса, о которых мы узнаем в этом блоге. Это альтернатива старому способу создания пользовательского интерфейса с использованием файлов xml и большого количества кода.
Введение и причина написания этого блога.
После года без кодирования я почувствовал, что теряю свои навыки программирования из головы. Поэтому я решил снова изучить базовые вещи, чтобы отточить свои навыки и сохранить их в растущей вселенной soft tech. Во-первых, я думал о том, чтобы делать личные заметки о том, что я собираюсь узнать, но потом я подумал о том, чтобы поделиться ими со всеми, кому будет трудно изучать новые вещи и пытаться понять их на языке непрофессионала. Затем мне пришла в голову идея создания блогов для того же самого. Таким образом, мои заметки будут надежно храниться и доступны для всех.
Привет всем, это Гуркират Сингх Калси, который пишет свой первый блог перед тем, как начать свой блог. Я хочу кратко рассказать о себе через свой профиль Linkedin, который будет лучше для всех нас, и чтобы этот блог был более кратким и забавным. Я буду рад вашим отзывам и всегда открыт для ваших предложений относительно моих блогов.
Я надеюсь, что вы найдете этот блог полезным и информативным. 🙂
Прежде чем мы двинемся дальше, давайте взглянем на кое-что о составных функциях.
- мы объявляем составные функции с аннотацией
@Composable
. - Составные функции ничего не возвращают, но могут принимать параметры.
- Составная функция может вызывать другую составляющую функцию.
- Составные функции не создают и не конструируют пользовательский интерфейс, они просто описывают пользовательский интерфейс.
- Соглашение об именах должно быть в стиле Pascal, т. е. первая буква должна быть заглавной, например. Текст приветствия().
- Название функций должно быть существительным, например. DoneButton, RoundIcon, GreetingText и т. д.
- Чтобы расположить элементы в последовательности, мы можем использовать необработанные оболочки, оболочки столбцов и блоков в составных функциях.
Аннотации используются для предоставления дополнительной информации к коду, помогают компилятору и нам самим понять код. мы даже можем предоставить параметры для аннотаций, когда вы продолжите работу с этим блогом, вы узнаете об этом больше.
Теперь создайте новый пустой проект активности и назовите его примерно так, как я дал ему имя «LearningComposables», затем в MainActivity.kt создайте новую функцию, используя аннотацию @Composable
.
@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Text( text = "Hello $name!, How are you?", modifier = modifier, fontSize = 30.sp, lineHeight = 36.sp, textAlign = TextAlign.Center ) }
Как видно из приведенного выше примера, Greeting — это компонуемая функция, в которой я определил элемент Text с некоторыми свойствами элемента, такими как fontSize, lineHeight, textAlign и модификатор . Модификатор используется для задания других характеристик, таких как отступы, фон и т. д., которые вы скоро увидите в этом блоге.
В составном пользовательском интерфейсе вы можете сразу просмотреть предварительный просмотр, не запуская приложение на устройстве или в симуляторе. Нажав на опцию split, указанную на экране MainActivity.kt, как показано на изображении ниже.
Чтобы просмотреть предварительный просмотр, запишите нижеприведенную функцию в файл mainactivity.kt. Мы используем аннотацию @Preview
, чтобы компилятор знал, что это метод предварительного просмотра, и все, что он содержит или вызывает, будет отображаться в разделе предварительного просмотра.
@Preview(showBackground = true, name = "Learning") @Composable fun GreetingPreview() { LearningComposablesTheme { Greeting("John") } }
Как видите, мы даже можем добавлять параметры к аннотациям. поэтому раздел предварительного просмотра будет выглядеть так, как показано на изображении ниже.
параметры, которые мы добавили в аннотацию preview (фон и имя), показывают имя предварительного просмотра и фон для элемента соответственно.
Теперь давайте добавим еще один текстовый элемент в ту же функцию, и мы увидим, как он будет выглядеть в предварительном просмотре.
@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Text( text = "Hello $name!, How are you?", modifier = modifier, fontSize = 30.sp, lineHeight = 36.sp, textAlign = TextAlign.Center ) Text( text = "Hope you're doing well", modifier = modifier ) }
вот предварительный просмотр того же.
Как видите, оба текста перекрываются, чтобы устранить эту проблему, мы можем использовать оболочки Row, Column & Box. В приведенном ниже примере я использовал оболочку столбца и посмотрел, как она работает.
@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Column (verticalArrangement = Arrangement.Center, modifier = Modifier.padding(10.dp)) { Text( text = "Hello $name!, How are you?", modifier = modifier, fontSize = 30.sp, lineHeight = 36.sp, textAlign = TextAlign.Center ) Text( text = "Hope you're doing well", modifier = Modifier .padding(0.dp, 10.dp) .align(alignment = Alignment.End) ) } }
Я использовал оболочку столбца с некоторыми параметрами для выравнивания элементов по центру. Здесь, если вы заметите, я предоставил модификатору второго текстового элемента некоторые дополнительные параметры, чтобы выровнять его по краю или правому краю представления, а также дал ему отступы. (для заполнения мы можем дать каждую сторону отдельно, все по одному разу или по горизонтали/вертикали вместе).
Теперь превью будет выглядеть так.
мы даже можем добавить кнопки, изображения в представление, как показано на изображении ниже.
Если вы хотите увидеть полный код приведенного выше снимка экрана, вы можете увидеть его в моей учетной записи github.
Большое спасибо за то, что читаете мой блог, если у вас есть какие-либо вопросы, сомнения, не стесняйтесь спрашивать меня или связаться со мной по моей электронной почте (указанной ниже). Я буду рад помочь вам ребята.
Linkedin: https://www.linkedin.com/in/gurkeeratkalsi/
Электронная почта: [email protected]
Твиттер: @KalsiGurkeerat