Android學習之登陸界面設計（二）基本界面設計

前提

Android學習之登陸界面設計（一）前後期準備以及相關配置

還是那句話，小白路過點個贊，大佬經過來句tui~

繪圖樣式 - drawable

在這裏，我們將準備爲接下來要使用的各種控件（包括按鈕、文本框、文本）定義一個個圖形樣式。那麼就不可避免的需要爲他們單獨繪製一些樣式出來（直接導入圖片顯得不大友好）。

以下文件均在res的drawable下創建。

bg_login_btn_submit.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false">
        <shape>
            <corners android:radius="26dp"/>
            <solid android:color="@color/color_Btn_Normal_DarkBlue"/>
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape>
            <corners android:radius="26dp"/>
            <solid android:color="@color/color_Btn_Active_BabyBlue"/>
        </shape>
    </item>

</selector>

會得到這個樣式：

bg_login_panel_slide.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#E8E8E8"/>
    <corners android:radius="30dp"/>
</shape>

bg_login_textfield_scanner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#1AE1E1E1"/>
    <corners android:radius="30dp"/>
</shape>

會得到這樣的樣式：

設計activity_login

設計思路

直接上張圖，這樣直觀點。

首先是一個總佈局，這裏採用了FrameLayout的佈局方式，該佈局下有三個主要部分，分別是背景圖片、登陸主面板、註冊主面板。

這裏的panel_register_2註冊主面板在後邊的activity_register部分會講到。這幅圖只做一個概括，只需要釐清它的結構即可。名字什麼的大可不必記，因爲等會說的那些名字都不一樣。

回到正題，主面板採用的是自上而下排布的LinearLayout佈局方式，登陸主面板自上而下有着幾個區域，一個是頂部填充的View，一個是用於顯示Logo的區域，一個是用於輸入信息的區域，接着是兩個按鈕和一個底部填充的區域。

頂部填充區域

這些填充的東西有什麼用？

當然是爲了在顯示一些面積比較大的東西（比如輸入法）的時候，你又想看到其他內容（如輸入的文本框），就得壓縮這片空間，騰出來，把整體佈局往上移動，這樣或許就可能在你輸入的時候能看得到輸入的內容。

但這並不是唯一的可能，如果你的內容偏上，要顯示的東西佔用的顯示屏幕空間過多，但你仍然還想看到輸入的內容，就可以試着用其他方法（並不一定直接移除控件），比如用菜單的滑動，這些都是後話，先不要想那麼多，知道這個View是用來填充的就對了。

Logo區域

接着是Logo，沒什麼好說的，我是隨便引用了一個啥的圖片，忘了。

用戶輸入區域

然後是輸入區域，這個區域採用的也是自上而下的LinearLayout佈局方式，第一個是輸入學生姓名的輸入子區域，第二個是輸入學生學號的輸入子區域，第三個……是勾選自動登陸的和忘記密碼的區域，這個功能在另外的工程上實現了，在這個工程裏因爲用不到（可能），所以我把它遺棄了，但因爲我打開的這個工程有學習的初稿，所以這部分沒刪掉，知道就好了，不用理會這個自動登陸複選框的區域。

輸入學生姓名子區域

一個圖標，一個可輸入文本框，限制可輸入文本框，不能輸入數字、符號等，限制長度，樣式設置爲之前設計的風格灰白，參見代碼。

輸入學生學號子區域

一個圖標，一個可輸入文本框，限制只能輸入數字、限制位數，樣式設置灰白，詳見代碼。

登陸按鈕和註冊按鈕

樣式調用下之前寫的藍色即可，具體參見代碼。

設計代碼

在複製粘貼這段代碼之前，請確認你已經有相關的資源圖片了。

記得把那些中文去掉，這中文只是爲了方便能讀懂某行代碼，否則報錯就GG

<!--這是全部的、包括頭部的自動生成的代碼-->

