[Android] 布局基础知识点

线性布局-LinearLayout

---

1. 线性布局不会换行，当组件一个挨着一个排列到头之后，剩下的组件将不会被显示出来。

2. 线性布局中最重要的两个属性

android:orientation  设置布局管理器内组件的排列方式

      水平排列：horizontal                垂直排列：vertical

                android:gravity          设置布局管理器内组件的对齐方式

                     top|bottom|left|right|center_vertical|center_horizontal|center|…

3. Android:gravity属性中的多个属性值之间可以用竖线隔开

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center|left">

    <Button 
        android:layout_width="80dp"
        android:layout_height="wrap_content"/>
    <Button 
        android:layout_width="80dp"
        android:layout_height="wrap_content"/>
    <Button 
        android:layout_width="80dp"
        android:layout_height="wrap_content"/>
    <Button 
        android:layout_width="80dp"
        android:layout_height="wrap_content"/>
    <Button 
        android:layout_width="80dp"
        android:layout_height="wrap_content"/>
    <Button 
        android:layout_width="80dp"
        android:layout_height="wrap_content"/>
    

</LinearLayout>

 表格布局-TableLayout

---

1. TableLayout 继承了LinearLayout
2. TableLayout并不需要明确地声明包含多少行、多少列，而是通过TableRow、其他组件来控制表格的行数和列数。
3. 表格布局中最重要的三个属性

android:shrinkColumns="0,1,2" - 为了保证表格能适应父容器的宽度，那么这列的所有单元格的宽度可以被收缩

android:stretchColumns="1,2" - 为了保证组件能完全填满表格空余空间，那么这列的所有单元格的宽度可以被拉伸

android:collapseColumns="2" – 这列的所有单元格会被隐藏

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/table_layout_01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="0,1,2" >

        <TableRow>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="0ddddddddddddddddddddddddddddddddd" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1ddddddddddddddddddddddddddddddddd" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2ddddddddddddddddddddddddddddddddd" />
        </TableRow>
    </TableLayout>

    <TableLayout
        android:id="@+id/table_layout_02"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="1" >

        <TableRow>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="0dd" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1dd" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2dd" />
        </TableRow>
    </TableLayout>

    <TableLayout
        android:id="@+id/table_layout_03"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="2" >

        <TableRow>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="0dd" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1dd" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2dd" />
        </TableRow>
    </TableLayout>

</LinearLayout>

帧布局 – FrameLayout

---

帧布局容器为每个加入其中的组件创建一个空白的区域(称为一帧)，所以每个子组件占据一帧，这些帧都会根据gravity属性执行自动对齐。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        android:width="210dp"
        android:height="50dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#dd0000"
        android:width="180dp"
        android:height="50dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#bb0000"
        android:width="150dp"
        android:height="50dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#990000"
        android:width="120dp"
        android:height="50dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#770000"
        android:width="90dp"
        android:height="50dp" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#550000"
        android:width="60dp"
        android:height="50dp" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#330000"
        android:width="30dp"
        android:height="50dp" />


</FrameLayout>

相对布局 – RelativeLayout

---

1. 相对布局容器内的子组件的位置总是相对于兄弟组件、父容器来决定的
2. 两列比较重要的属性

相对与Parent容器

android:layout_ centerVertical="true"        布局容器水平居中

android:layout_centerHorizontal="true"    布局容器垂直居中

ndroid:layout_centerInParent ="true"         布局容器中央居中

android:layout_alignParentLeft="true"       布局容器左边对齐

android:layout_alignParentRight="true"     布局容器右边对齐

android:layout_alignParentTop="true"        布局容器顶部对齐

android:layout_alignParentBottom="true" 布局容器底部对齐

相对于兄弟组件

android:layout_above                                       位于给出ID的上方

android:layout_below                                       位于给出ID的下方

android:layout_toLeftOf                                   位于给出ID的左边

android:layout_toRightOf                                 位于给出ID的右边

android:layout_alignTop                                   与给出ID的上边界对齐

android:layout_alignBottom                            与给出ID的下边界对齐

android:layout_alignLeft                                   与给出ID的左边界对齐

         android:layout_alignRight                                 与给出ID的右边界对齐

<?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" >

    <TextView
        android:id="@+id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Center" />

    <TextView
        android:id="@+id/first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/center"
        android:layout_alignLeft="@id/center"
        android:text="Up" />

    <TextView
        android:id="@+id/second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/center"
        android:layout_alignLeft="@id/center"
        android:text="Down" />

    <TextView
        android:id="@+id/third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/center"
        android:layout_alignTop="@id/center"
        android:text="Left" />

    <TextView
        android:id="@+id/fourth"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/center"
        android:layout_alignTop="@id/center"
        android:text="Right" />

</RelativeLayout>

 

  绝对布局 – AbsoluteLayout

---

1. 开发人员自己通过X坐标、Y坐标来控制组件的位置。布局容器不再管理子组件的位置、大小。使用绝对布局很难兼顾不同屏幕大小、分辨率的问题。
2. 两个重要的属性

layout_x: 指定该子组件的X坐标

layout_y:指定子组件的Y坐标

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:layout_x="20dp"
        android:layout_y="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="用户名:"/>
    <EditText 
        android:layout_x="80dp"
        android:layout_y="15dp"
        android:layout_width="wrap_content"
        android:width="200dp"
        android:layout_height="wrap_content"/>

</AbsoluteLayout>