android开发我的新浪微博客户端-用户首页面UI篇(5.1)

 

      在前篇完成了用户登录功能后开始用户首页的开发,用户的首页主要的内容是当前登录用户关注的微博列表,本篇先来讲讲UI的实现,效果如上图,整个页面分为上、中、下三部分,上面部分是工具条,显示当前登录用户的昵称以及写微博、刷新两个功能按钮;中间部分是当前用户关注的最新微博列表,下面部分是功能切换栏,用来进行各个功能之间的切换。

      首先新建名为HomeActivity.java的Activity作为用户首页,然后在res/layout目录下新建名为home.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">
  
  
<RelativeLayout
  
android:layout_width="fill_parent"
  android:layout_height
="wrap_content"
  android:layout_margin
="3px">
  
<ImageView
  
android:layout_width="wrap_content"
  android:layout_height
="wrap_content"
  android:src
="@drawable/logo_ss">
  
</ImageView>
  
<TextView
  
android:id="@+id/showName"
  android:layout_width
="wrap_content"
  android:layout_height
="wrap_content"
  android:layout_centerInParent
="true"
  android:textColor
="#343434"
  android:textSize
="15px">
  
</TextView>
  
<ImageButton
  
android:id="@+id/writeBtn"
  android:layout_width
="wrap_content"
  android:layout_height
="wrap_content"
  android:layout_toLeftOf
="@+id/refreshBtn"
  android:background
="@drawable/btn_write_selector">
  
</ImageButton>
  
<ImageButton
  
android:id="@+id/refreshBtn"
  android:layout_width
="wrap_content"
  android:layout_height
="wrap_content"
  android:layout_alignParentRight
="true"
  android:layout_marginLeft
="12px"
  android:background
="@drawable/btn_refresh_selector">
  
</ImageButton>
  
</RelativeLayout>
  
  
<LinearLayout
  
android:layout_width="fill_parent"
  android:layout_height
="wrap_content"
  android:background
="@drawable/hr">
  
</LinearLayout>

  
<RelativeLayout
    
android:layout_width="fill_parent"
    android:layout_height
="fill_parent">
        
        
<ListView
            
android:id="@+id/Msglist"
            android:layout_width
="fill_parent"
            android:layout_height
="match_parent"
            android:divider
="@drawable/divider"
            android:dividerHeight
="2px"
            android:layout_margin
="0px"
            android:background
="#BBFFFFFF"
            android:cacheColorHint
="#00000000"
            android:layout_above
="@+id/toolbarLayout"
            android:fastScrollEnabled
="true"  
            android:focusable
="true">
        
</ListView>
        
        
<LinearLayout
        
android:id="@+id/loadingLayout"
        android:layout_width
="wrap_content"
        android:layout_height
="wrap_content"
        android:orientation
="vertical"
        android:visibility
="invisible"
        android:layout_centerInParent
="true">
            
<ProgressBar
            
android:id="@+id/loading"
            android:layout_width
="31px"
            android:layout_height
="31px"
            android:layout_gravity
="center"
            style
="@style/progressStyle">
            
</ProgressBar>
            
<TextView
            
android:layout_width="wrap_content"
            android:layout_height
="wrap_content"
            android:text
="正在载入"
            android:textSize
="12px"
            android:textColor
="#9c9c9c"
            android:layout_gravity
="center"
            android:layout_below
="@+id/loading">
            
</TextView>
        
</LinearLayout>
        
        
        
<LinearLayout
        
android:id="@+id/toolbarLayout"
        android:layout_width
="fill_parent"
        android:layout_height
="44dip"
        android:layout_alignParentBottom
="true">
        
</LinearLayout>
  
</RelativeLayout>
</LinearLayout>

 

       这个布局首先是一个竖直的根LinearLayout,在这个根LinearLayout里面分别是两个RelativeLayout, 第一个RelativeLayout 用来显示页面的工具条,第二个RelativeLayout用来显示列表以及底部的功能栏,特别主要在这第二个RelativeLayout中有一个id为loadingLayout的LinearLayout是用来显示数据载入中的动画,它的android:visibility属性为invisible(也可以设置成gone,区别:invisible这个View在ViewGroupt中仍保留它的位置,不重新layout 
gone>不可见,但这个View在ViewGroupt中不保留位置,重新layout,那后面的view就会取代他的位置。 ),也就是一开始不显示的意思,接下来看看

<ProgressBar
android:id="@+id/loading"
        android:layout_width="31px"
        android:layout_height="31px"
android:layout_gravity="center"
style="@style/progressStyle">
</ProgressBar>

 

      这个ProgressBar控件就是用来显示动画用的,关键就是 style="@style/progressStyle",在res/values目录下新建名为loadingstyles.xml,内容如下:
代码
<?xml version="1.0" encoding="UTF-8"?>
<resources>
    
<style name="progressStyle" width="38" height="38" parent="@android:style/Widget.ProgressBar.Small">
        
<item name="android:indeterminateDrawable">@anim/loading</item>
    
</style>
</resources>

 

      接着准备好r1.png - r8.png,八张不同的小图片分别代表每旋转45度图片,八张刚好是360度。把这些图片添加到res/drawable-mdpi目录中。然后在res/anim目录下新建名为loading.xml动画文件,内容如下:

代码
<?xml version="1.0" encoding="UTF-8"?>
<animation-list android:oneshot="false"
  xmlns:android
="http://schemas.android.com/apk/res/android">
    
<item android:duration="200" android:drawable="@drawable/r1" />
    
<item android:duration="200" android:drawable="@drawable/r2" />
    
<item android:duration="200" android:drawable="@drawable/r3" />
    
<item android:duration="200" android:drawable="@drawable/r4" />
    
<item android:duration="200" android:drawable="@drawable/r5" />
    
<item android:duration="200" android:drawable="@drawable/r6" />
    
<item android:duration="200" android:drawable="@drawable/r7" />
    
<item android:duration="200" android:drawable="@drawable/r8" />
</animation-list>

 

    关于Android播放动画实现我是参考http://terryblog.blog.51cto.com/1764499/388226 

    本篇到这里就结束了,下一篇继续讲用户首页的功能实现,请关注。 

 

posted @ 2011-02-15 20:59  水的右边  阅读(17352)  评论(11编辑  收藏  举报