Android开发学习二：用户界面UI开发

《Android开发实战 从学习到产品》李瑞琪编著 学习笔记。

用户界面（GUI Graphics User Interface）
Android中的UI组件都继承自android.view.View类，所有的UI组件都位于android.view包和android.widge包中，主要分View（视图：基本控件）和ViewGroup（容器：布局管理器）。

布局管理器？种：Android开发者指南

1. LinearLayout：线性布局管理器；
2. TableLayout：表格布局管理器；
3. RelativeLayout：相对布局管理器；
4. FrameLayout：帧布局管理器，为容器内控件创建一块空白区域（帧），一帧一个控件，后面添加的控件覆盖在前面的控件上；
5. AbsoluteLayout：绝对布局管理器；
6. GridLayout：网格布局管理器。
7. ConstraintLayout：约束布局管理器，从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout。

线性布局：

线性布局.xml文件代码（具体属性见注释）：

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

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="这是一个LinearLayout（线性布局）窗口！" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="这是一个LinearLayout（线性布局）窗口！" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="这是一个LinearLayout（线性布局）窗口！" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="这是一个LinearLayout（线性布局）窗口！" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="单击跳转到相对布局" />

</LinearLayout>

---

相对布局：

相对布局.xml文件代码（具体属性见注释）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relative"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RelativeLayoutActivity">  <!--设置布局id为relative -->

    <TextView
        android:id="@+id/one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是RelativeLayout（相对布局）界面！！！"/>
    <TextView
        android:id="@+id/txInfo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="请输入短信内容"
        android:textSize="30sp"
        android:layout_below="@+id/one"/> <!--android:layout_below设置位置在id为one的控件下面-->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txInfo"
        android:background="#00eef0"
        android:id="@+id/txtSMS"
        android:minHeight="100dp" />  <!--android:background设置背景颜色-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnClearSMS"
        android:layout_below="@+id/txtSMS"
        android:layout_alignParentRight="true"
        android:layout_marginRight="110dp"
        android:text="清除"/><!--android:layout_marginRight距离右边80dp-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnSendSMS"
        android:layout_alignBaseline="@+id/btnClearSMS"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:text="确认"/><!--android:layout_alignBaseline与后面id的控件同水平线-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Send"
        android:layout_alignBaseline="@id/btnClearSMS"
        android:text=""
        android:textSize="20dp"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="15dp"/>

    <Button
        android:id="@+id/toFramePage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="单击跳转到FrameLayout（帧布局）界面"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"/>


</RelativeLayout>

---

帧布局：

帧布局.xml文件代码（具体属性见注释）：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FrameLayoutActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="350dp"
        android:gravity="center"
        android:text="这是FrameLayout布局界面！" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="280dp"
        android:height="280dp"
        android:background="#eeff00"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="180dp"
        android:height="180dp"
        android:background="#2233bb"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="80dp"
        android:height="80dp"
        android:background="#ff2222"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="单击跳转到GridLayout（绝对布局）界面"
        android:layout_marginTop="670dp"
        android:id="@+id/toGridPage"/>

</FrameLayout>

---

网格布局：

网格布局.xml文件代码（具体属性见注释）

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="6"
    android:columnCount="4"
    android:orientation="horizontal"
    tools:context=".GridLayoutActivity"><!--网格 rowCount 6行 columnCount 4列-->

    <TextView
        android:layout_columnSpan="4"
        android:text="0(GridLayout网格布局)"
        android:textSize="35dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"/>
    <Button
        android:text="回退"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"/>
    <Button
        android:text="清空"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"/>
    <Button
        android:text="+"/>
    <Button
        android:text="1"/>
    <Button
        android:text="2"/>
    <Button
        android:text="3"/>
    <Button
        android:text="-"/>
    <Button
        android:text="4"/>
    <Button
        android:text="5"/>
    <Button
        android:text="6"/>
    <Button
        android:text="*"/>
    <Button
        android:text="7"/>
    <Button
        android:text="8"/>
    <Button
        android:text="9"/>
    <Button
        android:text="/"/>
    <Button
        android:text="."/>
    <Button
        android:text="0"/>
    <Button
        android:text="="/>


</GridLayout>