Android-布局

思维导图：

二、什么是布局？

 布局就是把界面中的空间按照某种规律摆放在指定的位置

三、布局的目的

主要是为了解决应用程序在不同手机中的显示问题，同时增加美感。

四、Android实现布局两种方式（布局支持嵌套）

  1、java代码 布局文件对应的Java类都是ViewGroup类的子类

  2、xml配置文件  所有的布局文件都是放在res/layout文件夹中

五、布局的一些基本属性

            五大布局:

①LinearLayout（线性布局）

         线性布局会将其中的控价一个接一个排列

        常用属性：   1、设置排列方式   

                                  1.1  xml属性   android:orientation      [ horizontal 水平排列  vertical 垂直排列 ]

                                  1.2  方法         setOrientation(int) 

2、设置组件的对其方式

                                 2.1 XML属性   android:gravity

   2.2  方法            setGravity(int)        

              android gravity和layout_gravity区别： 

1. gravity属性：是对该view 内容的位置的设置。
   比如一个button 上面的text. 你可以设置该text 在view的靠左，靠右等位置．
2. layout_gravity属性：是用来设置该view相对与父view 的位置。
   比如一个button 在Linearlayout里，你可以通过设置该属性把该button放在父布局Linearlayout靠左靠右等位置。

        特殊情况：

              当：android：orientation=“vertical”时，android：layout_gravity只有水平方向的设置才起作用，垂直方向的设置不起作用。即left,right,center,center_horizontal是生效的

              当：android：orientation=“horizontal”时，android：layout_gravity只有垂直方向的设置才起作用，水平方向的设置不起作用。即top，bottom，center_vertical是生效的

实例：

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="左上按钮"

            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right"
            >
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="右上按钮"
                />

        </LinearLayout>

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="420dp"
        android:gravity="center"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="中间按钮"
            android:layout_gravity="center"
            />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="左下按钮"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right"
            >
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="右下按钮"
                />

        </LinearLayout>

    </LinearLayout>





</LinearLayout>

效果：

②FrameLayout（帧布局）

  类似于PS中图层的概念，为每个加入其中的组件创建单独的帧，看上去是组件叠加在一起。后面的会覆盖前面的组件。

实例:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="280dp"
        android:layout_height="280dp"
        android:background="#ff0000"
        android:layout_gravity="center"
        />
    <TextView
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:background="#00ff00"
        android:layout_gravity="center"
        />
    <TextView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="#0000ff"
    android:layout_gravity="center"
    />
    <TextView
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:background="#ffee00"
        android:layout_gravity="center"
        />
    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="#00ffe1"
        android:layout_gravity="center"
        />


</FrameLayout>

效果：

③TableLayout（表格布局）

      1、表格布局可将视图按行、列进行排列

      2、直接向TableLayout中添加控件，则这个控件占一行

      3、一个表格布局由一个<TableLayout>标签和若干<TableRow>组成

      4、常用属性

            4.1某列被收缩，以保证表格能完全填充父容器的宽度 

                 4.1.1  XML中     android:shrinkColumns 设置第几列为收缩

                 4.1.2  Java中     setColumnShrinkable(int,boolean)

    4.2某列被拉伸，以保证表格能完全填充父容器的宽度

                 4.2.1  XML中     android:stretchColumns

                 4.2.2 Java中,    setColumnStretchable(int,boolean)

 

            4.3某列被隐藏

                 4.3.1  XML中     android:collapseColumns

                 4.3.2  Java中     setColumnCollapsed(int boolean)

            4.4 表格跨列  android:layout_span="3"

实例：

<?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:stretchColumns="1,2"
        android:shrinkColumns="0"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="这是第一个lay的第一行"
            android:background="#ff0000"
            />

      <TableRow>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2行1列"
                android:background="#ff0000"

                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2行2列"
                android:background="#ff00ff"

                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2行3列"
                android:background="#00ff04"

                />
      </TableRow>
        </TableLayout>

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:collapseColumns="1">
    <TableRow>
          <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个layout1行1列"
        android:background="#ffb700"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二个layout1行2列"

            android:background="#00ffcc"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二个layout1行3列"
            android:background="#a600ff"
            />
    </TableRow>
    <TableRow>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2行1列"
        android:background="#ffb700"
        />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2行2列"
            android:background="#ff008c"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2行3列"
            android:background="#a600ff"
            />
    </TableRow>


</TableLayout>

</LinearLayout>

效果：

④AbsoluteLayout（绝对布局）不推荐使用

  1、自己制定控件位置

  2、每个控件都有layout_x和layout_y属性

  3、会随着屏幕大小变化，其位置也会变化

实例：

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="#ff0000"
    android:gravity="center"
    android:layout_x="100dp"
    android:layout_y="100dp"
    android:textColor="#ffffff"
    android:text="Red" />

   <TextView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="#00ff00"
    android:gravity="center"
    android:layout_x="250dp"
    android:layout_y="250dp"
    android:textColor="#ffffff"
    android:text="Red" />

</AbsoluteLayout>

效果：

⑤RelativeLayout（相对布局）

1、控件位置总是相对父容器或者兄弟控件

2、如果A控件位置是相对B控件的，那B控件要先定义

