betacode

Руководство Android TableLayout

  1. Android TableLayout
  2. TableLayout - android:stretchColumns
  3. TableLayout - android:shrinkColumns
  4. TableLayout - android:collapseColumns
  5. View - android:layout_column
  6. View - android:layout_span
  7. View - android:layout_gravity
  8. View - android:layout_weight
  9. Пример TableLayout

1. Android TableLayout

TableLayout упорядочивает View внутри в формате таблицы. Точнее, TableLayout это ViewGroup содержащий один или более TableRow, каждый TableRow это строка (row) в таблице, содержащая ячейки (cell). Под-View могут быть расположены в одной ячейке или объединенной ячейке одной строки. В отличии от таблицы HTML, вы не можете объединить последовательные ячейки в столбце.
TableLayout похож так же на обычный View, вы можете переташить его в готовый интерфейс:
Или использовать его как начальный Layout интерфейса:
Добавить TableRow и View в TableLayout:

2. TableLayout - android:stretchColumns

В TableLayout индексированы 0, 1, 2... Атрибут android:stretchColumns позволяет вам назначить строки, которые будут растянуты (stretched) чтобы заполнить свободное горизонтальное пространство у TableLayout.
<!-- The columns with indexes 0 and 2 will be stretched. -->
<TableLayout  
    ...
    android:stretchColumns="0, 2">

     ...

</TableLayout>


<!-- All columns will be stretched. -->
<TableLayout  
    ...
    android:stretchColumns="*">

     ...

</TableLayout>

3. TableLayout - android:shrinkColumns

В отличие от android:stretchColumns, атрибут android:shrinkColumns определяет столбцы, которые будут сжаты(shrinked), чтобы предотвратить выпадение дочерних View за пределы TableLayout.
<!-- The columns with indexes 0 and 2 will be shrinked. -->
<TableLayout  
    ...
    android:shrinkColumns="0, 2">

     ...

</TableLayout>


<!-- All columns will be shrinked. -->
<TableLayout  
    ...
    android:shrinkColumns="*">

     ...

</TableLayout>

4. TableLayout - android:collapseColumns

Атрибут android:collapseColumns определяет столбцы, которые будут свернуты (collapsed), значит его ширина будет 0, столбец будет скрыт.
<!-- The columns with indexes 0 and 2 will be collapsed-->
<TableLayout  
    ...
    android:collapseColumns="0, 2">

     ...

</TableLayout>


<!-- All columns will be collapsed---->
<TableLayout  
    ...
    android:collapseColumns="*">

     ...

</TableLayout>

5. View - android:layout_column

Атрибут android:layout_column применяется к дочернему View в одном TableRow, чтобы определить индекс его столбца. Возможные значения это 0, 1, 2,...

6. View - android:layout_span

Атрибут android:layout_span применяется к дочернему View чтобы определить количество последовательных ячеек TableRow ,которые будут соединены друг с другом.

7. View - android:layout_gravity

Атрибут android:layout_gravity применяется к дочерним View (у TableRow), чтобы определить свое относительное расположение по отношению к ячейке, которая его содержит. Данный атрибут влияет на поведение атрибута android:layout_width.
Trường hợp 1: Если атрибут android:layout_gravity не настроен для дочернего View (У TableRow), дочерний View всегде буедт иметь ширину заполняющую всю содержащую его ячейку, это значит атрибут android:layout_width всегда будет получать значение MATCH_PARENT.
Trường hợp 2: Если атрибут android:layout_gravity настроен для дочернего View (У TableRow), дочерний View всегда будет иметь ширину по умолчанию, это значит атрибут android:layout_width всегда будет получать значение WRAP_CONTENT.
Атрибут android:layout_gravity используется для определения расположения View в содержащей его ячейке.
Constant in Java
Value
Description
Gravity.LEFT
left
Gravity.CENTER_HORIZONTAL
center_horizontal
Gravity.RIGHT
right
Gravity.CLIP_HORIZONTAL
clip_horizontal
Gravity.FILL_HORIZONTAL
fill_horizontal
Gravity.TOP
top
Gravity.CENTER_VERTICAL
center_vertical
Gravity.BOTTOM
bottom
Gravity.CLIP_VERTICAL
clip_vertical
Gravity.FILL_VERTICAL
fill_vertical
Gravity.START
start
Gravity.END
end
Gravity.CENTER
center
Gravity.FILL
fill

8. View - android:layout_weight

Атрибут android:layout_weight используется для дочерних View (у TableRow), он определяет сколько пространства данный дочерний View займет в родительском View (TableRow) по горизонтали. Значение layout_weight больше 0 позволяет дочернему View расшириться, чтобы заполнить любое оставшееся пространство в родительском View. Дочерний View может определить значение layout_weight, потом любое оставшееся пространство в родительском View будет прикреплено к дочерним View по соотношению их layout_weight.
Когда все дочерние View (у TableRow) имеют android:layout_weight=0, вы увидите пустое пространство в родительском View (TableRow):
Дочерние View имеющие android:layout_weight>0 займут свободное пространство у родительского View (TableRow):
Зона свободного пространства родительского View (TableRow) будут распределены дочерним View по соотношению их layout_weight.

9. Пример TableLayout

Ниже является окно входа в систему, вы думаете можно ли использовать TableLayout, чтобы смоделировать для него интерфейс?
Ответ "Совершенно возможно" и это черновик идеи дизайна:
Далее это реализовать идею:
Шаг 1: Добавить 5 TableRow в TableLayout:
Шаг 2: Добавить 4 Button в первый TableRow, мы получим TableLayout с 4 столбцами, это сделает процесс дизайна легче. Первый TableRow будет удален с интерфейса когда завершится процесс дизайна.
Шаг 3: Добавить другие дочерние View в интерфейс:
Шаг 4: Настроить атрибут android:layout_span для некоторых дочерних View:
Шаг 5: Настроить android:layout_column для button "Login":
Шаг 6: Растянуть (stretch) столбцы с индексом 1, 3:
  • (TableLayout) android:stretchColumns = "1, 3"
Шаг 7: Настроить атрибут android:layout_gravity для button "Login" и "Forget Password":
Шаг 8: Настроить text, textSize, padding, gravity для дочерних View на интерфейсе:
Шаг 9: Удалить первый TableRow и дизайн интерфейса готов.
layout_main.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:stretchColumns="1, 3"
    tools:context=".MainActivity">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="4"
            android:gravity="center"
            android:text="Login"
            android:textSize="22sp" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="10dp"
            android:text="User name" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:ems="10"
            android:inputType="textPersonName" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="10dp"
            android:text="Password" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:ems="10"
            android:inputType="textPassword" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_gravity="right"
            android:text="Login" />

        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Cancel" />

        <Button
            android:id="@+id/button7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:text="Forget Password?" />
    </TableRow>
</TableLayout>

Pуководства Android

Show More

Pуководства Android

Show More

Новейшие статьи

    Show More