使用Android常用控件與佈局實現美觀的登錄頁面

使用Android常用控件與佈局實現美觀的登錄頁面

編碼前介紹：

         使用知識點：EditText、LinearLayout、ImageView、TextView、selector、shape

實現效果：

第一步：新建一個LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
   <!--
   EditText
       layout_width：把寬設置爲手機寬度
        layout_height：高設置爲文本寬度
        hint：設置提示字符爲請輸入用戶名
        textSize：設置字體大小爲22dp
        layout_marginTop：設置外邊距Top爲10dp
        background：設置背景樣式從選擇器中獲取
    -->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="請輸入用戶名"
        android:textSize="22dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/et_selector"
        />
    <!--用線性佈局把圖標與文本裝起來，設置外部距調整位置-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="-34dp"
        android:layout_marginLeft="10dp"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/icon_user"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登錄名："
            android:textSize="22dp"
            />

    </LinearLayout>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="請輸入密碼"
        android:textSize="22dp"
        android:inputType="numberPassword"
        android:background="@drawable/et_selector"
        android:layout_marginTop="10dp"
        />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="-34dp"
        android:layout_marginLeft="10dp"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/icon_user"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密碼："
            android:textSize="22dp"
            />

    </LinearLayout>
    <!--調整寬度
    設置gravity設置居中-->
    <Button
        android:layout_width="210dp"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:layout_height="wrap_content"
        android:background="@drawable/bt_up_my"
        />
</LinearLayout>

第二步：調換到Project——》再drawable中創建selector.xml

drawable

右鍵新建Drawable Resource File

兩個shape文件與一個selector選擇器

et_shape與et_shape2

注意把Root element轉化成相對應的file

第三步：編寫et_shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--設置弧度-->
    <corners
        android:radius="50dp"
        ></corners>
    <!--設置單一背景顏色-->
    <!--<solid
        android:color="#fcf063"
        ></solid>-->
    <!--設置漸變開始、中間、結束顏色-->
    <gradient
        android:startColor="#c7c675"
        android:centerColor="#d3c729"
        android:endColor="#ff0220"
        ></gradient>
    <!--設置邊框寬度等同粗細與顏色-->
    <stroke
            android:width="1dp"
            android:color="#ff0000"
        ></stroke>
    <!--設置內邊距
        設置左爲140因爲會把圖標與文本通過位置設置附在上面
    -->
    <padding
            android:left="140dp"
            android:top="10dp"
            android:bottom="10dp"
        ></padding>
</shape>

shape2只用改變你想要的背景顏色和邊框就可出現該效果

第四步：編寫選擇器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--當文本框聚焦時，調用et_shape，false調用2-->
    <item android:state_focused="true" android:drawable="@drawable/et_shape"></item>
    <item android:state_focused="false" android:drawable="@drawable/et_shape2"></item>
</selector>

當然這裏放上用到的圖標

連接手機或模擬器運行可出現效果

歡迎指點一二