Android .9.png背景图片造成的控件长度计算错误

1. 问题描述

有一个LinearLayout,它的背景是一个.9.png,布局内容如下，包含一个View，View左右各偏移20dp：

如下图所示：

现在要求根据屏幕宽度和左右偏移距离来求红色背景的View的宽度，请问怎么求？

2. 陷阱？

常规求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;

        // 打印结果为 viewWidth = 960
        Log.i(TAG, "viewWidth = "+ viewWidth);

    }

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

打印结果为：

viewWidth = 960

我们通过截图获取屏幕上View的长度为 888 ≠ 960 (把图片放大可以看到宽度为888)

那么问题来了，我们把总屏幕宽度减去View左右两边的偏移距离，凭啥就不等于View的宽度？

3. 解惑

回想一下，.9.png的制作过程，.9.png实际上就是在普通的png周围增加了一个像素的空白，左和上 负责表示伸缩时需要变化的像素，右和下 表示这个图片显示内容的区域，加粗的地方就是我们计算出错的原因，在制作.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());

打印结果为

activity_main paddingLeft = 36
activity_main paddingRight = 36

我们把内置的padding再减掉，计算View的宽度

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

打印结果与上面截图测量一致，为了保证测量结果正确，我们在程序中验证下View的宽度，注意不能再onCreate或第一次调用onResume时通过getWidth()获取控件宽度，要等activity中view绘制完成后才能获取，所以我们延时发送一条消息获取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);

打印结果：

view 真实宽度 = 888

原来如此，希望你读到这里，也会和我一样发出【哦~~】的声音。

最后给出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()

        // 打印结果为 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 转 px
    public int dp2px(int dp){
        float density = this.getResources().getDisplayMetrics().density;
        return (int)(density * dp + 0.5);
    }
}