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

      

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

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

代码

xml version&＃61;"1.0" encoding&＃61;"utf-8"?>
<LinearLayout
  xmlns:android&＃61;"http://schemas.android.com/apk/res/android"
  android:id&＃61;"&＃64;&＃43;id/layout"
  android:orientation&＃61;"vertical"
  android:layout_width&＃61;"fill_parent"
  android:layout_height&＃61;"fill_parent">
  <ImageView
    android:layout_width&＃61;"wrap_content"
    android:layout_height&＃61;"wrap_content"
    android:src&＃61;"&＃64;drawable/logo_s"
    android:layout_marginTop&＃61;"5dip"
    android:layout_marginLeft&＃61;"5dip">
  ImageView>
  <RelativeLayout
    android:layout_width&＃61;"fill_parent"
    android:layout_height&＃61;"fill_parent">
        <RelativeLayout
            android:id&＃61;"&＃64;&＃43;id/iconBtn"
            android:layout_width&＃61;"90px"
            android:layout_height&＃61;"80px"
            android:background&＃61;"&＃64;drawable/icon_selector"
            android:layout_above&＃61;"&＃64;&＃43;id/selectLayout"
            android:layout_centerHorizontal&＃61;"true"
            android:layout_marginBottom&＃61;"20dip">
                <ImageView
                android:id&＃61;"&＃64;&＃43;id/icon"
                android:layout_width&＃61;"wrap_content"
                android:layout_height&＃61;"wrap_content"
                android:layout_centerInParent&＃61;"true">
                ImageView>
        RelativeLayout>
        
        <RelativeLayout
        android:id&＃61;"&＃64;&＃43;id/selectLayout"
        android:layout_width&＃61;"wrap_content"
        android:layout_height&＃61;"wrap_content"
        android:layout_centerInParent&＃61;"true">
            <EditText
            android:id&＃61;"&＃64;&＃43;id/iconSelect"
            android:layout_width&＃61;"200px"
            android:layout_height&＃61;"wrap_content" 
            android:maxLength&＃61;"10" 
            android:paddingLeft&＃61;"20px"
            android:editable&＃61;"false"
            android:enabled&＃61;"false"
            android:textSize&＃61;"13px"
            android:background&＃61;"&＃64;drawable/input_over" >
            EditText>
            <ImageButton 
            android:id&＃61;"&＃64;&＃43;id/iconSelectBtn"
            android:layout_width&＃61;"wrap_content"
            android:layout_height&＃61;"wrap_content" 
            android:layout_marginRight&＃61;"1.0dip"
            android:layout_alignTop&＃61;"&＃64;&＃43;id/iconSelect"
            android:layout_alignRight&＃61;"&＃64;&＃43;id/iconSelect"
            android:layout_alignBottom&＃61;"&＃64;&＃43;id/iconSelect"
            android:background&＃61;"&＃64;drawable/more_selector" >
            ImageButton>
            <ImageButton 
            android:id&＃61;"&＃64;&＃43;id/login"
            android:layout_width&＃61;"40px"
            android:layout_height&＃61;"40px" 
            android:layout_marginLeft&＃61;"5dip"
            android:layout_alignTop&＃61;"&＃64;&＃43;id/iconSelectBtn"
            android:layout_toRightOf&＃61;"&＃64;&＃43;id/iconSelectBtn"
            android:layout_alignBottom&＃61;"&＃64;&＃43;id/iconSelectBtn"
            android:background&＃61;"&＃64;drawable/btn_in_selector" >
            ImageButton>
        RelativeLayout>
        
        <RelativeLayout
        android:layout_width&＃61;"fill_parent"
        android:layout_height&＃61;"44dip"
        android:layout_alignParentBottom&＃61;"true"
        android:background&＃61;"#BB768e95">
            <LinearLayout
            android:id&＃61;"&＃64;&＃43;id/addLayout"
            android:layout_width&＃61;"wrap_content"
            android:layout_height&＃61;"wrap_content"
            android:orientation&＃61;"vertical"
            android:layout_alignParentLeft&＃61;"true"
            android:gravity&＃61;"center"
            android:layout_marginTop&＃61;"3px">
            <ImageButton
            android:id&＃61;"&＃64;&＃43;id/addIcon"
            android:layout_width&＃61;"wrap_content"
            android:layout_height&＃61;"wrap_content"
            android:background&＃61;"&＃64;drawable/add_selector">
            ImageButton>
            <TextView
            android:layout_width&＃61;"wrap_content"
            android:layout_height&＃61;"wrap_content"
            android:textColor&＃61;"#ffffff"
            android:textSize&＃61;"12px"
            android:text&＃61;"添加账号">
            TextView>
            LinearLayout>
            <LinearLayout
            android:id&＃61;"&＃64;&＃43;id/exitLayout"
            android:layout_width&＃61;"wrap_content"
            android:layout_height&＃61;"wrap_content"
            android:orientation&＃61;"vertical"
            android:layout_centerInParent&＃61;"true"
            android:gravity&＃61;"center"
            android:layout_marginTop&＃61;"3px">
            <ImageButton
            android:id&＃61;"&＃64;&＃43;id/exitIcon"
            android:layout_width&＃61;"wrap_content"
            android:layout_height&＃61;"wrap_content"
            android:background&＃61;"&＃64;drawable/exit_selector">
            ImageButton>
            <TextView
            android:layout_width&＃61;"wrap_content"
            android:layout_height&＃61;"wrap_content"
            android:textColor&＃61;"#ffffff"
            android:textSize&＃61;"12px"
            android:text&＃61;"退出软件">
            TextView>
            LinearLayout>
            <LinearLayout
            android:id&＃61;"&＃64;&＃43;id/delLayout"
            android:layout_width&＃61;"wrap_content"
            android:layout_height&＃61;"wrap_content"
            android:orientation&＃61;"vertical"
            android:layout_alignParentRight&＃61;"true"
            android:gravity&＃61;"center"
            android:layout_marginTop&＃61;"3px">
            <ImageButton
            android:id&＃61;"&＃64;&＃43;id/delIcon"
            android:layout_width&＃61;"wrap_content"
            android:layout_height&＃61;"wrap_content"
            android:background&＃61;"&＃64;drawable/del_selector">
            ImageButton>
            <TextView
            android:layout_width&＃61;"wrap_content"
            android:layout_height&＃61;"wrap_content"
            android:textColor&＃61;"#ffffff"
            android:textSize&＃61;"12px"
            android:text&＃61;"删除账号">
            TextView>
            LinearLayout>
        RelativeLayout>
  RelativeLayout>
