首先回顧一下功能流程當用戶開啟軟件顯示載入頁面時程序首先去sqlite庫查詢是否已經保存有用戶的新浪微博的UserID號、Access Token、Access Secret的記錄如果沒有一條記錄那麼跳轉到用戶授權功能頁面，這個已經由上面兩篇文章實現了，如果有記錄那麼頁面跳轉到用戶登錄頁面，也就是本篇以及下篇要實現的功能，本篇講UI的實現，本項目支持多微博賬號了，也就是用戶可以設置多個微博賬號，登錄的時候選擇其中的一個登錄，具體效果如上圖,新建名LoginActivity.java的Activity並且在AndroidManifest.xml中進行相應配置，這個頁面就是我們要實現的用戶登錄頁面。
看上面的效果，首先頁面分3部分實現，背景部分、底部菜單部分、用戶選擇以及頭像顯示部分，首先在res/layout的目錄下新建名為login.xml的layout，然後根據頁面顯示要求編寫如下的布局控制：
代碼
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo_s"
android:layout_marginTop="5dip"
android:layout_marginLeft="5dip">
</ImageView>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="@+id/iconBtn"
android:layout_width="90px"
android:layout_height="80px"
android:background="@drawable/icon_selector"
android:layout_above="@+id/selectLayout"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dip">
<ImageView
android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
</ImageView>
</RelativeLayout>
<RelativeLayout
android:id="@+id/selectLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<EditText
android:id="@+id/iconSelect"
android:layout_width="200px"
android:layout_height="wrap_content"
android:maxLength="10"
android:paddingLeft="20px"
android:editable="false"
android:enabled="false"
android:textSize="13px"
android:background="@drawable/input_over" >
</EditText>
<ImageButton
android:id="@+id/iconSelectBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="1.0dip"
android:layout_alignTop="@+id/iconSelect"
android:layout_alignRight="@+id/iconSelect"
android:layout_alignBottom="@+id/iconSelect"
android:background="@drawable/more_selector" >
</ImageButton>
<ImageButton
android:id="@+id/login"
android:layout_width="40px"
android:layout_height="40px"
android:layout_marginLeft="5dip"
android:layout_alignTop="@+id/iconSelectBtn"
android:layout_toRightOf="@+id/iconSelectBtn"
android:layout_alignBottom="@+id/iconSelectBtn"
android:background="@drawable/btn_in_selector" >
</ImageButton>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="44dip"
android:layout_alignParentBottom="true"
android:background="#BB768e95">
<LinearLayout
android:id="@+id/addLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentLeft="true"
android:gravity="center"
android:layout_marginTop="3px">
<ImageButton
android:id="@+id/addIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/add_selector">
</ImageButton>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="12px"
android:text="添加賬號">
</TextView>
</LinearLayout>
<LinearLayout
android:id="@+id/exitLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerInParent="true"
android:gravity="center"
android:layout_marginTop="3px">
<ImageButton
android:id="@+id/exitIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/exit_selector">
</ImageButton>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="12px"
android:text="退出軟件">
</TextView>
</LinearLayout>
<LinearLayout
android:id="@+id/delLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentRight="true"
android:gravity="center"
android:layout_marginTop="3px">
<ImageButton
android:id="@+id/delIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/del_selector">
</ImageButton>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="12px"
android:text="刪除賬號">
</TextView>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
正對上面的login.xml的layout進行一下說明，背景部分前面已經講過了這裡也就不重復。
底部菜單實現，原本我是采用GridView實現的非常的方便但是後來由於顯示位置不好控制改成了用RelativeLayout和LinearLayout嵌套的方式，實現的比較土但是達到了顯示需求，首先是一個最外面的RelativeLayout目的是用來實現底部對齊顯示，並且把這個RelativeLayout的背景設置為淺藍色半透明的效果，關鍵這2行：android:layout_alignParentBottom="true"和android:background="#BB768e95"。然後是在RelativeLayout內部添加3個LinearLayout分別是用來顯示添加賬號、退出軟件、刪除賬號3個功能按鈕菜單，並且分別設置為左對齊、居中對齊、右對齊，3個LinearLayout都設置為垂直布局android:orientation="vertical"，然後每LinearLayout添加相應的圖片和文字。
用戶選擇以及頭像顯示部分，這塊分成3小塊，用來顯示用戶頭像的ImageView、用來顯示用戶名字並且點擊可以出現選擇列表的EditText、用來點擊進入當前選擇用戶首頁的功能按鈕ImageButton，這3小塊的布局實現也是采用elativeLayout和LinearLayout相互嵌套配合的方式實現的具體參考login.xml。這裡重點說說這個賬號選擇列表彈出窗口的實現，當點擊下拉箭頭按鈕的時候彈出並顯示，這個是用Dialog控件實現，首先准備好圓角的半透明背景圖mask_bg.png然後添加到res/drawable-mdpi文件夾下，接著自定義一個Dialog樣式文件，在res/values目錄下新建名為dialogStyles2.xml的resources文件，在用戶授權驗證頁面的時候我們也自定義過類似的Dialog的樣式，具體解釋可以參考前面的戶授權驗證頁面功能，內容如下：
代碼
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="dialog2" parent="@android:style/Theme.Dialog">
<item name="android:windowFrame">@null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowIsTranslucent">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">@drawable/mask_bg</item>
<item name="android:backgroundDimEnabled">true</item>
</style>
</resources>
接下來還需要定義選擇列表的layout，新建名為dialog2.xml的layout文件，內容如下：
代碼
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="4dip">
<ListView
android:id="@+id/list"
android:layout_width="240px"
android:layout_height="220px"
android:divider="#f1f2f2"
android:dividerHeight="1px"
android:layout_margin="5px"
android:background="#ffffff"
android:cacheColorHint="#00000000">
</ListView>
</LinearLayout>
完成了layout和樣式文件的編寫，接下來就是把dialogStyles2.xml樣式文件和dialog2.xml的列表layout用起來，當點擊id為iconSelectBtn的ImageButton時顯示用戶選擇窗口，在LoginActivity的onCreate方法中添加如下代碼：
代碼
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.login);
LinearLayout layout=(LinearLayout)findViewById(R.id.layout);
//背景自動適應
AndroidHelper.AutoBackground(this, layout, R.drawable.bg_v, R.drawable.bg_h);
ImageButton iconSelectBtn=(ImageButton)findViewById(R.id.iconSelectBtn);
iconSelectBtn.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
View diaView=View.inflate(LoginActivity.this, R.layout.dialog2, null);
dialog=new Dialog(LoginActivity.this,R.style.dialog2);
dialog.setContentView(diaView);
dialog.show();
......
}
});
到這裡登錄的UI部分就實現的差不多了，剩下的都是一些功能部分代碼用來實現從sqlite中賬號列表的獲取，以及點擊選擇等交互操作等，這些在下一篇中來繼續的講。
Android MediaPlayer(多媒體播放)
Android本地化
Android中的Activity生命周期總結
Android提高之藍牙隱藏API探秘