3、每个控件使用LayoutParams规定的参数来定义相对位置

4.三种属性

      4.1属性值是ture或false

• android:layout_centerHrizontal 水平居中
• android:layout_centerVertical 垂直居中
• android:layout_centerInparent 相对于父元素完全居中。
• android:layout_alignParentBottom 位于父元素的下边缘
• android:layout_alignParentTop 位于父元素的上边缘
• android:layout_alignParentLeft 位于父元素的左边缘
• android:layout_alignParentRight 位于父元素的右边缘

      4.2属性值是”@id/*“

• android:layout_below 在某元素的下方
• android:layout_above 在某元素的上方
• andorid:layout_toRightOf 在某元素的右方
• android:layout_toLeftOf 在某元素的左方
• android:layout_alignBottom 和某元素下方对齐
• android:layout_alignTop 和某元素上方对齐
• android:layout_alignRight 和某元素右方对齐
• android:layout_alignLeft 和某元素左方对齐

      4.3属性值是数值

• android:layout_marginLeft 离某元素左边缘的距离
• android:layout_marginRight 离某元素右边缘的距离
• android:layout_marginTop 离某元素上边缘的距离
• android:layout_marginBottom 离某元素下边缘的距离

实例一：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/bt_layout1"
        android:text="按钮一"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮二"
        android:id="@+id/bt_layout2"
        android:layout_below="@id/bt_layout1"
        android:layout_toRightOf="@id/bt_layout1"
         />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮三"
        android:layout_above="@id/bt_layout2"
        android:layout_toRightOf="@id/bt_layout2"
   />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/bt_layout2"
        android:text="按钮四"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/bt_layout2"
        android:layout_toRightOf="@id/bt_layout2"
        android:text="按钮五"/>



</RelativeLayout>

效果：

实例二：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#ff0000"
        android:gravity="center"
        android:textColor="#ffffff"
        android:text="Red" />
    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#FFA600"
        android:gravity="center"
        android:textColor="#ffffff"
        android:layout_centerHorizontal="true"
        android:text="Orange"/>
    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#FFFF00"
        android:gravity="center"
        android:layout_alignParentRight="true"
        android:textColor="#ffffff"
        android:text="Yellow" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#0000ff"
        android:gravity="center"
        android:textColor="#ffffff"
        android:layout_centerInParent="true"
        android:id="@+id/tv_main_blue"
        android:layout_margin="10dp"
        android:text="Blue" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#00ff00"
        android:gravity="center"
        android:textColor="#ffffff"
        android:layout_toLeftOf="@id/tv_main_blue"
        android:layout_alignBottom="@id/tv_main_blue"
        android:text="Green" />
    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#4A0084"
        android:gravity="center"
        android:textColor="#ffffff"
        android:layout_toRightOf="@id/tv_main_blue"
        android:layout_centerVertical="true"
        android:text="Indigo" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#EF82EF"
        android:gravity="center"
        android:textColor="#ffffff"
        android:layout_alignParentBottom="true"
        android:text="Violet" />

</RelativeLayout>

效果：

        Android4.0后的新布局

⑥GridLayout

1、GridLayout使用虚线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列

2、与HTML中的table非常相似

3、4.0版本以上可直接使用 

4、2.x版本需要添加一个支持包

5、常用属性

5.1 指定行数

5.1.1 XML属性 rowCount

5.1.2  方法 layout.setRowCount(int row)

5.2 指定列数

5.2.1 XML属性 columnCount

5.2.2 方法  layout.setColumnCount(int column)

5.3设置控件跨行

5.3.1 XML属性 android:layout_rowSpan     android:layout_gravity

5.3.2 方法   设置控件的跨行跨列需使用GridLayout.Spec

                                     GridLayout.Spec rowspec=GridLayout.spec(4);      设置控件在第几行

                                     GridLayout.Spec rowspec=GridLayout.spec(1,4);  设置控件在第几行，并跨几行

5.4设置控件跨列    

5.4.1XM属性    android：layout_columnSpan

5.4.2 方法      

                                     GridLayout.Spec  columnSpec=GridLayout.spec(4);      设置控件在第几列

                                     GridLayout.Spec columnSpec=GridLayout.spec(1,4);  设置控件在第几列，并跨几列

实例：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="6"
    android:columnCount="4"
    >
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="/"
        />    <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="4"
    />    <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="5"
    />    <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="6"
    />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="x"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="-"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="."
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_rowSpan="2"
        android:layout_gravity="fill_vertical"
        android:text="+"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="3"
        android:layout_gravity="fill_horizontal"
        android:text="="
        />

</GridLayout>

效果：

        

⑦RTL

1、Android4.2之后才能用，一般在阿拉伯语等环境中，中国用户很少使用 

2、AndroidManifest.XML中把application标签的android：supportsRtl属性值  设置为true

3、相应的视图标签把android：layoutDirection属性值设置为rtl

实例:

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

    android:layoutDirection="rtl"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="|一号选手"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="|二号选手"/>


</LinearLayout>

效果：

六、布局重用

  1、可以在布局文件中使用<include>标签重用布局 

  2、语法<include android:id="@+id/cell1"> layout="@layout/frame_layout"