Flexbox layout android studio

FlexboxLayout — часть 1

В мае 2016 года в официальном репозитории Google на Github появился новый проект — flexbox-layout. Это менеджер макетов под Андроид, который предоставляет функциональность, схожую с CSS flexible box. В этой серии статей мы посмотрим на FlexboxLayout и попытаемся понять, как он работает, и как его лучше использовать.

Мы рассмотрим влияние XML-атрибутов на макет и поведение вложенных представлений. Чтобы было проще разбираться, я опубликовал приложение в Google Play, которое позволяет поэкспериментировать с различными вариантами. Со временем я выложу исходный код этого приложения, а пока предлагаю скачать его и поиграться с настройками.

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

Для начала добавляем зависимость в файл build.gradle:

И теперь можем просто использовать FlexboxLayout в XML (ну или в коде, если надо). Не буду останавливаться на этом подробнее, примеров в репозитории более чем достаточно.

В общих чертах, FlexboxLayout ближе всего к LinearLayout: дочерние элементы располагаются последовательно, один за другим. При использовании LinearLayout мы задаем ориентацию, и это подводит нас к первому атрибуту FlexboxLayout, который мы сейчас рассмотрим:

flexDirection

Этот атрибут контролирует направление расположения дочерних элементов, и, как уже говорилось, работает схоже с атрибутом orientation для LinearLayout. Значения row и column аналогичны горизонтальной и вертикальной ориентации. Однако здесь есть еще 2 возможных значения: row_reverse и column_reverse — они делают то же самое, только располагают дочерние элементы в обратном порядке.

flexDirection=»row»

flexDirection=»row_reverse»

Здесь нужно остановиться и ввести пару терминов: главная ось (main axis) — это направление макета, заданное в атрибуте flexDirection; и перпендикулярная к этому направлению поперечная ось (cross axis). Для row и row_reverse главной будет горизонтальная ось, а поперечной — вертикальная. Запомните эти определения, они нам еще понадобятся.

flexWrap

Первое важное различие между FlexboxLayout и LinearLayout — поведение, когда дочерние элементы достигают границы контейнера (т.е. не влезают в контейнер). В случае использования LinearLayout дочерние элементы просто обрезаются, так что при достижении границы они окажутся за пределами контейнера. Используя FlexboxLayout, мы можем контролировать это поведение с помощью атрибута flexWrap. Установив его в значение nowrap, мы заставляем все предыдущие элементы сжиматься, чтобы освободить место для нового элемента. Здесь есть возможность более тонкой настройки, мы рассмотрим это в дальнейших статьях, когда будем разбирать атрибуты дочерних элементов.

flexWrap=»nowrap»

flexWrap=»wrap»

flexWrap=»wrap_reverse»

justifyContent

Способ позиционирования элементов вдоль главной оси контролируется атрибутом justifyContent. На первый взгляд поведение этого атрибута может показаться похожим на поведение атрибута flexDirection, однако flexDirection контролирует порядок элементов, в то время как justifyContent — относительное местоположение. Возможные значения: flex_start, flex_end, center, space_between и space_around.

justifyContent=»flex_start»

justifyContent=»flex_end»

justifyContent=»center»

justifyContent=»space_between»

justifyContent=»space_around»

alignItems

Контролирует положение и размер элементов вдоль поперечной оси. Возможные значения: stretch, flex_start, flex_end, center и baseline.

alignItems=»flex_start»

alignItems=»flex_end»

alignItems=»center»

alignItems=»baseline»

alignItems=»stretch»

alignContent

Вот здесь можно слегка запутаться. alignContent выглядит очень похожим на alignItems, но есть одно небольшое различие, которое, тем не менее, сильно влияет на поведение. Если alignItems контролирует, как располагаются элементы вдоль своей оси, то alignContent управляет самим размещением оси. В терминах Андроида это можно сравнить с TableRow и TableLayout: alignContent ведет себя подобно применению атрибутов к TableRow, а alignItems — это применение атрибутов к дочерним элементам — отдельным ячейкам таблицы. Возможные значения: stretch, flex_start, flex_end, center, space_between и space_around.

alignContent=»flex_start»

alignContent=»flex_end»

alignContent=»center»

