美文网首页Android 开发收集Android开发半栈工程师
Android .9.png背景图片造成的控件长度计算错误

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

作者: orzangleli | 来源:发表于2017-08-01 00:24 被阅读263次

    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"
        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的长度为 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);
        }
    }
    
    <?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>
    

    相关文章

      网友评论

        本文标题:Android .9.png背景图片造成的控件长度计算错误

        本文链接:https://www.haomeiwen.com/subject/wsudlxtx.html