新浪微博佈局學習——活用RelativeLayout

前言

　　Android佈局中RelativeLayout很是靈活，以前項目使用不多，通常的例子用得都比較呆板。在學習中發現其大量採用了該佈局，這裏"幫"他分享一下一些經典的用法:)
 

 

聲明

　　歡迎轉載，但請保留文章原始出處:)
 

　　農民伯伯： http://over140.blog.51cto.com/

 

系列

　　新浪微博佈局學習——妙用TabHost

 

正文

　　1、效果圖

　　　　格子布局效果：

 

 （圖一）

　居中正在加載的效果：

 

 （圖二）

2、實現代碼

　　　　2.1　　實現 圖一 效果代碼
 

             < RelativeLayout  android:id ="@id/rlDigest"
                android:background ="@drawable/panel_bg"  android:layout_width ="fill_parent"
                android:layout_height ="100.0dip"  android:layout_margin ="10.0dip" >
                 < TextView  android:textSize ="16.0sp"  android:textColor ="#ff7d899d"
                    android:gravity ="center_vertical"  android:id ="@id/tvAddress"
                    android:layout_width ="wrap_content"  android:layout_height ="wrap_content"
                    android:layout_marginLeft ="5.0dip"  android:layout_marginTop ="10.0dip"
                    android:text ="@string/userinfo_address"
                    android:layout_alignParentLeft ="true"
                    android:layout_alignParentTop ="true"   />
                 < TextView  android:textSize ="16.0sp"  android:textColor ="#ff373737"
                    android:id ="@id/tvAddress_content"  android:layout_width ="wrap_content"
                    android:layout_height ="wrap_content"  android:layout_marginLeft ="10.0dip"
                    android:layout_toRightOf ="@id/tvAddress"  android:layout_alignTop ="@id/tvAddress"   />
                 < View  android:id ="@id/vHDivider"  android:background ="@drawable/horizontal_separation_line_repeat"
                    android:layout_width ="fill_parent"  android:layout_height ="1.0dip"
                    android:layout_centerVertical ="true"   />
                 < TextView  android:textSize ="16.0sp"  android:textColor ="#ff7d899d"
                    android:gravity ="center_vertical"  android:id ="@id/tvAccount_info"
                    android:layout_width ="wrap_content"  android:layout_height ="wrap_content"
                    android:text ="@string/account_info"  android:layout_below ="@id/vHDivider"
                    android:layout_alignLeft ="@id/tvAddress"
                    android:layout_alignParentBottom ="true"   />
                 < TextView  android:textSize ="16.0sp"  android:textColor ="#ff373737"
                    android:gravity ="center_vertical"  android:id ="@id/tvAccount_info_content"
                    android:layout_width ="wrap_content"  android:layout_height ="wrap_content"
                    android:layout_marginLeft ="10.0dip"  android:layout_marginBottom ="12.0dip"
                    android:singleLine ="true"  android:layout_toRightOf ="@id/tvAccount_info"
                    android:layout_alignBottom ="@id/tvAccount_info"   />
             </ RelativeLayout >
             < RelativeLayout  android:background ="@drawable/panel_bg"
                android:layout_width ="fill_parent"  android:layout_height ="130.0dip"
                android:layout_margin ="10.0dip" >
                 < View  android:id ="@id/vVDivider1"  android:background ="@drawable/vertical_separation_line_repeat"
                    android:layout_width ="1.0dip"  android:layout_height ="fill_parent"
                    android:layout_centerHorizontal ="true"   />
                 < View  android:id ="@id/vHDivider2"  android:background ="@drawable/horizontal_separation_line_repeat"
                    android:layout_width ="fill_parent"  android:layout_height ="1.0dip"
                    android:layout_centerVertical ="true"   />
                 < RelativeLayout  android:id ="@id/llAttention"
                    android:background ="@drawable/bg_panel_above_left"
                    android:clickable ="true"  android:layout_width ="wrap_content"
                    android:layout_height ="wrap_content"  android:layout_toLeftOf ="@id/vVDivider1"
                    android:layout_above ="@id/vHDivider2"
                    android:layout_alignParentLeft ="true"
                    android:layout_alignParentTop ="true" >
                     < TextView  android:gravity ="center"  android:id ="@id/tvAttention_count"
                        android:layout_width ="fill_parent"  android:layout_height ="wrap_content"
                        android:layout_marginTop ="10.0dip"  android:text ="0"
                        android:layout_centerHorizontal ="true"
                        style ="@style/userinfo_panel_textview_count"   />
                     < TextView  android:gravity ="center"  android:id ="@id/tvAttention"
                        android:layout_width ="fill_parent"  android:layout_height ="wrap_content"
                        android:text ="@string/attention"  android:layout_below ="@id/tvAttention_count"
                        android:layout_centerHorizontal ="true"
                        style ="@style/userinfo_panel_textview_title"   />
                 </ RelativeLayout >
                 < LinearLayout  android:orientation ="vertical"
                    android:id ="@id/rlWeibo"  android:background ="@drawable/bg_panel_above_right"
                    android:clickable ="true"  android:layout_width ="wrap_content"
                    android:layout_height ="wrap_content"  android:layout_toRightOf ="@id/vVDivider1"
                    android:layout_above ="@id/vHDivider2"
                    android:layout_alignParentTop ="true"
                    android:layout_alignParentRight ="true" >
                     < TextView  android:gravity ="center"  android:layout_gravity ="center_horizontal"
                        android:id ="@id/tvWeibo_count"  android:layout_width ="fill_parent"
                        android:layout_height ="wrap_content"  android:layout_marginTop ="10.0dip"
                        android:text ="0"  style ="@style/userinfo_panel_textview_count"   />
                     < TextView  android:gravity ="center"  android:layout_gravity ="center_horizontal"
                        android:id ="@id/tvTopic"  android:layout_width ="fill_parent"
                        android:layout_height ="wrap_content"  android:text ="@string/radio_button_topic"
                        style ="@style/userinfo_panel_textview_title"   />
                 </ LinearLayout >
                 < LinearLayout  android:orientation ="vertical"
                    android:id ="@id/llFans"  android:background ="@drawable/bg_panel_below_left"
                    android:clickable ="true"  android:layout_width ="wrap_content"
                    android:layout_height ="wrap_content"  android:layout_toLeftOf ="@id/vVDivider1"
                    android:layout_below ="@id/vHDivider2"
                    android:layout_alignParentLeft ="true"
                    android:layout_alignParentBottom ="true" >
                     < TextView  android:gravity ="center"  android:layout_gravity ="center_horizontal"
                        android:id ="@id/tvFans_count"  android:layout_width ="fill_parent"
                        android:layout_height ="wrap_content"  android:layout_marginTop ="10.0dip"
                        android:text ="0"  style ="@style/userinfo_panel_textview_count"   />
                     < TextView  android:gravity ="center"  android:layout_gravity ="center_horizontal"
                        android:id ="@id/tvFans"  android:layout_width ="fill_parent"
                        android:layout_height ="wrap_content"  android:text ="@string/fans"
                        style ="@style/userinfo_panel_textview_title"   />
                 </ LinearLayout >
                 < LinearLayout  android:orientation ="vertical"
                    android:id ="@id/llTopic"  android:background ="@drawable/bg_panel_below_right"
                    android:clickable ="true"  android:layout_width ="wrap_content"
                    android:layout_height ="wrap_content"  android:layout_toRightOf ="@id/vVDivider1"
                    android:layout_below ="@id/vHDivider2"
                    android:layout_alignParentRight ="true"
                    android:layout_alignParentBottom ="true" >
                     < TextView  android:gravity ="center"  android:layout_gravity ="center_horizontal"
                        android:id ="@id/tvTopic_count"  android:layout_width ="fill_parent"
                        android:layout_height ="wrap_content"  android:layout_marginTop ="10.0dip"
                        android:text ="0"  style ="@style/userinfo_panel_textview_count"   />
                     < TextView  android:gravity ="center"  android:layout_gravity ="center_horizontal"
                        android:id ="@id/tvTopic"  android:layout_width ="fill_parent"
                        android:layout_height ="wrap_content"  android:text ="@string/his_topics"
                        style ="@style/userinfo_panel_textview_title"   />
                 </ LinearLayout >
             </ RelativeLayout >

