Android布局技巧之建立高效布局_Android

來源:互聯網
上載者:User

Android UI工具包提供了一些布局管理器,它們使用起來相當容易,而且,大多數的時候,你只需要使用它們最基本的特徵來實現UI。

執著於基本特徵的使用對於建立UI來說,往往不是最高效的。一個常見的例子就是濫用LinearLayout,它將會導致View樹中的View數量激增。View——更糟的是,布局管理器——添加到應用程式裡都會帶來一定的消耗:初始化,布局和繪製變得更加緩慢。嵌套布局的花銷尤其“昂貴”,例如,如果你嵌套了一些LinearLayout,並使用了weight參數,這會導致子項目要計算兩次。

讓我們看一個非常簡單且常見的布局例子:一個清單項目,左邊是一個表徵圖,右邊是標題和描述,上方是標題,下方是可選的描述。清單項目可能看起來如下圖:

為了清楚地認識View之間(一個ImageView和兩個TextView)的相對位置,下圖是使用HierarchyViewer抓獲的布局剪影:

實現這個布局,直接使用LinearLayout就可以了。清單項目本身是一個水平的LinearLayout,裡面有一個ImageView和一個垂直的LinearLayout,垂直的LinearLayout裡包含兩個TextView。以下是這個布局的原始碼:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="fill_parent"  android:layout_height="?android:attr/listPreferredItemHeight"  android:padding="6dip">  <ImageView    android:id="@+id/icon"    android:layout_width="wrap_content"    android:layout_height="fill_parent"    android:layout_marginRight="6dip"    android:src="@drawable/icon" />  <LinearLayout    android:orientation="vertical"    android:layout_width="0dip"    android:layout_weight="1"    android:layout_height="fill_parent">    <TextView      android:layout_width="fill_parent"      android:layout_height="0dip"      android:layout_weight="1"      android:gravity="center_vertical"      android:text="My Application" />    <TextView       android:layout_width="fill_parent"      android:layout_height="0dip"      android:layout_weight="1"       android:singleLine="true"      android:ellipsize="marquee"      android:text="Simple application that shows how to use RelativeLayout" />    </LinearLayout></LinearLayout>

如果你將它作為ListView的item,它能正常工作,但卻是相當浪費的。相同的布局可以使用RelativeLayout進行重寫,相對於每個清單項目來說,可以節省一個View,且View層級上更好,只有一層。使用RelativeLayout也很簡單:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="fill_parent"  android:layout_height="?android:attr/listPreferredItemHeight"  android:padding="6dip">  <ImageView    android:id="@+id/icon"    android:layout_width="wrap_content"    android:layout_height="fill_parent"    android:layout_alignParentTop="true"    android:layout_alignParentBottom="true"    android:layout_marginRight="6dip"    android:src="@drawable/icon" /><TextView     android:id="@+id/secondLine"    android:layout_width="fill_parent"    android:layout_height="26dip"     android:layout_toRightOf="@id/icon"    android:layout_alignParentBottom="true"    android:layout_alignParentRight="true"    android:singleLine="true"    android:ellipsize="marquee"    android:text="Simple application that shows how to use RelativeLayout" />  <TextView    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:layout_toRightOf="@id/icon"    android:layout_alignParentRight="true"    android:layout_alignParentTop="true"    android:layout_above="@id/secondLine"    android:layout_alignWithParentIfMissing="true"    android:gravity="center_vertical"    android:text="My Application" /></RelativeLayout>

新的實現與老的實現看起來效果完全一致,除了一種情況。每個清單項目顯示兩行文字:標題和可選的描述。當某一個清單項目的描述不可獲得時,應用程式可能希望將第二個TextView的Visibility設為GONE。LinearLayout實現版表現得很完美,但RelativeLayout實現版就有點差強人意了:

在RelativeLayout裡,每個View都是和父元素RelativeLayout對齊或是和其它View對齊的。例如,我們聲明描述部分是和RelativeLayout的底部對齊,標題位於其上並與RelativeLayout的頂端對齊。當描述GONE時,RelativeLayout不知道怎麼去放置標題的底邊緣。為瞭解決這個問題,你可以使用一個非常簡單的布局參數:layout_alignWithParentIfMissing。

這個布爾參數告訴RelativeLayout:如果目標對象消失時使用自己的邊緣作為錨點。例如,如果你放置一個View到另一個Visibiity屬性設為GONE的View的右邊,且設定alignWithParentIfMissing為true,RelativeLayout就會將其左邊緣作為View的對齊錨點。在我們的這個場合,使用alignWithParentIfMissing的結果是RelativeLayout將標題部分的底部與自己的底部對齊。結果如下所示:

現在,我們的布局表現得很完美了,即使描述部分的Visibility屬性設為GONE。更好的是,層級更加簡單,因為我們不再使用LinearLayout,而且,更加高效了。當我們使用HierarchyViewer來比較兩個實現版的時候,事實就更明顯了:

另外,當你使用這麼一個布局作為ListView的清單項目時,這種差異就更為重要了。希望這個簡單的例子能讓你瞭解布局,瞭解如何最佳化你的UI。

以上就是本文的全部內容,希望對大家的學習有所協助,也希望大家多多支援雲棲社區。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.