alignContent=»space_between»

alignContent=»space_around»

alignContent=»stretch»

Лучший способ понять разницу между alignItems и alignContent — это поиграться с ними. В моем приложении установите параметры flexDirection: Row, Flex wrap: Wrap, добавьте несколько ячеек (с помощью кнопки «Add»), чтобы занять 2 ряда, установите alignContent в значение stretch, чтобы проще было оценить размеры элементов, а затем поиграйтесь значениями alignItems.

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

Приложение доступно в Google Play, исходный код будет опубликован по завершении серии статей.

Источник

Русские Блоги

Подробное объяснение Android FlexboxLayout

Android FlexboxLayout детальный макет

FlexboxLayout Здесь 16 год Google I/O Элемент управления макетом с открытым исходным кодом, что делает Android CSS Flexible Layout Модуль также может иметь такую ​​же мощную функцию. Также выпущен мощный ConstraintLayout Заинтересованные студенты могут пойти и посмотретьAndroid ConstraintLayout Детальнее. FlexboxLayout Можно понимать как продвинутый LinearLayout Потому что оба макета располагают свои подпредставления по порядку. Важное различие между ними заключается в том, что FlexboxLayout ЕстьРазрыв строки Характеристики. одновременно FlexboxLayout Также для RecycleView Менеджер предоставлен FlexboxLayoutManager Так что FlexboxLayout Более могущественный.

FlexboxLayout Адрес проекта с открытым исходным кодом:flexbox-layout

Эта статья demo source address:FlexboxLayoutDemo

Импорт зависимостей

Примечание. Начиная с версии 1.1.0 эта библиотека будет использоваться с AndroidX. Если вы используете версию 1.1.0 или выше, перейдите на AndroidX. Если вы еще не перешли на AndroidX, используйте 1.0.0.

примеров

Эффект после запуска выглядит следующим образом:

Мы можем видеть, что нет разрыва строки, и мы используем LinearLayout Там нет разницы, давайте посмотрим FlexboxLayout Некоторые часто используемые атрибуты.

Общие свойства FlexboxLayout

flexDirection

flexDirection Атрибут определяет направление расположения элементов шпинделя. сходный LinearLayout из vertical и horizontal Но FlexboxLayout Более мощный, не только поддерживает горизонтальные и вертикальные, но также может устанавливать различные начальные точки расположения.

• row (По умолчанию): главная ось горизонтальная, а начальная точка находится слева.
• row_reverse : Главная ось горизонтальна, а начальная точка находится справа.
• column : Главная ось вертикальная, а начальная точка находится на верхнем крае.
• column_reverse : Главная ось вертикальна, а начальная точка находится на нижнем краю.

Ниже мы добавляем в XML flexDirection Свойства и установите начальную точку внизу:

Эффект после запуска выглядит следующим образом:

Вы можете видеть, что элементы расположены снизу вверх.

flexWrap

дефолт FlexboxLayout и LinearLayout То же самое без атрибута перевода строки, но flexWrap Атрибуты могут поддерживать новое расположение строк. Это FlexboxLayout Удобное место. Существует два способа упаковки: одинРазрыв строки в соответствии с направлением расположения изделияОдинЗаворачивать в обратном направлении。

nowrap (По умолчанию): не переносить.

wrap Оборачивать в нормальном направлении.

wrap_reverse : Завернуть в противоположном направлении.

Ниже мы добавляем в XML flexWrap Свойство, заверните в нормальном направлении:

Эффект после запуска выглядит следующим образом:

justifyContent

justifyContent Атрибут определяет выравнивание элемента по главной оси.

flex_start (По умолчанию): выровнено по левому краю.

flex_end : Выровнено по правому краю.

center : По центру.

space_between : Оба конца выровнены, и интервалы между элементами равны.

space_around : Интервалы с обеих сторон каждого элемента равны. Интервал между элементами в два раза превышает интервал между элементами и границей.

Ниже мы добавляем в XML justifyContent Свойства, установите правильное выравнивание:

Эффект после запуска выглядит следующим образом:

Что делать, если вам нужно равномерно разделить оставшееся пространство в направлении проекта? Очень просто space_around Атрибут такой, эффект следующий

