新浪微網誌布局學習——活用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" />

                    android:gravity="center_vertical" android:id="@id/tvAccount_info"

                    android:text="@string/account_info" android:layout_below="@id/vHDivider"

                    android:layout_alignLeft="@id/tvAddress"

                    android:layout_alignParentBottom="true" />

                    android:gravity="center_vertical" android:id="@id/tvAccount_info_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"

                <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_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:text="@string/attention" android:layout_below="@id/tvAttention_count"

                        style="@style/userinfo_panel_textview_title" />

                </RelativeLayout>

                <LinearLayout android:orientation="vertical"

                    android:id="@id/rlWeibo" android:background="@drawable/bg_panel_above_right"

                    android:layout_height="wrap_content" android:layout_toRightOf="@id/vVDivider1"

                    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" />

                        android:id="@id/tvTopic" android:layout_width="fill_parent"

                        android:layout_height="wrap_content" android:text="@string/radio_button_topic"

                </LinearLayout>

                    android:id="@id/llFans" android:background="@drawable/bg_panel_below_left"

                    android:layout_below="@id/vHDivider2"

                    android:layout_alignParentBottom="true">

                        android:id="@id/tvFans_count" android:layout_width="fill_parent"

                        android:id="@id/tvFans" android:layout_width="fill_parent"

                        android:layout_height="wrap_content" android:text="@string/fans"

                    android:id="@id/llTopic" android:background="@drawable/bg_panel_below_right"

                    android:layout_alignParentRight="true"

                        android:id="@id/tvTopic_count" android:layout_width="fill_parent"

                        android:layout_height="wrap_content" android:text="@string/his_topics"

　　　　　　代碼說明：

　　　　　　　　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"

        </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一緻

本文轉自over140 51CTO部落格，原文連結：http://blog.51cto.com/over140/582146，如需轉載請自行聯系原作者