一個Android登陸/注冊XML布局檔案代碼

一個Android登陸/注冊XML布局檔案代碼

通常在APP開發中不可避免要涉及到登陸/注冊xml布局檔案的編碼實作，這些Android APP登陸/注冊XML布局檔案代碼倒不是很難，但是要在xml布局寫代碼實作UI設計要求的各種顔色、大小、字型、間距、圓角等等細節設計要求，那麼就比較繁瑣了，需要不斷的細微調整，同時要考慮視屏和比對不同的Android裝置螢幕。還有就是，這類Android登陸/注冊XML布局檔案代碼基本上可以說複用度很高，基本上一次寫好，在未來的項目實際開發中可以重複使用或者略加修改即可再次投入代碼中。下面是Du Yong Ping同學寫出來的這樣一個Android登陸/注冊UI之XML布局檔案代碼實作，我把代碼重新抽取和整理出來，使之解耦，以達到未來代碼開發中的複用，先代碼運作結果：

布局檔案：

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="注冊資訊"
        android:textColor="#f00"
        android:textSize="30sp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#f00" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="8dp"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:text="使用者名："
            android:textSize="18sp" />

        <EditText
            android:id="@+id/userName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/edit_background"
            android:ellipsize="start"
            android:hint="輸入使用者名"
            android:singleLine="true"
            android:textSize="18sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:text="密    碼："
            android:textSize="18sp" />

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/edit_background"
            android:ellipsize="start"
            android:hint="輸入密碼"
            android:inputType="numberPassword"
            android:singleLine="true"
            android:textSize="18sp" />
    </LinearLayout>

    <Button
        android:id="@+id/save"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/button_background"
        android:gravity="center"
        android:text="注冊"
        android:textSize="20sp" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_margin="20dp"
        android:background="@drawable/scroll_background" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="條款内容\nZhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN Zhang Phil @ CSDN"
            android:textColor="@android:color/darker_gray" />
    </ScrollView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:orientation="vertical" >

        <RadioGroup
            android:id="@+id/radioGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <RadioButton
                android:id="@+id/radioButton1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="不同意該協定條款"
                android:textSize="12sp" />

            <RadioButton
                android:id="@+id/radioButton2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="同意該協定條款"
                android:textSize="12sp" />
        </RadioGroup>
    </LinearLayout>

</LinearLayout>           

布局檔案使用到的、在drawable目錄下放置的shape檔案，有三個，分别是：

使用者名/密碼輸入框的背景資源edit_background.xml：

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

    <stroke
        android:width="2dp"
        android:color="#f0f" />

    <corners
        android:bottomLeftRadius="4dp"
        android:bottomRightRadius="4dp"
        android:topLeftRadius="4dp"
        android:topRightRadius="4dp" />

</shape>           

登入/注冊按鈕的背景資源button_background.xml：

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

    <stroke
        android:width="4dp"
        android:color="#0ff" />

    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />

    <solid android:color="#0ff" />

</shape>           

協定條款scroll用到的scroll_background.xml：

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

    <stroke
        android:width="1dp"
        android:color="#456789" />

    <corners
        android:bottomLeftRadius="4dp"
        android:bottomRightRadius="4dp"
        android:topLeftRadius="4dp"
        android:topRightRadius="4dp" />

</shape>           

注意輸入框和按鈕的背景圓角處理技巧，将shape做成一個矩形（rectangle），然後在四個角（頂部左邊topLeft，頂部右邊topRight，底部左bottomLeft，底部右bottomRight）的地方處理成圓角。

附錄文章：

《仿微信、短信、QQ等消息數目右上角紅色小圓球氣泡顯示（基于Android XML布局檔案實作）》連結位址：

http://blog.csdn.net/zhangphil/article/details/43702953