alignItems

alignItems Атрибуты определяют, как элементы выровнены по вторичной оси. Мы используем изображение, чтобы понять, что этот атрибут более интуитивно понятен.

flex_start : Начальная точка поперечной оси выровнена.

flex_end : Конечная точка поперечной оси выровнена.

center : Средняя точка поперечной оси выровнена.

baseline : Базовая линия первой строки текста в проекте выравнивается.

stretch (По умолчанию): если для элемента не задано значение высоты или значение auto, он будет занимать высоту всего контейнера.

Вот почему высота каждого из наших элементов различна, но мы видим, что высота каждого элемента одинакова из-за свойств по умолчанию stretch Пусть высота каждого элемента будет установлена ​​так, чтобы заполнить высоту контейнера (высота здесь относится к наибольшей высоте на той же оси). Теперь мы устанавливаем выравнивание по центру и добавляем атрибуты:

Эффект после запуска выглядит следующим образом:

Видно, что он выровнен по центру каждого предмета, здесь об этом поговорим отдельно baseline Атрибуты, знакомые ConstraintLayout Студенты должны лучше понимать это свойство, на самом деле это выравнивание проекта в соответствии с текстовыми строками в проекте. Эффект заключается в следующем

Вы можете видеть, что выравнивание проекта выравнивается по текстовой базовой линии в проекте. Очень легко понять! Следует отметить, что если в проекте нет текстовой базовой линии, то по умолчанию его базовой линией является верхний левый угол, то есть левая и правая позиции.

alignContent

alignContent Атрибут определяет выравнивание нескольких осей. Если проект имеет только одну ось, этот атрибут не имеет никакого эффекта.

flex_start : Выровнять по начальной точке поперечной оси.

flex_end : Выравнивание с конечной точкой поперечной оси.

center : Выровнять по средней точке поперечной оси.

space_between : Выровняйте по обоим концам поперечной оси, и интервал между осями будет равномерно распределен.

space_around : Интервал с обеих сторон каждой оси равен. Следовательно, интервал между осями в два раза превышает интервал между осью и рамой.

stretch (По умолчанию): Линия оси занимает всю поперечную ось.

alignContent и justifyContent На самом деле значения атрибутов внутри одинаковы, одноУстановите выравнивание шпинделяОдинУстановите выравнивание нескольких осейС точки зрения непрофессионала, можно понять, что, например, элемент представляет собой разрыв горизонтальной линии, justifyContent Это установить вертикальное выравнивание, если проект является вертикальным выравниванием, то justifyContent Это установить горизонтальное выравнивание. Теперь мы хотим, чтобы каждый элемент находился на одинаковом расстоянии сверху вниз, справа и слева, нам нужно поставить alignContent и justifyContent Установлены в space_around Вот и все

Эффект после запуска выглядит следующим образом:

showDividerHorizontal

showDividerHorizontal Управляйте отображением горизонтальной разделительной линии, значение none | beginning | middle | end Один или несколько из них.

dividerDrawableHorizontal

dividerDrawableHorizontal Установите горизонтальную разделительную линию между осями Flex.

showDividerVertical

showDividerVertical Управляет отображением вертикальной разделительной линии, значение равно none | beginning | middle | end Один или несколько из них.

dividerDrawableVertical

dividerDrawableVertical Установите вертикальную разделительную линию дочернего элемента.

showDivider

showDivider Управляйте отображением горизонтальных и вертикальных разделительных линий, значение none | beginning | middle | end Один или несколько из них.

dividerDrawable

dividerDrawable Установите горизонтальные и вертикальные разделительные линии, но учтите, что если вы используете его одновременно с другими атрибутами, такими как установка оси Flex и дочерних элементов justifyContent=»space_around» 、 alignContent=»space_between» И так далее. Вы можете увидеть неожиданные пробелы, поэтому вам следует избегать использования их с этими значениями.

Атрибуты дочернего элемента

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

layout_order

По умолчанию расположение дочерних элементов сортируется по порядку в соответствии с порядком потока документов, и order Атрибуты могут управлять порядком размещения, с отрицательными значениями во-первых и положительными значениями во-вторых, в порядке от малого до большого. Короче говоря, вы можете определить порядок дочерних элементов.

