歡迎訪問我的個人獨立部落格 ittiger.cn，原創文章，未經允許不得隨意轉載。

最近在專案中進行介面調整時遇到了一個9.PNG圖引起的View的padding值不正常導致UI顯示不符合預期結果的問題。這篇文章就來記錄我當時遇到的問題的表現形式，以及如何根據問題找到產生問題的原因，及其最後的解決辦法。

問題表現形式

不多說，直接上出現問題的視圖表現形式的截圖：

我的實現

上圖中我實現的是一個ListView，同時自定義實現一個檢視Png9View extends FrameLayout作為ListView的item檢視，為每個item設定灰色背景色。Png9View

public class Png9View extends FrameLayout {
    private LinearLayout mContainer;
    public Png9View(Context context) {
        this(context, null);
    }

    public Png9View(Context context, AttributeSet attrs) {
        this(context, attrs, 0
 
);
    }

    public Png9View(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        LayoutInflater.from(context).inflate(R.layout.png_9_view, this, true);
        mContainer = (LinearLayout) findViewById(R.id.root);
        setBackgroundColor(getResources().getColor(android.R.color.darker_gray));
        mContainer.setBackgroundResource(R.drawable.bg);
    }
}
 

png_9_view佈局程式碼如下：

<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/root"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/holo_blue_dark"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:background="@color/colorAccent"
            android:textColor="@android:color/white"
            android:gravity="center_vertical"
            android:text="測試檢視標題"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/holo_red_dark"/>
    </LinearLayout>
</merge>

ListView的佈局如下：

<ListView
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:dividerHeight="0dp"
    android:divider="@null">
</ListView>

問題？

通過上面的效果截圖我們很容易發現在第一個Png9View的底部紅色分割線和第二個Png9View的頂部藍色分割線中還有一小段灰色的間隔，而這個灰色間隔顯然與我的期望效果不一樣，那這個灰色間隔是哪裡來的呢？我的程式碼裡好像沒有任何設定會出現這樣的效果啊。

問題分析

出現上面的問題後我第一個想到的就是開啟開發者模式中顯示佈局邊界，結果竟然發現這個灰色間隔是Png9View的一部分，而其顏色也剛好與Png9View的背景色相同，但我並沒有為LinearLayout檢視設定過margin啊，ListView也沒有設定過divider，所以看到這個現象時感到很奇怪。想了會也沒想出個所以然來，很是費解啊~~~

後來想到在Android Studio 2.2.2中有個新工具Layout Inspector(該工具在Tools -> Android -> Layout Inspector)可以進行UI分析，於是用該工具對介面進行分析最後發現了問題的原因，大家看下我對上面的介面進行分析的截圖：

上面的圖中，我選中的是Png9View的佈局檔案中的id為root的LinearLayout(左邊圈中的)，右邊圈的是該佈局的相關屬性值資訊，可以看到該線性佈局有的paddingBottom屬性值為5，而我也並沒有為該LinearLayout設定過margin屬性值，那這個值是怎麼來的呢？

這個時候我就只能想到該線性佈局設定的背景圖片bg.9.png了這個地方了。於是我就猜想難道是因為設定了這個.9圖才導致了這個問題？為了驗證我的猜想，於是我就直接將背景換成了一個顏色作為背景，結果發現就正常了。到這裡基本上就可以肯定這個問題就是9.png圖乾的好事了。

給大家看下我設定的這個圖片是什麼樣的

解決辦法

因為我們專案中這個.9圖本身就是為了達到白色的效果，所以我直接用背景顏色代替圖片作為背景圖解決了我的這個問題，這樣還可以減少圖片資源。

疑問

看了上面的分析之後，可能大家會問另外一個問題，既然這個paddingBottom值是屬於LinearLayout的，那為什麼會產生margin的效果呢？padding應該是當前佈局的內容距離當前佈局的邊距，那也應該是白色啊，怎麼這個padding區域顯示的卻是其父佈局Png9View的背景色呢，怎麼就產生了margin的效果呢？

大傢伙別急，原因且待下篇分解。。。

write by laohu
2016年11月5日15:14:09