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="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: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.效果图