实现 Android UI 自适应的最佳实践

这篇具有很好参考价值的文章主要介绍了实现 Android UI 自适应的最佳实践。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        在 Android 开发中,不同设备的屏幕尺寸和分辨率千差万别,导致同一个界面在不同设备上的显示效果可能大相径庭。因此,为了在各种设备上都能呈现出优秀的 UI,开发者需要进行 UI 自适应的设计。

一、ScreenAdapterLayout

        ScreenAdapterLayout 是一个自定义的继承自 RelativeLayout 的布局,它可以帮助开发者快速在不同尺寸的设备上实现 UI 自适应。使用 ScreenAdapterLayout 的过程也十分简单,只需将原来页面的根布局替换成 ScreenAdapterLayout 即可,ScreenAdapterLayout代码如下:

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.RelativeLayout;

/**
 * 自定义布局,实现屏幕适配,将页面根布局换成 ScreenAdapterLayout
 * <p>
 * ScreenAdapterLayout 会在 onMeasure() 中计算子控件缩放后的尺寸和位置
 */
public class ScreenAdapterLayout extends RelativeLayout {

    //flag 用于避免重复计算
    private boolean flag;

    public ScreenAdapterLayout(Context context) {
        super(context);
    }

    public ScreenAdapterLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ScreenAdapterLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //只有第一次 onMeasure 时才进行计算
        if (!flag) {
            //获取缩放比例
            float scaleX = Utils.getInstance(getContext()).getHorizontalScale();
            float scaleY = Utils.getInstance(getContext()).getVerticalScale();
            int count = getChildCount();
            for (int i = 0; i < count; i++) {
                View child = getChildAt(i);
                LayoutParams params = (LayoutParams) child.getLayoutParams();
                //根据缩放比例计算子控件的尺寸和位置
                params.width = (int) (params.width * scaleX);
                params.height = (int) (params.height * scaleY);
                params.leftMargin = (int) (params.leftMargin * scaleX);
                params.rightMargin = (int) (params.rightMargin * scaleX);
                params.topMargin = (int) (params.topMargin * scaleY);
                params.bottomMargin = (int) (params.bottomMargin * scaleY);
            }
            //标记已经计算过
            flag = true;
        }
        //调用父类 onMeasure()
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }
}

         在 ScreenAdapterLayout 中,onMeasure() 方法被重写。在这个方法中,首先获取了屏幕的宽高和缩放比例。然后遍历布局中所有子 View,根据缩放比例对它们进行缩放。最后将 flag 设置为 true,避免重复缩放。

        使用方法非常简单,只需将你原来的布局类改为 ScreenAdapterLayout 即可,如下所示:

<?xml version="1.0" encoding="utf-8"?>
<com.study.pixel.ScreenAdapterLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="540px"
        android:layout_height="540px"
        android:layout_marginLeft="10px"
        android:text="Hello World!"
        android:background="@color/colorAccent"/>

</com.study.pixel.ScreenAdapterLayout>

二、Utils工具类

工具类Utils代码如下:

import android.content.Context;
import android.util.DisplayMetrics;
import android.view.WindowManager;

public class Utils {

    private static Utils utils;

    //这里是设计稿参考宽高
    private static final float STANDARD_WIDTH = 1080;
    private static final float STANDARD_HEIGHT = 1920;

    //这里是屏幕显示宽高
    private int mDisplayWidth;
    private int mDisplayHeight;

    private Utils(Context context){
        //获取屏幕的宽高
        if(mDisplayWidth == 0 || mDisplayHeight == 0){
            WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
            if (manager != null){
                DisplayMetrics displayMetrics = new DisplayMetrics();
                manager.getDefaultDisplay().getMetrics(displayMetrics);
                if (displayMetrics.widthPixels > displayMetrics.heightPixels){
                    //横屏
                    mDisplayWidth = displayMetrics.heightPixels;
                    mDisplayHeight = displayMetrics.widthPixels;
                }else{
                    mDisplayWidth = displayMetrics.widthPixels;
                    mDisplayHeight = displayMetrics.heightPixels - getStatusBarHeight(context);
                }
            }
        }

    }

