学习总结--第四周(布局总结)

Android布局总结

线性布局

线性布局应该是最简单的一个布局了，所有的子元素都是按照垂直或水平的顺序排列在界面上（默认为水平排列，线性布局只适用于单行或者单列，若要写第二条需要再次声明一个）。如下图：

主要用到的属性：
orietation：方向
gravity：对齐方式

上图代码：

<?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"
    android:padding="10dp"

    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="200dp"
        android:layout_height="40dp"
        android:background="#ff0000"
        android:gravity="center"
        android:text="控件1"
        />

    <TextView
        android:layout_width="200dp"
        android:layout_height="40dp"
        android:background="#ff0000"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="控件2"/>

    <LinearLayout
        android:layout_marginTop="50dp"
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:background="#00BFFF"
        android:gravity="center_vertical"
        >

        <Button
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:layout_marginLeft="15dp"
            android:gravity="center"
            android:text="控件3"/>

        <Button
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:layout_marginLeft="15dp"
            android:gravity="center"
            android:text="控件4"/>

        <Button
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:layout_marginLeft="15dp"
            android:gravity="center"
            android:text="控件5"/>
    </LinearLayout>

    <LinearLayout
        android:layout_marginTop="50dp"
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:background="#00BFFF"
        android:orientation="vertical"
        android:gravity="center_vertical"
        >

        <Button
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:layout_marginLeft="15dp"
            android:gravity="center"
            android:text="控件6"/>

        <Button
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:layout_marginLeft="15dp"
            android:gravity="center"
            android:text="控件7"/>

        <Button
            android:layout_width="80dp"
            android:layout_height="40dp"

            android:layout_marginLeft="15dp"
            android:gravity="center"
            android:text="控件8"/>
    </LinearLayout>
</LinearLayout>

帧式布局

这就是一个层叠式布局，从最底层开始控件一层一层的往上叠加（后来居上）

上述代码：

<?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:gravity="center"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tvBottom"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:background="#ff0000"
            android:text="最底层"
            />

        <TextView
            android:id="@+id/tvMiddle"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:background="#0000ff"
            android:text="中间层"
            />

        <TextView
            android:id="@+id/tvTop"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:background="#00ff00"
            android:text="顶层"
             />
    </FrameLayout>
</LinearLayout>

相对布局

字面意思，拿一个控件当做参照物确定自己的位置，写了的控件越多参照物越多位置越好确定。第一个被拿来当参照物的控件需要自己设置（参照物以id属性设置自己“身份”）。

相关属性：
相对于父容器居中或对齐
layout_centerInParent 在父容器居中
layout_centerHorizontal 在父容器水平居中
layout_centerVertical 在父容器垂直居中
layout_alignParentLeft 与父容器左对齐
layout_alignParentRight 与父容器右对齐
layout_alignParentTop 与父容器顶对齐
layout_alignParentBottom 与父容器底对齐
相对于其它控件的位置
layout_toLeftOf 在……左边
layout_toRightOf 在……右边
layout_above 在……上面
layout_below 在……下面
相对于其它控件对齐
layout_alignLeft 与……左对齐
layout_alignRight 与……右对齐
layout_alignTop 与……顶对齐
layout_alignBottom 与……底对齐
layout_alignBaseLine 与……基线对齐

上述代码：

<?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=".MainActivity">

    <Button
        android:id="@+id/btnOne"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="1"/>

    <Button
        android:id="@+id/btnTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/btnOne"
        android:layout_above="@id/btnOne"
        android:text="2"/>

    <Button
        android:id="@+id/btnThree"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/btnOne"
        android:layout_below="@id/btnOne"
        android:text="3"/>

    <Button
        android:id="@+id/btnFour"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btnThree"
        android:layout_alignLeft="@id/btnThree"
        android:layout_marginTop="15dp"
        android:text="4"/>

    <Button
        android:id="@+id/btnUpperLeftCorner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="左上角"/>

    <Button
        android:id="@+id/btnLowerRightCorner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="右下角"/>

</RelativeLayout>

网格布局

就是将布局划分为类似Excel一样有一定行数和列数并且排列整齐的单元格(单元格指代控件)，然后通过跨行和跨列设置单个单元格大小

相关属性：
布局行数和列数
rowCount：行数
columnCount：列数
单元格操作
layout_row：子控件在布局的行数
layout_column：子控件在布局的列数
layout_rowSpan：跨行数
layout_columnSpan：跨列数

这个没什么说的直接上代码

<?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:padding="10dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:columnCount="5"
        android:rowCount="7">

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="0"
            android:text="MC" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="1"
            android:text="MR" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="2"
            android:text="MS" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="3"
            android:text="M+" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="4"
            android:text="M-" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="0"
            android:text="←" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="1"
            android:text="CE" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="2"
            android:text="C" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="3"
            android:text="±" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="4"
            android:text="√" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="0"
            android:text="7" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="1"
            android:text="8" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="2"
            android:text="9" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="3"
            android:text="/" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="4"
            android:text="%" />


        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="0"
            android:text="4" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="1"
            android:text="5" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="2"
            android:text="6" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="3"
            android:text="*" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="4"
            android:text="1/x" />

        <Button
            android:layout_width="65dp"
            android:layout_row="5"
            android:layout_column="0"
            android:text="1" />

        <Button
            android:layout_width="65dp"
            android:layout_row="5"
            android:layout_column="1"
            android:text="2" />

        <Button
            android:layout_width="65dp"
            android:layout_row="5"
            android:layout_column="2"
            android:text="3" />

        <Button
            android:layout_width="65dp"
            android:layout_row="5"
            android:layout_column="3"
            android:text="-" />

        <Button
            android:layout_width="65dp"
            android:layout_height="95dp"
            android:layout_row="5"
            android:layout_rowSpan="2"
            android:layout_column="4"
            android:text="=" />

        <Button
            android:layout_width="130dp"
            android:layout_row="6"
            android:layout_column="0"
            android:layout_columnSpan="2"
            android:text="0" />

        <Button
            android:layout_width="65dp"
            android:layout_row="6"
            android:layout_column="2"
            android:text="." />

        <Button
            android:layout_width="65dp"
            android:layout_row="6"
            android:layout_column="3"
            android:text="+" />
    </GridLayout>

</LinearLayout>

布局的相关知识很简单，理解起来也比较容易，麻烦一点的就是记各个布局特定的一些元素。不过呢布局这块也容易在一些细节上失误，这个或许跟人有关，浮躁的心情更容易犯错。以上的布局我并没有写绝对布局，绝对布局用在不同的设备上界面一个比一个奇葩，吃过绝对布局的亏绝对不再用它了…