Android layout height match parent

I am putting this LinearLayout inside RelativeLayout.

What I am trying to do is – to show which item has been chosen. I set LinearLayout’s height and width match_parent. It is only matching parent(RelativeLayout)’s width, not height.

This is what I have intended to do:

This is what I am getting:

LinearLayout is not taking whole height of its parent.

There are 2 reasons, why I am using Relative layout as parent:

The LinearLayout should be in upside(should cover) book information with 40% black color

To show this symbol on the top of book

The whole XML looks like this:

I am using this RelativeLayout in BaseAdapter class using which I am filling GridView with items.

EDIT:

Try1: as cj1098 suggested I have changed child LinearLayout to RelativeLayout. Unfortunately, no effect

Try2: as challenger suggested, I have used this inside my child LinearLayout, but effect was like this:

Try3: as codeMagic suggested, I have changed child LinearLayout’s

In result, LinearLayout is not taking whole height.

So my question is how make child LinearLayout match parent RelativeLayout’s height?

На этом уроке мы:

– разбираемся в характеристиках экрана
– рассматриваем layout параметры (высота, ширина, отступ, гравитация, вес)

Экраны

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

Возьмем в качестве примера экран смартфона HTC Desire. Диагональ = 3,7 дюйма, разрешение = 800х480 пикселей.

Кол-во пикселей в одном дюйме называется dpi (dot per inch). Узнаем чему равно dpi в данном случае, вспомнив классику: c 2 = a 2 + b 2 , где с – кол-во пикселей по диагонали, т.е. вмещаемое в 3,7 дюйма. a и b – стороны экрана.

c = 3,7 * dpi
(3,7 * dpi) 2 = 480 2 + 800 2
dpi 2 = 870400 / 13,69 = 63579
dpi = 252. Т.е. в одном дюйме экрана помещается ряд из 252 пикселей.

Возвращаемся к теме урока. Рассмотрим подробно следующие параметры View элементов

Layout width и Layout height

Про ширину (layout_width) и высоту (layout_height) мы уже немного говорили на прошлом уроке. Мы можем указывать для них абсолютные значения, а можем использовать константы. Разберем подробнее эти возможности.

Абсолютные значения:

Используются следующие единицы измерения (ЕИ):

dp или dip – Density-independent Pixels. Абстрактная ЕИ, позволяющая приложениям выглядеть одинаково на различных экранах и разрешениях.

sp – Scale-independent Pixels. То же, что и dp, только используется для размеров шрифта в View элементах

pt – 1/72 дюйма, определяется по физическому размеру экрана. Эта ЕИ из типографии.

px – пиксел, не рекомендуется использовать т.к. на разных экранах приложение будет выглядеть по-разному.

mm – миллиметр, определяется по физическому размеру экрана

in – дюйм, определяется по физическому размеру экрана

Подробней о различиях и соотношениях между этими ЕИ вы можете прочесть в этом материале сайта.

Константы

match_parent (fill_parent) – означает, что элемент займет всю доступную ему в родительском элементе ширину/высоту.

wrap_content – ширина/высота элемента будет определяться его содержимым

Project name: P0072_LayoutProp
Build Target: Android 2.3.3
Application name: LayoutProp
Package name: ru.startandroid.develop.layoutprop
Create Activity: MainActivity

Открываем main.xml. Настроим корневой LinearLayout на горизонтальную ориентацию, удалим TextView, и добавим Button с шириной и высотой равной wrap_content. Она отображается на экране и ее ширина соответствует тексту на ней.

Изменим текст с «Button» на «Button with text», сохраним и посмотрим на экран.

Кнопка стала шире, т.к. ширина определяется по содержимому. Если же мы сейчас явно укажем ей ширину 250 dp, то кнопка растянется независимо от содержимого.

Теперь сделаем ширину равной match_parent. Кнопка растянулась на всю ширину родителя, т.е. LinearLayout. А LinearLayout в свою очередь занимет всю ширину экрана.

