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

552 阅读2分钟
原文链接: www.jianshu.com

1. 问题描述

有一个LinearLayout,它的背景是一个.9.png,布局内容如下,包含一个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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    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>

如下图所示:


现在要求根据屏幕宽度和左右偏移距离来求红色背景的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的长度为 864 ≠ 960 (把图片放大可以看到宽度为864)


那么问题来了,我们把总屏幕宽度减去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 = 48 activity_main paddingRight = 48

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

int viewWidth = screenWidth - dp20 * 2 - activity_main.getPaddingLeft() - activity_main.getPaddingRight();
// 打印结果为 viewWidth =  864
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 真实宽度 = 864

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