Android开发:抄袭微博布局总结

西木 2011-12-24

别人的好的东西,就应该拿过来借鉴,并改进,我想这就是拿来主义 

我画图不好,其实我很想用画图的方式来说明一切,因为通俗简单的就是最好的 

首先是思维导图...这个思维导图,因为只能看界面,得不到源代码,所以通过画图的方式来分析界面以及功能 

Android开发:抄袭微博布局总结

这是主页的xml ,相信明眼人一看就知道,这是全屏幕适配的. 来自沈大海的微博教学以及 农民伯伯的 博客分析新浪官方微博布局

Android开发:抄袭微博布局总结

粉红色分为固定像素的顶部条以及底部Tab菜单

顶部只有RelativeLayout构成,可以添加标题,各种小提示..

底部则为Tab选项卡,为不同的Activity切换

然后中间部分整体为黄色部分,也就是动态改变刷新各种数据的Layout

然后又按比例细分为 [蓝色红色] 以及 [浅蓝色],他们占相应比例充满父类

深蓝和红色为同一Layout,红色宽度为fill_parent,高度为wrap_content,

为每个不同的Activity添加进不同的头部item奠定自由的基础

而深蓝则高度宽度都为fill_parent,与红色layout一起充满父类,

蓝色可以添加listView或者添加GridView来现实微博列表或者是用户列表,用过pad版的微博的人应该都会知道

正题逻辑分为BossActivity 掌管所有显示layout,然后的Activity有搜索,我的主页,信息,@,....

它们都不需要任何布局,只需要合理的调用生命周期,来刷新数据往Boss里面的深蓝色部分刷新

红色部分则每个子Activity<搜索,我的主页,信息,@,...>都是对应不一样的 可以用LayoutInflater来加载...

浅蓝色部分,则为衍生的三个Activity的装载layout 哪三个,上图很清晰 分别是微博正文,用户信息,以及话题详情

那点击深蓝色部分的item时候该响应加载哪个Activity?这就有你来指挥了.

难点在于...用户信息Activity还要再看用户信息,再看某个用户信息,再看微博正文,再看某用户的微博...

这三个Activity都是可以复用的.思维导图也可以明显地看出有一个循环

这个想法是由我定下的,但是我想写代码过程中 肯定会遇到种种细节上的困难...

