1. 程式人生 > >Android一個簡易的登入介面

Android一個簡易的登入介面

在學習了TextViewEditTextButtonRealtivelayoutlinearlayout等常見佈局後就可以實現一個簡單的登入介面設計。至於像QQ登入介面和其他比較好看的登入介面,還需要進一步學習一下才能設計出來。

1.介面佈局程式碼

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height

="match_parent"

    android:orientation="vertical"

    android:gravity="center_horizontal"

    android:background="#87ceeb"

     >

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="10dp"

        android:text="@string/login_title"

        android:textSize="20sp" />

<!-- 賬號 -->

<LinearLayout 

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:orientation="horizontal"

         android:layout_marginTop="20dp"  >

<TextView

             android:paddingLeft=

"10dp"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:text="@string/account" />

<EditText

           android:singleLine="true"

           android:inputType="none"//表示可以輸入任何資料,如數字,英文,字元

           android:id="@+id/et_account"

           android:layout_width="220dp"

           android:layout_height="wrap_content"

           android:layout_marginLeft="10dp"

           android:background="@drawable/rounded"

             />

</LinearLayout>

<!-- 密碼 -->

<LinearLayout

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_marginTop="20dp"

       android:orientation="horizontal" >

<TextView 

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:paddingLeft="5dp"

             android:text="@string/password" />

<EditText

            android:id="@+id/et_pwd"

            android:layout_width="220dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="20dp"

            android:background="@drawable/rounded"

            android:inputType="textPassword" />

</LinearLayout>

<!-- 登入按鈕 -->

<Button

         android:background="@drawable/btn"

         android:id="@+id/bt_login"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_margin="12dp"

         android:onClick="login"

         android:text="@string/btn_login" />

</LinearLayout>

全域性採用線性佈局linearlayout,在控制元件位置上用到了android:paddingandroid:layout_margin來調整位置。前者是以父控制元件為參照,後者是以自身為參照來進行位置的調整。

2.EditTextButtonxml檔案

 很多朋友都想把邊框改成圓形,這裡需要在drawable檔案中新建xml檔案,在xml檔案中定義。

  定義EditTextXml檔案如下:

 <?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

<solid android:color="#FFFFFF"/>

<stroke android:color="#000000" />

<padding android:left="10dp"

        ></padding>

<corners android:radius="10dp"></corners>

</shape>

註釋:

android:shape="rectangle"//表示設定邊框的形狀為矩形

<solid android:color="#FFFFFF"/>//表示設定填充顏色

<stroke android:color="#000000" /> 表示設定邊框顏色

 <corners android:radius="10dp"></corners>表示四角的彎曲弧度

定義Buttonxml檔案如下:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

<item >

<shape >

<corners android:radius="10dp" />

<gradient android:startColor="#add8e6" 

                 android:endColor="#00008b"

                 android:angle="-90"/>

</shape>

</item>

</selector>

當定義好以後,只需要在EditTextButton的空間中用一句程式碼呼叫即可。

  android:background="@drawable/你自己定義的xml檔名"

3.效果圖