<?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:id="@+id/login_All_Main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LoginActivity">

	<!--壁紙-->
	<!--layout_width、height:這些自行百度吧-->
	<!--contentDescription:描述圖片，正常情況下不會顯示-->
	<!--scaletype:自動修正，就是背景圖片全屏顯示的意思-->
	<!--visibulity:顯示還是不顯示，後續不再說-->
	<!--srcCompat:如果用設計模式創建圖片讓你選圖片的時候就生成的，除了設計模式，還有純代碼模式、代碼設計模式-->
    <ImageView
        android:id="@+id/login_Background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/login_bg_describe"
        android:scaleType="fitXY"
        android:visibility="visible"
        app:srcCompat="@mipmap/bg_login" />

	<!--用戶登陸的主面板，包括那三個區域-->
    <LinearLayout
        android:id="@+id/login_Login_All_Main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:visibility="visible">

		<!--頂部填充，具體作用剛剛說了-->
		<!--寬度高度覺得合適就行-->
        <View
            android:id="@+id/login_Login_View_Fill_Top"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginTop="10dp" />

		<!--Logo-->
        <ImageView
            android:id="@+id/login_Login_Img_Logo"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:contentDescription="@string/login_img_title"
            app:srcCompat="@android:drawable/ic_menu_myplaces" />

		<!--用戶輸入區域-->
        <LinearLayout
            android:id="@+id/login_Login_Layout_Scanner"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:orientation="vertical">

            <!--用戶輸入子區域：姓名-->
            <!--focusable:是否焦點（否，減少鍵盤自動彈出的可能）-->
            <LinearLayout
                android:id="@+id/login_Login_Layout_Student_Name"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="30dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="5dp"
                android:background="@drawable/bg_login_textfield_scanner"
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:orientation="horizontal">

                <!--圖標-->
                <ImageView
                    android:id="@+id/login_Login_Ico_Student_Name"
                    android:layout_width="30dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:contentDescription="@string/login_ic_describe_user_name"
                    app:srcCompat="@mipmap/ic_person_blue" />

                <!--姓名輸入框-->
                <!--textCursorDrawable:設置光標顏色，null默認跟隨字體顏色-->
                <!--theme:之前已經設計好的風格，如果直接通過設計模式引入，會失敗，因爲它少了個android:-->
                <EditText
                    android:id="@+id/login_Login_Input_Student_Name"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:autofillHints=""
                    android:ems="10"
                    android:hint="@string/login_hint_user_name"
                    android:inputType="textPersonName"
                    android:maxLength="6"
                    android:singleLine="true"
                    android:textCursorDrawable="@null"
                    android:theme="@style/style_TextView_UnderLine_None" />
            </LinearLayout>

            <!--用戶輸入區域：學號-->
            <LinearLayout
                android:id="@+id/login_Login_Layout_Student_ID"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="5dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp"
                android:background="@drawable/bg_login_textfield_scanner"
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/login_Login_Ico_Student_ID"
                    android:layout_width="30dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:contentDescription="@string/login_ic_describe_user_pass"
                    app:srcCompat="@mipmap/ic_lock_blue" />

                <EditText
                    android:id="@+id/login_Login_Input_Student_ID"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:autofillHints=""
                    android:digits="@string/login_limit_scanner"
                    android:ems="10"
                    android:hint="@string/login_hint_user_pass"
                    android:inputType="number"
                    android:maxLength="20"
                    android:singleLine="true"
                    android:textCursorDrawable="@null"
                    android:theme="@style/style_TextView_UnderLine_None" />
            </LinearLayout>

        </LinearLayout>

        <!--按鈕-->
        <Button
            android:id="@+id/login_Login_Btn_Login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="10dp"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/bg_login_btn_submit"
            android:minHeight="48dp"
            android:text="@string/login_btn_text_login"
            android:textColor="#B3FFFFFF"
            android:textStyle="bold" />

        <Button
            android:id="@+id/login_Login_Btn_Register"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/bg_login_btn_submit"
            android:minWidth="88dp"
            android:minHeight="48dp"
            android:text="@string/login_btn_text_register"
            android:textColor="#B3FFFFFF"
            android:textStyle="bold"
            android:visibility="visible" />

        <!--底部填充-->
        <View
            android:id="@+id/login_Login_View_Fill_Bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

