Android布局

一、线性布局

属性：orientation vertical horizontal

layout_weight【水平均分，width="0dp"】

layout_height

layout_width

小动物连连看

 1<?xml version="1.0" encoding="utf-8"?>
 2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3    android:layout_width="match_parent"
 4    android:layout_height="match_parent"
 5    android:layout_gravity="center"
 6    android:background="@drawable/animal_bg"
 7    android:orientation="vertical"
 8    android:paddingLeft="15dp"
 9    android:paddingRight="15dp">
 10    <LinearLayout
 11        android:layout_width="wrap_content"
 12        android:layout_height="wrap_content"
 13        android:layout_gravity="center"
 14        android:layout_marginTop="200dp"
 15        android:orientation="horizontal">
 16        <Button
 17            style="@style/btnStyle"
 18            android:background="@drawable/three" />
 19        <Button
 20            style="@style/btnStyle"
 21            android:background="@drawable/four" />
 22        <Button
 23            style="@style/btnStyle"
 24            android:background="@drawable/box" />
 25        <Button
 26            style="@style/btnStyle"
 27            android:background="@drawable/five" />
 28    </LinearLayout>
 29    <LinearLayout
 30        android:layout_width="wrap_content"
 31        android:layout_height="wrap_content"
 32        android:layout_gravity="center"
 33        android:layout_marginTop="15dp"
 34        android:orientation="horizontal">
 35        <Button
 36            style="@style/btnStyle"
 37            android:background="@drawable/one" />
 38        <Button
 39            style="@style/btnStyle"
 40            android:background="@drawable/two" />
 41        <Button
 42            style="@style/btnStyle"
 43            android:background="@drawable/box" />
 44        <Button
 45            style="@style/btnStyle"
 46            android:background="@drawable/four" />
 47    </LinearLayout>
 48    <LinearLayout
 49        android:layout_width="wrap_content"
 50        android:layout_height="wrap_content"
 51        android:layout_gravity="center"
 52        android:layout_marginTop="15dp"
 53        android:orientation="horizontal">
 54        <Button
 55            style="@style/btnStyle"
 56            android:background="@drawable/five" />
 57        <Button
 58            style="@style/btnStyle"
 59            android:background="@drawable/box" />
 60        <Button
 61            style="@style/btnStyle"
 62            android:background="@drawable/three" />
 63        <Button
 64            style="@style/btnStyle"
 65            android:background="@drawable/two" />
 66    </LinearLayout>
 67</LinearLayout>

二、相对布局 relativelayout

以父容器或者兄弟控件作为参照

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B2"
        android:id="@+id/b2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="260dp"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="b3"
        android:layout_alignBottom="@+id/b2"
        android:layout_marginBottom="100dp"
        android:layout_toRightOf="@+id/b2"
        />

</RelativeLayout>

音乐播放器

 1<?xml version="1.0" encoding="utf-8"?>
 2<RelativeLayout
 3    xmlns:android="http://schemas.android.com/apk/res/android"
 4    android:layout_width="match_parent"
 5    android:layout_height="match_parent"
 6    android:background="@drawable/music_bg">
 7    <Button
 8        android:id="@+id/btn_icon"
 9        android:layout_width="120dp"
 10        android:layout_height="120dp"
 11        android:layout_centerHorizontal="true"
 12        android:layout_marginTop="150dp"
 13        android:background="@drawable/music_icon" />
 14    <Button
 15        android:id="@+id/btn_progress"
 16        android:layout_width="300dp"
 17        android:layout_height="10dp"
 18        android:layout_below="@id/btn_icon"
 19        android:layout_centerHorizontal="true"
 20        android:layout_marginTop="100dp"
 21        android:background="@drawable/progress_icon" />
 22    <RelativeLayout
 23        android:layout_width="match_parent"
 24        android:layout_height="wrap_content"
 25        android:layout_below="@id/btn_progress"
 26        android:layout_marginTop="35dp"
 27        android:gravity="center_horizontal">
 28        <Button
 29            android:id="@+id/btn_left"
 30            android:layout_width="30dp"
 31            android:layout_height="30dp"
 32            android:background="@drawable/left_icon" />
 33        <Button
 34            android:id="@+id/btn_mid"
 35            android:layout_width="30dp"
 36            android:layout_height="30dp"
 37            android:layout_marginLeft="50dp"
 38            android:layout_toRightOf="@id/btn_left"
 39            android:background="@drawable/middle_icon" />
 40        <Button
 41            android:id="@+id/btn_right"
 42            android:layout_width="30dp"
 43            android:layout_height="30dp"
 44            android:layout_marginLeft="50dp"
 45            android:layout_toRightOf="@id/btn_mid"
 46            android:background="@drawable/right_icon" />
 47    </RelativeLayout>
 48</RelativeLayout>

