新浪微博Android客户端学习记录三：完成登录界面和授权界面

本讲完成的效果为：

登录界面的布局代码(login.xml)为：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/main_bg"
    android:orientation="vertical" >

    <Button
        android:id="@+id/btn_add_accountn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="10dip"
        android:layout_marginTop="10dip"
        android:background="@drawable/add_account_d" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/head_bg"
        android:gravity="center"
        android:layout_marginTop="20dip"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/imge_user_head"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/user_head" />
    </LinearLayout>

    <Spinner
        android:id="@+id/spn_user_list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/account_selete_bg"
        android:layout_gravity="center"
        android:layout_marginTop="10dip" />
    
    <Button
        android:id="@+id/btn_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dip"
        android:background="@drawable/login_d"
        android:text="@string/login"
        android:textColor="@color/white"
        android:textSize="20dip" />

</LinearLayout>

授权界面的布局(auth.xml)代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/main_bg" >
</LinearLayout>

授权界面中的子界面(authorize_dialog.xml)文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="15dip" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/info" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dip"
            android:text="@string/authTip"
            android:textColor="@color/black"
            android:textSize="18dip" />
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dip"
        android:layout_marginRight="5dip"
        android:layout_marginTop="10dip"
        android:text="@string/authTipMsg"
        android:textSize="15dip" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_alignParentBottom="true"
         >

        <Button
            android:id="@+id/btn_auth_begin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="10dip"
            android:background="@drawable/auth_begin_d"
            android:textColor="@color/white"
            android:textSize="20dip" />
    </RelativeLayout>

</LinearLayout>

然后再增加一个Activity（AuthActivity）就可以实现一个漂亮的界面啦

package haiyang.project.iweibo.ui;

import haiyang.project.iweibo.R;
import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;

public class AuthActivity extends Activity{

	private Dialog dialog;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		
		this.setContentView(R.layout.auth);
		
		View digView=View.inflate(this, R.layout.authorize_dialog, null);
		
		dialog=new Dialog(this, R.style.auth_dialog);
		dialog.setContentView(digView);
		dialog.show();
	}
}

在实际的按钮点击过程中，点击和松开后应该为两种不同的状态，这样子点击时才有点击感，具体的实现为在res下新建drawable的文件夹，增加一个布局(login.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/btn_bg_n" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/btn_bg_p" />
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/btn_bg_p" />
    <item android:drawable="@drawable/btn_bg_n" />
</selector>

这个文件可以实现点击和松开某个按钮时分别为不同的图像，涉及到类似功能实现的操作都是用这种方法，此讲中用到三处（一个登录按钮、一个下拉框、一个开始按钮），由于类似，此文不一一列出。

再就是让授权界面的提示文字友好的显示(authorize_dialog_style)：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="auth_dialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
 <!-- Dialog的windowFrame框为无 -->
        <item name="android:windowIsFloating">true</item>
 <!-- 是否浮现在activity之上 -->
        <item name="android:windowIsTranslucent">false</item>
 <!-- 是否半透明 -->
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/dialog_bg</item>
        <item name="android:backgroundDimEnabled">false</item>
    </style>

</resources>

总结一下，本讲学习到得新内容为：实现点击按钮（或下拉框）等操作时两种不同状态的不同效果，以及使界面更友好。