实用Android 屏幕适配方案分享

实用Android 屏幕适配方案分享

真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案,已用在一款成熟互联网应用中,效果还不错。

说起android开发,UI界面的多机型适配,一向是个很重要的问题。

网上这方面的文章很多,面试的时候也经常会问到,大部分的内容都很类似,无外乎用dp,sp 不要用px之类老生常谈的问题。 但是会说的居多,实际可以执行的可行方案,很少有人会。

我在面试的时候,很多人连drawable-hdpi 和drawable-mdpi  里面放的图片是适配不同屏幕密度,还是屏幕分辨率都会弄错,所谓的多机型适配,无外乎照本宣科。 身边有的同事,工作几年了,还是只会适配自己的手机,连屏幕密度是什么都不知道。只知道每次都会把UI给的效果图/1.5。。。。。

下面介绍我的方案:

第一、不用dp,   距离单位自己定义,这一步,不怎么需要改动,只需要将你之前是 20dp的地方更改为@dimens/dimen_20_dip.

第二、自己将自己的单位解析为具体的px,不用dp,这一步如果自己写的话,工作量很大,我写了个小工具,可以一键生成,只需要把程序生成的资源文件,拷贝到res文件夹下 就可以使用了。

第三、android系统自己去找相应资源目录下的  dimens.xml文件,从而获取最合适的值。这一步,不需要你的参与。

OK,完成。

工具下载地址:http://download.csdn.net/detail/zmobs/8570269

工具源码地址:http://download.csdn.net/detail/zmobs/8573051

第二版:http://download.csdn.net/detail/zmobs/8597341

更新内容:1. 添加了成功后的弹框提示       2 . 添加了0.5的单位

1、概述

如果我们换个角度看下这个问题,不知道大家有没有了解过web前端开发,或者说对于网页都不陌生,其实适配的问题在web页面的设计中理论上也存在,为什么这么说呢?电脑的显示器的分辨率、包括手机分辨率,我敢说分辨率的种类远超过Android设备的分辨率,那么有一个很奇怪的现象:

为什么Web页面设计人员从来没有说过,尼玛适配好麻烦?

那么,到底是什么原因,让网页的设计可以在千差万别的分辨率的分辨率中依旧能给用户一个优质的体验呢?

其实就是一个原因,网页提供了百分比计算大小。

同样的,拿到UI给的设计图以后,是不是抱怨过尼玛你标识的都是px,我项目里面用dp,这什么玩意,和UI人员解释,UI妹妹也不理解。

那么本例同样可以解决Android工程师和UI妹妹间的矛盾~UI给出一个固定尺寸的设计稿,然后你在编写布局的时候不用思考,无脑照抄上面标识的像素值,就能达到完美适配,理想丰满~~

然而,Android对于不同的屏幕给出的适配方案是dp,那么dp与百分比的差距到底在哪里?

2、dp vs 百分比

  • dp

我们首先看下dp的定义:

Density-independent pixel (dp)独立像素密度。 标准是 160dip 即 1dp 对应 1个pixel,计算公式如:px = dp * (dpi / 160),屏幕密度越大,1dp对应 的像素点越多。  上面的公式中有个dpi,dpi为DPI是Dots Per Inch(每英寸所打印的点数),也就是当设备的dpi为160的时候 1px=1dp;

上述这些概念记不记得住没关系,只要记住一点 dp是与像素无关的 ,在实际使用中1dp 大约 等于1/160inch。

那么dp究竟解决了适配上的什么问题?可以看出 1dp = 1/160inch;那么它至少能解决一个问题,就是你在布局文件写某个View的宽和高为160dp*160dp,这个View在任何分辨率的屏幕中,显示的尺寸大小是大约是一致的(可能不精确),大概是 1 inch * 1 inch。

但是,这样并不能够解决所有的适配问题:

  • 呈现效果仍旧会有差异,仅仅是相近而已
  • 当设备的物理尺寸存在差异的时候,dp就显得无能为力了。为4.3寸屏幕准备的UI,运行在5.0寸的屏幕上,很可能在右侧和下侧存在大量的空白。而5.0寸的UI运行到4.3寸的设备上,很可能显示不下。

以上两点,来自http://blog.csdn.net/a220315410/article/details/9139397

一句话,总结下,dp能够让同一数值在不同的分辨率展示出大致相同的尺寸大小。但是当设备的尺寸差异较大的时候,就无能为力了。

适配的问题还需要我们自己去做,于是我们可能会这么做:

<?xml version="1.0" encoding="utf-8"?>  
<resources>  
    <!-- values-hdpi 480X800 -->  
    <dimen name="imagewidth">120dip</dimen>      
</resources>  

<resources>  
    <!-- values-hdpi-1280x800 -->  
    <dimen name="imagewidth">220dip</dimen>      
</resources>  


<?xml version="1.0" encoding="utf-8"?>  
<resources>  
    <!-- values-hdpi  480X320 -->  
    <dimen name="imagewidth">80dip</dimen>      
</resources> 

为了优质的用户体验,依然需要去针对不同的dpi设置,编写多套数值文件

可以看出,dp并没有能解决适配问题。

下面看百分比:

  • 百分比  这个概念不用说了,web中支持控件的宽度可以去参考父控件的宽度去设置百分比,最外层控件的宽度参考屏幕尺寸设置百分比,那么其实中Android设备中,只需要支持控件能够参考屏幕的百分比去计算宽高就足够了。

比如,我现在以下几个需求:

  • 对于图片展示的Banner,为了起到该有的效果,我希望在任何手机上显示的高度为屏幕高度的1/4
  • 我的首页分上下两栏,我希望每个栏目的屏幕高度为11/24,中间间隔为1/12
  • slidingmenu的宽度为屏幕宽度的80%

