Android base --- UI layout

Four basic layout

LinearLayout–RelativeLayout–FrameLayout–TableLayout

The LinearLayout (linear) transverse / longitudinal layout

android:orientation="vertical" //横向排列 从左到右
android:orientation="horizontal" //纵向排列 从上到下

About gravity and layout_gravity

android:layout_gravity //控件在父容器的位置
android:gravity //自己内部的元素位置
center//居中 
center_vertical //水平居中

Important attributes layout_weight: proportion

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.layouttest.MainActivity">
    <EditText
        android:hint="输入字符"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />
    <Button
        android:text="@string/app_name"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />
</LinearLayout>

Control the position occupied by equal control weigth / total weigth * total width

RelativeLayout relative layout

Relative layout, using the other controls to determine their position. Particularly property, it will look up.
With respect to the layout of the parent container - concrete meaning to see the word know, you can set some more attention, and set the right example and Top is the top-right corner.

android:layout_alignParentLeft="true" 
android:layout_alignParentRight="true"

android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"

android:layout_centerInParent="true"

test:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.layouttest.MainActivity">
    <Button
        android:text="button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"/>
    <Button
        android:text="button2"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="button3"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="button4"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="button5"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

Relative to the control layout:

First determine the location of one of the controls, the other with respect to the control layout
about such groups:
the first group will not touch, there is a certain gap

android:layout_above="@id/button3" //button3上方 不接触
android:layout_below="@id/button3" //button3下方 不接触
android:layout_toLeftOf="@id/button3"
android:layout_toRightOf="@id/button3"

The second followed

        android:layout_below="@id/button3"
        android:layout_alignTop="@id/button3"
        android:layout_alignLeft="@id/button3"
        android:layout_alignRight="@id/button3"

Example: slightly

FrameLayout

The simplest type of layout, all in the upper left corner, by the maximum size of view the decision (to wrap_content). too easy.

TableLayout

Add controls in the form of a table, where each row is TableRow. Each line can be placed in a different number of controls. If you need to merge columns, you can specify the number of layout_span control, as represented interbank.
Specific use are as follows:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.layouttest.MainActivity">
    <TableRow>
        <TextView
            android:text="@string/app_name"
            android:layout_height="wrap_content"/>
        <Button android:text="@string/app_name"
            android:layout_height="wrap_content"/>
    </TableRow>
    <TableRow>
        <Button
            android:text="@string/app_name"
            android:layout_span="2"/>
    </TableRow>
</TableLayout>

Figure:

The second line is indeed found that although the merger, but did not make full use of the screen width.
Specifies TableLayoutthe stretchColumnsattribute, the second column is set to 1 indicates the stretching. 0 stretching the first column.

android:stretchColumns="1"

Four basic layout is such, in fact, there are a lot of layout, such as grid layout, and so on. But they are very much the same, are based on the basic layout. For details, refer inheritance.