Android 不同尺寸屏幕适配采用自动缩放完美解决

转载 2015年07月09日 16:41:53

转自:http://blog.csdn.net/ljh102/article/details/45536293

做过安卓开发的都知道,屏幕适配是一件非常困难的事情。

Google官方的解决方案:screens_support 需要写多个layout文件以及dimens.xml,工作量大不说,维护也麻烦。

其实很多时候我们的需求很简单,就是要求不同的屏幕看上去效果一样就可以了。这样就需要我们布局的时候采用百分比来定位。
说到百分比,我们第一时间想到的是layout_weight,但是layout_weight实际使用效果并不是很好,特别是一些复杂情况下需要层层嵌套。也无法解决所有问题,比如文字大小。

我想到的解决方案是根据屏幕大小重新对布局以及布局内部对象的大小进行调整。之前做过的一些项目里面的自定义view也用过这种方法。
我在网上也搜到了一些相关资料,比如 Vanteon Electronic Design  。说明这种方法是可行的。剩下的问题就是怎么把这种方式封装成一个通用的解决方案,能以最简便的方式融入到开发中来。

经过一番实验,我初步开发出来了AutoScalingLayout
源码:https://github.com/Junhua102/AutoScalingLayout


实现原理:

原理类似我们用播放器看视频的时候,无论怎么调整窗口大小,播放器都可以自动调整视频大小适合窗口大小。因为视频有一个原始分辨率,播放器会根据窗口实际大小对视频进行缩放。

我们写布局的时候一般是根据某个基准分辨率来(比如UI给的原型图),自动缩放布局的作用就是将这个基准布局乘以一个缩放比例,达到适配所有分辨率的目的。

计算缩放比例公式: 实际大小 / 设计大小 = 缩放比例
只需要给定一个设计大小,就可以计算出缩放比例,然后将布局内部所有元素的尺寸都乘以这个缩放比例,就可以适配实际屏幕了。


使用方法:
studio用户使用release/AutoScalingLayout.aar
eclipse用户使用release/AutoScalingLayout.jar,并将attr.xml复制到value目录

替换布局:

只需要替换需要缩放的根布局即可,内部子布局会自动缩放

原布局 自动缩放布局
RelativeLayout  ASRelativeLayout
LinearLayout  ASLinearLayout
FrameLayout  ASFrameLayout

目前只支持以上3种布局

添加属性:
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. xmlns:custom="http://schemas.android.com/apk/res-auto"  
  2. custom:designWidth="384dp"  
  3. custom:designHeight="575dp"  

designWidth和designHeight就是你在可视化编辑xml时使用的屏幕大小。比如我使用的是Nexus 4,屏幕尺换算成dp就是384dp和575dp(减去状态栏和操作栏)


注意事项

1.designWidth和designHeight非常重要,千万不要填错,否则缩放出来就不是你想要的效果了。
2.如果designWidth和designHeight的单位是dp,那么所有内部子view的单位都必须是dp,不能写px、pt等其他单位。文字大小也不能用sp。如果你想无脑照抄UI给出的像素值,就全部单位用px就可以了。

3.AutoScalingLayout缩放时会保持deginWidth和designHeight的纵横比,不用担心正方形变矩形。


以sample中的 activity_login_dp.xml 为例

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <me.dreamheart.autoscalinglayout.ASRelativeLayout  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     xmlns:custom="http://schemas.android.com/apk/res-auto"  
  5.     custom:designWidth="384dp"  
  6.     custom:designHeight="575dp"  
  7.     custom:autoScaleEnable="true"  
  8.     android:layout_width="match_parent"  
  9.     android:layout_height="match_parent"  
  10.     android:orientation="vertical"  
  11.     tools:context=".LoginActivity"  
  12.     android:background="@drawable/login_bg"  
  13.     >  
  14.   
  15.     <TextView  
  16.         android:layout_width="wrap_content"  
  17.         android:layout_height="wrap_content"  
  18.         android:layout_marginTop="60dp"  
  19.         android:text="Title"  
  20.         android:textSize="30dp"  
  21.         android:textColor="#fff"  
  22.         android:layout_centerHorizontal="true"  
  23.         />  
  24.   
  25.     <View android:id="@+id/login_input_form"  
  26.         android:layout_width="270dp"  
  27.         android:layout_height="100dp"  
  28.         android:layout_marginTop="125dp"  
  29.         android:layout_centerHorizontal="true"  
  30.         android:background="@drawable/login_input_form"  
  31.         />  
  32.   
  33.     <TextView android:id="@+id/user_name_tv"  
  34.         android:layout_width="wrap_content"  
  35.         android:layout_height="wrap_content"  
  36.         android:layout_marginTop="140dp"  
  37.         android:layout_marginLeft="16dp"  
  38.         android:layout_alignLeft="@+id/login_input_form"  
  39.         android:text="@string/user_name"  
  40.         android:textSize="15dp"  
  41.         android:textColor="#666"  
  42.         />  
  43.   
  44.     <TextView android:id="@+id/password_tv"  
  45.         android:layout_width="wrap_content"  
  46.         android:layout_height="wrap_content"  
  47.         android:layout_marginTop="190dp"  
  48.         android:layout_alignLeft="@+id/user_name_tv"  
  49.         android:text="@string/password"  
  50.         android:textSize="15dp"  
  51.         android:textColor="#666"  
  52.         />  
  53.   
  54.     <EditText android:id="@+id/user_name"  
  55.         android:layout_toRightOf="@+id/user_name_tv"  
  56.         android:layout_marginLeft="10dp"  
  57.         android:layout_alignBaseline="@+id/user_name_tv"  
  58.         android:layout_height="wrap_content"  
  59.         android:layout_width="190dp"  
  60.         android:textSize="15dp"  
  61.         android:textColor="#444"  
  62.         android:hint="@string/prompt_name"  
  63.         android:inputType="text"  
  64.         android:maxLines="1"  
  65.         android:singleLine="true" />  
  66.   
  67.     <EditText android:id="@+id/password"  
  68.         android:layout_toRightOf="@+id/user_name_tv"  
  69.         android:layout_marginLeft="10dp"  
  70.         android:layout_alignBaseline="@+id/password_tv"  
  71.         android:layout_height="wrap_content"  
  72.         android:layout_width="190dp"  
  73.         android:textSize="15dp"  
  74.         android:textColor="#444"  
  75.         android:hint="@string/prompt_password"  
  76.         android:inputType="textPassword"  
  77.         android:maxLines="1" android:singleLine="true" />  
  78.   
  79.     <Button android:id="@+id/email_sign_in_button"  
  80.         android:background="@drawable/login_btn_selector"  
  81.         android:layout_marginTop="260dp"  
  82.         android:layout_centerHorizontal="true"  
  83.         android:layout_width="270dp"  
  84.         android:layout_height="40dp"  
  85.         android:text="@string/action_sign_in"  
  86.         android:textSize="20dp"  
  87.         android:textColor="#444"  
  88.         android:textStyle="bold" />  
  89.   
  90. </me.dreamheart.autoscalinglayout.ASRelativeLayout>  