当然了这仅仅是从一个大的层面上来说,其实小范围布局,可能百分比将会更加有用。

那么现在不支持百分比,实现上述的需求,可能需要

1、代码去动态计算(很多人直接pass了,太麻烦);

2、利用weight(weight必须依赖Linearlayout,而且并不能适用于任何场景)

再比如:我的某个浮动按钮的高度和宽度希望是屏幕高度的1/12,我的某个Button的宽度希望是屏幕宽度的1/3。

上述的所有的需求,利用dp是无法完成的,我们希望控件的尺寸可以按照下列方式编写:

<Button
        android:text="@string/hello_world"
        android:layout_width="20%w"
        android:layout_height="10%h"/>

利用屏幕的宽和高的比例去定义View的宽和高。

好了,到此我们可以看到dp与百分比的区别,而百分比能够更好的解决我们的适配问题。

  • some 适配tips

我们再来看看一些适配的tips:

  1. 多用match_parent
  2. 多用weight
  3. 自定义view解决

其实上述3点tip,归根结底还是利用百分比,match_parent相当于100%参考父控件;weight即按比例分配;自定义view无非是因为里面多数尺寸是按照百分比计算的;

通过这些tips,我们更加的看出如果能在Android中引入百分比的机制,将能解决大多数的适配问题,下面就来看看如何能够让Android支持百分比的概念。

3、百分比的引入

1、引入

其实我们的解决方案,就是在项目中针对你所需要适配的手机屏幕的分辨率各自简历一个文件夹。

如下图:

然后我们根据一个基准,为基准的意思就是:

比如480*320的分辨率为基准

  • 宽度为320,将任何分辨率的宽度分为320份,取值为x1-x320
  • 高度为480,将任何分辨率的高度分为480份,取值为y1-y480

例如对于800*480的宽度480:

可以看到x1 = 480 / 基准 = 480 / 320 = 1.5 ;

其他分辨率类似~~ 

那么,你可能有个疑问,这么写有什么好处呢?

假设我现在需要在屏幕中心有个按钮,宽度和高度为我们屏幕宽度的1/2,我可以怎么编写布局文件呢?

<FrameLayout >

    <Button
        android:layout_gravity="center"
        android:gravity="center"
        android:text="@string/hello_world"
        android:layout_width="@dimen/x160"
        android:layout_height="@dimen/x160"/>

</FrameLayout>

可以看到我们的宽度和高度定义为x160,其实就是宽度的50%; 

那么效果图:

可以看到不论在什么分辨率的机型,我们的按钮的宽和高始终是屏幕宽度的一半。

  • 对于设计图

假设现在的UI的设计图是按照480*320设计的,且上面的宽和高的标识都是px的值,你可以直接将px转化为x[1-320],y[1-480],这样写出的布局基本就可以全分辨率适配了。

你可能会问:设计师设计图的分辨率不固定怎么办?下文会说~

  • 对于上文提出的几个dp做不到的

你可以通过在引入百分比后,自己试试~~

那么实现需要以下步骤:

  1. 分析需要的支持的分辨率

对于主流的分辨率我已经集成到了我们的程序中,当然对于特殊的,你可以通过参数指定。 关于屏幕分辨率信息,可以通过该网站查询:http://screensiz.es/phone

  1. 自动生成文件的程序

到此,我们通过编写一个工具,根据某基准尺寸,生成所有需要适配分辨率的values文件,做到了编写布局文件时,可以参考屏幕的分辨率;在UI给出的设计图,可以快速的按照其标识的px单位进行编写布局。基本解决了适配的问题。

感谢以下两位的博文:

http://blog.csdn.net/i7788/article/details/44937277

http://blog.csdn.net/lmj623565791/article/details/45460089

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小作坊

CSS animation和transition的性能探究

你可能已经在你的项目中用上了CSS Animation和CSS transition。如果还没有用上,那你有点out了。快去看下CSS-Trick上的这两篇关于...

9710
来自专栏腾讯社交用户体验设计

为什么要用SVG?- svg与iconfont、图片多维度对比

1.1K40
来自专栏Android-JessYan

骚年你的屏幕适配方式该升级了!-今日头条适配方案

原文地址: https://www.jianshu.com/p/55e0fca23b4f

19310
来自专栏Fred Liang

移动端 Web 渲染解决方案

秋招 H5 移动端(面向微信)设计师出的落地页的动画层数有30层左右,在通过 bodymovin 导入前端页面中后再加载好素材之后仍有5秒左右黑屏渲染动画 目...

20240
来自专栏佳爷的后花媛

零碎之viewport

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

16540
来自专栏腾讯社交用户体验设计

经验分享:多屏复杂动画CSS技巧三则 - 腾讯ISUX

29020
来自专栏ytkah

一行js弹窗代码就能设计漂亮的弹窗广告

  接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一...

80980
来自专栏腾讯社交用户体验设计

如何打造一个高效适配的H5

23140
来自专栏施炯的IoT开发专栏

[翻译]Windows Phone 7 Application Controls

前言-关于这段译文 Windows Phone开发的中文资料缺乏,这段译文翻译自《UI Design and Interaction Guide for Win...

17970
来自专栏儿童编程

Scratch做高逼格的互动艺术作品(一)

最近在郎师兄推荐下初步了解了一下processing互动编程艺术,真是美轮美奂,直接跪了。今天我用Scratch也做了一个互动的小作品,自我感觉挺好(大神勿喷~...

54440

扫码关注云+社区

领取腾讯云代金券