Android-UI：用户登录界面

前几天学了各种布局方法，为了更加熟练地运用，今天做了一个综合练习题，来巩固这几日的学习。
怎么才能达到这个效果呢？

首先分析一下这个程序的构造，背景是一个渐变的浅蓝色，上面有两个文本框，一个是请输入账号，一个是请输入密码，在其下方有两个按钮，是平均分配的一个效果，一个白色半透明的圆角背景，下半部分很简单，就是插入一个ImageView，因此采用相对布局和线性布局相结合的方式，来完成这个效果。

1.先将用到的三个小图片存入drawable中，分别为deer.png icon_pass.png icon-user.png
2.在drawable中建立名为logintop_roundbg.xml的文件

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">  //默认为直角矩形    <corners android:radius="10dp"></corners>  //圆角    <solid android:color="#55FFFFFF"></solid>  //55为半透明+颜色</shape>

3.在drawable中建立名为btn_select.xml的文件，为按钮变化，按钮按下去和未按下去颜色是不一样的

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/btn_shape"   android:state_pressed="false"></item>  //按钮未按下去的效果                   <item android:drawable="@drawable/btn_shape_after" android:state_pressed="true"></item>  //按钮按下去的效果</selector>

4.在drawable中建立名为btn_shape.xml和btn_shape_after.xml文件，来存放按钮的变化情况
按钮未按下去：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#FF72CAE1"></solid>    <corners android:radius="10dp"></corners></shape>

按钮按下去：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#87cefa"></solid>    <corners android:radius="10dp"></corners></shape>

5.在layout中建立login_top.xml文件，为相对布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:padding="@dimen/activity_horizontal_margin"    android:background="@drawable/logintop_roungbg"> //先引用背景    <EditText        android:id="@+id/etName"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@android:drawable/edit_text"        android:drawableLeft="@drawable/icon_user"        android:drawablePadding="10dp"        android:ems="10"        android:hint="@string/etName">        <requestFocus />  //默认获取焦点    </EditText>       <EditText        android:id="@+id/etPassword"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_below="@id/etName"        android:background="@android:drawable/edit_text"        android:drawableLeft="@drawable/icon_pass"        android:ems="10"        android:drawablePadding="10dp"        android:hint="@string/etPass"        android:inputType="textPassword">        <requestFocus />    </EditText>   //在TextFilds中拖出Plain Text ,将id改为etName，图片icon_user，将表格的文字写在values下面的strings.xml中，hint引用，另外，需要指明两者位置问题。    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_below="@id/etPassword">        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/btn_select"            android:text="@string/btnLogin" />        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:layout_marginLeft="10dp"            android:background="@drawable/btn_select"            android:text="@string/btnRegister" />    </LinearLayout>  //两个按钮，weight平均分配空间</RelativeLayout>

strings.xml文件

<resources>    <string name="app_name">Case_Login</string>    <string name="etName">请输入账号</string>    <string name="etPass">请输入密码</string>    <string name="btnLogin">登录</string>    <string name="btnRegister">注册</string></resources>

6.最外层布局在已经存在的activity_login.xml中

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:background="@drawable/loginbg"    android:id="@+id/activity_login"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="cn.edu.bzu.case_login.LoginActivity">  //引用背景图片    <include layout="@layout/login_top"></include> //将我们做过的上面的布局包含进来。    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:srcCompat="@drawable/deer"        android:id="@+id/imageView"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:layout_alignParentEnd="true" /></RelativeLayout>  //从Images&&Media 中拖出ImageView

背景图片存在drawale中建立的loginbg.xml文件中

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <gradient        android:angle="45"        android:endColor="#FF72CAE1"        android:startColor="#FFACDAE5" /></shape>   //渐变为45

这样，这个练习就做完了，是有点麻烦，但是收获颇多。