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

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

2015.8.4 更新

增加参数custom:autoScaleType 设置缩放模式,可以设为“fitWidth”,"fitHeigth" 和 "fitInside"。分别代表缩放至宽度匹配,缩放至高度匹配以及缩放至适合容器内部,默认为"fitInside"。

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

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 plain copy

  1. xmlns:custom="http://schemas.android.com/apk/res-auto"
  2. custom:designWidth="384dp"
  3. custom:designHeight="575dp"
  4. custom:autoScaleEnable="true"
  5. custom:autoScaleType="fitInside"

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

autoScaleEnable 用来开启和关闭自动缩放,默认开启

autoScaleType 设置缩放模式,可以设为“fitWidth”,"fitHeigth" 和 "fitInside"。分别代表缩放至宽度匹配,缩放至高度匹配以及缩放至适合容器内部,默认为"fitInside"。

注意事项

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 plain copy

  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. <TextView
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:layout_marginTop="60dp"
  18. android:text="Title"
  19. android:textSize="30dp"
  20. android:textColor="#fff"
  21. android:layout_centerHorizontal="true"
  22. />
  23. <View android:id="@+id/login_input_form"
  24. android:layout_width="270dp"
  25. android:layout_height="100dp"
  26. android:layout_marginTop="125dp"
  27. android:layout_centerHorizontal="true"
  28. android:background="@drawable/login_input_form"
  29. />
  30. <TextView android:id="@+id/user_name_tv"
  31. android:layout_width="wrap_content"
  32. android:layout_height="wrap_content"
  33. android:layout_marginTop="140dp"
  34. android:layout_marginLeft="16dp"
  35. android:layout_alignLeft="@+id/login_input_form"
  36. android:text="@string/user_name"
  37. android:textSize="15dp"
  38. android:textColor="#666"
  39. />
  40. <TextView android:id="@+id/password_tv"
  41. android:layout_width="wrap_content"
  42. android:layout_height="wrap_content"
  43. android:layout_marginTop="190dp"
  44. android:layout_alignLeft="@+id/user_name_tv"
  45. android:text="@string/password"
  46. android:textSize="15dp"
  47. android:textColor="#666"
  48. />
  49. <EditText android:id="@+id/user_name"
  50. android:layout_toRightOf="@+id/user_name_tv"
  51. android:layout_marginLeft="10dp"
  52. android:layout_alignBaseline="@+id/user_name_tv"
  53. android:layout_height="wrap_content"
  54. android:layout_width="190dp"
  55. android:textSize="15dp"
  56. android:textColor="#444"
  57. android:hint="@string/prompt_name"
  58. android:inputType="text"
  59. android:maxLines="1"
  60. android:singleLine="true" />
  61. <EditText android:id="@+id/password"
  62. android:layout_toRightOf="@+id/user_name_tv"
  63. android:layout_marginLeft="10dp"
  64. android:layout_alignBaseline="@+id/password_tv"
  65. android:layout_height="wrap_content"
  66. android:layout_width="190dp"
  67. android:textSize="15dp"
  68. android:textColor="#444"
  69. android:hint="@string/prompt_password"
  70. android:inputType="textPassword"
  71. android:maxLines="1" android:singleLine="true" />
  72. <Button android:id="@+id/email_sign_in_button"
  73. android:background="@drawable/login_btn_selector"
  74. android:layout_marginTop="260dp"
  75. android:layout_centerHorizontal="true"
  76. android:layout_width="270dp"
  77. android:layout_height="40dp"
  78. android:text="@string/action_sign_in"
  79. android:textSize="20dp"
  80. android:textColor="#444"
  81. android:textStyle="bold" />
  82. </me.dreamheart.autoscalinglayout.ASRelativeLayout>

未使用AutoScalingLayout

使用AutoScalingLayout

时间: 2024-10-11 16:37:19

转: 安卓自动缩放布局,解决屏幕适配问题的相关文章

iOS布局和屏幕适配的一点总结

