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

相关文章推荐

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

做过安卓开发的都知道,屏幕适配是一件非常困难的事情。 Google官方的解决方案:screens_support 需要写多个layout文件以及dimens.xml,工作量大不说,维护也麻烦。 ...
  • dj0379
  • dj0379
  • 2016年04月11日 10:59
  • 1977

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

有了这个,android开发再也不用担心适配问题了

Android自定义View之布局(layout)缩放

需求:手指滑动布局放大缩小移动,其子控件也跟着放大缩小。 系统自带有放大缩小的控件:ZoomControls.控制一张图片的放大缩小很简单。但这不满足我们的需求。今天我们来完成对布局的放大缩小还有移...

缩放系列(二):所有子控件也随着缩放、手势缩放、多点触控layout

下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像button有可被点击的功能,缩放后不能丢失该功能)...

Android整个布局缩放

效果图 在整个界面的跟布局设置一个ID,在Activity中获取这个控件

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

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

做过安卓开发的都知道,屏幕适配是一件非常困难的事情。 Google官方的解决方案:http://developer.android.com/guide/practices/screens_suppor...
  • ljh102
  • ljh102
  • 2015年05月06日 16:51
  • 5663

APP开发实战174-Android7.0的屏幕缩放功能对APP的影响

Android 7.0 支持用户设置显示尺寸,以放大或缩小屏幕上的所有元素,从而提升设备对视力不佳用户的可访问性。用户无法将屏幕缩放至低于最小屏幕宽度 sw320dp,该宽度是 Nexus 4 的宽...
  • xjbclz
  • xjbclz
  • 2017年05月21日 17:29
  • 5201

关于android分辨率兼容(屏幕适配)问题

关于手机分辨率相关术语和概念 屏幕尺寸:实际的物理尺寸,屏幕的对角线测量。为了方便,android把所有的屏幕尺寸分为了4个广义的大小:小,正常,大,特大。 屏幕密度:屏幕的物理面积内像素的数量,...

Android界面整体缩放

根据不同的长宽比进行缩放:保持长宽比不变 layout_parent = (LinearLayout) findViewById(R.id.root_layout); dm = new Disp...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 不同尺寸屏幕适配采用自动缩放完美解决
举报原因:
原因补充:

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