Android APP设计教程与终极UI适配秘籍【图文版】

最新推荐文章于 2024-05-01 07:50:37 发布

goldxclub

最新推荐文章于 2024-05-01 07:50:37 发布

阅读量382

点赞数

UI界面在不同平台的适配受屏幕尺寸和屏幕密度影响，Android适配机制就是在资源后面添加对这两种因素的限定，通过不同的限定区分不同的平台资源，Android在使用资源的时候会优先选择满足本平台限定的资源，再找最接近条件的，再找默认（即不加限定），通过选择适合当前平台的资源来完成不同平台的适配。

看完这篇文章，25学堂可以让你快速学习到android多分辨率多密度下界面适配方案。

1、Android设计规范常识：四种屏幕尺寸和四种密度

2、Android界面设计适配不同屏幕的尺寸和密度解读

1、我们先看看Android UI适配秘籍的三把斧。

此图由猿创动力提供，感谢分享。

2、到底采用哪种分辨率来设计呢？

1.原则上需要为不同的分辨率去单独设计效果图，但是由于实际开发成本，设计成本的各种要求，可以根据目前市场占有率选择机型，目前主要480*800、 720*1280、 1080*1920这几种分辨率，本人目前都是采用720*1280的分辨率来设计，因为目前为止720*1280的市场占有率还是比较高的。但是由于技术水平的不断提升，今后一定会采用1080*1920的来设计，希望各位小伙伴能够关注一下市场情况。

总结：现在还是采用720*1280的分辨率来设计吧。

4.到底需要提供多少套切图。

1.只需要提供一套切图即可。

原则上设计师需要为不同分辨率单独标注切图，同样根据开发成本等要求。

1.一般采用720*1280的来设计。切图可以直接适配720*1280分辨率的机型。

2.720*1280下的切图资源基本可以适配其他机型，有些特殊的切图需要单独适配的，比如icon等。

3.适配480*800的机型，只需要把切图/1.5即可。

4.适配1080*1920机型，只需要把切图*1.5即可。

5.适配1080*1920的时候，不要单独硬生生的将图标放大1.5倍。这就要求在720*1280下画图的时候，尽量采用矢量图形来画图。比如在720*1280下图图标是48px*48px的时候，适配1080*1920时候，48px*1.5=72px。把矢量图形调整为72px即可。把切图资源给开发，开发会把切图单独放到xxhdpi的文件目录下，就会自动适配1080*1920的了。

同样要是适配480*800的，48px/1.5=32px，把切图给开发，开发会把切图资源单独放到hdpi的目录下，就会自动适配的。

720*1280下的切图资源，开发是放到xhdpi的目录下的。

注意：大家在设计图片的时候尽量采用偶数来设计。开发可以直接写出来的就尽量不要切图。

3、到底需要提供多少套APP标注。

1.原则上我们只需要提供一套标注即可。

原则上需要为不同分辨单独进行标注，但由于开发成本等各种考虑。

选取320dpi下（分辨率为：720*1280）进行设计，此分辨率下1dp=2px。

设计师要建立相对单位概念，可以直接使用dp标注尺寸、sp标注文字大小；

Andriod官网中就采用相对单位进行标注的。

注意事项：另外视觉可以直接从高分辨率进行设计、标注、切图，这样可以方便适配低分辨率。在线自动生成.9png图的Android设计切图工具推荐

4、android 设计字体解决方案

中文字体：默认为Droid Sans Fallback,设计时可采用微软雅黑。

英文字体：Andriod4.x及以上采用Roboto，Andrio2.x和andriod3.x采用 Droid Sans。

建议尽量采用系统默认字体。

Andriod规范建议，字号采用12sp、14sp、18sp、22sp等四个级别来设计。（实际设计时可以按实际情况调整，我经常这么干，嘿嘿）

这里有：Android移动APP设计字体规范详解

最后我们做一下总结：

1.采用720*1280分辨率来进行设计。（设计时，采用偶数值进行设计，方便dp和px的转换）

2.开始标注了，标注尽量采用相对位置进行标注。

3.切图了，首先在720*1280下进行切图，可以完全适配720*1280的机型。切图资源

4.分别适配480*800 、1080*1920（上面已经描述过了哦）

5.不要忘记了，开发完后要进行bug测试哦（视觉方面的）。

Android教程：Webview自适应屏幕

时间:2013-06-05 15:27 来源:www.chengxuyuans.com

转自：http://www.3gkfz.com/androidjc/1135.html

    第一种：
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    第二种：
    WebSetting settings = webView.getSettings();
    settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
    把所有内容放在webview等宽的一列中。（可能会出现页面中链接失效）
    第三种：
    DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    int mDensity = metrics.densityDpi;
    if (mDensity == 120) {
    settings.setDefaultZoom(ZoomDensity.CLOSE);
    }else if (mDensity == 160) {
    settings.setDefaultZoom(ZoomDensity.MEDIUM);
    }else if (mDensity == 240) {
    settings.setDefaultZoom(ZoomDensity.FAR);
    }
   这方法可以让你的页面适应手机屏幕的分辨率，完整的显示在屏幕上，可以放大缩小。

例如适合800px宽度的页面，如果通过WebView在1024px的屏幕宽度下显示时，内容(图片)会被放大，整体页面会超出屏幕。
试了将WebView的settings中的缩放都关闭了也不行。
后来发现了WebSettings.ZoomDensity这个设置，并在文档中找到了以下说明：
Enum for specifying the WebView's desired density. FAR makes 100% looking like in 240dpi MEDIUM makes 100% looking like in 160dpi CLOSE makes 100% looking like in 120dpi

这样就能很好的说明以上问题的原因了，又是密度惹的祸...

默认WebView的ZoomDensity是MEDIUM，对应160dpi。而我之前800px宽度的屏幕对应的是60dpi，1024px宽度的屏幕对应的是240dpi。所以，页面在高分辨率的屏幕上被放大了1.5倍。这个和图片自缩放的机制是一样的。

于是，只要通过当前屏幕的密度，动态设置该属性就能适应不同屏幕（当然，默认你的页面是针对160dpi的密度大小设计的）,即可解决：
int screenDensity = getResources().getDisplayMetrics().densityDpi ;
WebSettings.ZoomDensity zoomDensity = WebSettings.ZoomDensity.MEDIUM ;
switch (screenDensity){
case DisplayMetrics.DENSITY_LOW :
    zoomDensity = WebSettings.ZoomDensity.CLOSE;
    break;
case DisplayMetrics.DENSITY_MEDIUM:
    zoomDensity = WebSettings.ZoomDensity.MEDIUM;
    break;
case DisplayMetrics.DENSITY_HIGH:
    zoomDensity = WebSettings.ZoomDensity.FAR;
    break ;
}
webSettings.setDefaultZoom(zoomDensity); (文：程序员之家)