android开发我的新浪微博客户端-登录页面UI篇(4.1)

      首先回顾一下功能流程当用户开启软件显示载入页面时程序首先去sqlite库查询是否已经保存有用户的新浪微博的UserID号、Access Token、Access Secret的记录如果没有一条记录那么跳转到用户授权功能页面，这个已经由上面两篇文章实现了，如果有记录那么页面跳转到用户登录页面，也就是本篇以及 下篇要实现的功能，本篇讲UI的实现，本项目支持多微博账号了，也就是用户可以设置多个微博账号，登录的时候选择其中的一个登录，具体效果如上图,新建名 LoginActivity.java的Activity并且在AndroidManifest.xml中进行相应配置，这个页面就是我们要实现的用户登 录页面。

      看上面的效果，首先页面分3部分实现，背景部分、底部菜单部分、用户选择以及头像显示部分，首先在res/layout的目录下新建名为login.xml的layout，然后根据页面显示要求编写如下的布局控制：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout
   
3.   xmlns:android="http://schemas.android.com/apk/res/android"
   
4.   android:id="@+id/layout"
   
5.   android:orientation="vertical"
   
6.   android:layout_width="fill_parent"
   
7.   android:layout_height="fill_parent">
   
8.   <ImageView
   
9.     android:layout_width="wrap_content"
   
10.     android:layout_height="wrap_content"
    
11.     android:src="@drawable/logo_s"
    
12.     android:layout_marginTop="5dip"
    
13.     android:layout_marginLeft="5dip">
    
14.   </ImageView>
    
15.   <RelativeLayout
    
16.     android:layout_width="fill_parent"
    
17.     android:layout_height="fill_parent">
    
18.         <RelativeLayout
    
19.             android:id="@+id/iconBtn"
    
20.             android:layout_width="90px"
    
21.             android:layout_height="80px"
    
22.             android:background="@drawable/icon_selector"
    
23.             android:layout_above="@+id/selectLayout"
    
24.             android:layout_centerHorizontal="true"
    
25.             android:layout_marginBottom="20dip">
    
26.                 <ImageView
    
27.                 android:id="@+id/icon"
    
28.                 android:layout_width="wrap_content"
    
29.                 android:layout_height="wrap_content"
    
30.                 android:layout_centerInParent="true">
    
31.                 </ImageView>
    
32.         </RelativeLayout>
    
33.         
    
34.         <RelativeLayout
    
35.         android:id="@+id/selectLayout"
    
36.         android:layout_width="wrap_content"
    
37.         android:layout_height="wrap_content"
    
38.         android:layout_centerInParent="true">
    
39.             <EditText
    
40.             android:id="@+id/iconSelect"
    
41.             android:layout_width="200px"
    
42.             android:layout_height="wrap_content"
    
43.             android:maxLength="10"
    
44.             android:paddingLeft="20px"
    
45.             android:editable="false"
    
46.             android:enabled="false"
    
47.             android:textSize="13px"
    
48.             android:background="@drawable/input_over" >
    
49.             </EditText>
    
50.             <ImageButton
    
51.             android:id="@+id/iconSelectBtn"
    
52.             android:layout_width="wrap_content"
    
53.             android:layout_height="wrap_content"
    
54.             android:layout_marginRight="1.0dip"
    
55.             android:layout_alignTop="@+id/iconSelect"
    
56.             android:layout_alignRight="@+id/iconSelect"
    
57.             android:layout_alignBottom="@+id/iconSelect"
    
58.             android:background="@drawable/more_selector" >
    
59.             </ImageButton>
    
60.             <ImageButton
    
61.             android:id="@+id/login"
    
62.             android:layout_width="40px"
    
63.             android:layout_height="40px"
    
64.             android:layout_marginLeft="5dip"
    
65.             android:layout_alignTop="@+id/iconSelectBtn"
    
66.             android:layout_toRightOf="@+id/iconSelectBtn"
    
67.             android:layout_alignBottom="@+id/iconSelectBtn"
    
68.             android:background="@drawable/btn_in_selector" >
    
69.             </ImageButton>
    
70.         </RelativeLayout>
    
71.         
    
72.         <RelativeLayout
    
73.         android:layout_width="fill_parent"
    
74.         android:layout_height="44dip"
    
75.         android:layout_alignParentBottom="true"
    
76.         android:background="#BB768e95">
    
77.             <LinearLayout
    
78.             android:id="@+id/addLayout"
    
79.             android:layout_width="wrap_content"
    
80.             android:layout_height="wrap_content"
    
81.             android:orientation="vertical"
    
82.             android:layout_alignParentLeft="true"
    
83.             android:gravity="center"
    
84.             android:layout_marginTop="3px">
    
85.             <ImageButton
    
86.             android:id="@+id/addIcon"
    
87.             android:layout_width="wrap_content"
    
88.             android:layout_height="wrap_content"
    
89.             android:background="@drawable/add_selector">
    
90.             </ImageButton>
    
91.             <TextView
    
92.             android:layout_width="wrap_content"
    
93.             android:layout_height="wrap_content"
    
94.             android:textColor="#ffffff"
    
95.             android:textSize="12px"
    
96.             android:text="添加账号">
    
97.             </TextView>
    
98.             </LinearLayout>
    
99.             <LinearLayout
    
100.             android:id="@+id/exitLayout"
     
101.             android:layout_width="wrap_content"
     
102.             android:layout_height="wrap_content"
     
103.             android:orientation="vertical"
     
104.             android:layout_centerInParent="true"
     
105.             android:gravity="center"
     
106.             android:layout_marginTop="3px">
     
107.             <ImageButton
     
108.             android:id="@+id/exitIcon"
     
109.             android:layout_width="wrap_content"
     
110.             android:layout_height="wrap_content"
     
111.             android:background="@drawable/exit_selector">
     
112.             </ImageButton>
     
113.             <TextView
     
114.             android:layout_width="wrap_content"
     
115.             android:layout_height="wrap_content"
     
116.             android:textColor="#ffffff"
     
117.             android:textSize="12px"
     
118.             android:text="退出软件">
     
119.             </TextView>
     
120.             </LinearLayout>
     
121.             <LinearLayout
     
122.             android:id="@+id/delLayout"
     
123.             android:layout_width="wrap_content"
     
124.             android:layout_height="wrap_content"
     
125.             android:orientation="vertical"
     
126.             android:layout_alignParentRight="true"
     
127.             android:gravity="center"
     
128.             android:layout_marginTop="3px">
     
129.             <ImageButton
     
130.             android:id="@+id/delIcon"
     
131.             android:layout_width="wrap_content"
     
132.             android:layout_height="wrap_content"
     
133.             android:background="@drawable/del_selector">
     
134.             </ImageButton>
     
135.             <TextView
     
136.             android:layout_width="wrap_content"
     
137.             android:layout_height="wrap_content"
     
138.             android:textColor="#ffffff"
     
139.             android:textSize="12px"
     
140.             android:text="删除账号">
     
141.             </TextView>
     
142.             </LinearLayout>
     
143.         </RelativeLayout>
     
144.   </RelativeLayout>
     
145. </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的样式，具体解释可以参考前面的户授权验证页面功能，内容如下：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <resources>
   
3.     <style name="dialog2" parent="@android:style/Theme.Dialog">
   
4.         <item name="android:windowFrame">@null</item>
   
5.         <item name="android:windowIsFloating">true</item>
   
6.         <item name="android:windowIsTranslucent">false</item>
   
7.         <item name="android:windowNoTitle">true</item>
   
8.         <item name="android:windowBackground">@drawable/mask_bg</item>
   
9.         <item name="android:backgroundDimEnabled">true</item>
   
10.     </style>
    
11. </resources>

复制代码

接下来还需要定义选择列表的layout，新建名为dialog2.xml的layout文件，内容如下：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout
   
3.   xmlns:android="http://schemas.android.com/apk/res/android"
   
4.   android:layout_width="wrap_content"
   
5.   android:layout_height="wrap_content"
   
6.   android:orientation="vertical"
   
7.   android:padding="4dip">
   
8.   <ListView
   
9.         android:id="@+id/list"
   
10.         android:layout_width="240px"
    
11.         android:layout_height="220px"
    
12.         android:divider="#f1f2f2"
    
13.         android:dividerHeight="1px"
    
14.         android:layout_margin="5px"
    
15.         android:background="#ffffff"
    
16.         android:cacheColorHint="#00000000">
    
17.     </ListView>
    
18. </LinearLayout>

复制代码

完 成了layout和样式文件的编写，接下来就是把dialogStyles2.xml样式文件和dialog2.xml的列表layout用起来，当点击 id为iconSelectBtn的ImageButton时显示用户选择窗口，在LoginActivity的onCreate方法中添加如下代码：

1. public void onCreate(Bundle savedInstanceState) {
   
2.         super.onCreate(savedInstanceState);
   
3.         setContentView(R.layout.login);
   
4.         
   
5.         LinearLayout layout=(LinearLayout)findViewById(R.id.layout);
   
6.         //背景自动适应
   
7.         AndroidHelper.AutoBackground(this, layout, R.drawable.bg_v, R.drawable.bg_h);
   
8.         
   
9.         ImageButton iconSelectBtn=(ImageButton)findViewById(R.id.iconSelectBtn);
   
10.         iconSelectBtn.setOnClickListener(new OnClickListener(){
    
11.             @Override
    
12.             public void onClick(View v) {
    
13.                 View diaView=View.inflate(LoginActivity.this, R.layout.dialog2, null);
    
14.                 dialog=new Dialog(LoginActivity.this,R.style.dialog2);
    
15.                 dialog.setContentView(diaView);
    
16.                 dialog.show();
    
17.                
    
18.                 ......
    
19.             }
    
20.             
    
21.         });

复制代码

到这里登录的UI部分就实现的差不多了，剩下的都是一些功能部分代码用来实现从sqlite中账号列表的获取，以及点击选择等交互操作等，这些在下一篇中来继续的讲。