表格布局 TableLayout

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stretchColumns="2" >
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:text="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="2" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="3" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="4" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="鎸夐挳5" />
    </TableRow>
</TableLayout>

计算器实现

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*">
    <TableRow
        android:id="@+id/tr_one"
        style="@style/rowStyle"
        android:layout_marginTop="200dp">
        <Button
            style="@style/btnStyle"
            android:text="C" />
        <Button
            style="@style/btnStyle"
            android:text="←" />
        <Button
            style="@style/btnStyle"
            android:text="+" />
        <Button
            style="@style/btnStyle"
            android:text="-" />
    </TableRow>
    <TableRow
        android:id="@+id/tr_two"
        style="@style/rowStyle">
        <Button
            style="@style/btnStyle"
            android:text="7" />
        <Button
            style="@style/btnStyle"
            android:text="8" />
        <Button
            style="@style/btnStyle"
            android:text="9" />
        <Button
            style="@style/btnStyle"
            android:text="x" />
    </TableRow>
    <TableRow
        android:id="@+id/tr_three"
        style="@style/rowStyle">
        <Button
            style="@style/btnStyle"
            android:text="6" />
        <Button
            style="@style/btnStyle"
            android:text="5" />
        <Button
            style="@style/btnStyle"
            android:text="4" />
        <Button
            style="@style/btnStyle"
            android:text="/" />
    </TableRow>
    <TableRow
        android:id="@+id/tr_four"
        style="@style/rowStyle">
        <Button
            style="@style/btnStyle"
            android:text="1" />
        <Button
            style="@style/btnStyle"
            android:text="2" />
        <Button
            style="@style/btnStyle"
            android:text="3" />
        <Button
            style="@style/btnStyle"
            android:text="." />
    </TableRow>
    <TableRow
        android:id="@+id/tr_five"
        style="@style/rowStyle">
        <Button
            style="@style/btnStyle"
            android:layout_span="2"
            android:text="0" />
        <Button
            style="@style/btnStyle"
            android:layout_span="2"
            android:text="=" />
    </TableRow>
</TableLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TableLayout
        android:id="@+id/tablelayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">
        <TableRow>
            <Button
                android:id="@+id/bt_clear"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="C"/>
            <Button
                android:id="@+id/bt_delete"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="Del" />
            <Button
                android:id="@+id/bt_percent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="%"/>
            <Button
                android:id="@+id/bt_div"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="÷"/>
        </TableRow>

        <TableRow>
            <Button
                android:id="@+id/bt_num7"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="7"/>
            <Button
                android:id="@+id/bt_num8"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="8"/>
            <Button
                android:id="@+id/bt_num9"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="9"/>
            <Button
                android:id="@+id/bt_mult"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="×"/>
        </TableRow>

        <TableRow>
            <Button
                android:id="@+id/bt_num4"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="4"/>
            <Button
                android:id="@+id/bt_num5"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="5"/>
            <Button
                android:id="@+id/bt_num6"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="6"/>
            <Button
                android:id="@+id/bt_minus"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="－"/>
        </TableRow>
        <TableRow>
            <Button
                android:id="@+id/bt_num1"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="1"/>
            <Button
                android:id="@+id/bt_num2"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="2"/>
            <Button
                android:id="@+id/bt_num3"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="3"/>
            <Button
                android:id="@+id/bt_plus"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="＋"/>
        </TableRow>
        <TableRow>
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="("/>
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text=")"/>
            <Button
                android:id="@+id/bt_num0"
                android:layout_width="0dp"
                android:layout_weight="2"
                android:layout_height="wrap_content"
                android:text="0"/>
            <Button
                android:id="@+id/bt_dot"
                android:layout_width="0dp"
                android:layout_weight="2"
                android:layout_height="wrap_content"
                android:text="·"/>
            <Button
                android:id="@+id/bt_equal"
                android:layout_width="0dp"
                android:layout_weight="2"
                android:layout_height="wrap_content"
                android:text="＝"/>
        </TableRow>
    </TableLayout>
</RelativeLayout>

帧布局FrameLayout