<!--    <include layout="@layout/panel_register_2" />-->


</FrameLayout>

完成以上代碼，包括界面（一）的設計之後，得到效果應該是這樣的。

設計activity_register

如果你細品上面的設計，你會發現，Android界面它無非就是一個佈局嵌套一個佈局或者控件而已，沒有什麼大不了的。

只要你想象力夠豐富，知道怎麼讓這個控件和頂部或者父類保持一定距離(marginTop等)，就能做出很好看的界面效果。

另外，控件有個參數是weight，這個之前沒說，現在就順便說說，它代表着這個控件的權重。

我第一次寫這（學）這個Android，發現在不同手機老有不同的樣子，就是控件大小很隨機，看起來跟自己設計的差不多，但有時候明顯又偏大或者偏小，直到後來我把weight去掉後才變得正常。

當然也不是說weight它不好，只是有時候遇到一個問題，就需要崩咔啦咔~~愛咋咋地，不吹水了，回到正題。

設計思路

第一步肯定是先弄個長寬爲屏幕大小的，也就是全屏的LinearLayout佈局。

android:layout_width="match_parent"
android:layout_height="match_parent"

在這基礎上，肯定是一個頂部填充，

<View
        android:id="@+id/login_Register_View_Fill_Top"
        android:layout_width="match_parent"
        android:layout_height="160dp" />

接着又是一個填充，我們姑且叫它中部填充吧。作用就是：你需要做個自下而上的滑動註冊輸入面板，但你不可能一開始就讓別人看到，所以來個填充，把註冊面板頂出屏幕，等到點擊註冊按鈕的時候，再設置這個填充gone，這是不是就很完美？但遺憾的是，又多用了一個控件，我們在這先不理它。因爲官方推薦的控件數量是80個。

有人可能會問，用動畫不就好了，用註冊輸入面板的invisiable不就可以隱藏了？

很簡單，兩個都用，是爲了防止某些bug可能導致面板沒點註冊按鈕就已經出現，所以這三個寫法都要。

接着是註冊輸入面板裏面，採用的風格是那個白白的圓角風格。

這個面板也是用LinearLayout，第一個插入標題TextView，第二個是ScrollView滑動菜單。

在這個可滑動菜單裏面，添加那些條條框框和一個按鈕即可。

設計代碼

先確認創建了一個佈局文件activity_login.xml

注意：之前的strings.xml差了一個東西，這可能會導致你接下來的代碼報錯。
添加strings.xml如下：

<string name="login_btn_register_submit">提交</string>

