Android應用性能優化系列視圖篇——惱人的分割線留白解決之道

<div class="markdown_views">相信很多一線的開發者都遇到過分割線，作爲視覺設計中的最常用的元素之一，雖然簡單易畫，但在佈局排版中往往卻起影響視圖層級結構的重要作用。往往由於一道小小的分割線，不僅在layout中多個數個視圖，而且容易導致佈局層級的加深，甚至還需要在Java代碼中做邏輯控制。

雖然<a href="http://lib.csdn.net/base/15" class="replace_word" title="undefined" target="_blank" style="color:#df3434; font-weight:bold;">Android</a>官方提供的佈局中，比如ListView、LinearLayout等對分割線都有了相應的實現，但是在處理分割線留白這種設計時常常有心無力。而在越來越多的APP中，分割線留白已經成爲了一種設計趨勢，所以，如何簡單高效地實現分割線成爲了一個值得研究的命題。

<hr>

1、ListView的分割線

首先，ListView是自帶分割線屬性的（而GridView並沒有，不知道android官方咋想的），一共有四個相關的屬性，divider、dividerHeight、headerDividersEnabled、footerDividersEnabled。支持定義分割線的顏色和高度等，非常實用的屬性，但在實際開發中設計師卻不喜歡按照常理出牌。

比如下面這些列表類型的設計圖，設計師最喜歡這種左側留白右側通欄或者兩側留白的設計方式。

<img src="https://img-blog.csdn.net/20160812222017905" alt="這裏寫圖片描述" title=""> <img src="https://img-blog.csdn.net/20160812222035936" alt="這裏寫圖片描述" title="">

而官方的分割線則是左右通欄，開發者遇到這種問題，大概是有三種常規的解決方案。

<hr>

方案1：ListView設置左右margin或者padding

這種方式雖然能夠達到分割線留白的效果，但是有一定的侷限性，分割線左側並不總是被設計成和內容對齊。同時，缺陷很明顯，給ListView設置了左右margin或者padding，會導致Item點擊的按壓背景也被留白（效果如下圖）。當然，如果不在意這些細節，那也無可厚非。

<img src="https://img-blog.csdn.net/20160812230144582" alt="這裏寫圖片描述" title="">

缺陷：按壓效果有瑕疵，另外如果分割線不與內容上下對齊，這種方式無效

<hr>

方案2：給每個Item設置帶有分割線留白的背景圖

這是較爲常用的方案之一，分割線正常顯示，按壓效果正常顯示。看似很完美，但是不得不面對一個較大的問題，由於最後一個Item不顯示分割線，所以需要在Java代碼中控制，比如這樣：

