新浪微博布局学习——活用RelativeLayout

简介:

正文

  一、效果图

    格子布局效果:

 

 (图一)

 居中正在加载的效果:

 

 (图二)

二、实现代码

    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即可。

 

  三、总结

    熟练掌握以下重要属性,并灵活运用:

    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一致



本文转自over140 51CTO博客,原文链接:http://blog.51cto.com/over140/582146,如需转载请自行联系原作者

相关文章
|
3月前
|
前端开发 容器
揭秘Web前端布局秘籍:浮动,那个让你又爱又恨的布局神器,你真的了解它吗?
【8月更文挑战第23天】在Web前端设计中,浮动是一种关键布局技术,能让元素在文档流中灵活移动,实现文本环绕图片、多列布局等效果。元素通过CSS的 `float` 属性脱离正常文档流并移动到容器边缘,后续非浮动内容则围绕该元素排列。浮动可用于多列布局、导航菜单及图文混排。需注意清除浮动以避免布局问题,并处理可能导致的父元素高度塌陷。
45 0
|
3月前
|
前端开发 开发者 UED
Web前端布局的救赎:掌握清除浮动的艺术,告别布局混乱!
【8月更文挑战第23天】在Web前端开发中,浮动(float)是一种常用的CSS布局技术,但会导致父元素高度塌陷。清除浮动至关重要,常用方法包括:使用额外的清除元素、伪元素、`overflow`属性、`flexbox`布局、`grid`布局以及`clearfix`方法。每种方法各有优缺点,适用于不同场景。随着新技术的发展,开发者应持续学习,选择合适的方法以确保布局稳定性和提升用户体验。
38 0
|
6月前
|
Android开发 容器
Android开发,学习LinearLayout布局
Android开发,学习LinearLayout布局
70 0
ConstraintLayout实战小技巧—实现布局跟随效果
ConstraintLayout实战小技巧—实现布局跟随效果
|
前端开发 容器
flex大法:一网打尽所有常见布局
flex大法:一网打尽所有常见布局
203 0
flex大法:一网打尽所有常见布局
|
Android开发
【Android教程】01 布局
【Android教程】01 布局
136 0
【Android教程】01 布局
|
XML Java Android开发
Android开发布局 案例二
Android开发布局 案例二
208 0
Android开发布局 案例二
|
Android开发
Android开发布局 案例一
Android开发布局 案例一
122 0
Android开发布局 案例一
|
XML 缓存 IDE
Android修行手册-卡顿优化布局篇【建议收藏】
众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!
242 0
|
Android开发
Android开发学习笔记之详解五大布局
Android开发学习笔记之详解五大布局