Chinaunix首页 | 论坛 | 博客
  • 博客访问: 51905
  • 博文数量: 18
  • 博客积分: 454
  • 博客等级: 下士
  • 技术积分: 165
  • 用 户 组: 普通用户
  • 注册时间: 2012-01-08 22:40
文章分类
文章存档

2012年(18)

最近访客

分类: 嵌入式

2012-01-08 23:14:14

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

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


  1.   xmlns:=""
  2.   android:id="@+id/layout"
  3.   android:orientation="vertical"
  4.   android:layout_width="fill_parent"
  5.   android:layout_height="fill_parent">
  6.   
  7.   android:layout_width="fill_parent"
  8.   android:layout_height="wrap_content"
  9.   android:layout_margin="3px">
  10.   
  11.   android:layout_width="wrap_content"
  12.   android:layout_height="wrap_content"
  13.   android:src="@drawable/logo_ss">
  14.   
  15.   
  16.   android:id="@+id/showName"
  17.   android:layout_width="wrap_content"
  18.   android:layout_height="wrap_content"
  19.   android:layout_centerInParent="true"
  20.   android:textColor="#343434"
  21.   android:text="阅读微博"
  22.   android:textSize="16px">
  23.   
  24.   
  25.   android:id="@+id/returnBtn"
  26.   android:layout_width="wrap_content"
  27.   android:layout_height="wrap_content"
  28.   android:layout_toLeftOf="@+id/homeBtn"
  29.   android:background="@drawable/bnt_return_selector">
  30.   
  31.   
  32.   android:id="@+id/homeBtn"
  33.   android:layout_width="wrap_content"
  34.   android:layout_height="wrap_content"
  35.   android:layout_alignParentRight="true"
  36.   android:layout_marginLeft="12px"
  37.   android:background="@drawable/btn_home_selector">
  38.   
  39.   
  40.   
  41.   android:layout_width="fill_parent"
  42.   android:layout_height="wrap_content"
  43.   android:background="@drawable/hr">
  44.   
  45.   
  46.   
  47.   android:id="@+id/user_bg"
  48.   android:layout_width="fill_parent"
  49.   android:layout_height="78px"
  50.   android:paddingTop="8px"
  51.   android:paddingLeft="15px"
  52.   android:background="@drawable/u_bg_v">
  53.       
  54.       android:id="@+id/user_icon"
  55.       android:layout_width="wrap_content"
  56.       android:layout_height="wrap_content"
  57.       android:layout_alignParentLeft="true"
  58.       android:src="@drawable/usericon">
  59.       
  60.       
  61.       android:id="@+id/user_name"
  62.       android:layout_width="wrap_content"
  63.       android:layout_height="wrap_content"
  64.       android:layout_toRightOf="@+id/user_icon"
  65.       android:layout_marginLeft="10px"
  66.       android:layout_marginTop="18px"
  67.       android:textColor="#000000">
  68.       
  69.       
  70.       android:layout_width="wrap_content"
  71.       android:layout_height="wrap_content"
  72.       android:layout_alignParentRight="true"
  73.       android:layout_marginRight="5px"
  74.       android:layout_marginTop="10px"
  75.       android:src="@drawable/sjjt">
  76.       
  77.   
  78.   
  79.     android:layout_width="fill_parent"
  80.     android:layout_height="fill_parent">
  81.         
  82.         android:layout_width="fill_parent"
  83.         android:layout_height="fill_parent"
  84.         android:paddingLeft="17px"
  85.         android:paddingRight="17px"
  86.         android:paddingBottom="5px"
  87.         android:layout_above="@+id/menu_layout">
  88.         
  89.         android:layout_width="fill_parent"
  90.         android:layout_height="fill_parent"
  91.         android:orientation="vertical">
  92.             
  93.             android:id="@+id/text"
  94.             android:layout_width="wrap_content"
  95.             android:layout_height="wrap_content"
  96.             android:textColor="#000000"
  97.             android:textSize="15px">
  98.             
  99.             
  100.             android:id="@+id/pic"
  101.             android:layout_width="wrap_content"
  102.             android:layout_height="wrap_content">
  103.             
  104.         
  105.         
  106.         
  107.         
  108.         android:id="@+id/loadingLayout"
  109.         android:layout_width="wrap_content"
  110.         android:layout_height="wrap_content"
  111.         android:orientation="vertical"
  112.         android:visibility="gone"
  113.         android:layout_centerInParent="true">
  114.             
  115.             android:id="@+id/loading"
  116.             android:layout_width="31px"
  117.             android:layout_height="31px"
  118.             android:layout_gravity="center"
  119.             style="@style/progressStyle">
  120.             
  121.             
  122.             android:layout_width="wrap_content"
  123.             android:layout_height="wrap_content"
  124.             android:text="正在载入"
  125.             android:textSize="12px"
  126.             android:textColor="#9c9c9c"
  127.             android:layout_gravity="center"
  128.             android:layout_below="@+id/loading">
  129.             
  130.         


  131.         
  132.         android:id="@+id/menu_layout"
  133.         android:layout_width="fill_parent"
  134.         android:layout_height="wrap_content"
  135.         android:gravity="center"
  136.         android:layout_alignParentBottom="true"
  137.         android:layout_marginBottom="5px">
  138.             
  139.             android:layout_width="wrap_content"
  140.             android:layout_height="wrap_content"
  141.             android:gravity="center">
  142.             
  143.             android:id="@+id/btn_gz"
  144.             android:layout_width="wrap_content"
  145.             android:layout_height="wrap_content"
  146.             android:textColor="#3882b8"
  147.             android:textSize="15px"
  148.             android:text="        关注(1231)"
  149.             android:background="@drawable/lt_selector">
  150.             
  151.             
  152.             android:id="@+id/btn_pl"
  153.             android:layout_width="wrap_content"
  154.             android:layout_height="wrap_content"
  155.             android:textColor="#3882b8"
  156.             android:textSize="15px"
  157.             android:text="        评论(31)"
  158.             android:background="@drawable/rt_selector">
  159.             
  160.             
  161.             
  162.             android:layout_width="wrap_content"
  163.             android:layout_height="wrap_content"
  164.             android:gravity="center">
  165.             
  166.             android:layout_width="wrap_content"
  167.             android:layout_height="wrap_content"
  168.             android:textColor="#3882b8"
  169.             android:textSize="15px"
  170.             android:layout_gravity="left"
  171.             android:text="刷新"
  172.             android:background="@drawable/lb_selector">
  173.             
  174.             
  175.             android:layout_width="wrap_content"
  176.             android:layout_height="wrap_content"
  177.             android:textColor="#3882b8"
  178.             android:textSize="15px"
  179.             android:text="收藏"
  180.             android:background="@drawable/rb_selector">
  181.             
  182.             
  183.             
  184.         

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

  1.   
  2.    
  3.        
  4.       
  5.   
复制代码
本篇虽然看layout文件非常的长,其实仔细看看非常的简单了没有什么难和复杂的了,就是按照前面的经验控制好图片以及控件的显示位置和样式即可,本篇中用了一个ScrollView控件这个是前面没有用到过的,主要是用来当微博的内容超出显示区域的时候出现滚动条用的这个非常容易使用,所以就简单写一下到此结束了,请继续关注下一篇阅读微博的功能篇。
阅读(882) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~