曾经,iOS开发是不需要考虑屏幕适配问题的,因为只有一种屏幕尺寸.而现在已经有了4种屏幕,4,5,6,6P,因此屏幕适配也成了iOS开发中必须考虑的问题.并且,这4种屏幕的宽高比全部都不一样,所以简单的按比例缩放并不能解决问题.我们最近做的一个APP也处理了屏幕适配,本文简单总结一下 根据屏幕类型判断 我不知道有没有更好的办法,我们的做法是根据设备类型,写一些if...else,或者switch语句 判断机型可以使用screen的height(不能使用width,因为4和5的width是一样的,

Android自定义控件系列八:详解onMeasure()(二)--利用onMeasure测量来实现图片拉伸永不变形,解决屏幕适配问题

上一篇文章详细讲解了一下onMeasure/measure方法在Android自定义控件时的原理和作用,参看博文:Android自定义控件系列七:详解onMeasure()方法中如何测量一个控件尺寸(一),今天就来真正实践一下,让这两个方法大显神威来帮我们搞定图片的屏幕适配问题. 请尊重原创劳动成果,转载请注明出处:http://blog.csdn.net/cyp331203/article/details/45038329,非允许请勿用于商业或盈利用途,违者必究. 使用ImageView会遇到

android自定义控件(8)-利用onMeasure测量使图片拉伸永不变形,解决屏幕适配问题

使用ImageView会遇到的问题 在Android应用中,都少不了图片的显示,ImageView,轮播图,ViewPager等等,很多都是来显示图片的,很多时候,我们都希望图片能够在宽度上填充父窗体,这样比较符合人的审美观点,但是问题就随之而来了,那就是高度如何定义??先来看一个普通的ImageView的 Xml布局文件的定义: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xm

给你一个全自动的屏幕适配方案(基于SW方案)!—— 解放你和UI的双手

Calces系列相关文章:Calces自动实现Android组件化模块构建 前言 屏幕适配一直是移动端开发热议的问题,但是适配方案往往在实际开发的时候会和UI提供的设计稿冲突.本文主要是基于官方推荐的配置限定符方案(Smallest Width目前Android屏幕适配的最优方案)来实现一个接近完美的屏幕适配方案. 对于完美的适配方案笔者是这样定义的: 能完美适配UI稿. 适配完毕后,在高清设备上不会出现模糊的现象. 尽量减少对项目的侵入性. 下面我会从屏幕适配的一些基础知识入手,向你慢慢展现一

IOS开发——UI基础-屏幕适配

一.适配 1.什么是适配?适应.兼容各种不同的情况 2.移动开发中,适配的常见种类 2.1系统适配 针对不同版本的操作系统进行适配 2.2屏幕适配 针对不同大小的屏幕尺寸进行适配 二.点和像素 1.在用户眼中屏幕是由无数个像素组成的像素越多,屏幕越清晰 2.在开发者眼中屏幕是由无数个点组成的,点又是由像素组成的像素越多,屏幕越清晰 三.Autoresizing简介 1.在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成相比之下,Autolay

iOS屏幕适配的几种方式

屏幕适配问题共有四种解决方案:(1)根据屏幕宽高写控件frame(下策);(2)Autoresizing的使用(中策);(3)AutoLayout的使用(上策);(4)sizeClasses+AutoLayout的使用(上上策).下面将会分别来进行叙述. (1)根据屏幕宽高写控件frame 利用宽高比,在不同的屏幕中来进行对控件的位置与控件的宽高进行等比例缩放.选定一个型号的屏幕的宽高为基准,进行等比例缩放.例如以iPhone6或者iPhone6s为基准. 其宽高分别是375与667.Iphon

Android 屏幕适配方案(百分比)

博客源址:Android 屏幕适配方案 1.概述 大家在Android开发时,肯定会觉得屏幕适配是个尤其痛苦的事,各种屏幕尺寸适配起来蛋疼无比.如果我们换个角度我们看下这个问题,不知道大家有没有了解过web前端开发,或者说大家对于网页都不陌生吧,其实适配的问题在web页面的设计中理论上也存在,为什么这么说呢?电脑的显示器的分辨率.包括手机分辨率,我敢说分辨率的种类远超过Android设备的分辨率,那么有一个很奇怪的现象: 为什么Web页面设计人员从来没有说过,尼玛适配好麻烦? 那么,到底是什么原

屏幕适配Autoresizing / Autolayout / Mansory / 自定义Frame实现

1. 什么是适配: 适应.兼容不同版本不同尺寸的移动智能设备 iPhone尺寸:3.5.4.0.4.7.5.5inch iPad尺寸:7.9.9.7inch,横竖屏适配 2. 点与像素 非retaina屏:1个点 = 1个像素 retain屏:1个点 = 4个像素 3. 什么是Autolayout 1>  是一种“自动布局”技术,专门用来布局UI界面的 2> 自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广 3> 自iOS 7(Xcode 5)开始,Autolay

iOS开发屏幕适配问题解决方案

屏幕适配问题共有四种解决方案:(1)根据屏幕宽高写控件frame(下策):(2)Autoresizing的使用(中策):(3)AutoLayout的使用(上策):(4)sizeClasses+AutoLayout的使用(上上策).下面将会分别来进行叙述. (1)根据当前屏幕的宽高写frame 在新特性界面中,根据:[UIScreen mainScreen].bounds.size.height.来判断用户的屏幕长度,来判断时3.5寸,4寸,4.7寸,5.5寸,以此来设置新特性中图片选用哪套. 常