LinearLayout>

      正对上面的login.xml的layout进行一下说明&＃xff0c;背景部分前面已经讲过了这里也就不重复。

      底部菜单实现&＃xff0c;原本我是采用GridView实现的非常的方便但是后来由于显示位置不好控制改成了用RelativeLayout和LinearLayout嵌套的方式&＃xff0c;实现的比较土但是达到了显示需求&＃xff0c;首先是一个最外面的RelativeLayout目的是用来实现底部对齐显示&＃xff0c;并且把这个RelativeLayout的背景设置为浅蓝色半透明的效果&＃xff0c;关键这2行&＃xff1a;android:layout_alignParentBottom&＃61;"true"和android:background&＃61;"#BB768e95"。然后是在RelativeLayout内部添加3个LinearLayout分别是用来显示添加账号、退出软件、删除账号3个功能按钮菜单&＃xff0c;并且分别设置为左对齐、居中对齐、右对齐&＃xff0c;3个LinearLayout都设置为垂直布局android:orientation&＃61;"vertical"&＃xff0c;然后每LinearLayout添加相应的图片和文字。

     用户选择以及头像显示部分&＃xff0c;这块分成3小块&＃xff0c;用来显示用户头像的ImageView、用来显示用户名字并且点击可以出现选择列表的EditText、用来点击进入当前选择用户首页的功能按钮ImageButton&＃xff0c;这3小块的布局实现也是采用elativeLayout和LinearLayout相互嵌套配合的方式实现的具体参考login.xml。这里重点说说这个账号选择列表弹出窗口的实现&＃xff0c;当点击下拉箭头按钮的时候弹出并显示&＃xff0c;这个是用Dialog控件实现&＃xff0c;首先准备好圆角的半透明背景图mask_bg.png然后添加到res/drawable-mdpi文件夹下&＃xff0c;接着自定义一个Dialog样式文件&＃xff0c;在res/values目录下新建名为dialogStyles2.xml的resources文件&＃xff0c;在用户授权验证页面的时候我们也自定义过类似的Dialog的样式&＃xff0c;具体解释可以参考前面的户授权验证页面功能&＃xff0c;内容如下&＃xff1a;

 代码

xml version&＃61;"1.0" encoding&＃61;"utf-8"?>
<resources>
    <style name&＃61;"dialog2" parent&＃61;"&＃64;android:style/Theme.Dialog">
        <item name&＃61;"android:windowFrame">&＃64;nullitem>
        <item name&＃61;"android:windowIsFloating">trueitem>
        <item name&＃61;"android:windowIsTranslucent">falseitem>
        <item name&＃61;"android:windowNoTitle">trueitem>
        <item name&＃61;"android:windowBackground">&＃64;drawable/mask_bgitem>
        <item name&＃61;"android:backgroundDimEnabled">trueitem>
    style>
resources>

接下来还需要定义选择列表的layout&＃xff0c;新建名为dialog2.xml的layout文件&＃xff0c;内容如下&＃xff1a;

 代码

xml version&＃61;"1.0" encoding&＃61;"utf-8"?>
<LinearLayout
  xmlns:android&＃61;"http://schemas.android.com/apk/res/android"
  android:layout_width&＃61;"wrap_content"
  android:layout_height&＃61;"wrap_content"
  android:orientation&＃61;"vertical"
  android:padding&＃61;"4dip">
  <ListView
        android:id&＃61;"&＃64;&＃43;id/list"
        android:layout_width&＃61;"240px"
        android:layout_height&＃61;"220px"
        android:divider&＃61;"#f1f2f2"
        android:dividerHeight&＃61;"1px"
        android:layout_margin&＃61;"5px"
        android:background&＃61;"#ffffff"
        android:cacheColorHint&＃61;"#00000000">
    ListView>
LinearLayout>

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

代码

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.login);
        
        LinearLayout layout&＃61;(LinearLayout)findViewById(R.id.layout);
        //背景自动适应
        AndroidHelper.AutoBackground(this, layout, R.drawable.bg_v, R.drawable.bg_h);
        
        ImageButton iconSelectBtn&＃61;(ImageButton)findViewById(R.id.iconSelectBtn);
        iconSelectBtn.setOnClickListener(new OnClickListener(){
            &＃64;Override
            public void onClick(View v) {
                View diaView&＃61;View.inflate(LoginActivity.this, R.layout.dialog2, null);
                dialog&＃61;new Dialog(LoginActivity.this,R.style.dialog2);
                dialog.setContentView(diaView);
                dialog.show();
                
                ......
            }
            
        });

 

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

分类: Andr