原文：Android – How to write Batman like xml layout

當(dāng)人們談?wù)揂ndroid性能的時(shí)候總是習(xí)慣討論怎么寫(xiě)出清晰高效的Java代碼,卻忽略了layout布局文件。layout布局緩慢的渲染速度對(duì)app性能也有的很大的影響。充滿不必要的views和可讀性差的layout文件會(huì)讓你的app運(yùn)行緩慢。在本文中我會(huì)分享5個(gè)技巧來(lái)幫你寫(xiě)出高效清晰的layout布局文件。(ps:下面的技巧都非常實(shí)用，開(kāi)發(fā)過(guò)程中很常見(jiàn)，感動(dòng)哭！)

1. Use compound drawable on a TextView

用TextView本身的屬性同時(shí)顯示圖片和文字

(ps:難以理解現(xiàn)在還有很多人不懂得用這個(gè)，實(shí)實(shí)在在的減少很多view啊，哎！)

通常你需要在文本旁邊添加一張圖片，假設(shè)你需要添加圖片在文字的左邊，像下面這樣：

TextView

不少人首先想到的就是用一個(gè)LinearLayout或RelativeLayou來(lái)包含一個(gè)TextView和ImageView,最后你用了三個(gè)UI元素和一大坨代碼。用TextView的compound drawable是一個(gè)更好更清晰的解決方案。你只需要一個(gè)屬性就可以搞定。

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/batman"
        android:drawableLeft="@drawable/batman"
        android:drawableStart="@drawable/batman"
        android:drawablePadding="5dp">
</TextView>

用到的主要屬性：

drawableLeft- 指定drawable放在文本的左邊

drawableStart- 作用和drawableLeft相同但是它基于新的API(android 4.2)支持RTL

drawablePadding- 指定文本和drawable之間padding

2. ImageView has src and background attribute

同時(shí)使用ImageView的src和background屬性實(shí)現(xiàn)點(diǎn)擊效果

你應(yīng)該同時(shí)使用它們，在很多情況下你會(huì)想要給ImageView添加點(diǎn)擊效果，然后我看到很多人用LinearLayout來(lái)包裹一個(gè)ImageView來(lái)實(shí)現(xiàn)。添加另一個(gè)view是沒(méi)必要的。下面的代碼可以讓你做的更好：

<ImageView
        android:id="@+id/image"
        android:layout_width="@dimen/batman_logo_width"
        android:layout_height="@dimen/batman_logo_height"
        android:background="?attr/selectableItemBackground"http://點(diǎn)擊效果
        android:src="@drawable/batman_logo_transparent"http://圖片
        style="@style/logo_image_style"/>

顯示圖片用"src"屬性，drawable selector 圖片點(diǎn)擊效果用"background"屬性實(shí)現(xiàn)，上面用的是android默認(rèn)提供的selector,當(dāng)然你也可以換成你自己實(shí)現(xiàn)的。下面是最后的效果：(ps:哈哈，效果自己copy上面幾行代碼就可以看到了，實(shí)在需要看請(qǐng)翻墻查看原文)。

3. Use LinearLayout divider

用LinearLayout自帶的分割線

分割線在app經(jīng)常會(huì)用到的，使用頻率高到讓你驚訝。但是LinearLayout有一個(gè)屬性可以幫你添加分割線。下面的例子中，LinearLayout包含2個(gè)TextView和基于他們中間的分割線。

divider

1.Create divider shape(創(chuàng)建shape)

下面是一個(gè)簡(jiǎn)單的shape divider_horizontal.xml用來(lái)當(dāng)做分割線。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas./apk/res/android">

    <size android:width="@dimen/divider_width"/>
    <solid android:color="@color/colorPrimaryDark"/>

</shape>

2.Add shape to LinearLayout

<LinearLayout android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="horizontal"
              android:background="@android:color/white"
              android:divider="@drawable/divider_horizontal"  //添加分割線
              android:dividerPadding="5dp" //設(shè)置padding
              android:showDividers="middle">//居中顯示


    <TextView android:layout_width="0dp"
              android:layout_weight="0.5"
              android:layout_height="wrap_content"
              android:gravity="center"
              style="@style/Text.Title"
              android:text="@string/batman_name"/>

    <TextView android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_weight="0.5"
              android:gravity="center"
              style="@style/Text.Title"
              android:text="@string/superman_name"/>

</LinearLayout>

上面用到了三個(gè)xml屬性：

divider -用來(lái)定義一個(gè)drawable或者color作為分割線

showDividers -指定分割線在哪里顯示，它們可以顯示在開(kāi)始位置，中間，末尾或者選擇不顯示

dividerPadding -給divider添加padding

4.Use the Space view

使用Space控件

