【Android】画面卡顿优化列表流畅度一-CSDN博客

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

卡顿渲染耗时如图
新增数据卡顿上下滑动不了
卡顿表现有如下几个方面

  1. 网络图片渲染耗时大
  2. 上下滑动反应慢甚至画面不动
  3. 新增一页数据加载渲染时耗时比较大上下滑动几乎没有反应画面停止没有交互响应

背景

实际上这套数据加载逻辑已经运行了快一年多了之前也没有这些问题的。笔者是后面接手的也没觉得有问题。也许是最初数据量小当时看不出来
运行到今天设计业务数据量是3650条实际业务数据条数是1100条左右这个业务数据量原本也不是特别大。所以也没觉得有问题。
直到其他业务组的数据接入后数据量起来了这个列表数据就卡顿的几乎不能用了而不凑巧被领导知道了于是就有了本次优化

原本的设计如下

列表布局

 <android.support.v4.widget.NestedScrollView
            android:id="@+id/nestedScrollView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <live.bingoogolapple.refreshlayout.BGARefreshLayout
                android:id="@+id/mRefreshLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

                <android.support.v7.widget.RecyclerView
                    android:id="@+id/recycleView_playback"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FFFFFFFF"
                    android:nestedScrollingEnabled="false"
                    android:paddingLeft="20dp"
                    android:paddingRight="10dp"
                    android:paddingBottom="8dp"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
            </live.bingoogolapple.refreshlayout.BGARefreshLayout>
        </android.support.v4.widget.NestedScrollView>

RecyclerView.Adapter数据加载和下面类似

RecyclerView.Adapter 是用于在 RecyclerView 中展示数据的关键组件之一。下面是使用 RecyclerView.Adapter 的基本步骤

  1. 创建自定义的 Adapter 类首先需要创建一个继承自 RecyclerView.Adapter 的自定义 Adapter 类该类负责管理数据集合并将数据绑定到 RecyclerView 的 ViewHolder 上。
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    // 适配器的代码
}
  1. 创建 ViewHolder 类在自定义的 Adapter 类中需要创建一个继承自 RecyclerView.ViewHolder 的内部类用于表示 RecyclerView 中的每个子项的视图。
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    public static class MyViewHolder extends RecyclerView.ViewHolder {
        // ViewHolder 的代码
    }
}
  1. 实现 Adapter 的方法在自定义的 Adapter 类中需要实现一些方法例如 onCreateViewHolder、onBindViewHolder、getItemCount 等。这些方法用于创建 ViewHolder、绑定数据到 ViewHolder、获取数据集合的大小等操作。
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // 创建 ViewHolder
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        // 绑定数据到 ViewHolder
    }

    @Override
    public int getItemCount() {
        // 获取数据集合的大小
    }
}
  1. 在 onCreateViewHolder 方法中创建 ViewHolder在 onCreateViewHolder 方法中需要创建并返回一个 ViewHolder 对象用于表示 RecyclerView 中的每个子项的视图。
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // 创建 ViewHolder
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);
        return new MyViewHolder(itemView);
    }
}
  1. 在 onBindViewHolder 方法中绑定数据到 ViewHolder在 onBindViewHolder 方法中需要将数据绑定到 ViewHolder 上以便在 RecyclerView 中显示。
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        // 绑定数据到 ViewHolder
        MyData data = dataList.get(position);
        holder.bindData(data);
    }
}
  1. 将 Adapter 与 RecyclerView 关联最后需要将自定义的 Adapter 与 RecyclerView 关联起来以便在 RecyclerView 中展示数据。
RecyclerView recyclerView = findViewById(R.id.recycler_view);
MyAdapter adapter = new MyAdapter(dataList);
recyclerView.setAdapter(adapter);

在上面的代码中dataList 是数据集合R.layout.item_layout 是每个子项的布局文件。通过以上步骤就可以使用 RecyclerView.Adapter 在 RecyclerView 中展示数据了。

Glide图片加载库使用

 					Glide.with(context)
 						.load(imgUrl)
                        .into(holder.imageview);

BGARefreshLayout上拉加载更多组件使用方式叠加NestedScrollView

 BGARefreshViewHolder bgaNormalRefreshViewHolder = new BGANormalRefreshViewHolder(this, true);
        mRefreshLayout.setRefreshViewHolder(bgaNormalRefreshViewHolder);

        nestedScrollView = findViewById(R.id.nestedScrollView);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            nestedScrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
                @Override
                public void onScrollChange(View view, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                    NestedScrollView toNesstedScrollView = (NestedScrollView) view;
                   
                    if (scrollY < 5
                            || toNesstedScrollView.getChildAt(0).getMeasuredHeight()
                            == view.getMeasuredHeight()) {
                        return;
                    }
                    int height = toNesstedScrollView.getChildAt(0).getMeasuredHeight()
                            - view.getMeasuredHeight();
                    if (scrollY == height) {
                        // 为BGARefreshLayout 设置代理
                        if(mRefreshLayout.getDelegate()==null){
                             mRefreshLayout.setDelegate(XXXXActivity.this);
                        }
                        mRefreshLayout.beginLoadingMore();
                    }
                }
            });
        }

内存上到没有太多可书写的基本没有涉及内存方面的问题

设定优化方向和目标

画面卡顿的由来

