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>