1. 問題描述

有一個LinearLayout,它的背景是一個.9.png,布局內(nèi)容如下，包含一個View，View左右各偏移20dp：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    tools:context="com.orzangleli.ninepatchdemo.MainActivity"
    android:background="@drawable/bg"
    >
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:background="#f00"
        />
</LinearLayout>

如下圖所示：

現(xiàn)在要求根據(jù)屏幕寬度和左右偏移距離來求紅色背景的View的寬度，請問怎么求？

2. 陷阱？

常規(guī)求View的寬度的方法，可以以下方式表達：

public class MainActivity extends AppCompatActivity {

    private final String TAG = "lxc";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 屏幕寬度
        int screenWidth = this.getResources().getDisplayMetrics().widthPixels;
        // 計算20dp對應的px
        int dp20 = dp2px(20);
        int viewWidth = screenWidth - dp20 * 2;

        // 打印結(jié)果為 viewWidth = 960
        Log.i(TAG, "viewWidth = "+ viewWidth);

    }

    // dp 轉(zhuǎn) px
    public int dp2px(int dp){
        float density = this.getResources().getDisplayMetrics().density;
        return (int)(density * dp + 0.5);
    }
}

打印結(jié)果為：

viewWidth = 960

我們通過截圖獲取屏幕上View的長度為 888 ≠ 960 (把圖片放大可以看到寬度為888)

那么問題來了，我們把總屏幕寬度減去View左右兩邊的偏移距離，憑啥就不等于View的寬度？

3. 解惑

回想一下，.9.png的制作過程，.9.png實際上就是在普通的png周圍增加了一個像素的空白，左和上 負責表示伸縮時需要變化的像素，右和下 表示這個圖片顯示內(nèi)容的區(qū)域，加粗的地方就是我們計算出錯的原因，在制作.9.png時我們就限制了設置此圖片為背景的控件的padding值（本案例就是指LinearLayout設置.9.png的圖片為背景時，就自動設置了padding值）

我們在程序中驗證下：

LinearLayout activity_main = (LinearLayout)this.findViewById(R.id.activity_main);
Log.i(TAG, "activity_main paddingLeft = "+ activity_main.getPaddingLeft()+"\n" +
         "activity_main paddingRight = "+ activity_main.getPaddingRight());

打印結(jié)果為

activity_main paddingLeft = 36
activity_main paddingRight = 36

我們把內(nèi)置的padding再減掉，計算View的寬度

int viewWidth = screenWidth - dp20 * 2 - activity_main.getPaddingLeft() - activity_main.getPaddingRight();
// 打印結(jié)果為 viewWidth =  888
Log.i(TAG, "viewWidth = "+ viewWidth);

打印結(jié)果與上面截圖測量一致，為了保證測量結(jié)果正確，我們在程序中驗證下View的寬度，注意不能再onCreate或第一次調(diào)用onResume時通過getWidth()獲取控件寬度，要等activity中view繪制完成后才能獲取，所以我們延時發(fā)送一條消息獲取view的寬度。

final View view = (View)this.findViewById(R.id.view);
view.postDelayed(new Runnable() {
    @Override
    public void run() {
        Log.i(TAG, "view 真實寬度 = "+ view.getWidth());
    }
},3000);

打印結(jié)果：

view 真實寬度 = 888

原來如此，希望你讀到這里，也會和我一樣發(fā)出【哦~~】的聲音。

最后給出MainActivity.java 和 activity_main.xml的代碼.案例中使用到的.9.png圖片：下載點我

package com.orzangleli.ninepatchdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    private final String TAG = "lxc";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        LinearLayout activity_main = (LinearLayout)this.findViewById(R.id.activity_main);
        Log.i(TAG, "activity_main paddingLeft = "+ activity_main.getPaddingLeft()+"\n" +
                "activity_main paddingRight = "+ activity_main.getPaddingRight());

        // 屏幕寬度
        int screenWidth = this.getResources().getDisplayMetrics().widthPixels;
        // 計算20dp對應的px
        int dp20 = dp2px(20);
        final int viewWidth = screenWidth - dp20 * 2 ; //- activity_main.getPaddingLeft() - activity_main.getPaddingRight()

        // 打印結(jié)果為 viewWidth =  888
        Log.i(TAG, "viewWidth = "+ viewWidth);

        final View view = (View)this.findViewById(R.id.view);
        view.postDelayed(new Runnable() {
            @Override
            public void run() {
                Log.i(TAG, "view 真實寬度 = "+ view.getWidth());
            }
        },3000);

    }

    // dp 轉(zhuǎn) px
    public int dp2px(int dp){
        float density = this.getResources().getDisplayMetrics().density;
        return (int)(density * dp + 0.5);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    tools:context="com.orzangleli.ninepatchdemo.MainActivity"
    android:background="@drawable/bg"
    >
    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:background="#f00"
        />
</LinearLayout>