LiteCoding

Заметки о программировании

Верстка для Android. Часть 2. “Табличная” верстка.

2 комментария

Есть еще один очень интересный подход к верстке для Android, о котором регулярно задаются вопросы на StackOverflow и тематических форумах. Технически он очень похож на то, что в web-среде называется табличной версткой. Общая идея заключается в том, что расположение и размер каждого элемента определяется его местом в таблице. То есть, если проводить аналогии, таблица становится заготовкой для кроссворда, куда потом вписываются слова. В случае Android эти функции выполняют LinearLayout и TableLayout (а также их классы-наследники).

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

Среди XML-атрибутов, доступных для использования, есть android:layout_weight. Он отвечает за перераспределение оставшегося свободного места. Т.е. если мы имеем вертикально ориентированный LinearLayout, то высоту дочерних элементов мы можем задать в долях от размеров родитеского элемента. Как вы уже поняли, выглядеть такая конструкция будет одинаково на всех экранах. Например, следующий код отобразит на экране устройства российский триколор.

<?xml version="1.0" encoding="utf-8">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<View 
    android:layout_width="fill_parent" 
    android:layout_height="1dp"
    android:background="#ffffffff"
    android:layout_weight="0.33"
    />    
<View 
    android:layout_width="fill_parent" 
    android:layout_height="1dp"
    android:background="#ff0000ff"
    android:layout_weight="0.33"
    />    
<View 
    android:layout_width="fill_parent" 
    android:layout_height="1dp"
    android:background="#ffff0000"
    android:layout_weight="0.33"
    />        
</LinearLayout>

Атрибут layout_height отвечает в данном случае за минимальную высоту компонента, а реальный размер задает перераспределение свободного места родительского LinearLayout с заданными весовыми коэффициентами. Кстати, не обязательно указывать пропорции распределения в долях от единицы, можно и целочисленными значениями (в данном случае можно задать layout_weight равным единице для всех трех элементов).

Увы, LinearLayout может перераспределять оставшееся место только в направлении своего роста (т.е. вертикальный — только по вертикали, горизонтальный — только по горизонтали). Но у нас есть еще TableLayout, который представляет из себя не столько таблицу, сколько столбец горизонтальных TableRow (которые вне TableLayout ведут себя как LinearLayout). Подход к верстке при этом не претерпевает серьезных изменений. Итоговый результат может выглядеть примерно так:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TableRow
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:layout_weight="0.33"
    android:background="#ffffffff"
    >
        
    <include 
        layout="@layout/bg" 
        android:layout_height="fill_parent"
        android:layout_width="1dp"
        android:layout_weight="0.33" />    
    
    <include 
        layout="@layout/hu" 
        android:layout_height="fill_parent"
        android:layout_width="1dp"
        android:layout_weight="0.33" />
    
    <include 
        layout="@layout/de" 
        android:layout_height="fill_parent"
        android:layout_width="1dp"
        android:layout_weight="0.33" />
    
</TableRow>
<TableRow
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:layout_weight="0.33"
    android:background="#ffffffff"
    >
    
    <include 
        layout="@layout/ly" 
        android:layout_height="fill_parent"
        android:layout_width="1dp"
        android:layout_weight="0.33" />
     
    <include 
        layout="@layout/ru" 
        android:layout_height="fill_parent"
        android:layout_width="1dp"
        android:layout_weight="0.33" />
        
    <include 
        layout="@layout/ee" 
        android:layout_height="fill_parent"
        android:layout_width="1dp"
        android:layout_weight="0.33" />
        
</TableRow>	
<TableRow
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:layout_weight="0.33"
    android:background="#ffffffff"
    >
    
    <include 
        layout="@layout/pl" 
        android:layout_height="fill_parent"
        android:layout_width="1dp"
        android:layout_weight="0.33" />
    
    <include 
        layout="@layout/ua" 
        android:layout_height="fill_parent"
        android:layout_width="1dp"
        android:layout_weight="0.33" />   
    
    <include 
        layout="@layout/at" 
        android:layout_height="fill_parent"
        android:layout_width="1dp"
        android:layout_weight="0.33" />
    
</TableRow>   
</TableLayout>

Т.е. сначала перераспределяем свободное место между строками, а затем — между столбцами. Все подключаемые компоненты имеют вид, подобный указанному в первом листинге. В результате мы получаем аккуратный квадрат 3×3 с флагами разных стран, который выглядит одинаково на всех устройствах. Конечно, с помощью этого подхода можно делать более сложные вещи, но в большинстве случаев задача стоит примерно так: отгородить верхние 10% экрана под плашку, нижние 20% экрана под управление, а все остальное отдать под контент.

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

Следующая статья: Верстка для Android. Часть 3. DIY, как это обычно бывает.

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • Tumblr

Written by Дмитрий Воробьев

Понедельник, Февраль 21st, 2011 at 18:08

2 комментария to 'Верстка для Android. Часть 2. “Табличная” верстка.'

Subscribe to comments with RSS or TrackBack to 'Верстка для Android. Часть 2. “Табличная” верстка.'.

  1. Отличные статьи, спасибо автору. Правда возникают некоторые вопросы. Например, написано что использование AbsoluteLayout — не является хорошим решением, однако ж если мне надо расположить поверх всех остальных елементов например каку-нибудь картинку, как я это могу сделать с помощью RelativeLayout? В общем жду 3 части.

    vkontakte.ru Андрей Попов

    3 Апр 12 at 10:02

  2. Андрей, расположить картинку поверх всего остального можно и с помощью RelativeLayout. Достаточно объявить распологаемую картинку в конце layout xml и не привязывать ее к соседним элементам (т.е. задать только отступы/графитацию внутри родительского контейнера).

Leave a Reply

You must be logged in to post a comment.