Ред, колона, кутия и ConstraintLayout

Ще научите всичко за оформленията в Jetpack Compose от основите до напредналите концепции. В хода на тази статия ще научите за всяко оформление с примери в реално време, които можете директно да копирате и поставите във вашия проект Compose, за да получите практически опит.

Забележка: Jetpack Compose наскоро премина към бета версия. Това означава, че вече няма да има драстични промени в структурата на API. Така че би било чудесно време да научите как да работите с този комплект потребителски интерфейси от следващо поколение за разработка на Android. Оформленията са основните градивни елементи на потребителския интерфейс, така че се насладете на статията.

Ще трябва да инсталирате Android Studio Canary, Arctic Fox (2020.3.1)версия, за да използвате бета версията на Jetpack Compose.

Въведение

Оформленията са градивните елементи за проектиране на потребителския интерфейс. В традиционната разработка на Android имаме RelativeLayout, LinearLayout, FrameLayout, ConstraintLayout и т.н. По същия начин Jetpack Compose предлага четири вида оформления в момента:

  1. Row
  2. Column
  3. Box
  4. ConstraintLayout

Всяко оформление има своя собствена важност и ще научим за всеки тип подробно в следващите раздели на тази статия. Тъй като Compose бързо се развива, в бъдеще може да има нови оформления. Но засега това са съществуващите и можем да създаваме прости до сложни оформления с тях.

Ако сте нов в Jetpack Compose, започването от оформления е добро нещо. Като се има предвид това, без допълнително забавяне, нека да започнем.

Модификатор

Преди да научите за оформленията, първо трябва да знаете за Modifier в Jetpack Compose. Както подсказва името, Modifier е начин за модифициране на определени аспекти на компонента, които водят до това как оформлението се показва на екрана.

Страхотното за Modifier е, че можем да използваме отделен Modifier за декориране на всеки компонент или можем да свържем един Modifier, който да приложим върху множество компоненти, което отваря възможности като подравняване на изгледи по отношение на неговия родител.

За да научите повече за модификатора, прочетете следната статия:



Компоненти на Jetpack Compose (част 3)
Всичко, което трябва да знаете за модификатораbetterprogramming.pub



Редете

Row се използва за хоризонтално поставяне на компоненти на екрана. Row е съставима вградена функция с четири аргумента: Modifier, horizontalArrangement, verticalAlignment и content. С изключение наcontent, всички останали аргументи не са задължителни. Разгледайте функцията Row:

  • horizontalArrangement: За указване на хоризонталното подравняване на неговите деца
  • verticalAlignment: За указване на вертикалното подравняване на неговите деца
  • content: Съставима функция за показване в обхвата на Row

По подразбиране подравняването е в горния ляв ъгъл на обхвата на реда поради стойностите по подразбиране. Можем да го променим с помощта на horizontalArrangement и verticalAlignment според нашите изисквания.

Използване

За да разберем как да използваме Row, нека вземем прост пример, където трябва да покажем име на абонамент (Netflix) отляво и сума ($10) от дясната страна на изгледа. Първо, разгледайте кода:

Ако внимателно наблюдавате кода, може да откриете, че е подобен на използването на LinearLayout с хоризонтална ориентация и концепция за тежести.

В горната част от кода първо започваме с обхват на ред и дефинирани функции за съставяне на текст, за да представим име и сума. fillMaxWidthсе използва в реда за разширяване на реда до ширината на екрана.

След това идват текстовите компоненти, които използвахме:

  • textAlign е аргументът за определяне на подравняването на текста. За името е ляво, а за сумата е дясно.
  • Modifier играе ключова роля, защото определя теглата на децата в реда.

Разгледайте изхода:

Колона

Column се използва за поставяне на компоненти вертикално на екрана. Column е съставима вградена функция с четири аргумента: Modifier, verticalArrangement, horizontalAlignment и content. С изключение наcontent, всички други аргументи не са задължителни. Разгледайте функцията Column:

  • verticalArrangement: За указване на вертикалното подравняване на неговите деца
  • horizontalAlignment: За указване на хоризонталното подравняване на неговите деца
  • content: Съставима функция за показване в обхвата на Column