未使用AutoScalingLayout



使用AutoScalingLayout

【Android】用Studio完成多设备多分辨率的适配

最近研究了一下Android中的自动适配,加上Studio便捷的实时预览功能,总结一下如何在Android Studio中快速方便适配多种屏幕。...
  • u011156012
  • u011156012
  • 2015年11月30日 18:35
  • 13531

Android——drawable、dpi、dip、px、缩放因子及屏幕适配

drawable与mipmapAndroid drawable微技巧,你所不知道的drawable的那些细节关于切图1、切一套(800*480) 一些小公司做的小应用可能只切了一套图,美工成...
  • wuseyukui
  • wuseyukui
  • 2015年05月11日 22:29
  • 1367

(转)[整理]Android屏幕适配(不同的屏幕分辨率和尺寸)

原地址:http://blog.csdn.net/ttkatrina/article/details/50623043 Android屏幕适配 目录: ...
  • duyiqun
  • duyiqun
  • 2017年02月13日 22:43
  • 870

ImageView的android:adjustViewBounds属性

取值为true时: Adjust the ImageView's bounds to preserve the aspect ration of its drawable. 调整ImageView...
  • onceing
  • onceing
  • 2016年05月31日 17:26
  • 519

android分辨率 尺寸 dpi换算

酷友观点/经验:UI设计师不可不知的安卓屏幕知识(原创文章)  系统分类: 设计文章 - 酷友观点/经验 - 工作技巧 文章版权:renkai 原创,如需商业用途或转载请与 renkai 联系,谢...
  • wawxf2008
  • wawxf2008
  • 2015年08月09日 20:31
  • 12375

4种必须知道的Android屏幕自适应解决方案

以下是Demo首页的预览图 demo下载:http://www.eoeandroid.com/forum.php?mod=attachment&aid=NjE0Njh8ZTI...
  • xiahao86
  • xiahao86
  • 2014年02月25日 16:45
  • 39134

自动缩放布局,以后再也不用担心适配问题了

有了这个,android开发再也不用担心适配问题了
  • qq_33234564
  • qq_33234564
  • 2016年10月21日 14:24
  • 985

开源,安卓自动缩放布局,解决屏幕适配问题

做过安卓开发的都知道,屏幕适配是一件非常困难的事情。 Google官方的解决方案:screens_support 需要写多个layout文件以及dimens.xml,工作量大不说,维护也麻烦。 其实...
  • xiechengfa
  • xiechengfa
  • 2015年05月12日 22:58
  • 4198

Android界面整体缩放

根据不同的长宽比进行缩放:保持长宽比不变 layout_parent = (LinearLayout) findViewById(R.id.root_layout); dm = new Disp...
  • aa1028181143
  • aa1028181143
  • 2015年04月22日 15:21
  • 1914

android 屏幕分辨率获取,等比缩放,屏幕横竖屏设置,屏幕截取

总结一下Android开发中适配性的问题,首先对于控件间距和大小最好使用屏幕密度dip去做,这样可以避免太大的差异 获取屏幕密度方法; DisplayMetrics dm = new Displa...
  • yudajun
  • yudajun
  • 2012年08月15日 17:59
  • 5698
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 不同尺寸屏幕适配采用自动缩放完美解决
举报原因:
原因补充:

(最多只允许输入30个字)