Если у нас родитель содержит несколько элементов и мы хотим, чтобы они заняли все пространство необходимо использовать параметр Layout weight – вес. Свободное пространство распределяется между элементами пропорционально их weight-значениям.

Читайте также:  Что такое svg формат

Изменим текст нашей кнопки на B1 и добавим ей соседа по LinearLayout – вторую кнопку с текстом B2. Ширину для обоих поставьте wrap_content

Займемся дележом. Если мы хотим, чтобы кнопки поделили пространство родителя поровну – то для обеих укажем weight = 1. В этом случае кнопки равны по ширине.

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

Если нужно, чтобы B1 занимала четверть, а B2 три четверти свободного пространства, то проставляем weight = 1 для B1 и weight = 3 для B2.

Кол-во элементов может быть любым. Добавим еще кнопку с текстом B3, weight = 2 и w >

xml-код получившегося экрана:

Теперь для B2 и B3 укажите weight = 0. Они больше не претендуют на свободное пространство и занимают ширину по содержимому, а B1 забирает все себе.

Разумеется, все выше сказанное применимо и для параметра высоты – height.

При использовании weight вы можете указать значение height или w >

Layout gravity

Параметр layout_gravity аналогичен выравниванию из Word или Excel. Удобнее всего продемонстрировать его с использованием FrameLayout. Я не описывал этот Layout на прошлом уроке, т.к. он совсем простой. Все помещаемые в него элементы он по умолчанию помещает в левый верхний угол и никак их не выстраивает. Нам это очень подходит для демонстрации настроек выравнивания.

Создадим grlayout.xml:

На экране видим:

Для наглядности текст кнопки отображает ее свойства. Все очевидно и несложно.

Я честно пытался понять зачем нужны значения gravity fill_* и clip_*, но так и не понял. То, что написано про них в хелпе у меня не работает. Если у вас есть сведения по этому поводу – пишите в каменты.

Layout margin

Параметры margin полностью аналогичны margin из html. Это отступ. Он может быть со всех сторон сразу, либо только с необходимых сторон. Продемонстрируем это на примере TableLayout. Создадим marginlayout.xml и нарисуем таблицу три на три с кнопками.

И на кнопке в центре будем экспериментировать.

margin = 50 dp
Вокруг кнопки со всех сторон образовался отступ = 50 dp.

margin left = 10 dp
margin top = 20 dp
Отступ слева и сверху.

margin right = 30 dp
margin bottom = 40 dp
Отступ справа и снизу.

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

Стили

Если кто использовал HTML, то наверняка слышали про каскадные стили – CSS. Стили позволяют вам группировать атрибуты элементов (кнопок, таблиц, параграфов и т.д.). Далее вы просто применяете к элементам стили, и элемент рисуется с учетом всех атрибутов стиля. И нет необходимости повторять несколько раз один и тот же код для элементов, которые должны выглядеть одинаково. Особенно это удобно в случае изменения атрибутов. Вы просто меняете один раз стиль и все элементы с этим стилем меняются.

В Android тоже есть стили и они имеют точно такое же назначение. Если у вас есть несколько элементов и вам надо, чтобы они выглядели одинаково, то вы просто создаете один стиль и применяете его к нужным элементам. В принципе, вы пока можете не заморачиваться этим и начать использовать стили, когда наберетесь опыта. Ну а тем кому это интересно прямо сейчас – прошу в эту ветку нашего форума. Пользователь icamys на примере подробно разъясняет как использовать стили.

На следующем уроке:

– научимся обращаться к View-элементам из кода и менять их свойства

Присоединяйтесь к нам в Telegram:

– в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.

– в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование

– ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

– новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме

В прошлых уроках мы разбирались с установкой и настройкой Android Studio и со структурой проекта Android. Теперь давайте перейдем к более интересной части — к созданию приложений. Но для этого нам потребуется узнать, из чего же состоят приложения, а точнее, та часть, которую видят пользователи.

Читайте также:  Что лучше ферби бум или ферби коннект

Визуальные части приложения

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

Два самых важных понятия в интерфейсе Android — это Activity и View.

Activity — это та часть приложения, с которой взаимодействует пользователь. Можно назвать ее «окном» в терминологии десктопных ОС (хотя фактически это не окно, Window в андроиде тоже есть, но с ним мало кто из разработчиков сталкивался). Внутри Activity расположены дочерние элементы интерфейса. К activity мы позже обязательно вернемся и рассмотрим это понятие в отдельном уроке.

View — элемент интерфейса. То же самое, что и в любой другой ОС. Это может быть кнопка, поле для ввода текста, контейнер для картинки, контейнер для других View и т.д.

Так же немаловажный элемент — ViewGroup. Напрямую начинающие с ним не сталкиваются, обычно с этим классом работают более опытные разработчики. Фактически, ViewGrop — это модифицированный View, созданный для того, чтобы служить контейнером для других View. Тут мы уже знакомимся с понятием Layout.

Layouts в Android

Layout — общее название для нескольких наследников ViewGroup. Лэйауты служат контейнерами для View, и созданы они для того, чтобы мы могли удобно располагать всяческие кнопочки, поля для ввода текста и прочие элементы интерфейса.

«Самых нужных» лэйаута всего 3:

  • LinearLayout
  • FrameLayout
  • RelativeLayout

В большинстве приложений они используются в качестве layout’ов в, наверное, 90% случаев.

Конечно же, на самом деле их больше — у класса ViewGroup 44 прямых наследника. Но нам для начала хватит и этих трех, остальные мы обязательно рассмотрим позже.

Посмотрите на следующий рисунок:

Кнопки, поле для ввода — это View. Зеленая рамочка вокруг кнопок — это границы ViewGroup, внутри которой находятся кнопки. В свою очередь, ViewGroup с кнопками и поле для ввода находятся внутри другого ViewGroup, границы которого обозначены красным.

А весь «фон» в виде клеточек — это Activity, внутри которого находятся все остальные элементы интерфейса.

Создание интерфейса в Android

В Android принято использовать декларативный подход к созданию интерфейса, когда это возможно. Под декларативным подходом подразумевается описание интерфейса в XML-файлах. Файлы находятся в директории res/layout/:

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

  • activity_name.xml — для Activity
  • fragment_name.xml — для фрагментов(о них мы обязательно поговорим в следующих статьях)
  • view_name.xml — для View

Здесь «name» — имя элемента интерфейса. Например, для LoginActivity файл будет называться activity_login.xml, для MainFragment — fragment_main.xml и т. д.

При создании проекта с пустой Activity у нас по умолчанию создастся MainActivity и xml-файл с описанием этой активити. Давайте откроем этот файл:

Тут вы видите RelativeLayout — главный контейнер для всего контента в Activity, и TextView, который находится внутри этого контейнера.

Обратите внимание на атрибуты layout_width и layout_height. Этими атрибутами, как нетрудно догадаться, мы задаем ширину и высоту элемента. В абсолютных значениях они задаются редко, как правило используются две константы:

  • match_parent — элемент будет занимать все доступное ему пространство.
  • wrap_content — элемент будет использовать столько места, сколько требуется для отображения контента внутри. Кнопка, например, будет иметь размер текста + отступы.

LinearLayout

LinearLayout, как следует из названия, располагает дочерние элементы в «линейном» порядке, т.е. друг за другом. Линейный лэйаут может быть горизонтальным или вертикальным.

Давайте посмотрим на практике, что это такое.

Удалим весь шаблонный код, и вставим вместо него следующий код:

Как видите, мы создали LinearLayout и внутри него поместили три кнопки. Обратите внимание на атрибут orientation у LinearLayout. Он обозначает «направление» контента в лэйауте. Атрибут orientation может принимать два значения — «horizontal» и «vertical«. Как нетрудно догадаться, в первом случае дочерние элементы будут расположены горизонтально слева направо, во втором — вертикально сверху вниз.

Читайте также:  Сетевая карта основные характеристики