По подразбиране подравняването е в горния ляв ъгъл на обхвата на колоната поради стойностите по подразбиране. Можем да го променим с помощта на verticalArrangementи horizontalAlignmentспоред нашите изисквания.

Използване

За да разберете как да използвате Column, нека вземем прост пример, където трябва да покажем име на абонамент (Netflix) и сума ($10) в долната част на името. Първо погледнете кода:

Ако внимателно наблюдавате кода, може да откриете, че е подобен на използването на LinearLayout с вертикална ориентация и концепция за тежести.

В горната част от кода първо започваме с обхват на колона и дефинирани функции за съставяне на текст за представяне на име и сума. fillMaxWidthсе използва в колоната за разширяване на колоната до ширината на екрана. След това декларирайте две прости функции за съставяне на текст. Разгледайте изхода:

Кутия

Децата в Box ще бъдат подредени едно върху друго. Трябва да използваме модификатор за подравняване, за да посочим къде трябва да бъде изчертан съставящият елемент. Това е подобно на относителното оформление. Когато не е дадена връзка за деца, те се подреждат едно върху друго. Разгледайте функцията Box:

  • contentAlignment: Подравняването по подразбиране вътре в Box
  • propagateMinConstraints : Дали входящите минимални ограничения трябва да бъдат предадени на content
  • content: Съставима функция за показване в обхвата на Box

Използване

За да разберем как да използваме Box, нека вземем прост пример, където трябва да покажем име на абонамент (Netflix) в горния ляв ъгъл и сума ($10) в десния край, както направихме с Row. Първо, разгледайте кода:

В горната част от кода първо започваме с обхват на кутия и дефинирани функции за съставяне на текст за представяне на име и сума. fillMaxWidthсе използва в кутията, за да я разширите до ширината на екрана. След това декларирайте две прости функции за съставяне на текст. Разгледайте изхода:

Функциите за съставяне на текст се припокриха, защото не споменахме никакви подравнявания. При използване на относително оформление без никакви релации или оформление на рамката, това ще бъде същият случай при традиционното развитие. Сега трябва да дефинираме подравняването, като използваме Modifier за съставими текстови елементи. Погледни:

Тук сме използвали модификатора align за подравняване на композируемите компоненти. Подобно е на гравитацията в традиционното развитие. Разгледайте изхода:

ConstraintLayout

Като цяло ConstraintLayout се използва за проектиране на сложно оформление с плоска йерархия, така че изобразяването на изгледа да може да бъде оптимизирано. Досега използвахме Column, Row и Box за проектиране на основни оформления. Но когато става дума за сложен потребителски интерфейс със строги ограничения сред изгледите, трябва да изберем да използваме ConstraintLayout.

Преди да продължим, трябва да знаем три неща:

  1. createRefs: Това се използва за създаване на препратки за всеки композируем елемент в ConstraintLayout.
  2. constrainAs: Тук ще дефинираме ограничения за отделни композируеми функции в ConstraintLayout.
  3. linkTo: Така ще дефинираме ограниченията.

Използване

За да разберем по-добре ConstraintLayout, ще изградим донякъде сложен и базиран на ограничения потребителски интерфейс. Примерът основно има четири функции за съставяне на текст, които представляват име на абонамент, сума, месечно състояние и следваща дата на фактуриране. Името и текстът на следващия статус на таксуване ще бъдат отляво и подредени в колона. Сумата и състоянието на месец ще бъдат отдясно и подредени в колона. Разгледайте кода:

При изглед от високо ниво горният код е вграден в композируема карта, която не е нищо друго освен изглед на карта. След това има ConstraintLayout с две колони, показващи съответно име и следващ статус на фактуриране и сума и статус на месец. Двете колони са ограничени с помощта на функцията linkTo. Тук сме използвали createRefs за две колони, които можем да използваме constrainAs.

Разгледайте изхода:

Това е всичко засега. Надявам се, че сте научили нещо полезно. Благодаря за четенето.