　　　　　　代碼說明：

　　　　　　　　2.1.1　　第一個RelativeLayout爲圖一上的實現代碼。注意使用了一個View，也就是一條橫線，令其居中佈局；"地址："的TextView經過layout_alignParentLeft和layout_alignParentTop令其在整個RelativeLayout頂左頂上；"帳號信息："的TextView經過layout_below令其位於橫線下方，layout_alignLeft令其與"地址："的TextView左邊對齊，而後用layout_alignParentBottom讓其居於容器底部。
 

　　　　　　　　2.1.2　　第二個RelativeLayout爲圖一下的實現代碼。關鍵是vVDivider1和vVDivider2，與3.1.1相似，畫出了一個十字架的佈局，而後分別用居左、居上、居下、居右等方式實現了該佈局效果。

　　　　2.2　　實現 圖二 效果代碼

     < RelativeLayout  android:id ="@+id/rlpb"
        android:layout_width ="fill_parent"  android:background ="#ffeff0f4"
        android:visibility ="gone"  android:layout_height ="fill_parent"
        android:layout_weight ="1.0" >
         < LinearLayout  android:layout_centerInParent ="true"
            android:layout_width ="wrap_content"  android:layout_height ="wrap_content" >
             < ProgressBar  android:id ="@+id/prb"
                style ="?android:attr/progressBarStyleSmallTitle"
                android:layout_width ="wrap_content"  android:layout_height ="wrap_content"   />
             < TextView  android:text ="@string/loadinfo"
                android:layout_width ="wrap_content"  android:layout_height ="wrap_content"   />
         </ LinearLayout >
     </ RelativeLayout >

 　　　　　　代碼說明：

　　　　　　　　主要是layout_centerInParent屬性的應用，令其居於RelativeLayout的中間。使用的時候領ListView先隱藏，而後讓這個佈局顯示並填充，用完在設置Visible爲GONE便可。

 

　　3、總結

　　　　熟練掌握如下重要屬性，並靈活運用：

　　　　android:layout_centerInParent　　　居中佈局
　　　　android:layout_centerVertical　　　 水平居中佈局
　　　　android:layout_centerHorizontal　　垂直居中佈局

 

　　　　android:layout_alignParentTop　　　　居於容器內頂部
　　　　android:layout_alignParentBottom　　居於容器內底部
　　　　android:layout_alignParentLeft　　　　居於容器內左邊
　　　　android:layout_alignParentRight　　　 居於容器內右邊

　　　　android:layout_above　　　　　　　居於指定View的上方
　　　　android:layout_below　　　　　　　居於指定View的下方

　　　　android:layout_toRightOf　　　　　　在指定View的右邊
　　　　android:layout_toLeftOf　　　　　　  在指定View的左邊

　　　　android:layout_alignTop　　　　　　與指定View的Top一致

　　　　爲了方便你們測試效果，文章末尾提供了資源下載，不足的資源請自行在APK中提取。

　　　　

　　4、補充

　　　　相關文章

　　　　　　Android中文API（99）—— RelativeLayout

　　　　　　關於RelativeLayout的一些見解

　　　　資源下載

　　　　　　Res.zip