UI之登录界面

来源：互联网发布：centos5配置yum源编辑：程序博客网时间：2024/04/30 15:16

一、先整体规划登录页面的大体布局，要实现该效果可以通过嵌入布局的方式使登录布局页面简洁。

二、采用相对布局（RelativeLayout）,利用对shape和selected定义的xml文件，对Button控件进行设计。利用控件之间位置的关系属性完成布局设计。

btn_shape_after.xml

<?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>

btn_shape.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>

btn_selected.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>

login_top.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@drawable/logintobg_roundcorner"  >    <EditText        android:id="@+id/etName"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentTop="true"        android:layout_centerHorizontal="true"        android:layout_marginTop="20dp"        android:background="@android:drawable/edit_text"        android:drawableLeft="@drawable/etname"        android:drawablePadding="10dp"        android:ems="12" />    <requestFocus />    <EditText        android:id="@+id/etpassword"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignLeft="@+id/etName"        android:layout_below="@+id/etName"        android:layout_marginTop="26dp"        android:drawableLeft="@drawable/etpassword"        android:drawablePadding="10dp"        android:background="@android:drawable/edit_text"        android:ems="12" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignLeft="@+id/etpassword"        android:layout_alignRight="@id/etpassword"        android:layout_below="@+id/etpassword"        android:layout_marginTop="15dp"        android:orientation="horizontal" >        <Button            android:id="@+id/btnLogin"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="登录"             android:layout_weight="1"            android:background="@drawable/btn_selected"            />        <Button            android:id="@+id/btnRegiste"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="注册"            android:layout_weight="1"            android:layout_marginLeft="5dp"            android:background="@drawable/btn_selected"             />    </LinearLayout>    </RelativeLayout>

activity_login.xml

<RelativeLayout 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: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=".LoginActivity"    android:background="@drawable/loginbg" >    <include        android:id="@+id/login_top"        layout="@layout/login_top"         />    <TextView        android:id="@+id/tvForgetPass"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignRight="@+id/login_top"        android:layout_below="@+id/login_top"        android:layout_marginTop="42dp"        android:text="@string/tvForgetPass"        android:textAppearance="?android:attr/textAppearanceLarge" />    <ImageView        android:id="@+id/ivImage"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignRight="@+id/tvForgetPass"        android:layout_marginRight="42dp"        android:src="@drawable/monkey" /></RelativeLayout>

0 0