當(dāng)你需要在2個(gè)UI控件添加間距的時(shí)候,你可能會(huì)添加padding或margin。有時(shí)最終的layout文件是非?；靵y，可讀性非常差。當(dāng)你需要解決問(wèn)題時(shí)，你突然意識(shí)到這里有一個(gè)5dp的paddingTop,那里有一個(gè)2dp的marginBottom,還有一個(gè)4dp的paddingBottom在第三個(gè)控件上然后你很難弄明白到底是哪個(gè)控件導(dǎo)致的問(wèn)題。還有我發(fā)現(xiàn)有些人在2個(gè)控件之間添加LinearLayout或View來(lái)解決這個(gè)問(wèn)題，看起來(lái)是一個(gè)很簡(jiǎn)單解決方案但是對(duì)App的性能有很大的影響。

這里有一個(gè)更簡(jiǎn)單更容易的方法那就是Space,看下官方的文檔：“Space is a lightweight View subclass that may be used to create gaps between components in general purpose layouts.” 他們沒(méi)有說(shuō)謊，確實(shí)很輕量。如果你看過(guò)Space的實(shí)現(xiàn)會(huì)發(fā)現(xiàn)Space繼承View但是沒(méi)有繪制任何東西在canvas。

/**
 * Draw nothing.
 *
 * @param canvas an unused parameter.
 */
@Override
public void draw(Canvas canvas) {
}

使用方法很簡(jiǎn)單，看下面的圖片，我們想要在在標(biāo)題和描述之間添加間距。

space

你只需要簡(jiǎn)單的在2個(gè)TextView之間添加一個(gè)Space就可以了

<TextView android:layout_width="match_parent"
          android:layout_height="wrap_content"
          style="@style/Text.Title"

<Space android:layout_width="match_parent"
       android:layout_height="10dp"/>//添加間距

<TextView android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="@string/gotham_city_description"
          style="@style/Text.Details"/>

5.Use <include/> and <merge/>

使用<include/>和<merge/>標(biāo)簽

重用布局是一個(gè)保持app一致的好方法，這樣以后有改變的話只要改一個(gè)文件就可以了，Android提供了<include/>標(biāo)簽幫你重用布局。

例如你現(xiàn)在決定創(chuàng)建有一個(gè)logo圖片居中的酷炫Toolbar工具欄，然后你想要添加到每個(gè)頁(yè)面中，下面是Toolbar效果:

toolbar

下面是batman_toolbar.xml代碼

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:popupTheme="@style/AppTheme.PopupOverlay">


    <ImageView android:layout_width="wrap_content"
               android:layout_height="@dimen/batman_logo_height"
               android:layout_gravity="center"
               android:src="@drawable/batman_logo_transparent"/>

</android.support.v7.widget.Toolbar>

你可以復(fù)制粘貼這些代碼到每個(gè)Activity,但是不要這么做，在編程中有一個(gè)重要的規(guī)則：當(dāng)你復(fù)制粘貼，那你就是在做錯(cuò)誤的事。在這種情況下你可以用<include/>標(biāo)簽在多個(gè)界面重用這個(gè)布局。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas./apk/res/android"
        xmlns:tools="http://schemas./tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:background="@android:color/white"
        tools:context=".MainActivity">

    <include layout="@layout/batman_toolbar"/>

</android.support.design.widget.CoordinatorLayout>

用<include/>標(biāo)簽?zāi)憧梢灾挥靡恍写a在app的每個(gè)頁(yè)面添加你的toolbar,任何改變都會(huì)自動(dòng)更新到所有頁(yè)面。

除了<include/>,<merge/>也常用來(lái)從你的view層次結(jié)構(gòu)中減不必要的view，它會(huì)移除沒(méi)必要的嵌套的layouts，例如，如果被包含布局文件的根是一個(gè)LinearLayout,然后你把它include包含在另外一個(gè)LinearLayout里面，2個(gè)嵌套的LinearLayouts是沒(méi)有必要的，這個(gè)嵌套的layout沒(méi)有任何作用除了影響UI性能。在這種情況下可以用<merage/\>來(lái)替換被包含布局的根LinarLayout 移除不必要的view.

關(guān)于<include/>和<merge/>的更多信息你可以查看官方文檔

Don’t always play by the rules

上面的技巧不用當(dāng)做規(guī)則

我希望這5個(gè)技巧可以幫你寫(xiě)出更好更簡(jiǎn)單的布局layout,但是不要把這些技巧當(dāng)是規(guī)則，它們更像是指南。總有一些情況下你沒(méi)法使用這些技巧，只能通過(guò)增加布局的復(fù)雜性來(lái)解決。在這種情況下，在添加更多view之前，你可以考慮自定義View試的找到更簡(jiǎn)單的解決方法。只要記住一件事，在你的視圖層次添加一個(gè)view代價(jià)是不可小噓的，它會(huì)影響你的app加載速度。

謝謝Ana和oFca對(duì)文章進(jìn)行校對(duì)。