【移動安全技術】_第四站_登陸框UI設計

任務

??撰寫一個Activity，界面要求和操作回應如下：

提示：“請輸入用戶名”更改為“個人學號“，“請輸入密碼”更改為”個人姓名“，
操作：點擊登錄，彈出輸入的用戶名；點擊注銷，彈出輸入的口令，

前言

??Android Studio和Eclipse都提供可視化編輯器，允許使用拖放控制元件的方式撰寫布局，并能在視圖上直接修改控制元件的屬性，但螢屏適配性不佳，且很難撰寫復雜頁面，
??所以我們使用最基本的方式撰寫頁面，即撰寫XML代碼，

??接下來挑選幾種常用的控制元件，詳細介紹它們的使用方法，

控制元件的屬性

常見控制元件

TextView文本

??顯而易見，

Button按鈕

??默認text屬性的字母是大寫，即textAllCaps=True，可設定為False來允許大小寫，

EditText編輯框

??提供一個互動輸入框，

4種基本布局

??布局是用來放置控制元件的容器，可以按照一定規律調整內部控制元件的位置，布局內部可以放置控制元件和放置布局，多層布局可以幫助我們實作精美頁面，

??新建專案UiLayout專案，讓Android Studio自動創建活動，使用默認活動名和布局名，

LinearLayout線性布局

??注意排列方式分別與內部控制元件寬高、布局對齊方式的沖突，

實驗程序

??實作目的登陸框，需要四行，其中有一行兩個按鈕需要并列，注意按鈕值的顏色，
第一步，定義兩個按鈕、一個文本、兩個輸入框，

實驗代碼

	1.字串檔案strings.xml：
<resources>
    <string name="app_name">Four_Ui</string>
    <string name="xitong">網路準入認證系統</string>
    <string name="username">1820030116</string>
    <string name="passwd">朱軻鑫</string>
    <string name="in">登錄</string>
    <string name="out">注銷</string>
    <string name="input1">用戶名</string>
    <string name="input2">密碼</string>
</resources>


	2.布局檔案activity_main.xml：
	<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView4"


            android:text="@string/input1"
            android:layout_width="70dp"
            android:layout_height="52dp"
            android:textSize="20dp"

            android:layout_marginTop="285dp"
            android:layout_marginLeft="20dp"


            tools:text="@string/input1" />

        <EditText
            android:id="@+id/input_username"


            android:layout_width="300dp"
            android:layout_height="52dp"


            android:hint="@string/username"
            android:layout_marginTop="280dp"
            android:inputType="text" />


    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <TextView
            android:id="@+id/title"
            android:layout_width="260dp"
            android:layout_height="50dp"

            android:text="@string/xitong"
            android:layout_marginTop="200dp"

            android:layout_gravity="center"
            android:textSize="30sp"
            android:textColor="#000000"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/in_pass"


            android:text="@string/input2"
            android:layout_width="70dp"
            android:layout_height="52dp"
            android:textSize="20dp"

            android:layout_marginTop="402dp"
            android:layout_marginLeft="20dp"


            tools:text="@string/input2" />



        <EditText
            android:id="@+id/password"
            android:layout_width="280dp"
            android:layout_height="52dp"


            android:ems="10"
            android:hint="@string/passwd"
            android:gravity="center_vertical"
            android:layout_marginTop="400dp"
            android:textSize="17sp"
            android:inputType="textPassword" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        tools:layout_editor_absoluteX="411dp">

        <Button
            android:id="@+id/login_in"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_marginTop="480dp"
            android:layout_marginLeft="80dp"
            android:background="@color/blue"
            android:text="@string/in" />

        <Button
            android:id="@+id/login_out"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_marginLeft="50dp"
            android:layout_marginTop="480dp"
            android:background="@color/red"
            android:text="@string/out" />
    </LinearLayout>

	3.主活動代碼MainActivity.java：
	protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        final EditText et1 = (EditText) findViewById(R.id.input_username);
        final EditText et2 = (EditText) findViewById(R.id.input_username);



        Button mybutton_1 = (Button) findViewById(R.id.login_in);

        mybutton_1.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                // 點擊按鈕彈出文本
                Toast.makeText(MainActivity.this, et1.getText().toString(), Toast.LENGTH_SHORT).show();

            }
        }
        );

        Button mybutton_2 = (Button) findViewById(R.id.login_out);

        mybutton_2.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                // 點擊按鈕彈出文本
                Toast.makeText(MainActivity.this, et2.getText().toString(), Toast.LENGTH_SHORT).show();
            }
        }
        );
    }
}

實驗效果圖

??1.首頁：

??2.輸入：

??3.點擊登錄：

??4.點擊注銷：

批評與自我批評

??注意效率！！

參考

??《第一行代碼 Android 第2版》，郭霖著

??《Android實作EditText文本的輸入，通過點擊按鈕，獲取輸入的內容》
https://blog.csdn.net/qq_36339249/article/details/66974213?utm_term=android%E8%8E%B7%E5%8F%96%E8%BE%93%E5%85%A5%E6%A1%86%E5%86%85%E5%AE%B9%E4%BB%A3%E7%A0%81&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduweb~default-2-66974213&spm=3001.4430