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