Добавляем к дочернему элементу order Свойства и настроить их порядок.

layout_flexGrow

layout_flexGrow Атрибут определяет коэффициент увеличения проекта. По умолчанию 0 То есть, если есть оставшееся пространство, оно не увеличивается. Фактически LinearLayout средний weight Свойства, если все предметы layout_flexGrow Атрибуты 1 Тогда они будутВыровнять оставшееся пространство, Если проект layout_flexGrow Недвижимость 2 , Другие предметы 1 ТогдаПервый будет занимать в два раза больше места, чем другие предметы。

layout_flexShrink

layout_flexShrink Атрибут определяет коэффициент уменьшения проекта, по умолчанию 1 , То есть, если места недостаточно, элемент будет сокращен (разрыв строки недопустим) Если все предметы layout_flexShrink Атрибуты 1 Когда места недостаточно, они будут уменьшены пропорционально. Если проект flex-shrink Недвижимость 0 , Другие предметы 1 , Когда места недостаточно, первый не сжимается. Отрицательные значения недопустимы для этого атрибута.

layout_alignSelf

layout_alignSelf Атрибут позволяет одному дочернему элементу иметь выравнивание, отличное от других дочерних элементов, которое может быть переопределено alignItems Недвижимость. Значением по умолчанию является auto , Что указывает на наследование родительского элемента alignItems Атрибут, если родительского элемента нет, он эквивалентен stretch 。

Этот атрибут может принимать 6 значений, кроме auto Остальные связаны с align_items Атрибуты точно такие же, мы установили alignItems за flex_start Атрибут, где установлен один из дочерних элементов layout_alignSelf Недвижимость baseline 。

baseline Базовая линия первого элемента baseline Базовый уровень.

layout_flexBasisPercent

layout_flexBasisPercent Атрибут определяет процент пространства главной оси, занимаемого дочерними элементами перед выделением избыточного пространства. Значение по умолчанию auto , Оригинальный размер дочернего элемента.

Мы устанавливаем 80% пространства главной оси, занимаемого первым и третьим, и добавляем атрибуты в дочерние элементы

FlexboxLayout Атрибуты в основном объяснены. Если вы ошеломлены, пожалуйста, посмотрите на это во второй раз. FlexboxLayout Может помочь вам завершить все виды макетов, которые вам нужны, можно описать как LinearLayout Улучшенная версия. Например, нам нужно сделать макет, похожий на тег Tag, затем FlexboxLayout Может помочь вам легко понять. Нужно использовать здесь FlexboxLayoutManager Это FlexboxLayout Правильный RecycleView Предоставлен менеджер макетов Добавьте RecycleView к макету.

Добавьте менеджер кода в RecycleView в коде и установите FlexboxLayout Главный атрибут

Эффект после запуска выглядит следующим образом:

Достигнуть эффекта тега Tag легко. Это очень просто? Таким же образом мы также можем добиться макета потока изображений.

FlexboxLayout Использование было объяснено, я думаю, что вы уже поняли силу этого контроля, вы можете почувствовать силу этого контроля самостоятельно. Google открывает все больше и больше средств управления и средств разработки, что, конечно, полезно для нас, разработчиков. Конечно, мы также должны поддерживать любовь к учебе, не сопротивляться новым вещам, продолжать учиться и обогащаться! Единство знаний и действий.

Интеллектуальная рекомендация

Многослойная презентацияViewController Jap

. Недавно, проект использует многоэтажные прыжки [A presentViewController: B animated: YES] [B presentViewController: C animated: YES] . Проблема в том, где: как это идет прямо к? Я не нашел ме.

Распечатать список с конца до головы

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

Типы данных и переменные

тип данных Компьютерная программа может обрабатывать различные значения. Однако компьютеры могут обрабатывать гораздо больше, чем числовые значения. Они также могут обрабатывать различные данные, таки.

Python Daily Practice (4) -идиомы заполняют музыку

оглавление 1. Одно место 2. Случайное расположение 3. Добавьте баллы для оценки 4. Получение файла 5. Установите уровень сложности. 6. Срок завершения 7. Выберите заполнение пропусков. 1. Одно место Н.

Источник