屏幕适配全攻略-阿里云开发者社区

开发者社区> 朱培> 正文

屏幕适配全攻略

简介: 一、重要概念 屏幕尺寸:指平米的对角线的长度,单位是英寸,1英寸=2.54厘米,它对我们屏幕适配不是很重要。 屏幕分辨率:指在横纵向上的像素点数,单位是px,1px = 1个像素点,一般以纵向像素*横向像素,如1920*1080. 屏幕像素密度:指每英寸上的像素点数,单位是dpi,即“dot per inch”的缩写,像素密度与屏幕尺寸和分辨率有关像素密度计算:对角线分辨率--&gt
+关注继续查看

一、重要概念

屏幕尺寸:指平米的对角线的长度,单位是英寸,1英寸=2.54厘米,它对我们屏幕适配不是很重要。

屏幕分辨率:指在横纵向上的像素点数,单位是px,1px = 1个像素点,一般以纵向像素*横向像素,如1920*1080.
屏幕像素密度:指每英寸上的像素点数,单位是dpi,即“dot per inch”的缩写,像素密度与屏幕尺寸和分辨率有关

像素密度计算:对角线分辨率-->对角线分辨率除以屏幕尺寸-->像素密度


例:Nexus 5 屏幕尺寸是4.95,分辨率是1920*1080,则dpi=(√(1920*1920+1080*1080))/4.94=445


px:构成图像的最小单位 使用android原生api返回的都是这个单位,如获取安卓屏幕的宽和高<br>
dp、dip:Density Independent Pixels的缩写,即密度无关像素,以160dpi(像素密度)为基准,1dip = 1px

sp:Scale-Independent Pixels 可以根据文字大小首选项进行缩放 谷歌开发官方推荐使用12sp或以上大小单位,否则可能用户看不清楚
首选字体大小为12sp,14sp,18sp,22sp。不要使用基数小数,以免造成精度丢失

安卓屏幕密度划分:mdpi、hdpi、xdpi、xxdpi

设计文档:http://www.apkbus.com/design/style/iconography.html

在设计图标时,对于五种主流的像素密度(MDPI、HDPI、XHDPI、XXHDPI 和 XXXHDPI)应按照 2:3:4:6:8 的比例进行缩放。例如,一个启动图标的尺寸为48x48 dp,这表示在 MDPI 的屏幕上其实际尺寸应为 48x48 px,在 HDPI 的屏幕上其实际大小是 MDPI 的 1.5 倍 (72x72 px),在 XDPI 的屏幕上其实际大小是 MDPI 的 2 倍 (96x96 px),依此类推。


二、解决方案,支持各种屏幕尺寸

1、wrap_content(包住内容) match_content匹配父容器的大小,weight:权重,同时用了wrap_content 权重大的先学会拉伸。

layout_weight只能在线程布局里使用
计算的宽度= 原来宽度 + 剩余空间所占百分比的宽度
假设屏幕宽度为L

Button1
2/3L = L + (L - 2L)* 1/3 = 2/3L


用0dp
1/3L = 0 + L *1/3
Button2
1/3L = L + (L- 2L)*2/3 = 1/3L


2、使用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>

3、布局别名

使用布局别名

res/layout/main.xml: 			单面板布局
res/layout-large/main.xml: 		多面板布局
res/layout-sw600dp/main.xml: 	多面板布局



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

setContentView(R.layout.main);

默认布局
res/values/layout.xml:
<resources>
    <item name="main" type="layout">@layout/main</item>
</resources>

Android3.2之前的平板布局
res/values-large/layout.xml:
<resources>
    <item name="main" type="layout">@layout/main_twopanes</item>
</resources>

Android3.2之后的平板布局
res/values-sw600dp/layout.xml:
<resources>
    <item name="main" type="layout">@layout/main_twopanes</item>
</resources>

4、屏幕宽度限定符

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-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>
5、屏幕方向限定符

使用屏幕方向限定符

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>