В этом примере мы расположили элементы горизонтально. Запустите приложение, и увидите следующую картину:

Теперь давайте изменим ориентацию с горизонтальной на вертикальную:

После запуска проекта мы увидим следующее:

Т.е. теперь элементы расположены вертикально.

У LinearLayout (а точнее, у его дочерних View) есть еще один интересный атрибут — layout_weight. Этим атрибутом мы говорим лэйауту, сколько пространства должен занимать элемент. В качестве значения можно использовать любое число. Например, если мы хотим равномерно распределить пространство между двумя кнопками, мы можем задать обеим кнопкам layout_weight = 1. Тогда они разделят имеющееся пространство на две равных части. Если мы зададим одной кнопке вес = 1, а второй = 2, то вторая кнопка будет занимать в 2 раза больше места, чем первая. Чтобы окончательно понять, как это работает, давайте посмотрим на примере:

Также при использовании атрибута layout_weight рекомендуется заменить ширину (если лэйаут горизонтальный) или высоту (если лэйаут вертикальный) на 0dp. О том, что такое dp, мы поговорим в следующих уроках.

Как видите, первым двум кнопкам мы задали вес = 1, а третьей = 2. Сумма весов = 4, соответственно, первые две кнопки займут левую половину экрана, а третья — правую половину, т.е. ее ширина будет в два раза больше других кнопок. Посмотрим, что получилось:

Получилось не очень симпатично, потому что у первых двух кнопок текст не влез в заданную ширину и часть перенеслась на новую строку, поэтому эти кнопки стали «выше». Однако, суть ясна — третья кнопка в два раза шире, чем остальные.

Для вертикальных лэйаутов это работает точно так же, только меняется, соответственно, высота.

FrameLayout

Пожалуй, это самый простой Layout. Все, что он умеет — располагать элементы друг над другом (по оси «z»). Давайте вспомним немного математики, а точнее, систему координат.

В двухмерном пространстве у нас есть две оси — X и Y. X идет слева направо, Y снизу вверх. В Android немного иначе, Y идет сверху вниз.

В трехмерном пространстве добавляется ось Z. Она идет «на нас». В интерфейсах Z обозначает глубину. Напрямую «глубина» задается редко, однако, например, во FrameLayout она есть. Давайте посмотрим на примере, как это работает. Измените код, чтобы он выглядел вот так:

Запустим проект, и увидим следующее:

Первым мы создали красный квадрат. Он находится «дальше» всех от нас. Вторым создали зеленый, он находится «над» красным квадратом. Ну и больше всех координата Z у синего квадрата.

Если мы поменяем элементы местами, у них изменится и координата Z.

У FrameLayout, как и у многих других лэйаутов, включая LinearLayout, есть понятие gravity. «Гравитация» может быть задана двумя способами:

  • Атрибутом gravity у лэйаута. В таком случае она будет применена для всех дочерних элементов
  • Атрибутом layout_gravity у дочернего элемента. Тогда она будет применена только для этого элемента.

Gravity задает положение элемента внутри контейнера. Гравитация может быть следующей:

  • bottom — элемент «прижимается» к нижней границе контейнера.
  • center — элемент располагается в центре контейнера
  • center_horizontal — элемент находится в центре по оси X
  • center_vertical — элемент находится в центре по оси Y
  • end — элемент находится «в конце» контейнера. Обычно это означает, что он будет находиться справа, но на локали с написанием справа-налево он будет находиться слева.
  • start — элемент находится «в начале» контейнера. Обычно — слева, на RTL локалях — справа.
  • top — элемент «прижимается» к верхней границе контейнера.

left и right использовать не рекомендуется, поскольку это вызовет проблемы с версткой на RTL локалях.

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

Итак, давайте же попробуем на практике поработать с гравитацией. К сожалению, сам FrameLayout, в отличие от многих других контейнеров, не поддерживает атрибут gravity, однако гравитацию можно реализовать через дочерние элементы. Добавьте атрибут layout_gravity со значением center для каждого дочернего View:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector