论坛首页 移动开发技术论坛

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

浏览 16824 次
精华帖 (0) :: 良好帖 (8) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-03-14  

前言

  Android布局中RelativeLayout非常灵活,之前项目使用很少,一般的例子用得都比较呆板。在学习中发现其大量采用了该布局,这里"帮"他分享一下一些经典的用法:)

 

声明

  欢迎转载,但请保留文章原始出处:)

    JavaEye社区:http://www.iteye.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中文API(99)—— RelativeLayout

      关于RelativeLayout的一些看法

    资源下载

      Res.zip

   发表时间:2011-03-15  
很赞啊,能多分享几个就好了
0 请登录后投票
   发表时间:2011-03-15  
我记得有人说,Relative很好用,建议掌握,至于什么TableLayout、GridLayout等几乎不怎么用的。
1 请登录后投票
   发表时间:2011-03-16  
要是连上面的titlebar的实现一起分享出来就更好啦!
0 请登录后投票
   发表时间: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>
这是共用的一个标题栏,使用时根据不同的界面隐藏相应的按钮
0 请登录后投票
   发表时间:2011-03-19  
看了楼主的 妙用TabHost,不错,持续关注一下
0 请登录后投票
   发表时间:2011-03-19  
强~!学习了~!谢谢分享~!
0 请登录后投票
   发表时间:2011-04-22  
这么灵活的应用,敬佩啊。
0 请登录后投票
   发表时间:2011-05-25  
准备自己写个玩玩
0 请登录后投票
论坛首页 移动开发技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics