一劳永逸的屏幕适配方案

安卓中的屏幕适配往往是一件令人头痛的事情,多种多样的屏幕分辨率给我们的适配工作带来了很大的麻烦。Google官方建议我们使用dp代替px,但是设计师给到我们的设计图中大多标注的都是px,让我们在写xml文件的时候很是不爽,相信没有一个程序员愿意在编写xml文件上花费大量时间。回想起刚刚接触安卓时的野蛮适配,按照设计图标注的px值除以二作为dp值直接怼到布局文件上,考虑到当时320dpi的设备还是比较多的,测试一些主流机型还凑合可以看看。当然,对于比较复杂的布局,或者想要适配更多分辨率的机型,这种方法显然是没有任何意义的。

那么有没有办法可以做到一劳永逸的屏幕适配?直接照抄设计图的px值,无论是控件宽高,还是margin,通通抄下来就可以了。这种方案乍看违背了Google的官方建议,但是我们想一下,为什么需要使用dp?因为dp在不同dpi的屏幕中可以代表不同的像素值,dppx的转化公式如下:

px = dp * (dpi / 160)

在160dpi的屏幕中,1dp就是1px,而在320dpi的屏幕中,1dp是2px。显而易见,使用dp的目的是为了使得在xml中编写的固定数值,在不同dpi的屏幕中有不同的体现。这里的不同的体现可以理解为不同的像素值大小。我们的需求就可以理解为在xml中编写的数字比如50,在480800,7201280的屏幕中被转化为不同的像素值,只不过使用dp系统自动帮我们完成了转化过程,倘若我们自己来进行转化,使用px当然也是可以的。我们要做的是,根据设计图尺寸直接在xml中编写,计算设计图大小与屏幕大小的比例,对所有数字进行转化,这样必定是适配屏幕的。

直接上代码分析:

    public static final int BASE_WIDTH=720;//设计图宽高
    
    public static final int BASE_HEIGHT=1280;
    
    public static float mScale=1f;//缩放比例

    /**
     * 计算缩放比例
     */
    public static void initScaleValue(Context context){
        DisplayMetrics displayMetrics=context.getResources().getDisplayMetrics();
        mScale=(float) (displayMetrics.widthPixels)/BASE_WIDTH;
    }

这里我们需要指定设计图的尺寸,并计算出与屏幕尺寸的比值。通常,initScaleValue()方法可以在applicationonCreate()方法中调用。

 /**
     * 对任意View进行缩放
     */
    public static void initScaleView(View v) {
        if (v != null) {
            if (v instanceof ViewGroup) {
                scaleViewGroup((ViewGroup) v);
            } else {
                scaleView(v);
            }
        }
    }

initScaleView()是对外提供的对任意View进行缩放的方法。我们也正是通过这个方法来进行适配的,包括Activity布局,Fragment布局,适配器中Item的布局,只要将View作为参数传递进去,就可以可以进行缩放了。当然,仍然要做到一劳永逸,我们不需要对每个布局文件都写一遍这个方法,如下所示:

 ScaleUtils.initScale(ButterKnife.findById(this, android.R.id.content));

在BaseActivity的onCreate()方法中这样处理就可以了。下面来具体看一下scaleViewGroup()scaleView()方法。

 /**
     * 循环遍历ViewGroup
     */
    private static void scaleViewGroup(ViewGroup viewGroup) {
        for (int i = 0; i < viewGroup.getChildCount(); i++) {
            View v = viewGroup.getChildAt(i);
            if (v instanceof ViewGroup) {
                scaleViewGroup((ViewGroup) v);
            } else {
                scaleView(v);
            }
        }
    }

    /**
     * 对View进行处理
     */
    private static void scaleView(View v) {
        Object hasScaled = v.getTag(R.id.is_scale_tag);
        if (hasScaled instanceof Boolean) {
            if ((Boolean) hasScaled) return;
        }
        if (v instanceof TextView){
            processScaleTextView((TextView)v);
        }else {
            processScaleView(v);
        }
        v.setTag(R.id.is_scale_tag,true);
    }

可以看到,scaleViewGroup()最终还是调用的scaleView(),因为ViewGroup还是由一系列View组成的。我们只需要对ViewGroup的子节点循环遍历,一旦发现子节点仍然是ViewGroup,递归调用scaleViewGroup(),直到所有ViewGroup中的子View都调用了scaleView()方法。在scaleView()方法中,我们首先需要判断该View是否已经缩放过,避免重复缩放。然后对于TextView,我们需要特殊处理,不仅需要缩放控件的大小,margin等,还要对其字体大小进行适配。先来看一下对TextView的处理。

  /**
     * 处理TextView
     */
    private static void processScaleTextView(TextView view) {
       if (view==null)return;
        processScaleView(view);
        processScaleTextSize(view);
    }

 /**
     * 缩放TextView字体大小
     */
    private static void processScaleTextSize(TextView view) {
        if (view==null)return;
        Object hasScaled=view.getTag(R.id.is_scale_font_size_tag);
        if (hasScaled instanceof Boolean){
            if ((Boolean)hasScaled)return;
        }
        float size=view.getTextSize();
        size*=mScale;
        view.setTextSize(TypedValue.COMPLEX_UNIT_PX,size);
    }

对于Textview,首先还是要调用processScaleView()方法对控件进行缩放,然后调用processScaleTextSize()对字体大小进行缩放,注意也要判断是否已经缩放过。然后看一下processScaleView()方法具体是怎么对控件进行缩放的。

    private static void processScaleView(View v) {
        if (v == null) return;

        int left = getScalePxValue(v.getPaddingLeft());
        int top = getScalePxValue(v.getPaddingTop());
        int right = getScalePxValue(v.getPaddingRight());
        int bottom = getScalePxValue(v.getPaddingBottom());

        v.setPadding(left, top, right, bottom);

        if (v instanceof TextView) {
            Drawable[] drawables = ((TextView) v).getCompoundDrawables();
            setCompoundDrawablesWithIntrinsicBounds((TextView) v, drawables[0], drawables[1], drawables[2], drawables[3]);
            ((TextView) v).setCompoundDrawablePadding(getScalePxValue(((TextView) v).getCompoundDrawablePadding()));
        }

        v.setLayoutParams(scaleParams(v.getLayoutParams()));
    }

首先对控件的padding进行缩放,getScalePxValue()方法回根据mScale对原来的数值进行改变,

public static int getScalePxValue(int value) {
        if (value <= 4) {
            return value;
        }
        return (int) Math.ceil(mScale * value);
    }

如果是TextView,还要对TextView上下左右的四个Drawable进行缩放。

private static void setCompoundDrawablesWithIntrinsicBounds(TextView view,
                                                                Drawable left, Drawable top, Drawable right, Drawable bottom) {

        if (left != null) {
            scaleBoundsDrawable(left);
        }

        if (right != null) {
            scaleBoundsDrawable(right);
        }

        if (top != null) {
            scaleBoundsDrawable(top);
        }

        if (bottom != null) {
            scaleBoundsDrawable(bottom);
        }

        view.setCompoundDrawables(left, top, right, bottom);
    }

public static Drawable scaleBoundsDrawable(Drawable drawable) {
        drawable.setBounds(0, 0,
                getScalePxValue(drawable.getIntrinsicWidth()),
                getScalePxValue(drawable.getIntrinsicHeight()));
        return drawable;
    }

最后,对于任意View都要进行的是scaleParams方法,即对控件本身的宽高以及margin进行缩放。

public static ViewGroup.LayoutParams scaleParams(
            ViewGroup.LayoutParams params) {
        if (params == null) {
            throw new RuntimeException("params not's null");
        }
        if (params.width > 0) {
            params.width = getScalePxValue(params.width);
        }

        if (params.height > 0) {
            params.height = getScalePxValue(params.height);
        }

        if (params instanceof ViewGroup.MarginLayoutParams) {
            ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams) params;
            lp.topMargin = getScalePxValue(lp.topMargin);
            lp.leftMargin = getScalePxValue(lp.leftMargin);
            lp.bottomMargin = getScalePxValue(lp.bottomMargin);
            lp.rightMargin = getScalePxValue(lp.rightMargin);
        }

        return params;
    }

这样就一劳永逸的解决了屏幕适配的问题。当我们拿到设计图的时候,询问一下设计图的尺寸,直接照抄设计师的标注就可以了!

有任何疑问,欢迎加群讨论:261386924

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容