Что такое 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

Гитхаб: https://github.com/g-kalsi/LearningComposables