下面開始進入正題：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/login_Register_All_Main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:visibility="visible">

    <View
        android:id="@+id/login_Register_View_Fill_Top"
        android:layout_width="match_parent"
        android:layout_height="160dp" />

    <View
        android:id="@+id/login_Register_View_Fill_Mid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone" />

    <LinearLayout
        android:id="@+id/login_Register_Layout_Panel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="@drawable/bg_login_panel_slide"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:orientation="vertical"
        android:visibility="gone">

        <TextView
            android:id="@+id/login_Register_Text_Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="@string/login_btn_text_register"
            android:textAlignment="center"
            android:textSize="30sp" />

        <ScrollView
            android:id="@+id/login_Register_Scroll_Panel"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:focusable="false"
            android:focusableInTouchMode="false">

            <LinearLayout
                android:id="@+id/login_Register_Layout_Scanner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:orientation="vertical">

                <LinearLayout
                    android:id="@+id/login_Register_Layout_Student_Name"
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginRight="30dp"
                    android:layout_marginBottom="5dp"
                    android:focusable="false"
                    android:focusableInTouchMode="false"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/login_Register_Text_Student_Name"
                        android:layout_width="80dp"
                        android:layout_height="wrap_content"
                        android:text="@string/login_text_register_student_name"
                        android:textAlignment="textEnd"
                        android:textSize="16sp" />

                    <EditText
                        android:id="@+id/login_Register_Input_Student_Name"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:autofillHints=""
                        android:ems="10"
                        android:hint="@string/login_hint_register_student_name"
                        android:inputType="textPersonName"
                        android:maxLength="8"
                        android:textAlignment="center"
                        android:textSize="15sp"
                        android:theme="@style/style_TextView_UnderLine_Transparency_White" />

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/login_Register_Layout_Student_ID"
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginRight="30dp"
                    android:layout_marginBottom="5dp"
                    android:focusable="false"
                    android:focusableInTouchMode="false"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/login_Register_Text_Student_ID"
                        android:layout_width="80dp"
                        android:layout_height="wrap_content"
                        android:text="@string/login_text_register_student_id"
                        android:textAlignment="textEnd"
                        android:textSize="16sp" />

                    <EditText
                        android:id="@+id/login_Register_Input_Student_ID"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:autofillHints=""
                        android:ems="10"
                        android:hint="@string/login_hint_register_student_id"
                        android:inputType="number"
                        android:maxLength="20"
                        android:textAlignment="center"
                        android:textSize="15sp"
                        android:theme="@style/style_TextView_UnderLine_Transparency_White" />

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/login_Register_Layout_Faculty"
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginRight="30dp"
                    android:layout_marginBottom="5dp"
                    android:focusable="false"
                    android:focusableInTouchMode="false"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/login_Register_Text_Faculty"
                        android:layout_width="80dp"
                        android:layout_height="wrap_content"
                        android:text="@string/login_text_register_faculty"
                        android:textAlignment="textEnd"
                        android:textSize="16sp" />

                    <View
                        android:id="@+id/login_Register_View_Fill_Faculty"
                        android:layout_width="45dp"
                        android:layout_height="wrap_content" />

                    <Spinner
                        android:id="@+id/login_Register_Spinner_Faculty"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:entries="@array/faculty"
                        android:textAlignment="center" />

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/login_Register_Layout_Grade"
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginRight="30dp"
                    android:layout_marginBottom="5dp"
                    android:focusable="false"
                    android:focusableInTouchMode="false"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/login_Register_Text_Grade"
                        android:layout_width="80dp"
                        android:layout_height="wrap_content"
                        android:text="@string/login_text_register_grade"
                        android:textAlignment="textEnd"
                        android:textSize="16sp" />

                    <View
                        android:id="@+id/login_Register_View_Fill_Grade"
                        android:layout_width="45dp"
                        android:layout_height="wrap_content" />

                    <Spinner
                        android:id="@+id/login_Register_Spinner_Grade"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:entries="@array/grade"
                        android:textAlignment="center" />

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/login_Register_Layout_Major"
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginRight="30dp"
                    android:layout_marginBottom="5dp"
                    android:focusable="false"
                    android:focusableInTouchMode="false"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/login_Register_Text_Major"
                        android:layout_width="80dp"
                        android:layout_height="wrap_content"
                        android:text="@string/login_text_register_major"
                        android:textAlignment="textEnd"
                        android:textSize="16sp" />

                    <EditText
                        android:id="@+id/login_Register_Input_Major"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:autofillHints=""
                        android:ems="10"
                        android:hint="@string/login_hint_register_major"
                        android:inputType="textPersonName"
                        android:maxLength="32"
                        android:textAlignment="center"
                        android:textSize="15sp"
                        android:theme="@style/style_TextView_UnderLine_Transparency_White" />

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/login_Register_Layout_Class"
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginRight="30dp"
                    android:layout_marginBottom="5dp"
                    android:focusable="false"
                    android:focusableInTouchMode="false"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/login_Register_Text_Class"
                        android:layout_width="80dp"
                        android:layout_height="wrap_content"
                        android:text="@string/login_text_register_class"
                        android:textAlignment="textEnd"
                        android:textSize="16sp" />

                    <View
                        android:id="@+id/login_Register_View_Fill_Class"
                        android:layout_width="45dp"
                        android:layout_height="wrap_content" />

                    <Spinner
                        android:id="@+id/login_Register_Spinner_Class"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:entries="@array/class_id"
                        android:textAlignment="center" />

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/login_Register_Layout_Key"
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginRight="30dp"
                    android:layout_marginBottom="5dp"
                    android:focusable="false"
                    android:focusableInTouchMode="false"
                    android:orientation="horizontal"
                    android:visibility="gone">

                    <TextView
                        android:id="@+id/login_Register_Text_Key"
                        android:layout_width="80dp"
                        android:layout_height="wrap_content"
                        android:text="@string/login_text_register_keyword"
                        android:textAlignment="textEnd"
                        android:textSize="16sp" />

                    <EditText
                        android:id="@+id/login_Register_Input_Key"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:autofillHints=""
                        android:digits="@string/login_limit_scanner"
                        android:ems="10"
                        android:hint="@string/login_hint_register_keyword"
                        android:inputType="textPersonName"
                        android:textAlignment="center"
                        android:textSize="15sp"
                        android:theme="@style/style_TextView_UnderLine_Transparency_White" />
                </LinearLayout>

                <Button
                    android:id="@+id/login_Register_Btn_Submit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="100dp"
                    android:layout_marginTop="15dp"
                    android:layout_marginRight="100dp"
                    android:layout_marginBottom="20dp"
                    android:background="@drawable/bg_login_btn_submit"
                    android:text="@string/login_btn_register_submit"
                    android:textColor="#E6FFFFFF" />
            </LinearLayout>
        </ScrollView>
    </LinearLayout>