Android 屏幕渲染 16ms 柱形图是指在 Android 应用程序中屏幕渲染所花费的时间以柱形图的形式进行可视化展示。这个柱形图通常用于监测应用程序的性能特别是在绘制 UI 时所花费的时间。
在 Android 中每秒钟需要渲染 60 帧的屏幕即每帧的时间限制为 16 毫秒1 秒 = 1000 毫秒 / 60 帧 ≈ 16.67 毫秒。如果屏幕渲染超过 16 毫秒就会导致丢帧屏幕卡顿。
柱形图中的每个柱子代表一帧的渲染时间。如果柱子的高度超过 16 毫秒就表示该帧的渲染时间超过了理想的 16 毫秒限制。柱形图越高表示渲染时间越长应用程序的性能可能会受到影响。
通过观察柱形图开发者可以判断应用程序在绘制 UI 时是否存在性能问题并进行相应的优化。优化的目标是尽量保持每帧的渲染时间在 16 毫秒以内以确保流畅的用户体验。

  1. 蓝色部分表示绘制时间或者在Java层创建和更新display list的时间。在一个View 实际被渲染前它需要先转换为GPU能识别的格式。简单来说可能就是几个绘制命令复杂一点我们可能在嵌入了一条从canvas获取的自定义路径。这一步完成之后输出结果就会被系统作为display list缓存起来。蓝色部分记录了这一帧对所有需要更新的view完成这两步花费的时间。当它很高的时候说明有很多view突然无效invalidate了或者是有几个自定义view在onDraw函数中做了特别复杂的绘制逻辑
    优化方向一清理布局xml中并没有用到或者被设置无效invalidate的view组件减少布局嵌套层级
  2. 红色部分代表执行时间也就是Android 2D渲染引擎OpenGL执行display list的时间。为了将变化绘制在屏幕上Android需要使用OpenGL ES API来绘制这些display list信息OpenGL最终将数据传给了GPU然后GPU渲染到屏幕上。View越复杂OpenGL绘制所需要的命令也越复杂。如果红色这一段比较高复杂的view都可能是罪魁祸首。还有值得注意的是比较大的峰值这说明有些view重复提交了也就是绘制了多次而它们可能并不需要重绘
    优化方向二采用局部更新view策略
  3. 橙色部分代表处理时间更进一步就是CPU告诉GPU渲染已经完成的时间。这部分是阻塞的CPU会等待GPU知道确认收到了命令如果这里比较高说明GPU做的任务太多了通常是由于很多复杂的view绘制从而需要过多的OpenGL渲染命令去处理

看下面这张渲染耗时图柱都破了屏幕了底部那条红线就没放眼里蛤
新增数据卡顿上下滑动不了

开启渲染耗时图柱开关

一般都在开发者选项-GPU呈现模式分析
请添加图片描述

设定优化目标为京东首页在同一机型上的交互表现

京东首页交互流畅度如下
请添加图片描述

分以下阶段进行解析当前问题的症结点

  1. 当前的设计是否满足交互流畅度。流畅度是否能达到京东首页的体感设计数据只加载文字加载文字后再加载静态图片测试验证当前布局、数据逻辑加载的交互体感情况。如不满足那基本就能确定是布局和数据加载逻辑有缺陷则需要进行重构或重写
  2. 在第1条满足的基础上测试同一个网络图片加载到所以列表子项里展示。记录交互体感和京东首页进行对比分析
  3. 测试单列动态图片加载效果并记录
  4. 再次测试双列动态图片加载效果并记录

更多优化记录如下

【Android】画面卡顿症结点分析二
【Android】画面卡顿优化列表流畅度三之RecyclerView刷新机制notifyItemRangeInserted

smartApi接口开发工具推荐

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线
smartApi是一款对标国外的postman的api调试开发工具由于开发人力就作者一个所以人力有限因此v1.0.0版本功能进行精简大功能项有

  • api参数填写
  • api请求响应数据展示
  • PDF形式的分享文档
  • Mock本地化解决方案
  • api列表数据本地化处理
  • 再加上UI方面的打磨

下面是一段smartApi使用介绍
在这里插入图片描述

下载地址

https://pan.baidu.com/s/1kFAGbsFIk3dDR64NwM5y2A?pwd=csdn

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: android
返回列表

上一篇：安卓开发实例：高德地图-CSDN博客

下一篇：Flutter案例日程安排首页效果 Lottie动画与Shimmer实现的微光效果-CSDN博客

“【Android】画面卡顿优化列表流畅度一-CSDN博客” 的相关文章

C++版Android实时投屏软件系统源码，安卓手机投屏软件源码，无需root权限1年前 (2023-02-02)
Android开发学习之路--RxAndroid之初体验1年前 (2023-02-02)
基于android的数码交流社区1年前 (2023-02-02)
【Android笔记67】Android之动态申请访问权限（工具类封装）1年前 (2023-02-02)
物联网平台搭建的全过程介绍（三）阿里云物联网设备接入订阅发布之Android studio例程_物联网平台搭建1年前 (2023-02-02)
Android Studio Electric Eel 正式版下载地址1年前 (2023-02-02)
Android入门第58天-真机调试1年前 (2023-02-02)
Android 深入系统完全讲解（28）1年前 (2023-02-02)
Android | Service1年前 (2023-02-02)
基于Android的高校家校互通平台1年前 (2023-02-02)

阿里云国际版