还有这样的想法,如果有人有好的建议或者意见的话 一定要提出来

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TabHost  
  3.     xmlns:Android="http://schemas.android.com/apk/res/android"  
  4.     android:orientation="vertical"  
  5.     android:gravity="center"  
  6.     android:layout_width="fill_parent"  
  7.     android:layout_height="fill_parent"  
  8.     android:id="@+id/@android:id/tabhost"  
  9.     android:background="@drawable/myweibo_boss_bg">  
  10.     <RelativeLayout  
  11.         android:layout_width="fill_parent"  
  12.         android:layout_height="fill_parent"  
  13.         android:orientation="vertical">  
  14.         <!-- top横条  -->  
  15.         <RelativeLayout  
  16.             android:background="@drawable/top3"  
  17.             android:layout_width="fill_parent"  
  18.             android:layout_height="41dip"  
  19.             android:id="@+id/layout_weibo_boss_top"></RelativeLayout>  
  20.         <RelativeLayout  
  21.             android:layout_centerInParent="true"  
  22.             android:layout_below="@+id/layout_weibo_boss_top"  
  23.             android:layout_above="@+id/layout_weibo_boss_bottom"  
  24.             android:layout_width="fill_parent"  
  25.             android:layout_height="fill_parent"  
  26.             android:id="@+id/layout_weibo_boss_middle_msg"></RelativeLayout>  
  27.         <LinearLayout  
  28.             android:layout_below="@+id/layout_weibo_boss_top"  
  29.             android:layout_above="@+id/layout_weibo_boss_bottom"  
  30.             android:id="@+id/layout_weibo_boss_middle"  
  31.             android:orientation="horizontal"  
  32.             android:layout_width="fill_parent"  
  33.             android:layout_height="fill_parent">  
  34.             <LinearLayout  
  35.                 android:layout_weight="1.0"  
  36.                 android:orientation="vertical"  
  37.                 android:layout_width="fill_parent"  
  38.                 android:layout_height="fill_parent"  
  39.                 android:id="@+id/weiboBoss_LeftLayout"  
  40.                 android:background="@drawable/weibo_list_bg">  
  41.                 <!-- listView头上那堆View  -->  
  42.                 <RelativeLayout  
  43.                     android:background="@drawable/weibo_boss_topitems_bg"  
  44.                     android:layout_width="fill_parent"  
  45.                     android:layout_height="wrap_content"  
  46.                     android:id="@+id/topItem_of_weiboBoss_LeftLayout">  
  47.                 </RelativeLayout>  
  48.                 <!-- ListView或者GridView的layout  -->  
  49.                 <RelativeLayout  
  50.                     android:layout_width="fill_parent"  
  51.                     android:layout_height="fill_parent"  
  52.                     android:id="@+id/list_of_weiboBoss_LeftLayout">  
  53.                 </RelativeLayout>  
  54.             </LinearLayout>  
  55.             <!-- Boss右边的详情layout,可以是微博详情或者是用户详情 -->  
  56.             <RelativeLayout  
  57.                 android:layout_weight="1.0"  
  58.                 android:layout_width="fill_parent"  
  59.                 android:layout_height="fill_parent"  
  60.                 android:id="@+id/weiboBoss_RightLayout"></RelativeLayout>  
  61.         </LinearLayout>  
  62.         <FrameLayout  
  63.             android:layout_width="fill_parent"  
  64.             android:layout_height="0.0dip"  
  65.             android:layout_weight="1.0"  
  66.             android:id="@android:id/tabcontent">  
  67.         </FrameLayout>  
  68.         <TabWidget  
  69.             android:layout_width="fill_parent"  
  70.             android:layout_height="0.0dip"  
  71.             android:layout_weight="0.0"  
  72.             android:visibility="gone"  
  73.             android:id="@android:id/tabs"></TabWidget>  
  74.         <!-- 底部横条以及RadioButton  -->  
  75.         <RelativeLayout  
  76.             android:layout_alignParentBottom="true"  
  77.             android:layout_width="fill_parent"  
  78.             android:layout_height="57dip"  
  79.             android:background="@drawable/formlist_bottom_btn"  
  80.             android:id="@+id/layout_weibo_boss_bottom">  
  81.             <RadioGroup  
  82.                 android:layout_width="wrap_content"  
  83.                 android:layout_height="57dip"  
  84.                 android:orientation="horizontal"  
  85.                 android:gravity="center_vertical"  
  86.                 android:layout_gravity="bottom"  
  87.                 android:id="@+id/boss_radio">  
  88.                 <RadioButton  
  89.                     android:drawableTop="@drawable/radio_newstyle_boss_home"  
  90.                     android:checked="true"  
  91.                     android:id="@+id/radio_button0"  
  92.                     android:layout_marginTop="2.0dip"  
  93.                     style="@style/boss_tab_bottom">  
  94.                 </RadioButton>  
  95.                 <RadioButton  
  96.                     android:drawableTop="@drawable/radio_newstyle_boss_search"  
  97.                     android:id="@+id/radio_button1"  
  98.                     android:layout_marginTop="2.0dip"  
  99.                     style="@style/boss_tab_bottom" />  
  100.                 <RadioButton  
  101.                     android:drawableTop="@drawable/radio_newstyle_boss_myweibo"  
  102.                     android:id="@+id/radio_button2"  
  103.                     android:layout_marginTop="2.0dip"  
  104.                     style="@style/boss_tab_bottom" />  
  105.                 <RadioButton  
  106.                     android:drawableTop="@drawable/radio_newstyle_boss_reply"  
  107.                     android:id="@+id/radio_button3"  
  108.                     android:layout_marginTop="2.0dip"  
  109.                     style="@style/boss_tab_bottom" />  
  110.                 <RadioButton  
  111.                     android:drawableTop="@drawable/radio_newstyle_boss_atme"  
  112.                     android:id="@+id/radio_button4"  
  113.                     android:layout_marginTop="2.0dip"  
  114.                     style="@style/boss_tab_bottom" />  
  115.                 <RadioButton  
  116.                     android:drawableTop="@drawable/radio_newstyle_boss_neweibo"  
  117.                     android:id="@+id/radio_button5"  
  118.                     android:layout_marginTop="2.0dip"  
  119.                     style="@style/boss_tab_bottom" />  
  120.             </RadioGroup>  
  121.         </RelativeLayout>  
  122.     </RelativeLayout>  
  123. </TabHost>  

后面再记录每个小节出现的问题和解决方案。

相关推荐