- LinearLayout
- Общая информация
- Примеры
- Градиентный фон
- Меняем фон программно
- Программная анимация компоновки
- Отключаем выравнивание по базовой линии
- Разделители
- Программное создание разметки LinearLayout
- Как сделать linearLayout частично прозрачным в Android?
- How can I disable all views inside the layout?
- 23 Answers 23
- Урок 1. Создание Activity и работа с LinearLayout на примере UserInfoScreen
- Видео версия урока
- Создание layout экрана.
- Элементы View, ViewGroup
LinearLayout
Общая информация
В студии макет LinearLayout представлен двумя вариантами — Horizontal и Vertical. Макет LinearLayout выравнивает все дочерние объекты в одном направлении — вертикально или горизонтально. Направление задается при помощи атрибута ориентации android:orientation:
Все дочерние элементы помещаются в стек один за другим, так что вертикальный список компонентов будет иметь только один дочерний элемент в ряду независимо от того, насколько широким он является. Горизонтальное расположение списка будет размещать элементы в одну строку с высотой, равной высоте самого высокого дочернего элемента списка.
В этом примере используются два способа размещения элементов TextView: по горизонтали и по вертикали.
У разметки LinearLayout есть интересный атрибут android:layout_weight, который назначает индивидуальный вес для дочернего элемента. Этот атрибут определяет «важность» представления и позволяет этому элементу расширяться, чтобы заполнить любое оставшееся пространство в родительском представлении. Заданный по умолчанию вес является нулевым.
Например, если есть три текстовых поля, и двум из них объявлен вес со значением 1, в то время как другому не даётся никакого веса (0), третье текстовое поле без веса не будет расширяться и займёт область, определяемую размером текста, отображаемого этим полем. Другие два расширятся одинаково, чтобы заполнить остаток пространства, не занятого третьим полем. Если третьему полю присвоить вес 2 (вместо 0), это поле будет объявлено как «более важное», чем два других, так что третье поле получит 50% общего пространства, в то время как первые два получат по 25% общего пространства.
Также можно указать атрибут android:weightSum. Если атрибуту присвоить значение 100, то можно указывать вес дочерних элементов в удобном виде, как в процентах. Такой способ широко используется веб-мастерами при вёрстке.
Создадим простейшую разметку таким образом, чтобы дочерний элемент занимал половину родительского контейнера:
Примеры
Рассмотрим возможности LinearLayout на примерах.
Создадим 7 текстовых меток и присвоим им цвета радуги. Расположим их друг за другом. Получим следующий результат
Отцентрируем текст в TextView при помощи свойства Gravity, установив значение Center. Аналогично поступим и с LinearLayout, чтобы выровнять по центру текстовые метки.
Цветные полоски получились слишком узкими. Расширим их за счет увеличения размера шрифта (TextSize) у текстовых меток.
Стало чуть лучше, но все равно пропадает много свободного пространства. Совсем не хочется видеть чёрный цвет сверху и снизу. Здесь нам придёт на помощь свойство Layout weight. Так как число 7 не совсем удобное для деления, то поступим следующим образом. Пяти элементам присвоим вес 0.14, а двум — 0.15, что в сумме даст 1.0. Теперь элементы равномерно заполнят весь экран.
Если мы хотим сделать плавное увеличение высоты полоски, то вес нужно распределить таким образом: 0.08, 0.10, 0.12, 0.14, 0.16, 0.18, 0.22.
Чем хорош этот способ? Мы не привязываемся к точным размерам, а позволяем системе самой расчитывать равномерное распределение элементов по экрану. Если в Eclipse вы выберите режим Landscape, то экран будет выводиться в альбомном режиме и при этом элементы по-прежнему будет равномерно распределены.
Градиентный фон
Если вам нужен градиентный фон для LinearLayout, то создайте в папке res/drawable xml-файл, например, gradient.xml:
Далее остаётся только прописать файл в свойстве Background:
Меняем фон программно
Чтобы программно сменить фоновый цвет у LinearLayout, нужно вызвать метод setBackgroundColor(). Пример изменения фона можно найти в статье Android::Класс android.graphics.Color.
Программная анимация компоновки
Хочу показать один пример программной анимации. Не знаю, имеет ли пример практическую ценность, но для общего развития не помешает. Добавьте в шаблон LinearLayout несколько кнопок, текстовых полей и других элементов на ваше усмотрение. Далее пишем код для обработчика щелчка кнопки и вспомогательный класс для анимации:
Когда вы щелкните на кнопке, то LinearLayout будет плавно увеличиваться в размерах. Данный приём можно использовать не только к компоновке, но и к любому объекту View.
Отключаем выравнивание по базовой линии
Допустим, у вас есть следующая разметка:
Если посмотрим, что получилось, то увидим, что средняя кнопка опустилась вниз.
Строго говоря, разметка составлена не совсем правильно, используя жёстко установленные величины. Но будем считать, что такой код достался от другого программиста и заказчик не хочет его кардинально менять. Причина такого поведения кнопки в том, что по умолчанию Android пытается выравнивать элементы по некой базовой линии. А средняя кнопка имеет слишком длинный текст и она вот таким причудливым образом сместилась вниз. Можно попробовать использовать свойства gravity, но можно поступить проще. Добавьте атрибут android:baselineAligned=»false» к LinearLayout и все три кнопки будут аккуратно находиться на одной линии. Имейте в виду, может пригодится.
Разделители
Начиная с API 11, у LinearLayout появился новый атрибут android:divider, позволяющий задать графический разделитель между кнопками. Также нужно явно включить использование разделителей через атрибут android:showDividers, в котором можно указать, каким образом использовать разделители — только в середине, в начале, в конце — можно комбинировать эти значения.
Создадим в папке res/drawable файл separator.xml:
Разметка для активности:
Разделители могут оказаться полезными. В статье Grid Spacing on Android показан хороший пример на эту тему.
Допустим, мы хотим вывести в ряд три кнопки под каким-то компонентом, например, логотипом компании. Разметка может быть следующей.
Вместо @dimen/spacing_medium можете подставить 8dp, а цвета придумать свои, если будете проверять пример самостоятельно.
Видно, что напрашивается дизайн в виде сетки. Отсутствие пространства между кнопками может создать неудобства у пользователя. Добавим их. У контейнера @id/buttons_container добавим android:layout_marginTop=»@dimen/spacing_medium», а у первой и второй кнопки добавим android:layout_marginRight=»@dimen/spacing_medium» (напомню, можно использовать 8dp)
Всё отлично работает до того момента, если нам понадобится программно убрать с экрана третью кнопку. Сделать это можно через View.GONE. И что мы увидим?
Теперь вторая кнопка не выровнена по правому краю. Некрасиво. Очень плохим решением станет программный пересчёт всех величин, чтобы выровнять компоненты. Как вариант, использовать другой тип разметки, например, GridLayout. Но у него есть свои проблемы с отступами и вам будет тяжело добиться нужного результата.
Проблема красиво решается с помощью упомянутых выше разделителей. Создадим в папке res/drawable файл spacer_medium.xml:
Теперь кнопки всегда будут аккуратно выравнены по краям, независимо от их количества — две или три.
Программное создание разметки LinearLayout
В некоторых случаях может понадобиться создать LinearLayout программным способом. Сначала создаётся объект LayoutParams, на его основе создаётся LinearLayout, а позже в него добавляются дочерние компоненты.
Также программно можно управлять настройками LinearLayout через тот же объект LayoutParams. Разместите кнопку с обработчиком щелчка.
Каждый щелчок на кнопке будет увеличивать отступ на пять единиц и кнопка будет смещаться в сторону. Интересно, что если убрать TextView, то кнопка перестаёт двигаться. Причина мне неизвестна.
Источник
Как сделать linearLayout частично прозрачным в Android?
У меня есть RelativeLayout содержащий 2 LinearLayouts один из которых частично покрывает другой. Я хочу сделать часть LinearLayout сверху прозрачной, поэтому я также могу увидеть второй LinearLayout зная, что у меня есть 2 изображения в качестве фона для 2 LinearLayouts .
Когда мы устанавливаем цвет, это похоже на ARGB (Alpha Red Green Blue) . Вам нужно изменить альфу в цветовом коде, чтобы увеличить или уменьшить количество прозрачности :
Вы можете варьировать его от 00 до FF (шестнадцатеричный десятичный)
Для максимальной прозрачности => # 00555555 (Здесь 00 обозначает альфу)
Для минимальной прозрачности или отсутствия прозрачности => # FF555555 (здесь FF обозначает альфу)
Таким образом, для настройки прозрачности ImageView вы можете создать код следующим образом:
Кроме того, вы можете установить альфу для вашего LinearLayout следующим образом :
Сделайте свой LinearLayout Background Transparent:
И для того, чтобы сделать ваш макет частично прозрачным, возможно, эта ссылка помогает вам: как создать вид частично невидимый
Редактировать: если у вас есть изображение в качестве фона вашего макета, я думаю, вы можете установить альфа для своего LinearLayout и управлять им из кода, не меняя свой фон, на Прозрачный макет с фоновым изображением:
Используйте это в своем макете
0.0 полностью прозрачный, 1,0 полностью непрозрачен.
Это так поздно, но это будет полезно для других ….
Создайте xml-файл, подобный этому …
Теперь идите к вашему манифесту … и добавьте эту строку …
Установите фон Top Linear Layout как
Background = «# CCFFFFFF» в файле layout.xml
Измените альфа-режим для большей прозрачности здесь «CC».
(«00» как полностью прозрачный)
Установите цвет фона следующим образом:
Android: фон = «# 00ffffff»
Добавьте тему к активности, которая должна быть прозрачной в вашем файле манифеста.
Источник
How can I disable all views inside the layout?
For example I have:
Is there a way to disable (setEnable(false)) all elements inside LinearLayout my_layout ?
23 Answers 23
this one is recursive for ViewGroups
Another way is to call setEnabled() on each child (for example if you want to do some extra check on child before disabling)
tutu’s answer is on the right track, but his recursion is a little awkward. I think this is cleaner:
Actully what work for me is:
If you’re interested in disabling views in a specific ViewGroup then you can use the interesting, perhaps slightly obscure duplicateParentState . A view state is a set of boolean attributes such as pressed, enabled, activated, and others. Just use this on each child you want to sync to parent ViewGroup:
Note that it duplicates the entire state and not just the enabled state. This may be what you want! Of course, this approach is best if you’re loading layout XML.
I personally use something like this (vertical tree traversal using recursion)
Let’s change tütü’s code
I think, there is no point in just making viewgroup disable. If you want to do it, there is another way I have used for exactly the same purpose. Create view as a sibling of your groupview :
and at run-time, make it visible. Note: your groupview’s parent layout should be either relative or frame layout. Hope this will help.
If some desperate developer scrolls down here, I have another option to do it. Which also disables scrolling as far as I experimented with it. The idea is to use View element like this one in a RelativeLayout, under all your UI elements.
So it is set to be «gone» before some condition. And then you set it’s visibility to VISIBLE when you want to disable your UI. Also you have to implement OnClickListener for this View. This onClickListener will catch click event and won’t pass it to the underlying elements.
Источник
Урок 1. Создание Activity и работа с LinearLayout на примере UserInfoScreen
Код начала урока:
Видео версия урока
Создание layout экрана.
При создании проекта в предыдущем уроке автоматически были созданы два файла: UserInfoActivity.java и activity_user_info.xml . В целом, это отражает парадигму написания кода при разработке Android приложений: весь код нашего проекта делится на два типа файлов:
- xml – файлы с расширением .xml . С их помощью мы создаем разметку элементов отображаемых в нашем приложении, иными словами – пользовательский интерфейс приложения. Для каждого окна ( Activity ) приложения создается свой xml -файл со своей разметкой. Также их можно включать друг в друга, комбинировать и использовать много раз одну и ту же разметку с помощью дублирования. Как это делается, мы рассмотрим далее.
- java – файлы с расширением .java , содержат в себе код, отвечающий за все процессы (бизнес-логику) происходящие в программе.
Итак, у нас есть файл разметки с внешним видом элементов activity_user_info.xml и файл, который приводит в действие эти элементы UserInfoActivity.java . Android Studio по умолчанию связала наши UserInfoActivity.java и activity_user_info.xml в методе onCreate() класса UserInfoActivity . Если кто-то не помнит (не знает) жизненный цикл Activity , то будет полезно освежить знания, посмотрев этот урок.
Весь экран, который нам предстоит сделать в ближайшие уроки выглядит так:
Вначале нам необходимо сделать эту часть экрана:
В первую очередь необходимо абстрагироваться и разбить экран на блоки, чтобы представить структуру файла xml . Визуально это можно представить прямоугольниками с именами элементов и их id . Выглядит это так:
Затем надо проанализировать расположение элементов. Очень важно уделить этому время, чтобы потом ничего не пришлось переделывать. Можно заметить, что первые пять элементов расположены линейно вертикально (один находится под другим), а два последних элемента линейно горизонтально относительно друг друга.
Элементы View, ViewGroup
Здесь самое время вспомнить (узнать) немного базовой теории об элементах пользовательского интерфейса в Android.
Внутри xml -файлов все элементы делятся на два вида – элементы и контейнеры, с помощью которых можно объединять несколько элементов:
- элементы – это компоненты View . С английского это можно перевести как отображение. Мы отображаем разные элементы в нашей разметке. View -компоненты – это просто прямоугольники на экране, границы которых мы можем видеть, а можем и не видеть. И все базовые компоненты расширяют View -компонент: TextView , EditText , Button , Spinner , CheckBox . У каждого элемента есть свои свойства такие как ширина, высота, размеры, цвета и многое другое. Все эти свойства меняются с помощью соответствующих атрибутов ( android:layout_width , android:layout_height , android:background и т.д.).
- контейнеры называются ViewGroup , что означает группа элементов. Внутрь контейнера можно поместить любые элементы (текст, картинки, кнопки, другие контейнеры (т.к. ViewGroup в свою очередь также является View )). Они служат для удобства, чтобы мы могли группировать элементы экрана и тем самым создавать удобную структуру, с нам будет удобно работать.
Для линейного расположения элементов в Android есть контейнер LinearLayout (рус. линейный макет). Если кто-то не знаком с ним, то можно посмотреть этот урок. Мы будем использовать его в качестве главного контейнера для нашего layout . У LinearLayout есть атрибут android:orientation=»vertical | horizontal» . Мы будем использовать значение vertical потому что элементы расположены вертикально.
Теперь создадим layout , в соответствии нашим описанием. Для того, чтобы видеть расположение элементов необходимо наполнить их каким-то содержимым(текстом, изображением). К элементу ImageView добавим атрибут android:src . Это необходимо для того, чтобы отрисовалась хоть какая-то картинка (мы укажем ссылку на стандартную картинку android:src=»https://devcolibri.com/unit/%D1%83%D1%80%D0%BE%D0%BA-1-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-activity-%D0%B8-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0-%D1%81-linearlayout-%D0%BD%D0%B0-%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-3/@mipmap/ic_launcher» ). К нашим TextView добавим атрибут android:text , присвоив им соответствующие значения. Наш файл activity_user_info.xml будет выглядеть так:
Android Studio подсвечивает значения атрибутов android:text , предлагая заменить их на строковые ресурсы. Т.к. мы используем эти атрибуты временно, потом мы их просто удалим, то просто игнорируем это замечание.
Когда вы просто создаёте layout , то лучше не запускать приложение каждый раз (т.к. это отнимет гораздо больше времени), а посмотреть результат, нажав кнопку Preview в правой верхней части экрана или нажав на вкладку Design :
Этот режим удобен, когда вам не надо видеть мелкие элементы, требующие детальной проработки. Если же вам надо увидеть layout крупнее, то вы можете нажать вкладку Design снизу и увеличить zoom:
Пока у нас получилась довольно сырая версия нашего экрана. Давайте подумаем, что нужно доработать:
- добавить вертикальные отступы между элементами;
- увеличить размер текста в элементах TextView ;
- добавить отступ у всех элементов по левому краю;
- расположить элементы following_text_view и followers_text_view горизонтально в одной строке.
Первое, что мы исправим – вертикальное расстояние между элементами. Для этого есть два свойства:
- android:padding (top, bottom, right | end, start | left)
- android:layout_margin (top, bottom, right | end, start | left)
Параметры (top, bottom, right | end, start | left) означают, с какой стороны вы хотите сделать отступ. Параметры right | end , start | left означают практически одно и тоже. Только start, end добавляют поддержку для стран, в которых тексты читаются справа налево. Поэтому рекомендуется использовать их вместо left, right . Эти атрибуты поддерживаются с 17 версии устройств, значит мы можем их использовать (помните, что при создании проекта мы указали, что поддерживаем устройства 17 версии и выше).
Если указать padding без всякого параметра, то отступ будет сделан со всех сторон. Основное различие двух атрибутов состоит в том, что padding делает отступ внутри элемента, а layout_margin делает отступ снаружи. Покажем это на примере. Как говорилось ранее, View -компоненты – это просто прямоугольники, которые отображаются на экране. И иногда для целей проверки каких-либо наших решений в xml -файлах удобно пользоваться свойством, которое присутствует у каждого View -компонента – android:background . Задавая ему какой-либо цвет явно выделяющийся на экране мы можем чётко увидеть границы, занимаемые нашим элементом для проверки соответствия отрисованного на экране с тем, что мы желали бы там видеть.
Таким образом, давайте отредактируем атрибуты первых двух TextView , а всё остальное оставим неизменным:
В результате увидим:
То есть видим, что границы элемента user_name_text_view увеличились. Границы элемента стали занимать больше места, потому что мы указали ему высоту и ширину wrap_content (рус. упаковывать содержимое) и визуально образовался отступ для текста. А user_nick_text_view занимает столько же места, сколько и текст в нём, потому что layout_marginTop задаёт отступ снаружи элемента. В случаях, когда нам не нужно увеличивать размеры самого элемента (это и есть наш случай), лучше использовать свойство layout_marginTop .
Давайте удалим свойства background , marginTop , paddingTop из наших TextView для дальнейшей работы.
Так, с отступом между элементами мы разобрались. Давайте добавим к каждому TextView атрибут увеличения вертикального отступа (а заодно увеличим и размера шрифта):
Следующий шаг – добавление отступа у всех элементов по левому краю. Можно добавить всем элементам атрибут layout_marginStart . Но давайте подумаем, что будет, если в layout добавятся ещё 20 новых TextView ? Придётся добавлять это свойство в каждый элемент. А если надо будет изменить размер отступа? Это будет задача не из простых, точнее не из быстрых. Все элементы находятся внутри одного LinearLayout . Помните, что padding делает отступы внутри элемента? Это именно тот случай, когда надо применить этот атрибут. Укажем атрибут padding для LinearLayout . Причём по рекомендациям Google padding у контейнеров должен быть симметричный (одинаковый со всех сторон).
Нам осталось выполнить последнее задание в этом уроке. Необходимо расположить элементы following_text_view и followers_text_view горизонтально в одной строке. Помните, на рисунке с блоками элементов мы их визуально объединили ещё в один прямоугольник? Чтобы расположить их горизонтально мы можем также использовать LinearLayout , в который вложим два этих элемента. Давайте для двух последних TextView в нашем layout сделаем контейнер LinearLayout . Т.к. мы хотим расположить наши элементы горизонтально, то используем атрибут android:orientation=»horizontal» у нашего LinearLayout .
Выглядит это так:
Важно, что атрибуты android:layout_width , android:layout_height у LinearLayout имеют значение wrap_content . Это значит, что контейнер занимает ровно столько места, сколько необходимо его вложенным элементам.
Нам необходимо добавить отступ между элементами внутри. Давайте добавим атрибут android:layout_marginStart=»10dp» элементу, стоящему справа( followers_text_view ).
Также мы можем перенести повторяющийся атрибут layout_marginTop в их контейнер. Это лучше сделать, чтобы при изменениях величины менять её в минимальном количестве мест. Учитывая все замечания, получим:
Посмотрим, что получилось:
Что ж, в этом уроке мы создали основу для отображения данных пользователя, используя контейнер LinearLayout . В следующем уроке на практике познакомимся с контейнером RelativeLayout .
Полезные материалы:
Источник