小屏幕,纵向:				1.单面板
小屏幕,横向:				单面板
7 英寸平板电脑,纵向: 		2.单面板,带操作栏
7 英寸平板电脑,横向: 		3.双面板,宽,带操作栏
10 英寸平板电脑,纵向: 	4.双面板,窄,带操作栏
10 英寸平板电脑,横向: 	双面板,宽,带操作栏
电视,横向: 				双面板,宽,带操作栏

1.res/layout/onepane.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>

2.res/layout/onepane_with_bar.xml:(单面板带操作栏)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout android:layout_width="match_parent"
                  android:id="@+id/linearLayout1"  
                  android:gravity="center"
                  android:layout_height="50dp">
        <ImageView android:id="@+id/imageView1"
                   android:layout_height="wrap_content"
                   android:layout_width="wrap_content"
                   android:src="@drawable/logo"
                   android:paddingRight="30dp"
                   android:layout_gravity="left"
                   android:layout_weight="0" />
        <View android:layout_height="wrap_content"
              android:id="@+id/view1"
              android:layout_width="wrap_content"
              android:layout_weight="1" />
        <Button android:id="@+id/categorybutton"
                android:background="@drawable/button_bg"
                android:layout_height="match_parent"
                android:layout_weight="0"
                android:layout_width="120dp"
                style="@style/CategoryButtonStyle"/>
    </LinearLayout>

    <fragment android:id="@+id/headlines"
              android:layout_height="fill_parent"
              android:name="com.example.android.newsreader.HeadlinesFragment"
              android:layout_width="match_parent" />
</LinearLayout>

3.res/layout/twopanes.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>

4.res/layout/twopanes_narrow.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="200dp"
              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>


1.res/values/layouts.xml:
<resources>
    <item name="main_layout" type="layout">@layout/onepane_with_bar</item>
    <bool name="has_two_panes">false</bool>
</resources>

2.res/values-sw600dp-land/layouts.xml:
<resources>
    <item name="main_layout" type="layout">@layout/twopanes</item>
    <bool name="has_two_panes">true</bool>
</resources>

3.res/values-sw600dp-port/layouts.xml:
<resources>
    <item name="main_layout" type="layout">@layout/onepane</item>
    <bool name="has_two_panes">false</bool>
</resources>

4.res/values-large-land/layouts.xml:
<resources>
    <item name="main_layout" type="layout">@layout/twopanes</item>
    <bool name="has_two_panes">true</bool>
</resources>

5.res/values-large-port/layouts.xml:
<resources>
    <item name="main_layout" type="layout">@layout/twopanes_narrow</item>
    <bool name="has_two_panes">true</bool>
</resources>

6、.9图的使用

目录为:sdk->tools->draw9patch.bat

主要是通过在这四条边画一个像素长度的点或线,来控制想要进行拉伸或者添加间隔的操作。
左边和上边的线控制的是拉伸区域(Stretchable area),这两条线的中心交集区域就是要
进行的拉伸区域;而右边和下边的两条线控制的是间隔区域(Padding box),这两条边是可选的,这个区域用来写内容


三、解决方案,支持各种屏幕密度

1.使用非密度制约像素

android:layout_alignParentRight="true"


2.提供备用位图

多提供几张图片。使用和目标文件夹相符的文件夹,占用内存小,因为图标放大的时候内存也会增加。

3、代码适配

dp和px的关系: dp = px/设备密度

public static int dp2px(Context ctx, float dp) {  
        float density = ctx.getResources().getDisplayMetrics().density;  
        int px = (int) (dp * density + 0.5f);// 四舍五入  
  
        return px;  
    }  
  
    public static float px2dp(Context ctx, int px) {  
        float density = ctx.getResources().getDisplayMetrics().density;  
        float dp = px / density;  
  
        return dp;  
    }

四、实施自适应用户界面流自适应

平板和手机设备:重复使用活动中的片段,用一个标志位,处理屏幕方向变化。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6911 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7751 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5457 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9425 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
2140 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16822 0
+关注
朱培
CSDN博客专家,大数据与云计算领域,常年活跃于Github、CSDN、开源中国等开源社区。
121
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载