TableLayout в верстке экрана (пример)

| 16.02.2014

Для верстки экрана в Андроид-разработке используются различные виды Layout. Тот или иной вид выбирается в зависимости от того, какую структуру и сложность имеет первоначальный макет. В этом уроке мы рассмотрим пример использования табличной структуры верстки — TableLayout. Точнее, мы будем использовать сочетание LinearLayout и TableLayout.

Кратко опишу задачу: нам необходимо создать небольшое активити приложения, в котором пользователь будет вводить некоторые значения (данные), после чего будет выдаваться ответ. На экране должно отображаться две строки, в каждой из которых по одному текстовому полю и TextView перед самим полем ввода. В третьей строке должна быть кнопка Submit, располагающаяся по середине экрана.

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

Итак, выглядеть это должно так:

TableLayout в верстке экрана (пример)

Вот xml (activity_main.xml) файл, который формирует данный экран:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 
 
<TableLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:padding="10dp" >
 
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
 
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/name" />
 
        <EditText
            android:id="@+id/editText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="number" >
 
            <requestFocus />
        </EditText>
 
    </TableRow>
 
    <TableRow 
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
 
       <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"               
        android:text="@string/age" />
 
       <EditText
           android:id="@+id/editText2"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:ems="10"
           android:inputType="number" />
 
    </TableRow>
 
</TableLayout>
<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/submit" 
        android:layout_gravity="center" 
        android:maxWidth="150dp"/>
</LinearLayout>

Как видите, внутри LinearLayout мы имеем TableLayout. Таблица имеет две строки таблицы TableRow, ячейками которых являются непосредственно сами элементы EditText и TextView. В каждой строке по два таких элемента. Кнопка Button располагается за пределами таблицы и это позволяет нам расположить ее как раз посередине таблицы.

В данном файле мы использовали текстовые ресурсы из файла string.xml:

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Table Layout</string>
    <string name="name">Ваше имя</string>
    <string name="age">Ваш возраст</string>
    <string name="submit">Submit</string>
</resources>

В MainActivity мы имеем простой и короткий код с вызовом нашего layout:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package ru.androiddocs.table_layout;
 
import android.os.Bundle;
import android.app.Activity;
 
public class MainActivity extends Activity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
    }
}

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

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

*