`

屏幕适配

 
阅读更多

做过安卓开发的都知道,屏幕适配是一件非常困难的事情。
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种布局

添加属性:

xmlns:custom="http://schemas.android.com/apk/res-auto"  
custom:designWidth="384dp"  
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 为例

<me.dreamheart.autoscalinglayout.ASRelativeLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    xmlns:custom="http://schemas.android.com/apk/res-auto"  
    custom:designWidth="384dp"  
    custom:designHeight="575dp"  
    custom:autoScaleEnable="true"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical"  
    tools:context=".LoginActivity"  
    android:background="@drawable/login_bg"  
    >  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_marginTop="60dp"  
        android:text="Title"  
        android:textSize="30dp"  
        android:textColor="#fff"  
        android:layout_centerHorizontal="true"  
        />  
  
    <View android:id="@+id/login_input_form"  
        android:layout_width="270dp"  
        android:layout_height="100dp"  
        android:layout_marginTop="125dp"  
        android:layout_centerHorizontal="true"  
        android:background="@drawable/login_input_form"  
        />  
  
    <TextView android:id="@+id/user_name_tv"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_marginTop="140dp"  
        android:layout_marginLeft="16dp"  
        android:layout_alignLeft="@+id/login_input_form"  
        android:text="@string/user_name"  
        android:textSize="15dp"  
        android:textColor="#666"  
        />  
  
    <TextView android:id="@+id/password_tv"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_marginTop="190dp"  
        android:layout_alignLeft="@+id/user_name_tv"  
        android:text="@string/password"  
        android:textSize="15dp"  
        android:textColor="#666"  
        />  
  
    <EditText android:id="@+id/user_name"  
        android:layout_toRightOf="@+id/user_name_tv"  
        android:layout_marginLeft="10dp"  
        android:layout_alignBaseline="@+id/user_name_tv"  
        android:layout_height="wrap_content"  
        android:layout_width="190dp"  
        android:textSize="15dp"  
        android:textColor="#444"  
        android:hint="@string/prompt_name"  
        android:inputType="text"  
        android:maxLines="1"  
        android:singleLine="true" />  
  
    <EditText android:id="@+id/password"  
        android:layout_toRightOf="@+id/user_name_tv"  
        android:layout_marginLeft="10dp"  
        android:layout_alignBaseline="@+id/password_tv"  
        android:layout_height="wrap_content"  
        android:layout_width="190dp"  
        android:textSize="15dp"  
        android:textColor="#444"  
        android:hint="@string/prompt_password"  
        android:inputType="textPassword"  
        android:maxLines="1" android:singleLine="true" />  
  
    <Button android:id="@+id/email_sign_in_button"  
        android:background="@drawable/login_btn_selector"  
        android:layout_marginTop="260dp"  
        android:layout_centerHorizontal="true"  
        android:layout_width="270dp"  
        android:layout_height="40dp"  
        android:text="@string/action_sign_in"  
        android:textSize="20dp"  
        android:textColor="#444"  
        android:textStyle="bold" />  
  
</me.dreamheart.autoscalinglayout.ASRelativeLayout>  

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

分享到:
评论

相关推荐

    APP开发屏幕适配原理及实现方法(Android、iOS)

    "APP开发屏幕适配原理及实现方法(Android、iOS)" 屏幕适配是移动应用APP开发中一个非常重要的问题。随着各种屏幕尺寸和分辨率的出现,开发者需要解决的屏幕适配问题变得越来越复杂。 Android屏幕适配方案和iOS屏幕...

    Android代码-今日头条屏幕适配方案终极版,一个极低成本的 Android 屏幕适配方案

    A low-cost Android screen adaptation solution (今日头条屏幕适配方案终极版,一个极低成本的 Android 屏幕适配方案). Overview Pixel 2 XL | 1440 x 2880 | 560dpi: Pixel XL | 1440 x 2560 | 560dpi: ...

    Android 屏幕适配工具

    在Android开发中,屏幕适配是一项至关重要的任务,因为Android设备拥有各种各样的屏幕尺寸、分辨率和像素密度。为了确保应用程序在所有设备上都能提供一致且良好的用户体验,开发者需要掌握有效的屏幕适配策略。...

    Android autolayout 屏幕适配

    在Android开发中,屏幕适配是一项重要的任务,尤其是在全球用户使用的设备种类繁多,屏幕尺寸、分辨率各异的情况下。"Android autolayout"是Google推出的一种解决屏幕适配问题的方案,它旨在帮助开发者创建能够自动...

    Android屏幕适配资源

    在Android应用开发中,屏幕适配是一个至关重要的环节,因为Android设备有着各种不同的屏幕尺寸和分辨率。本资源包"Android屏幕适配资源"专注于解决这一问题,提供了values资源,能够帮助开发者轻松实现不同屏幕尺寸...

    Android-今日头条屏幕适配方案终极版一个极低成本的Android屏幕适配方案

    【Android屏幕适配方案终极版】是Android开发者面临的一个重要课题,尤其是在当今各种设备尺寸繁多的情况下。今日头条作为一款广受欢迎的信息聚合应用,其屏幕适配策略无疑具有很高的参考价值。这个低成本的解决方案...

    屏幕适配jar包

    屏幕适配是移动应用开发中的一个重要环节,尤其是在Android和iOS平台上,由于设备种类繁多,屏幕尺寸、分辨率差异巨大,不进行适配的话,应用程序在不同设备上的显示效果可能会大相径庭。"屏幕适配jar包"显然是一个...

    ReactNative屏幕适配工具

    React Native屏幕适配工具是为了解决在跨平台的移动应用开发中,由于不同设备屏幕尺寸和分辨率差异导致的布局显示问题。React Native作为一个流行的JavaScript框架,允许开发者使用JavaScript和React来构建原生的iOS...

    屏幕适配需要的工具

    在Android开发中,屏幕适配是一项至关重要的任务,因为Android设备有着各种各样的屏幕尺寸和分辨率。为了确保应用能在不同的设备上提供一致的用户体验,开发者需要掌握有效的屏幕适配技术。"屏幕适配需要的工具"这个...

    android屏幕适配px工具类

    在Android开发中,屏幕适配是一项重要的工作,尤其是在面对各种尺寸和分辨率的设备时。"android屏幕适配px工具类"就是为了解决这一问题而设计的,它可以帮助开发者更方便地处理像素(px)单位转换,确保应用在不同...

    Android屏幕适配:dimens自动生成工具以及使用方法,亲测好用

    在Android应用开发中,屏幕适配是一个至关重要的环节,因为Android设备有着各种不同的屏幕尺寸和分辨率。`dimens.xml`文件是Android系统提供的一种资源文件,用于存储尺寸相关的常量,如字体大小、间距、控件尺寸等...

    android屏幕适配方案

    在Android开发中,屏幕适配是一项至关重要的任务,因为Android设备有着广泛的屏幕尺寸和分辨率,从小型手机到大型平板电脑不一而足。一个良好的屏幕适配方案能够确保应用程序在不同设备上显示一致且用户体验良好。...

    关于手机端屏幕适配问题的注意事项及阿里高清方案运用实例--H5页面屏幕适配方案1

    总的来说,阿里高清屏幕适配方案结合了流式布局、响应式设计和rem单位的优点,为移动端屏幕适配提供了一种有效的方法。在实际开发中,开发者可以根据项目需求和目标用户的设备特性,选择最合适的适配策略。

    dimen屏幕适配2018-8最新资源

    在Android开发中,屏幕适配是一项至关重要的任务,它确保应用程序在各种尺寸和分辨率的设备上都能正常显示和运行。"dimen"是Android资源管理中一个关键的元素,专门用于处理尺寸相关的值,如视图的宽度、高度、间距...

    android_px_多屏幕适配生成工具和资源

    在Android开发中,多屏幕适配是一个至关重要的环节,因为Android设备有着各种不同的屏幕尺寸和分辨率,这使得应用需要能够自适应各种显示环境。本文将深入探讨如何利用Android的工具和资源来实现高效的多屏幕适配。 ...

    iOS8开发技术(Swift 版)【第3季】__屏幕适配详

    ### iOS8开发技术(Swift版)【第3季】__屏幕适配详解 #### 一、屏幕适配的重要性与考虑因素 在iOS开发过程中,为了确保应用能够在多种设备上正常运行,屏幕适配成为了必不可少的一环。随着苹果不断推出新设备,...

    【大屏可视化模板】vue-dataV-echarts-elementul大屏数据可视化方案,屏幕适配方案等比例缩放

    用了vue - echarts - datav-elementul大屏数据可视化方案,包含屏幕适配方案等比例缩放, 等比例缩放的屏幕适配方法。可以让你不需要大量使用百分比或者转换之类的方法去写屏幕自适应大小,而是可以用部分px直接写...

    android屏幕适配方法

    android屏幕适配方法

    Android屏幕适配主流方案的对比和集成

    在Android开发中,屏幕适配是一项至关重要的任务,因为Android设备拥有广泛的屏幕尺寸和分辨率。本文将详述几种主流的Android屏幕适配方案,并进行对比分析,帮助开发者选择最适合项目需求的方法。 一、密度无关...

Global site tag (gtag.js) - Google Analytics