首先回顧一下功能流程當用戶開啟軟件顯示載入頁面時程序首先去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"?> <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中賬號列表的獲取，以及點擊選擇等交互操作等，這些在下一篇中來繼續的講。