    public int getStatusBarHeight(Context context){
        int resID = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resID > 0){
            return context.getResources().getDimensionPixelSize(resID);
        }
        return 0;
    }

    public static Utils getInstance(Context context){
        if (utils == null){
            utils = new Utils(context.getApplicationContext());
        }
        return utils;
    }

    //获取水平方向的缩放比例
    public float getHorizontalScale(){
        return mDisplayWidth / STANDARD_WIDTH;
    }

    //获取垂直方向的缩放比例
    public float getVerticalScale(){
        return mDisplayHeight / STANDARD_HEIGHT;
    }

}

         这是工具类 Utils,用于计算设备屏幕尺寸与设计稿尺寸的比例。

        首先,在类中定义了两个常量:STANDARD_WIDTH 和 STANDARD_HEIGHT,表示设计稿的宽度和高度,即 UI 设计师设计时所参考的标准尺寸。

        其次,该类的构造函数 Utils(Context context) 中获取了屏幕的宽高,并将其存储在成员变量 mDisplayWidth 和 mDisplayHeight 中。如果 mDisplayWidth 和 mDisplayHeight 已经被赋值,就不会再次获取屏幕宽高。该构造函数还调用了 getStatusBarHeight(Context context) 方法,用于获取状态栏的高度。

        getStatusBarHeight(Context context) 方法通过获取系统资源的方式,获得了状态栏的高度,并返回这个值。在计算高度的缩放比例时,要减去状态栏的高度,避免状态栏影响缩放比例。

        getInstance(Context context) 方法是单例模式的实现,它用于获取 Utils 类的实例。如果 utils 为 null,就创建一个 Utils 对象并返回。否则,直接返回 utils。

        最后,getHorizontalScale() 和 getVerticalScale() 方法用于计算水平方向和垂直方向的缩放比例。它们分别将屏幕的宽高与设计稿的宽高相除,得到一个缩放比例。这些方法可以帮助开发者在不同尺寸的设备上实现 UI 的自适应。

        如果设计稿的屏幕宽度为1080,设置一个宽度为540的TextView,android:layout_width="540px",将ScreenAdapterLayout设置成根布局,那么不管在任何屏幕尺寸的设备上,TextView的宽度都会显示成屏幕宽度的一半。文章来源地址https://www.toymoban.com/news/detail-835982.html

到了这里,关于实现 Android UI 自适应的最佳实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 安卓Android 架构模式及UI布局设计

    Android UI 设计是指在Android应用程序中创建用户界面的过程。这涉及到使用XML布局文件定义界面元素的位置和外观,以及通过Java或Kotlin代码处理用户交互。Android UI设计包括使用各种视图组件(如按钮、文本框、列表等)和布局管理器(如线性布局、相对布局等)来构建用户友

    2024年04月13日
    浏览(49)
  • Android UI 开发·界面布局开发·案例分析

    目录 ​编辑 1.  线性布局(LinearLayout) 2.  相对布局(RelativeLayout) 3.  表格布局(TableLayout) 4.  帧布局(FrameLayout) 5.  网格布局(GridLayout) 6.  绝对布局(AbsoluteLayout) 补充内容:关于selector状态选择器         LinearLayout线性布局是一种最简单的布局方式,它有垂

    2024年02月03日
    浏览(38)
  • Android布局和控件:创建用户界面的XML布局文件和常用UI控件详解

    在Android应用开发中,创建用户界面是一个重要的任务。通过使用XML布局文件和常用的UI控件,开发人员可以设计和构建出吸引人且功能丰富的应用界面。本文将详细介绍如何使用XML布局文件来创建Android应用的用户界面,并深入探讨一些常用UI控件的属性和用法。 XML布局文件是

    2024年02月17日
    浏览(41)
  • Android UI—仿微信底部导航栏布局,吃透这份Android高级工程师面试497题解析

    android:layout_width=``\\\"match_parent\\\" android:layout_height=``\\\"match_parent\\\" android:orientation=``\\\"vertical\\\" TextView android:layout_height=``\\\"wrap_content\\\" android:layout_width=``\\\"wrap_content\\\" android:text=``\\\"微信\\\" android:textSize=``\\\"20sp\\\" / TextView android:layout_height=``\\\"wrap_content\\\" android:layout_width=``\\\"wrap_content\\\" android:text=``\\\"http://www

    2024年04月16日
    浏览(41)
  • naive-ui ngrid自适应布局

    template     div         n-dividerSelf 响应式/n-divider   n-grid cols=\\\"2 400:4 600:6\\\" responsive=\\\"self\\\"     n-grid-item       div class=\\\"light-green\\\"         1 似乎自适应不好用,       /div     /n-grid-item     n-grid-item       div class=\\\"green\\\"         2       /div     /n-grid-item     n-grid-item       d

    2023年04月15日
    浏览(38)
  • Android复杂UI的性能优化实践 - PTQBookPageView 性能优化记录

    作者:彭泰强 要做性能优化,首先得知道性能怎么度量、怎么表示。因为性能是一个很抽象的词,我们必须把它量化、可视化。那么,因为是UI组件优化,我首先选用了 GPU呈现模式分析 这一工具。 在手机上的开发者模式里可以开启 GPU呈现(渲染)模式分析 这一工具,有的

    2024年02月14日
    浏览(45)
  • Vue3使用 xx UI解决布局高度自适应

    在相应的Sider部分添加:height: ‘91.8vh’,即可。示例: vw、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的

    2024年02月04日
    浏览(41)
  • Android UI-实现底部切换标签(fragment)

    ================================= 前言 – 本篇博客要分享的一个UI效果——实现底部切换标签,想必大家在一些应用上面遇到过这种效果了,最典型的就是微信了,可以左右滑动切换页面,也可以点击标签页滑动页面,它们是如何实现的呢,本篇博客为了简单只介绍如何实现点击底

    2024年04月22日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包