Данная статья является продолжением описания разметки интерфейса приложения Android. В предыдущей статье был представлен обзор с примерами возможных типов разметки. В данной статье рассмотрим табличную разметку TableLayout.
Контейнер TableLayout позволяет формировать табличный интерфейс расположения компонентов, в котором View размещаются в строках и столбцах подобно тому, как это оформляется на WEB-странице в теге
. TableLayout не отображает линии обрамления для строк и столбцов. Количество ячеек в разных строках может отличаться. При формировании строки некоторые ячейки можно оставлять пустыми. На следующем скриншоте представлены компоненты вкладки Layouts, которые можно включать в контейнер TableLayout для формирования интерфейса.
Пример табличной разметки, TableLayout
Для наглядного использования контейнера TableLayout создадим layout в рамках приложения p02layout, описанного в начальной части статьи. При создании нового layout определим наименование table (table.xml) и тип контейнера TableLayout. После этого в table.xml создадим интерфейс авторизации пользователя, т.е. включим компоненты ввода логина и пароля с метками пользователя и кнопки выполнения авторизации и закрытия.
Интерфейс формы будет включать 4 строки. В первой строке разместим метку (TextView) и компонент определения логина пользователя (EditText). Во второй строке установим метку (TextView) и компонент определения пароля пользователя (TextPassword). Третья строка останется пустой; она будет определять по вертикали относительное расположение кнопок. В четвертой строке справа разместим кнопки управления (Button).
Добавление строк, TableRow. Для формирования строк интерфейса необходимо использовать объект TableRow, который должен быть дочерним элементом контейнера TableLayout. Каждый компонент TableRow определяет единственную строку в таблице. Строка может не иметь ячеек или иметь одну и более ячеек. Ячейки строки являются контейнерами для других объектов. В ячейку можно вкладывать другой TableLayout или LinearLayout.
Для добавления строки в интерфейс нужно открыть вкладку Layouts в Palette, выделить компонент TableRow и перетащить его либо на страницу, либо в контейнер панели Component Tree. После этого можно таким же образом размещать в строке другие компоненты.
На первом шаге, чтобы не делать лишних телодвижений можно в контейнер поместить сразу 4 строки TableRow. На следующем шаге создадим пустую 3-ю строку с определенным по высоте размером.
Пустая строка. Чтобы создать пустую строку требуемого размера по высоте в 3-ю строку TableRow помещаем контейнер LinearLayout и определяем его размер по высоте; это можно сделать мышкой. Хватаем нижнюю часть компонента (LinearLayout), перемещаем на требуемое расстояние и бросаем (drag-and-drop). Таким образом, можно отделить одну часть интерфейса – компонентов определения учетной записи – от другой (кнопок управления).
Cтрока кнопок управления. Теперь можно в 4-ую строку поместить кнопки управления. Для этого сначала перетаскиваем два пустых компонента Space, и после этого две кнопки «ОК» и «Закрыть». Компонент Space также можно растягивать мышкой по горизонтали. Первый Space будет определять ширину первой колонки для меток, второй Space в совокупности с кнопкой «ОК» будет определять ширину второй колонки, где будут размещаться компоненты ввода параметров учетной записи.
Фоновой цвет строки. Чтобы визуально выделять заголовки или строки таблицы можно определить фоновый цвет TableRow. Для этого следует использовать атрибут «android:background» компонента TableRow.
Растягивание компонентов. Чтобы содержимое компонентов TableRow растянулось на всю ширину макета, необходимо указать в атрибуте «android:stretchColumns» контейнера TableLayout символ ‘*’. Но можно через запятую указать порядковые номера столбцов, которые следует растянуть. Номера столбцов отсчитываются от нуля; остальные колонки занимают минимум места. Например :
Объединение колонок. Смежные ячейки строк можно объединить, чтобы расстянуть компонент на несколько ячеек. Ряды строк объединить нельзя. Слияние ячеек выполняется определением значения целочисленного атрибута «android:layout_span» компонента; layout_span является аналогом атрибута colspan в HTML. Вот как это было выполнено для компонента edLogin в примере :
Рамка в таблице. К сожалению, контейнер TableLayout не может создать рамку для таблицы или ячейки; разработчики Android почему-то не определили эту функциональность. Но данную функциональность Вы можете создать самостоятельно, определяя фоновой цвет таблицы и ячейки.
Ограничение размера колонки. По невнимательности в ячейку таблицы можно вставить очень длинный текст, который растянет ячейку так, что часть текста просто выйдет за пределы экрана. Чтобы избежать данной проблемы необходимо использовать атрибут «android:shrinkColumns» контейнтера TableLayout. С точки зрения программирования приложения данный атрибут управляется методом setColumnShrinkable().
Рассмотрим програмное управление свойством «android:shrinkColumns» на примере. Допустим, что одна из меток в нулевой колонке таблицы имеет очень длинный текст. В интерфейсе мы разместили кнопку btnShrink, по нажатию на которую будем устанавливать флаг «android:shrinkColumns» или сбрасывать. Для этого, необходимо в главном модуле определить логическую переменную (b_shrink), значением которой будет управлять. Код примера представлен в листинге :
Программное создание таблицы. При программном создании таблицы необходимо найти/определить контейнер TableLayout, к которому соответствующим образом добавить необходимое количество строк TableRow. Каждую из строк можно также динамически «оформить». Следующий пример демонстрирует динамическое формирование таблицы, в каждой из ячеек которой размещается изображения.
Интерфейс приложения
Описание возможностей TableLayout и TableRow можно было бы продолжать еще долго. Но, как я полагаю, Вы получили достаточный толчок в понимании того, как можно через интерфейс или программно определить тот или иной атрибут таблицы. Теперь Вам не составит труда самостоятельно соответствующим образом настроить табличный интерфейс приложения.
Возвращаясь к нашему примеру, можно представить внешний вид интерфейса приложения на следующем скриншоте.
Если посмотреть на представление компонентов в дереве (Component Tree), то сразу же бросаются в глаза изображения предупреждения с восклицательными знаками напротив компонентов. В данном случае среда разработки Android Studio нас предупреждает, что текстовые заголовки меток и кнопок необходимо локализовать. Кроме этого необходимо связать метки с компонентами.
Вопрос локализации интерфейса Android Studio рассмотрен на отдельной странице локализациии приложения, а здесь только покажем, как можно бороться с подобными предупреждениями.
Обратите внимание на светло-серый текст возле компонентов tvLogin (@string/lbl_login), tvPassword (@string/lbl_password). Рядом с кнопками подобный текст отсутствует, но имеются предупреждающие сообщения. Это говорит о том, что текст для меток tvLogin и tvPassword используется из ресурсного файла string.xml. Рассмотрим этот файл :
Текст меток
В ресурсном файле определяются наименования ключей и их значения подобно key=value. Для этого в текст файла в формате XML включаются строки с атрибутами (ключами) «name» и соответствующими значеними.
Далее необходимо определенный ключ подключить к метке TextView или к кнопке в опции «android:text». Вот как это выглядит для метки tvLogin :
В описании метки tvLogin определяется идентификатор «android:id», размер метки «android:layout_width», текстовое значение «android:text» и устанавливается связь с компонентом edLogin в опции «android:labelFor». Все эти значения можно определять также через интерфейс в панели атрибутов после выделения компонета.
Текстовое описание интерфейса
В следующем листинге приведено полное описание файла table.xml . Полагаю, что Вам не составит труда самостоятельно подключить локализованные строки к кнопкам.
Старт приложения
Для старта приложения необходимо в активности MainActivity.java в методе onCreate переключиться на интерфейсное описание table.xml :
Помните, что если Вы не корректно завершите работу Android приложения, то IDE может не удалить файлы и поддиректории эмулятора, и при следующем старте приложения эмулятор не запуститься. Как бороться с проблемами запуска эмулятора описано здесь.
Источник
Основы верстки для нативных андроид приложений
( пользоваться не рекомендуется, deprecated ) AbsoluteLayout — означает что каждый элемент верстки будет иметь абсолютную позицию относительно верхнего левого угла экрана задаваемую с помощью координат x и y. Т.е. верхнийлевый угол экрана при AbsoluteLayout имеет координаты x = 0, y = 0. Позиция указывается в атрибутах элемента android:layout_x и android:layout_y. Пример кода:
FrameLayout
FrameLayout — тип верстки внутри которого может отображаться только один элемент в строке. Т.е. если внутри FrameLayout вы поместите несколько элементов, то следующий будет отображаться поверх предыдущего. Пример кода:
LinearLayout
LinearLayout — тип верстки при котором область верстки делится на строки и в каждую строку помещается один элемент. Разбиение может быть вертикальное или горизонтальное, тип разбиения указывается в атрибуте LinearLayout android:orientation. Внутри верстки возможно комбинировать вертикальную и горизонтальную разбивки, а кроме того, возможна комбинация нескольких разных типов верстки например использование LinearLayout внутри FrameLayout.
Пример вертикальной разбивки LinearLayout:
Пример горизонтальной разбивки LinearLayout:
Комбинация нескольких LinearLayout:
RelativeLayout
RelativeLayout — тип верстки при котором позиционирование элементов происходит относительно друг друга и относительно главного контейнера. За то, каким образом будут позиционироваться элементы отвечают следующие атрибуты: Атрибуты позиционирования относительно контейнера
android:layout_alignParentBottom – Низ элемента находится внизу контейнера
android:layout_alignParentLeft – Левая часть элемента прилегает к левой части контейнера
android:layout_alignParentRight – Правая часть элемента прилегает к правой части контейнера
android:layout_alignParentTop – Элемент находится в верхней части контейнера
android:layout_centerHorizontal – Элемент позиционируется по центру относительно горизонтального размера контейнера
android:layout_centerInParent – Элемент позиционируется по центру относительно горизонтального и вертикального размеров размера контейнера
android:layout_centerVertical – Элемент позиционируется по центру относительно вертикального размера контейнера
Атрибуты позиционирования относительно других элементов. В качестве значений этих атрибутов ставятся id элемента относительно которого будет производится позиционирование.
android:layout_above – Распологает элемент над указанным android:layout_below – Распологает элемент под указанным android:layout_toLeftOf – Распологает элемент слева от указанного android:layout_toRightOf – Распологает элемент справа от указанного
Выравнивание относительно других элементов.
android:layout_alignBaseline – Выравнивает baseline элемента с baseline указаннго элемента android:layout_alignBottom – Выравнивает низ элемента по низу указанного элемента android:layout_alignLeft – Выравнивает левый край элемента с левым краем указанного элемента android:layout_alignRight – Выравнивает правый край элемента с правым краем указанного элемента android:layout_alignTop – Выравнивает верхнюю часть элемента в соответствие с верхней частью указанного элемента
TableLayout
TableLayout — табличная верстка. Организует элементы в строки и столбцы таблицы. Для организации строк служит таг
Alternate Layouts
Alternate Layouts — альтернативная верстка. Позволяет использовать различную верстку для различных ориентаций экрана. XML для альтернативной верстки помещается в папки проекта:
res/layout-land – альтернативная верстка для landscape UI res/layout-port –альтернативная верстка для portrait UI res/lauout-square – альтернативная верстка для square UI
и перед тем как получить макет из res/lauout система проверяет наличие файлов в этих папках.
И в завершении немного о стилях.
Стили
Во первых стили элемента могут быть описаны в атрибутах самого элемента. Например:
Кроме того стили можно вынести в отдельный xml файл и сохранить его в папке res/values/ Напимер:
Если мы вынесем стили в отдельный файл, то для описания стилей элемента будем использовать атрибут style.
Источник
Обзор контейнера TableLayout в Android и пример использования
Контейнер TableLayout в Android предназначен для организации внутренней иерархии виджетов в виде строк и столбцов. Элемент этого контейнера используется для построения строки в таблице. Каждая строка имеет 0 или больше ячеек и каждая ячейка может содержать один объект View.
Атрибуты контейнера TableLayout
android:id — уникальный идентификатор, с помощью которого можно работать с контейнером.
Атрибут android:stretchColumns . С помощью него мы можем растянуть ширину столбца. Индексы столбцов начинаются с нуля и должны быть разделены запятой, например: 1, 2, 5. Также мы можем указать звездочку ‘*’ в качестве значения, чтобы растянуть все колонки. Пример: мы хотим вставить по одному виджету в трех строках контейнера TableLayout и сделать так, чтобы они занимали всю ширину своей строки. Для этого нам нужно всего лишь добавить атрибут android:stretchColumns со значением «*».
android:collapseColumns . С помощью него мы можем сделать столбец невидимым. Для этого нужно указать один или несколько разделенных запятыми столбцов. Индексы столбцов начинаются с нуля и должны быть разделены запятой, например: 1, 2, 5. Эти столбцы являются частью таблицы, но не видны.
Атрибут android:layout_column используется для определения столбца, в который должен быть помещен объект View. По умолчанию любой View помещается в первом неиспользованном столбце.
Атрибут android:layout_span используется если объект View должен занимать более одного столбца. Например, если у нас есть строка с тремя элементами и каждый элемент имеет android:layout_span=»2″, то вы будете иметь по крайней мере шесть столбцов в таблице.
Пример использования TableLayout в Android
Для начала создадим новый Android проект. Также Вы можете использовать свой, уже существующий проект: Вам нужно будет просто добавить в него файлы ниже:
