AndroidUI之登录界面的实现分析

一：界面效果图

二：登录界面的布局分析

Step1：首先建立drawable文件夹，创建logintopbg_roundcorner.xml

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

Step2:创建btn_select.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--
    按钮点击和不点击的效果
    属性：
    android :state_pressed:
    false：未按下
    true:按下
     -->
     <item android:drawable="@drawable/btn_shape" android:state_focused="false"/>
     <item android:drawable="@drawable/btnshape_after" android:state_focused="true"/>
         
     

</selector>

其中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"/>
	<corners 
	    android:radius="10dp"/>
</shape>

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

Step3：定义login.xml文件，布局如下：

activity_login.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="match_parent" 
    android:background="@drawable/loginbg">
	<include
	    android:id="@+id/include1" 
	    layout="@layout/activity_main"/>

	<TextView
	    android:id="@+id/tvForgetpass"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_alignParentRight="true"
	    android:layout_centerVertical="true"
	    android:layout_marginRight="15dp"
	    android:text="@string/tvForgetpass"/>

	<ImageView
	    android:id="@+id/imageView1"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_alignParentBottom="true"
	    android:layout_alignRight="@+id/tvForgetpass"
	    android:layout_marginBottom="54dp"
	    android:src="@drawable/monkey" />

</RelativeLayout>