Android一個簡易的登入介面
在學習了TextView,EditText,Button和Realtivelayout,linearlayout等常見佈局後就可以實現一個簡單的登入介面設計。至於像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
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=
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:padding和android:layout_margin來調整位置。前者是以父控制元件為參照,後者是以自身為參照來進行位置的調整。
2.EditText和Button的xml檔案
很多朋友都想把邊框改成圓形,這裡需要在drawable檔案中新建xml檔案,在xml檔案中定義。
定義EditText的Xml檔案如下:
<?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>表示四角的彎曲弧度
定義Button的xml檔案如下:
<?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>
當定義好以後,只需要在EditText和Button的空間中用一句程式碼呼叫即可。
android:background="@drawable/你自己定義的xml檔名"
3.效果圖