一. 核心概念与单位详解

1. 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?

屏幕分辨率越大,手机越清晰

dpi就是dot per inch dot意思是点,就是每英寸上面的像素点数

android原始的api返回的单位都是px,获得屏幕的宽度高度返回的单位都是px,ui设计师在设计图片的时候的单位一般也是px作为单位

我们在xml布局的时候,android推荐我们使用dp作为单位,最后不要直接使用px作为单位

我们来看下面的一个案例

列如,我们要实现这样的一个需求,画一条直接填充整个屏幕的宽度

如果使用xml布局使用px作为单位,第一个屏幕需要320px,第二个屏幕需要480px。这也就是说使用px作为单位,并不能保证在不同的屏幕分辨率、不同的屏幕像素密度不同的dpi下面保存相同的显示效果。

使用dp单位就可以,我们来在160dpi下面,1dp=1px,上面320px,对应的dp就是320dp,第二个手机像素密度是240dpi,如果设置320dp,转换成像素就是320*(240/160)=480px

这样就保证了同一条直接在不同的手机屏幕上都具有填充满整个屏幕的效果

换算的单位是:

据px = dip * density / 160,则当屏幕密度为160时,px = dip

和上面的填充屏幕宽度一样,推荐使用sp作为文字的大小,sp能够依据屏幕的不同的分辨率进行缩放达到屏幕适配的效果。

不同屏幕像素密度的区分,为啥android需要对不同的像素密度进行区分了,这主要也是为了屏幕的适配,因为同一张图片在不同的像素密度下显示的效果是不一样的,为了保证不同的设备具有相同的显示效果,我们需要为不同的设备提供不同尺寸的图片,就能够大体的满足屏幕的适配,我们在新建项目的时候,开发工具会自动创建下面的文件夹,程序员需要把当前手机对应像素密度的图片放在对应的文件夹下面,当程序运行的时候,系统会按照当前手机的dpi到对应的文件夹下面去加载对应的图片,drawable文件夹是为了解决不同的dpi手机上图片具有相同的显示效果。

工程的value文件夹是为了保证相同的效果,在不同的dpi的手机密度下显示不同的dimen的值

例如为了达到同样的显示效果,在低dpi下面的间隔就会小一点,在高dpi下面的间隔就会大一点,我们就可以在不同的修饰符限定的value文件夹下面

设置不同的dimen的值,但是不同的value下面的name值是一样的,例如上面的不同的value下面name都是login_photo_top只是不同的value下面的值是不一样的。

这样程序在运行的时候会依据当前手机的dpi自动去获得对应限定符下面的value下的值。

ldpi: 屏幕密度为120的手机设备

mdpi: 屏幕密度为160的手机设备(此为baseline,其他均以此为基准,在此设备上,1dp = 1px)

hdpi: 屏幕密度为240的手机设备

xhdpi: 屏幕密度为320的手机设备

xxhdpi:屏幕密度为480的手机设备

例如当前的首先是440dpi就会对应的drawable--xxhdpi下面的文件去找对应的图片,到对应的value下面找对应的值。

依据dip(dp)单位根据公式像素值 = [dip*(dpi/160)](px)(其中px是单位)转化为屏幕像素。根据此公式可以计算出一个dip分别在120dpi、160dpi、240dpi、320dpi屏幕中对应的像素数分别为0.75、1、1.5、2.0,比例为3:4:6:8,如下图。因此,在不同屏幕密度上,以mdpi作为基准,对位图进行3:4:6:8比例的放缩会达到适配的效果。

例如:在mdpi上面设计师给了一个ui的设计图

比如:现在有一个手机是中等密度的屏幕(160dpi),在mdpi下放置了一个48*48px的图片,要满足图片在不同分辨率的适配性,应该遵循3:4:6:8:12:16的原则。

 

那么在ldpi下应该放置36*36px的图片(12*3

在hdpi文件下就应该放置72*72的图片(12*4

 

在xhdpi下就应该放置96*96的图片(12*6

 

在xxhdpi下就应该放置144*144的图片(12*8

 

上面官方文档有问题,180*180应该是144*144 (12*12

 

通过上面的大概比例的设置,我们就知道大体需要的图片了。

所以一个设计师给了一个在160dpi下面是48*48的图片,适配不同的手机的dpi,程序员需就需要叫设计师给出在xxhdpi下面是144*144px的图片,我们只需要按照这个宽和高就行比较就可以了,就能够大体满足在不同的手机上面图片具有相同的显示效果。

不同的屏幕密度使用不同的图片

由于Android设备的屏幕密度是各种各样的,您应该为不同密度的屏幕提供不同的图片资源,这样在各种像素密度的屏幕上都能获得最好的图形质量和性能。

在原有矢量图的基础上按照如下的缩放比例来分别生成不同屏幕密度的图片资源:

  • xhdpi: 2.0

  • hdpi: 1.5

  • mdpi: 1.0 (baseline)

  • ldpi: 0.75

这意味着对于xhdpi 的设备需要使用200×200的图片;对于hdpi的设备只需要 150×150 的图片;而对于mdpi的设备需要 100×100 的图片; 对于ldpi 的设备只需要75×75 的图片。

把这些图片放到位于res/目录下对于的图片目录中:

MyProject/
res/
drawable-xhdpi/
awesomeimage.png
drawable-hdpi/
awesomeimage.png
drawable-mdpi/
awesomeimage.png
drawable-ldpi/
awesomeimage.png

然后,当您使用@drawable/awesomeimage的时候, 系统会根据当前设备的屏幕密度为您选择最优的图片。

二. 解决方案-支持各种屏幕尺寸

我们可以通过以下几种方式来支持各种屏幕尺寸:

1. 使用wrap_content、math_parent、weight

wrap_content:根据控件的内容设置控件的尺寸
math_parent:根据父控件的尺寸大小设置控件的尺寸
weight:权重,在线性布局中可以使用weight属性设置控件所占的比例

例如,我们要实现下图所显示的效果:当屏幕尺寸改变时,new reader控件两边的控件大小不变,new reader控件会占完剩余的空间。

线性布局中使用weight属性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_weight="0"
android:background="#028330"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="80dp"
android:text="new
reader"
android:textSize="22sp"
android:layout_weight="1"/>
<TextView
android:layout_width="160dp"
android:layout_height="80dp"
android:text="Politics"
android:textSize="18sp"
android:layout_weight="0"
android:background="#028330"/>
</LinearLayout>

小插曲:关于android:layout_weight属性

公式:所占宽度=原来宽度+剩余空间所占百分比的宽度

一般情况,我们都是设置要进行比例分配的方向的宽度为0dp,然后再用权重进行分配。如下:

<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Button2" />

效果为:

然后我们修改布局文件后

LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" > <Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="buttton1" /> <Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="button2" /> </LinearLayout>

我们来分析下:

屏幕的宽度是L

剩余空间所占百分比的宽度:现在按钮1的宽度是L,按钮2的宽度是L,剩余空间就是屏幕的宽度减去按钮1和按钮2所占的宽度,L-2L

宽度为match_parent时,所占比例

button1宽度=L+(L-2L)×1/3=2/3L
button2宽度=L+(L-2L)×2/3=1/3L

2. 使用相对布局,禁用绝对布局

简单的布局一般都使用线性布局,而略微复杂点的布局,我们使用相对布局,大多数时候,我们都是使用这两种布局的嵌套。

我们使用相对布局的原因是,相对布局能在各种尺寸的屏幕上保持控件间的相对位置。

案例如下:

完成界面的适配

3. 使用限定符

    • 使用尺寸限定符
      当我们要在大屏幕上显示不同的布局,就要使用large限定符。例如,在宽的屏幕左边显示列表右边显示列表项的详细信息,在一般宽度的屏幕只显示列表,不显示列表项的详细信息,我们就可以使用large限定符。

res/layout/main.xml 单面板:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 列表 -->
<fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="match_parent" />
</LinearLayout>

res/layout-large/main.xml 双面板:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<!-- 列表 -->
<fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="400dp"
android:layout_marginRight="10dp"/>
<!-- 列表项的详细信息 -->
<fragment android:id="@+id/article"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.ArticleFragment"
android:layout_width="fill_parent" />
</LinearLayout>

如果这个程序运行在屏幕尺寸大于7inch的设备上,系统就会加载res/layout-large/main.xml 而不是res/layout/main.xml,在小于7inch的设备上就会加载res/layout/main.xml

需要注意的是,这种通过large限定符分辨屏幕尺寸的方法,适用于android3.2之前。在android3.2之后,为了更精确地分辨屏幕尺寸大小,Google推出了最小宽度限定符。

最小宽度限定符的使用和large基本一致,只是使用了具体的宽度限定。
res/layout/main.xml,单面板(默认)布局:

nearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"> <fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="match_parent" />
</LinearLayout>

res/layout-sw600dp/main.xml,双面板布局: Small Width 最小宽度

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="400dp"
android:layout_marginRight="10dp"/>
<fragment android:id="@+id/article"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.ArticleFragment"
android:layout_width="fill_parent" />
</LinearLayout>

Small Width 最小宽度这里不限定是横屏、还是纵屏的宽度,只要宽度的最小值大于600dp,就加载双面板的布局

这种最小宽度限定符适用于android3.2之后,所以如果要适配android全部的版本,就要使用large限定符和sw600dp文件同时存在于项目res目录下。

这就要求我们维护两个相同功能的文件。为了避免繁琐操作,我们就要使用布局别名。

使用布局别名
res/layout/main.xml: 单面板布局
res/layout-large/main.xml: 多面板布局(支持3.2版本之前的平板设备)
res/layout-sw600dp/main.xml: 多面板布局(支持3.2版本之后的平板设备)

l

由于后两个文具文件一样,我们可以用以下两个文件代替上面三个布局文件:

res/layout/main.xml 单面板布局
res/layout/main_twopanes.xml 双面板布局

然后在res下建立
res/values/layout.xml
res/values-large/layout.xml
res/values-sw600dp/layout.xml三个文件。

默认布局
res/values/layout.xml:

<resources>
<item name="main1" type="layout">@layout/main</item>
</resources>

Android3.2之前的平板布局
res/values-large/layout.xml:

<resources>
<item name="main1" type="layout">@layout/main_twopanes</item>
</resources>

Android3.2之后的平板布局
res/values-sw600dp/layout.xml:

<resources>
<item name="main1" type="layout">@layout/main_twopanes</item>
</resources>

这样就有了main为别名的布局。
在activity中setContentView(R.layout.main1);

这样,程序在运行时,就会检测手机的屏幕大小,如果是平板设备就会加载res/layout/main_twopanes.xml,如果是手机设备,就会加载res/layout/main.xml 。我们就解决了只使用一个布局文件来适配android3.2前后的所有平板设备。

注意几点:values-sw600dp和values-large下面的名字不一定都命名成layout.xml只要xml里面的内容都写成一致的就可以了。

使用屏幕方向限定符

如果我们要求给横屏、竖屏显示的布局不一样。就可以使用屏幕方向限定符来实现。
例如,要在平板上实现横竖屏显示不用的布局,可以用以下方式实现。
res/values-sw600dp-land/layouts.xml:横屏

<resources>
<item name="main" type="layout">@layout/main_twopanes</item>
</resources>

res/values-sw600dp-port/layouts.xml:竖屏

<resources>
<item name="main" type="layout">@layout/main</item>
</resources>

android屏幕适配的全攻略--支持不同的屏幕尺寸适配平板和手机的更多相关文章

  1. android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高

    1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...

  2. 打造一个高逼格的android开源项目——小白全攻略 (转)

    转自:打造一个高逼格的android开源项目 小引子 在平时的开发过程中,我们经常会查阅很多的资料,最常参考的是 github 的开源项目.通常在项目的主页面能看到项目的简介和基本使用,并且时不时能看 ...

  3. android屏幕适配的全攻略2--支持手机各种屏幕密度dpi

    如何为不同密度的屏幕提供不同的资源和使用密度独立的单位. 1 使用密度无关像素 坚决杜绝在布局文件中使用绝对像素来定位和设置大小.因为不同的屏幕有不同的像素密度,所以使用像素来设置控件大小是有问题的, ...

  4. Android Preference 设置偏好全攻略

    Android 设置是每个App必不可小的东西,看似很简单,但是初学不熟悉的很花时间去研究,特别样式兼容方面,以及有自定义设置的需求,下面是对用法做一个总结 Preference结构 界面结构看下图 ...

  5. Android屏幕适配全攻略(最权威的官方适配指导)屏幕尺寸 屏幕分辨率 屏幕像素密度 dpdipdpisppx mdpihdpixdpixxdpi

    Android屏幕适配全攻略(最权威的官方适配指导)原创赵凯强 发布于2015-05-19 11:34:17 阅读数 153734 收藏展开 转载请注明出处:http://blog.csdn.net/ ...

  6. Android屏幕适配全攻略 (转载)

    http://blog.csdn.net/jdsjlzx/article/details/45891551 https://github.com/hongyangAndroid/AndroidAuto ...

  7. Android使用XML全攻略(2)

    Android使用XML全攻略(2)   Android 是针对移动设备的一种新兴的开源操作系统和 SDK.借助它,您可以创建功能强大的移动应用程序.当您的应用程序可以访问 Web 服务时,其吸引力会 ...

  8. Android使用XML全攻略(1)

    Android使用XML全攻略(1)    Android 是针对移动设备的一种新兴的开源操作系统和 SDK.借助它,您可以创建功能强大的移动应用程序.当您的应用程序可以访问 Web 服务时,其吸引力 ...

  9. fiddler Android下https抓包全攻略

    fiddler Android下https抓包全攻略 fiddler的http.https的抓包功能非常强大,可非常便捷得对包进行断点跟踪和回放,但是普通的配置对于像招商银行.支付宝.陌陌这样的APP ...

随机推荐

  1. C# 委托浅析

    C# 中的委托(Delegate)类似于 C 或 C++ 中函数的指针.委托(Delegate) 是存有对某个方法的引用的一种引用类型变量.引用可在运行时被改变. 委托(Delegate)特别用于实现 ...

  2. django-模型层(ORM语法)

    今日内容概要(重要) 模型层(ORM语法):跟数据库打交道的 单表查询(增删改查) 常见的十几种查询方法 神奇的双下划线查询 多表操作 外键字段的增删改查 跨表查询(重点) 子查询 联表查询 今日内容 ...

  3. 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...

  4. 50个SQL语句(MySQL版) 问题十二

    --------------------------表结构-------------------------- student(StuId,StuName,StuAge,StuSex) 学生表 tea ...

  5. tomcat session漏洞反序列化详解

    1. 条件1)攻击者可以控制服务器上的文件名/文件内容2)tomcat context配置了persistencemanager的fileSotre3) persistenceManager 配置了s ...

  6. 开心一下-实现一个基于Java的中文编程语言2

    https://mp.weixin.qq.com/s/VmCTvh0c7X9DjIgIMycdlw   上一篇所提到的只是使用中文写Java,而不能算作一门新的语言.作为一门中文语言,需要语言提供的关 ...

  7. (二)用less+gulp+requireJs 搭建项目(gulp)

    gulp是自动化构建工具,基于node,需要安装node,如果你不了解node也没关系,先跟着来一遍再去了解node也不迟~ 首先去node官网下载安装包 1.新建项目文件夹 在目录下shift+右键 ...

  8. XStream学习手册

    ​​ 一.前言 1.XStream官网 http://x-stream.github.io 2.XStream是什么 XStream是一个简单的基于Java的类库,用来将Java对象序列化成XML(J ...

  9. Java实现蓝桥杯第八届决赛 对局匹配

    标题:对局匹配 小明喜欢在一个围棋网站上找别人在线对弈.这个网站上所有注册用户都有一个积分,代表他的围棋水平. 小明发现网站的自动对局系统在匹配对手时,只会将积分差恰好是K的两名用户匹配在一起.如果两 ...

  10. Java实现 LeetCode 557 反转字符串中的单词 III(StringBuilder的翻转和分割)

    557. 反转字符串中的单词 III 给定一个字符串,你需要反转字符串中每个单词的字符顺序,同时仍保留空格和单词的初始顺序. 示例 1: 输入: "Let's take LeetCode c ...