android开发我的新浪微博客户端-阅读微博UI篇(6.1)

时间:2021-04-08 04:50:16

android开发我的新浪微博客户端-阅读微博UI篇(6.1) 

     上一篇完成了微博列表的功能,本篇接着做预读微博的功能,本篇主要讲讲UI部分的实现,最终实现的效果如上图所示。整个显示页面从上往下分为四部分,第一部分顶部工具条、第二部分作者头像和名称、第三部分微博正文、第四部分功能按钮区。

新建名为ViewActivity.java作为阅读微博的页面,再res/layout目录下新建名为view.xml的Layout,代码如下:

android开发我的新浪微博客户端-阅读微博UI篇(6.1)android开发我的新浪微博客户端-阅读微博UI篇(6.1)代码
<? 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:text
="阅读微博"
  android:textSize
="16px" >
  
</ TextView >
  
< ImageButton
  
android:id ="@+id/returnBtn"
  android:layout_width
="wrap_content"
  android:layout_height
="wrap_content"
  android:layout_toLeftOf
="@+id/homeBtn"
  android:background
="@drawable/bnt_return_selector" >
  
</ ImageButton >
  
< ImageButton
  
android:id ="@+id/homeBtn"
  android:layout_width
="wrap_content"
  android:layout_height
="wrap_content"
  android:layout_alignParentRight
="true"
  android:layout_marginLeft
="12px"
  android:background
="@drawable/btn_home_selector" >
  
</ ImageButton >
  
</ RelativeLayout >
  
< LinearLayout
  
android:layout_width ="fill_parent"
  android:layout_height
="wrap_content"
  android:background
="@drawable/hr" >
  
</ LinearLayout >
  
  
< RelativeLayout
  
android:id ="@+id/user_bg"
  android:layout_width
="fill_parent"
  android:layout_height
="78px"
  android:paddingTop
="8px"
  android:paddingLeft
="15px"
  android:background
="@drawable/u_bg_v" >
      
< ImageView
      
android:id ="@+id/user_icon"
      android:layout_width
="wrap_content"
      android:layout_height
="wrap_content"
      android:layout_alignParentLeft
="true"
      android:src
="@drawable/usericon" >
      
</ ImageView >
      
< TextView
      
android:id ="@+id/user_name"
      android:layout_width
="wrap_content"
      android:layout_height
="wrap_content"
      android:layout_toRightOf
="@+id/user_icon"
      android:layout_marginLeft
="10px"
      android:layout_marginTop
="18px"
      android:textColor
="#000000" >
      
</ TextView >
      
< ImageView
      
android:layout_width ="wrap_content"
      android:layout_height
="wrap_content"
      android:layout_alignParentRight
="true"
      android:layout_marginRight
="5px"
      android:layout_marginTop
="10px"
      android:src
="@drawable/sjjt" >
      
</ ImageView >
  
</ RelativeLayout >
  
< RelativeLayout
    
android:layout_width ="fill_parent"
    android:layout_height
="fill_parent" >
        
< ScrollView
        
android:layout_width ="fill_parent"
        android:layout_height
="fill_parent"
        android:paddingLeft
="17px"
        android:paddingRight
="17px"
        android:paddingBottom
="5px"
        android:layout_above
="@+id/menu_layout" >
        
< LinearLayout
        
android:layout_width ="fill_parent"
        android:layout_height
="fill_parent"
        android:orientation
="vertical" >
            
< TextView
            
android:id ="@+id/text"
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content"
            android:textColor
="#000000"
            android:textSize
="15px" >
            
</ TextView >
            
< ImageView
            
android:id ="@+id/pic"
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content" >
            
</ ImageView >
        
</ LinearLayout >
        
</ ScrollView >
        
        
< LinearLayout
        
android:id ="@+id/loadingLayout"
        android:layout_width
="wrap_content"
        android:layout_height
="wrap_content"
        android:orientation
="vertical"
        android:visibility
="gone"
        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 >


        
< TableLayout
        
android:id ="@+id/menu_layout"
        android:layout_width
="fill_parent"
        android:layout_height
="wrap_content"
        android:gravity
="center"
        android:layout_alignParentBottom
="true"
        android:layout_marginBottom
="5px" >
            
< TableRow
            
android:layout_width ="wrap_content"
            android:layout_height
="wrap_content"
            android:gravity
="center" >
            
< Button
            
android:id ="@+id/btn_gz"
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content"
            android:textColor
="#3882b8"
            android:textSize
="15px"
            android:text
="        关注(1231)"
            android:background
="@drawable/lt_selector" >
            
</ Button >
            
< Button
            
android:id ="@+id/btn_pl"
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content"
            android:textColor
="#3882b8"
            android:textSize
="15px"
            android:text
="        评论(31)"
            android:background
="@drawable/rt_selector" >
            
</ Button >
            
</ TableRow >
            
< TableRow
            
android:layout_width ="wrap_content"
            android:layout_height
="wrap_content"
            android:gravity
="center" >
            
< Button
            
android:layout_width ="wrap_content"
            android:layout_height
="wrap_content"
            android:textColor
="#3882b8"
            android:textSize
="15px"
            android:layout_gravity
="left"
            android:text
="刷新"
            android:background
="@drawable/lb_selector" >
            
</ Button >
            
< Button
            
android:layout_width ="wrap_content"
            android:layout_height
="wrap_content"
            android:textColor
="#3882b8"
            android:textSize
="15px"
            android:text
="收藏"
            android:background
="@drawable/rb_selector" >
            
</ Button >
            
</ TableRow >
            
        
</ TableLayout >

        
  
</ RelativeLayout >
</ LinearLayout >

 

      上面这个布局实现起来并不复杂, 主要看看功能按钮区的4个按钮的点击上去的切换背景的效果,以关注按钮为例子看这行设置,android:background="@drawable/lt_selector",在res/drawable-mdpi目录下新建名为lt_selector.xml用来实现点击上去切换图片的效果,具体代码如下:

android开发我的新浪微博客户端-阅读微博UI篇(6.1)android开发我的新浪微博客户端-阅读微博UI篇(6.1)代码
<? xml version="1.0" encoding="UTF-8" ?>   
< selector  xmlns:android ="http://schemas.android.com/apk/res/android" >     
    
< item  android:state_focused ="false"  android:state_selected ="false"  android:state_pressed ="false"  android:drawable ="@drawable/tbtn_1"   />    
    
< item  android:state_pressed ="true"  android:drawable ="@drawable/tbtn_h_1"   />   
</ selector >   

 

      本篇虽然看layout文件非常的长,其实仔细看看非常的简单了没有什么难和复杂的了,就是按照前面的经验控制好图片以及控件的显示位置和样式即可,本篇中用了一个ScrollView控件这个是前面没有用到过的,主要是用来当微博的内容超出显示区域的时候出现滚动条用的这个非常容易使用,所以就简单写一下到此结束了,请继续关注下一篇阅读微博的功能篇。