前言
Android布局中RelativeLayout非常灵活,之前项目使用很少,一般的例子用得都比较呆板。在学习中发现其大量采用了该布局,这里"帮"他分享一下一些经典的用法:)
声明
欢迎转载,但请保留文章原始出处:)
博客园:http://www.cnblogs.com
农民伯伯: http://over140.cnblogs.com
系列
新浪微博布局学习——妙用TabHost
正文
一、效果图
格子布局效果:
(图一)
居中正在加载的效果:
(图二)
二、实现代码
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中提取。
Android布局中RelativeLayout非常灵活,之前项目使用很少,一般的例子用得都比较呆板。在学习中发现其大量采用了该布局,这里"帮"他分享一下一些经典的用法:)
声明
欢迎转载,但请保留文章原始出处:)
博客园:http://www.cnblogs.com
农民伯伯: http://over140.cnblogs.com
系列
新浪微博布局学习——妙用TabHost
正文
一、效果图
格子布局效果:
(图一)
居中正在加载的效果:
(图二)
二、实现代码
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中提取。
发表评论
-
android:gravity / android:layout_Gravity,android:padding / android:layout_margin
2012-04-07 15:21 1067android:gravity / android:layou ... -
Android触控屏幕Gesture(GestureDetector和SimpleOnGestureListener的使用教程)
2011-11-18 16:51 8181、当用户触摸屏幕的时候,会产生许多手势,例如down,up, ... -
Android ImageView 总结
2011-11-17 17:17 1199一.介绍 ImageView用来显示任意图像图片,可以自己定义 ... -
简述Android触摸屏手势识别
2011-11-16 16:45 923很多时候,利用触摸屏的Fling、Scroll等Gesture ... -
简述Android触摸屏手势识别
2011-11-16 15:49 914在Android系统中,手势的识别是通过 GestureDet ... -
Android TextView属性详解
2011-11-10 17:12 752android:autoLink设置是否当 ... -
android监听返回按钮事件
2011-11-08 18:38 735用户在点击手机的返回按钮时,默认是推出当前的activty,但 ... -
android 完全退出程序
2011-11-08 18:37 728有几个activity,有一需 ... -
Android onTouchEvent, onClick及onLongClick的调用机制
2011-11-07 15:31 899针对屏幕上的一个View控 ... -
Android WebView放大缩小缩放
2011-11-02 10:27 2530一般情况下通过设置一下参数缩放 wv.getSettings ... -
Android控件之ZoomControls缩放控件
2011-11-01 17:14 1080一、简介 ZoomControls是一组可缩放的控件。它 ... -
Android通过手势实现的缩放处理
2011-11-01 17:12 1028主要原理是onTouchEvent事件中的参数MotionEv ... -
TextView 加下划线
2011-10-30 14:10 967如果是在资源文件里,可以这样写. Xml代码 ... -
Android TextView(EditView)文字底部或者中间加横线
2011-10-30 14:08 1634promotionLinkText = (TextView) ... -
TextView中显示HTML和图片
2011-10-30 13:55 1063在TextView中显示<img src="& ... -
Android 背景图片重复 Background repeat
2011-10-29 00:45 3192以LinearLayout为例,它提供的background属 ... -
android 3d 旋转
2011-10-27 16:23 1144在javaeye里看到了关于3d旋转的文章 效果图: 这 ... -
android 之 GridView
2011-10-27 14:14 761GridView 的用法基本与ListView类似。 ... -
android GridView的使用
2011-10-27 14:12 1401GridView跟ListView都是比较常用的多控件布局,而 ... -
android之ImageView
2011-10-26 22:17 963ImageView 首先确定下ImageView的全路径: ...
相关推荐
【Android开发学习25】界面布局之相对布局RelativeLayout(代码)
Android中使用RelativeLayout布局完成的登录练习题要求说明.pdf 学习资料 复习资料 教学资源
相对布局我最新喜欢的布局,也是game开发,照相机以及增钱现实中最常用的布局!
Android 相对布局 RelativeLayout 属性
Android布局入门,LinearLayout和RelativeLayout的理解和应用
Android布局控件之RelativeLayout详解
android布局属性RelativeLayout详解.
总结android中相对布局RelativeLayout的所有属性及使用方法。适合初级程序员
Android相对布局RelativeLayout的基本用法,相对布局是最实用的布局。
这个程序写了对相对布局和绝对布局的例子,帮助大家理解两者的使用和区别。
RelativeLayout android 布局练习
Android中使用RelativeLayout布局完成的登录界面教学案例任务说明.pdf 学习资料 复习资料 教学资源
Android中使用RelativeLayout完成梅花布局的代码清单.pdf 学习资料 复习资料 教学资源
RelativeLayout是相对布局控件:以控件之间相对位置或相对父容器位置进行排列,下面通过本文给大家介绍Android布局之RelativeLayout相对布局,涉及到android relativelayout相对布局相关知识,对android ...
Android中使用RelativeLayout完成的梅花布局教学案例任务说明.pdf 学习资料 复习资料 教学资源
主要介绍了Android编程之绝对布局AbsoluteLayout和相对布局RelativeLayout实现方法,结合实例形式详细分析了Android绝对布局AbsoluteLayout和相对布局RelativeLayout的原理与使用技巧,需要的朋友可以参考下
NULL 博文链接:https://sarin.iteye.com/blog/1756332
Android中使用RelativeLayout布局完成登录的代码清单.pdf 学习资料 复习资料 教学资源
LinearLayout和RelativeLayout实现精确布局-简单版 类似与应用评价
一个Android XML布局的例子,主要利用xml文件进行布局,里边用到的是RelativeLayout。具体的本例中: 非洲草原地图:用到了FrameLayout的使用;ActivityMain演示了linerLayout。 个性化表单ActivityLayout 演示...