Android开发之登录页设计

案例描述：实现如下图所示的微博登录界面，按下按钮时按钮会有所变化。

知识点：

• 如何在一个布局文件中包含另外一个布局文件
• 如何实现按钮状态变化时：按下，点击，获取焦点时图片的改变

login.xml布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <!--包含另外一个布局文件 -->
    <include android:id="@+id/title" layout="@layout/title_two_button"/>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dip"
        android:text="账号"
        android:textSize="16dip" />
    <AutoCompleteTextView
        android:id="@+id/user"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dip"
        android:completionThreshold="1"
        android:inputType="textEmailAddress"
        android:singleLine="true" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dip"
        android:text="密码"
        android:textSize="16dip" />
    <EditText
        android:id="@+id/password"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dip"
        android:password="true"
        android:singleLine="true" />
    <Button
        android:id="@+id/loginButton"
        android:layout_width="180dip"
        android:layout_height="50dip"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/regist_weibo"
        android:divider="@drawable/divider_horizontal_timeline"
        android:dividerHeight="2.0dip"
        android:text="登陆" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/switchuser_divider"
        android:paddingLeft="10dip"
        android:text="微博广场"
        android:textColor="#7b797b"
        android:textSize="16dip" />
</LinearLayout>

title_two_button.xml布局文件如下：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/FrameLayout01"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="fill_parent"
        android:layout_height="45dip"
        android:background="@drawable/search_bg"
        android:gravity="center"
        android:textColor="@color/black"
        android:textSize="25dip" >
    </TextView>

    <Button
        android:id="@+id/title_bt_left"
        android:layout_width="49dip"
        android:layout_height="36dip"
        android:layout_gravity="center_vertical"
        android:background="@drawable/title_button"
        android:textColor="@color/white" >
    </Button>

    <Button
        android:id="@+id/title_bt_right"
        android:layout_width="49dip"
        android:layout_height="36dip"
        android:layout_gravity="right"
        android:layout_marginRight="2dip"
        android:layout_marginTop="4dip"
        android:background="@drawable/title_button"
        android:textColor="@color/white" >
    </Button>

</FrameLayout>

title_button.xml布局文件如下：

说明：在drawable文件夹下不仅可以存放图片资源，而且可以存放布局文件

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:drawable="@drawable/title_button_selected" />
    <item android:state_selected="true" android:drawable="@drawable/title_button_selected" />
    <item android:state_pressed="true" android:drawable="@drawable/title_button_selected" />
    <item android:state_enabled="false" android:drawable="@drawable/title_button_selected" />
    <item android:drawable="@drawable/title_button_normal" />
</selector>

同样regist_weibo.xml布局文件如下：

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/regist_weibo_n" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/regist_weibo_s" />
    <item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/regist_weibo_s" />
    <item android:state_enabled="true" android:state_selected="false" android:drawable="@drawable/regist_weibo_n" />
    <item android:drawable="@drawable/regist_weibo_n" />
</selector>