Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> 新浪微博布局學習——活用Android的RelativeLayout

新浪微博布局學習——活用Android的RelativeLayout

編輯:Android開發實例

前言

  Android布局中RelativeLayout非常靈活,之前項目使用很少,一般的例子用得都比較呆板。在學習中發現其大量采用了該布局,這裡"幫"他分享一下一些經典的用法:)
 

 

系列

  新浪微博布局學習——妙用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

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved