精华帖 (0) :: 良好帖 (8) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-03-14
前言 Android布局中RelativeLayout非常灵活,之前项目使用很少,一般的例子用得都比较呆板。在学习中发现其大量采用了该布局,这里"帮"他分享一下一些经典的用法:)
声明 欢迎转载,但请保留文章原始出处:) JavaEye社区:http://www.iteye.com 农民伯伯: http://over140.cnblogs.com
系列
正文 一、效果图 格子布局效果: 居中正在加载的效果:
二、实现代码 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一致 为了方便大家测试效果,文章末尾提供了资源下载,不足的资源请自行在APK中提取。 四、补充 相关文章 资源下载 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2011-03-15
很赞啊,能多分享几个就好了
|
|
返回顶楼 | |
发表时间:2011-03-15
我记得有人说,Relative很好用,建议掌握,至于什么TableLayout、GridLayout等几乎不怎么用的。
|
|
返回顶楼 | |
发表时间:2011-03-16
要是连上面的titlebar的实现一起分享出来就更好啦!
|
|
返回顶楼 | |
发表时间:2011-03-17
zcbbupt 写道 要是连上面的titlebar的实现一起分享出来就更好啦! <RelativeLayout android:gravity="center_vertical" android:layout_gravity="top" android:id="@id/lyTitleBar" android:background="@drawable/titlebar_lightgray_bg" android:layout_width="fill_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android"> <Button android:textSize="11.0sp" android:textColor="#ffffffff" android:id="@id/titleBack" android:paddingTop="8.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="2.0dip" android:layout_alignParentLeft="true" android:layout_centerVertical="true" /> <TextView android:textSize="18.0dip" android:textColor="#ff000000" android:gravity="center" android:id="@id/titleText" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginLeft="80.0dip" android:layout_marginRight="80.0dip" android:text="" android:singleLine="true" android:layout_weight="1.0" android:layout_centerInParent="true" /> <LinearLayout android:gravity="center" android:layout_gravity="center" android:orientation="horizontal" android:id="@id/titleembededButtons" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0"> <LinearLayout android:gravity="center" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content"> <Button android:textSize="11.0sp" android:textColor="#ffffffff" android:id="@id/titleat" android:background="@drawable/title_button_group_left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/main_at" android:layout_weight="1.0" /> <Button android:textSize="11.0sp" android:textColor="#ffffffff" android:id="@id/titlecomment" android:background="@drawable/title_button_group_middle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/main_comment" android:layout_weight="1.0" /> <Button android:textSize="11.0sp" android:textColor="#ffffffff" android:id="@id/titlemessage" android:background="@drawable/title_button_group_right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/main_message" android:layout_weight="1.0" /> </LinearLayout> </LinearLayout> <RelativeLayout android:id="@id/rlProgressBar" android:background="@drawable/title_button" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="2.0dip" android:layout_alignParentRight="true" android:layout_centerVertical="true"> <ProgressBar android:id="@android:id/progress" android:layout_width="20.0dip" android:layout_height="wrap_content" android:layout_centerInParent="true" style="@android:style/Widget.ProgressBar.Small" /> </RelativeLayout> <Button android:textSize="11.0sp" android:textColor="#ffffffff" android:id="@id/titleSave" android:paddingTop="8.0dip" android:visibility="visible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="2.0dip" android:layout_alignParentRight="true" android:layout_centerVertical="true" /> </RelativeLayout> 这是共用的一个标题栏,使用时根据不同的界面隐藏相应的按钮 |
|
返回顶楼 | |
发表时间:2011-03-19
看了楼主的 妙用TabHost,不错,持续关注一下
|
|
返回顶楼 | |
发表时间:2011-03-19
强~!学习了~!谢谢分享~!
|
|
返回顶楼 | |
发表时间:2011-04-22
这么灵活的应用,敬佩啊。
|
|
返回顶楼 | |
发表时间:2011-05-25
准备自己写个玩玩
|
|
返回顶楼 | |
浏览 16824 次