</LinearLayout>

完成後，此時你得到的界面應該是空白的，爲什麼呢？

因爲我這時候已經把login_Register_Layout_Panel佈局給隱藏了，也就是gone了，你再打開（visibility置visible）即可看到如下效果，前提是你完成了之前的設計。

設計activity_main

設計思路

沒必要、不可以、就這？

設計代碼

這個就隨便點，設置個跳轉頁面的按鈕吧，方便後續使用。

這個佈局是在最新版的，所以……慢慢調到合適、能用的佈局設計就行了。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".MainActivity">

    <Button
        android:id="@+id/main_btn_Login"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_login_btn_submit"
        android:text="@string/login_btn_text_login"
        android:textColor="#FFFFFF"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.1" />
    
</android.support.constraint.ConstraintLayout>

得到的效果圖如下：

總述

從本次代碼細品，你細品，Android的界面設計也就是，一個佈局嵌套一個東西或者一大堆東西，互相嵌套、包含，再通過設計每個控件的規格（風格、距離頂部的距離、激活狀態的顏色、普通狀態的顏色、長度是繼承父類還是自動調整等），就可以做出一個很好的界面。

但這還不夠，我們還有很多的東西沒有完成，比如動畫，比如按鈕的事件，比如菜單的控制（你現在看到的註冊面板那個下拉菜單顯示“物聯網工程”只是在arrays.xml中定義好了的，我們實際上往往需要動態生成菜單，而不是定死的），比如頁面跳轉，比如獲得輸入的內容和臨時存儲……

這些東西我們都將在代碼部分完成，本章只是講下界面的設計，而（一）則講的是預先values文件以及相關配置。（三）的時候我再說說我在代碼的設計思路，就包括剛剛說的那些需要完成的東西、功能。

---

下次更新可能得到假期了，一大堆網絡和路由等着我，還得自學Python，唉。

Say Bye Again！