<pre class="prettyprint" name="code"><code class="hljs java has-numbering"> @Override
public View getView(int position, View convertView, ViewGroup parent) {
....

if (position == getCount() - 1) {
convertView.setBackground(null);
} else {
convertView.setBackgroundResource(R.drawable.bg_line);
}
return convertView;
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul></pre>

在Java代碼中控制視圖樣式，無論如何都是一個相當不合理的選擇。

其次，這種方式不支持footer和header的分割線，footerDividersEnabled和headerDividersEnabled兩個屬性就無法使用了。

接着，既然使用帶有分割線的圖片做背景，那麼，如果頁面設計修改，參數調整，就需要重新切圖，所以維護起來相當喫力。

最後，爲了一條分割線而給整個Item視圖設置背景，基本可以認爲是出現了過度繪製的情況。

缺陷：代碼控制視圖、footerDividersEnabled和headerDividersEnabled無用、留白距離難以維護，過度繪製

<hr>

方案3：在Item中添加一個View設置高度背景作爲分割線

<pre class="prettyprint" name="code"><code class="hljs xml has-numbering"><View
 android:layout_width="match_parent"
android:layout_height="0.5dip"
android:layout_marginLeft="15dip"
android:background="#99cccccc"/></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

這是最最最常用卻最最最不合理的一個方案，然而很多人卻意識不到不合理。以上面圖爲例，Item中只有一個TextView，所以正常情況下layout中只有TextView一個視圖，但是如果以這種方式，必須在外層套上LinearLayout佈局，這樣一來，視圖層次加深，視圖冗餘。假設一個列表顯示10項，冗餘出來的佈局數就是20（分割線10+父佈局10）。

另外，仍然避免不了在Java中控制最後一項顯示與否，比如這樣：

<pre class="prettyprint" name="code"><code class="hljs avrasm has-numbering">View line = convertView.findViewById(R.id.item_line);
if (position == getCount() - 1) {
line.setVisibility(View.INVISIBLE);
} else {
line.setVisibility(View.VISIBLE);
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></pre>

footerDividersEnabled和headerDividersEnabled兩個屬性同樣也無法使用。

缺陷：佈局大量冗餘、代碼控制視圖、footerDividersEnabled和headerDividersEnabled無用

<hr>

方案4：重新定義分割線Drawable的Bounds

首先，需要清楚一個事實：出現以上情況的矛盾點，是官方ListView的分割線屬性不支持左右留白。所以最佳的解決方案，就是使得官方的分割線支持這種功能，這樣既利於擴展，也利於提高性能。

先來簡單看一下，ListView的源碼是如何實現分割線的功能的。

<pre class="prettyprint" name="code"><code class="hljs java has-numbering"> void drawDivider(Canvas canvas, Rect bounds, int childIndex) {
// This widget draws the same divider for all children
final Drawable divider = mDivider;

divider.setBounds(bounds);
divider.draw(canvas);
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul></pre>

在onDraw方法中，最終會調用到drawDivider方法。由於分割線是一個Drawable對象，上下左右的位置都是由Rect對象控制的，這個對象通過setBounds方法設置。

這個Rect對象的top和bottom屬性我們是不需要關心的，只需要看left和right兩個屬性，默認情況下left=paddingLeft，right=width-paddingLeft-paddingRight，即表示分割線的起點和終點貫穿ListView的左右兩側。

dispatchDraw方法中可以驗證這一點：

<pre class="prettyprint" name="code"><code class="hljs r has-numbering"> protected void dispatchDraw(Canvas canvas) {
...
if (drawDividers || drawOverscrollHeader || drawOverscrollFooter) {
final Rect bounds = mTempRect;
bounds.left = mPaddingLeft;
bounds.right = mRight - mLeft - mPaddingRight;
...
drawDivider(canvas, bounds, i);
}
...
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul></pre>

如果我們能將bounds的left和right屬性的值進行修改，那麼就能實現控制分割線的左右邊距了。

既然需要擴展ListView，最常用的方法就是繼承重寫了。不幸的是由於drawDivider方法的訪問控制故並不能被複寫，但值得慶幸的是ListView的Divider對象具有setter和getter方法。

具體的實現邏輯非常簡單，核心是裝飾模式，我就不去詳細說了。

源碼和範例詳見：<a href="https://github.com/MegatronKing/DividerSample">https://github.com/MegatronKing/DividerSample</a>

用法非常簡單，給ListView分割線擴充了兩個屬性：dividerPaddingLeft和dividerPaddingRight，顧名思義。這兩個屬性值既可以在xml佈局中配置也可以在代碼中設置。

layout示例如下：

<pre class="prettyprint" name="code"><code class="hljs avrasm has-numbering"><com.megatronking.divider.view.DividerListView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:divider="http://schemas.android.com/apk/res-auto"
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#99cccccc"
android:dividerHeight="0.5dip"
divider:dividerPaddingLeft="15dip"
divider:dividerPaddingRight="15dip" /></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></pre>

<hr>

方案5：使用inset標籤定義drawable

在Drawable家族中有一個特殊的存在：InsetDrawable，可以定義上下左右四個邊界的留白，InsetDrawable同樣使用了裝飾模式，和方案4的機制有異曲同工之妙。當被裝飾Drawable的Bound值變化時，重新定義Bound。另外，最強大的是可以直接使用xml定義。

<pre class="prettyprint" name="code"><code class="hljs xml has-numbering"><inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="15dip">
<shape>
<size android:height="0.5dip" />
<solid android:color="#99cccccc" />
</shape>
</inset></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul></pre>

通過insetLeft、insetRight、insetTop、insetRight四個屬性可以定義不同方向的留白大小，另外還支持通過android:drawable熟悉引用另外一個Drawable即被裝飾的Drawable。

<hr>

2、LinearLayout的分割線

LinearLayout從Android 3.0版本開始，便添加了分割線屬性。LinearLayout的分割線功能比ListView要強大一些，無論是橫向線性佈局還是縱向線性佈局，都能夠很好的支持。爲了兼容3.0以下版本，v7包中提供一個LinearLayoutCompat佈局，用法類似。

然而，知道這些屬性的開發者並不多，很多時候還是使用着一條線一個View的方式。這種方式無疑使用繁瑣，佈局冗餘。

現在先來簡單介紹下LinearLayout的分割線功能。

LinearLayout的提供了三個分割線相關屬性：

1、divider 必須引用一個drawable，無法使用或引用color。drawable一般是定義成shape，通過size指定寬度或高度，solid指定顏色。另外，由於LinearLayout分爲橫向佈局和縱向佈局，所以一般會定義兩種分割線。

<pre class="prettyprint" name="code"><code class="hljs xml has-numbering"><shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:height="0.5dip"/>
<solid android:color="#99cccccc"/>
</shape></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs xml has-numbering"><shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="0.5dip"/>
<solid android:color="#99cccccc"/>
</shape></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul></pre>

2、dividerPadding 控制分割線的留白距離，相比於ListView分割線的通欄，這個屬性非常實用。但是卻有一個缺陷：dividerPadding無法指定左右或上下，橫向佈局中上下都會有留白，縱向佈局中，左右都會有留白。而，設計師往往喜歡左側留白右側通欄，所以這個屬性有時就非常尷尬。

3、showDividers 這個屬性是控制分割線顯示位置的，一共有四個值：middle 在每一項中間添加分割線；end 在整體的最後一項添加分割線；beginning 在整體的最上方添加分割線；none 無；如果不設置這個屬性的值，默認就是none，即不顯示分割線。

雖然LinearLayout的分割線功能非常強大，但是遇到一側留白的情況，還是無能爲力。開發者還是要回到使用View作爲分割線的老路上來，比如QQ瀏覽器的這種佈局：

<img src="https://img-blog.csdn.net/20160813132755367" alt="這裏寫圖片描述" title="">

分割線左側留白與文字對齊，右側通欄，dividerPadding這個屬性實在無能爲力！

在分析解決方案之前，來簡單看一下分割線的實現原理吧！

<pre class="prettyprint" name="code"><code class="hljs scss has-numbering"> void drawHorizontalDivider(Canvas canvas, int top) {
mDivider.setBounds(getPaddingLeft() + mDividerPadding, top,
getWidth() - getPaddingRight() - mDividerPadding, top + mDividerHeight);
mDivider.draw(canvas);
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs scss has-numbering"> void drawVerticalDivider(Canvas canvas, int left) {
mDivider.setBounds(left, getPaddingTop() + mDividerPadding,
left + mDividerWidth, getHeight() - getPaddingBottom() - mDividerPadding);
mDivider.draw(canvas);
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

一個水平方向的分割線，一個是垂直方向的分割線。同樣是通過setBounds方法確定分割線的位置，而且mDividerPadding屬性會同時作用於左右或上下。

所以，解決方案和前面所講的ListView的應該是完全一樣的：重新定義分割線Drawable的Bounds

源碼不細說了，詳見：<a href="https://github.com/MegatronKing/DividerSample">https://github.com/MegatronKing/DividerSample</a>

擴展LinearLayout提供了分割線的額外四個屬性：dividerPaddingLeft，dividerPaddingRight，dividerPaddingTop，dividerPaddingBottom。同樣的，既可以在layout中配置也可以在代碼中動態設置。

當orientation爲vertical時，dividerPaddingLeft和dividerPaddingRight兩個屬性生效；orientation爲horizontal時，dividerPaddingTop和dividerPaddingBottom兩個屬性生效。

layout示例如下：

<pre class="prettyprint" name="code"><code class="hljs avrasm has-numbering"><com.megatronking.divider.view.DividerLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:divider="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="@drawable/line_horizontal"
android:orientation="vertical"
android:showDividers="middle"
divider:dividerPaddingLeft="15dip"/></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></pre>

當然，通過InsetDrawable方式同樣可以達到效果，原理其實差不多，不再贅述。

<hr>

3、總結

在常規的應用開發中，用好分割線，能夠減少視圖數量，層次結構和代碼邏輯，同時也方便後繼者修改和維護。雖然性能提升有限，但是積少成多，對於追求完美和極致的開發者，希望能夠有所幫助！

<hr>

本博客不定期持續更新，歡迎關注和交流：

<a href="http://blog.csdn.net/megatronkings">http://blog.csdn.net/megatronkings</a></div>
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul></ul>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li></li>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>

</div>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.