Adnroid Recycleview加载瀑布流，计算item高度、解决加载更多时item位移的问题

最新推荐文章于 2023-07-04 15:17:30 发布

置顶 PenTablet

最新推荐文章于 2023-07-04 15:17:30 发布

阅读量1.2k

点赞数

分类专栏： Adnroid Recycleview加载瀑布流，计算item高度、解文章标签： android

本文链接：https://blog.csdn.net/pentablet/article/details/108280256

版权

Adnroid Recycleview加载瀑布流，计算item高度、解专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何解决Android RecyclerView在加载更多数据时出现的item位移现象，通过调整图片高度计算方式及使用notifyItemRangeChanged()替代notifyDataSetChanged()，实现了瀑布流布局稳定加载。

摘要由CSDN通过智能技术生成

Adnroid 使用Recycleview加载瀑布流，加载更多的时候出现item位移的现象，虽然有动画，但还是有点不舒服。在网上查看了一些资料后，好多网址内容都是一样的，设置最多的就是这个，滑动中，不处理 gap，

layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);

但是我设置后还是没什么卵用。

下来我说一下自己思路，你们参考一下。

一：在适配器中加载内容图片之前，就设置该控件的高度。因为宽度是根据手机屏幕平分的，就不用处理。只用处理高度就行。这个在最后变再说说我是怎么处理高度问题的，先把滑动位移的问题解决！设置高度当然也是通过

setLayoutParams(layoutParams);来设置了

二：在Recyclerview滑动过程中，由于缓存复用机制，会对Item进行重绘, 如果不确定item的宽高，就会造成位置错乱和闪烁。这个就是出现位移的主要原因。我么在加载更多的时候，可以更改刷新适配器的方式：

将notifyDataSetChanged()--->改为：notifyItemRangeChanged()。将全部刷新改为局部的刷新。这样就不会重新绘制之前的item。而只重新加在新的item。就不会出现滑动位移的问题了。【亲测有效！】

代码：

这个是更改之前的代码，判断当前的page页数，是否是第一页，如果是，说明为刷新，否则为加载更多。

加载更多中，直接addAll将新的数据添加到list中，然后notifyDataSetChanged()全部刷新适配器。这样就会导致上边已经加载出来的item重新绘制，从而导致item 的位移。

改动之后的代码：

可以看到，我提前计算出了当前列表中有多少条数据（listSize），然后再加新的数据添加到list中，然后通过notifyItemRangeChanged()，进行局部的刷新。

notifyItemRangeChanged使用：

notifyItemRangeChanged(int startPosition,int itemcount)

startPosition:起始位置，插入数据的位置。
itemcount:数据个数。

这样滑动加载更多后就不会发生item位移的现象了。

当然，如果有更好的办法，可以留言交流啊～～

加下来说一说上边提到的计算图片的高度的问题。

首先，加载瀑布流主要的就是高度的计算，当然在布局中肯定不能将item的高度写死，这样，我们就要在适配器中动态的计算没个图片的高度。

首先要让服务端将每一个图片的宽高返回，不然没法搞瀑布流。

计算方法：

//计算item的宽度
print int itemWidth = (DeviceUtils.getScreenWidth((Activity) context) - 48) / 2;

// 获取服务端返回的照片的宽高
 String imahe_width = getDataList().get(position).video_thumbnail_width; 
 String imahe_height = getDataList().get(position).video_thumbnail_height; 
//等比缩放
double ratio = (itemWidth * 1.0) / Double.parseDouble(imahe_width);
int height = (int) (Double.parseDouble(imahe_height) * ratio);
// 获取控件的pparmas
ViewGroup.LayoutParams layoutParamsImage = ((BigVideoViewHolder) holder).imgvideo.getLayoutParams();
// 赋值高度
layoutParamsImage.height = height;
((BigVideoViewHolder) holder).imgvideo.setLayoutParams(layoutParamsImage);

这样在加载图片之前，我们就已将固定好了图片的高度，从而实现瀑布流的样式效果。

下边是整个适配器的代码。大家可以借鉴这来。

package com.koib.healthcontrol.adapter;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;
import com.koib.healthcontrol.R;
import com.koib.healthcontrol.activity.PostDetailsActivity;
import com.koib.healthcontrol.activity.VideoPlayerActivity;
import com.koib.healthcontrol.model.HomeRecommendModel;
import com.koib.healthcontrol.utils.AppStringUtils;
import com.koib.healthcontrol.utils.DeviceUtils;
import com.koib.healthcontrol.utils.GlideUtils;
import com.koib.healthcontrol.view.MyFrontTextView;

import java.util.List;

public class HomeBindDoctorContentAdapter extends RecyclerView.Adapter<HomeBindDoctorContentAdapter.ViewHolder> {
    private List<HomeRecommendModel.Data.RecommendList> list;
    private final static String TAG = "HomeDoctorContentAdapte";
    private Context context;
    private String dr_id;
    private int itemWidth;
    private int maxDpHeight = 230, minDpHeight = 97; // dp值
    private int maxPxHeight, mixPxHeight; //根据上边的dp值 计算出来的px值

    public HomeBindDoctorContentAdapter(List<HomeRecommendModel.Data.RecommendList> list, Context context, String dr_id) {
        this.list = list;
        this.context = context;
        this.dr_id = dr_id;
        //计算item的宽度
        itemWidth = (DeviceUtils.getScreenWidth((Activity) context) - 48) / 2;
        // 计算出最高的px与最低的px
        maxPxHeight = DeviceUtils.dip2px(context, maxDpHeight);
        mixPxHeight = DeviceUtils.dip2px(context, minDpHeight);
        Log.e(TAG, "计算出来的最大值与最小值 -->px : 大：" + maxPxHeight + "--小：--" + mixPxHeight);
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = View.inflate(parent.getContext(), R.layout.item_doctor_recommend_video, null);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        RequestOptions optionsbig = new RequestOptions()
                .placeholder(R.mipmap.zhanweitu_big)//图片加载出来前，显示的图片
                .fallback(R.mipmap.zhanweitu_big) //url为空的时候,显示的图片
                .error(R.mipmap.zhanweitu_big);//图片加载失败后，显示的图片

        String imahe_width = list.get(position).video_thumbnail_width; // 照片的宽度
        String imahe_height = list.get(position).video_thumbnail_height; // 照片的高度
        //等比缩放
        double ratio = (itemWidth * 1.0) / Double.parseDouble(imahe_width);
        int height = (int) (Double.parseDouble(imahe_height) * ratio);
        ViewGroup.LayoutParams layoutParams = holder.rl_content.getLayoutParams();
        ViewGroup.LayoutParams layoutParamsImage = holder.imgvideo.getLayoutParams();
        // 转化为dp
        int dpHeight = DeviceUtils.px2dip(context, height);
        if (height > maxPxHeight) {
            height = maxPxHeight;
        } else if (height < mixPxHeight) {
            height = mixPxHeight;
        }
        layoutParams.height = height;
        layoutParamsImage.height = height;
        holder.rl_content.setLayoutParams(layoutParams);
        holder.imgvideo.setLayoutParams(layoutParamsImage);

        Log.e(TAG, position + "返回照片的宽: " + imahe_width + "--高--" + imahe_height);
        Log.e(TAG, "计算出来的高: " + "--高--" + height + "--转化为dp后的高度：" + dpHeight);


        holder.tvTime.setText(list.get(position).video_info.video_time_duration);
        holder.tvname.setText(list.get(position).author_info.nick_name);
        Glide.with(context).asBitmap().load(list.get(position).video_thumbnail_img).apply(optionsbig).into(holder.imgvideo);
        holder.tvtitle.setText(list.get(position).title);

        GlideUtils.showHeadImg(context, holder.img_user, list.get(position).author_info.avatar);
        holder.tvplaynum.setText(AppStringUtils.formatNum(list.get(position).view_count, false));
        holder.rl_item.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (list.get(position).type.equals("1")) {
                    Intent intent = new Intent(context, PostDetailsActivity.class);
                    intent.putExtra("id", list.get(position).id);
                    if (!dr_id.equals("")) {
                        intent.putExtra("dr_id", dr_id);

                    }
                    intent.putExtra("position", position);
                    if (list.get(position).img_list.size() != 0) {
                        intent.putExtra("shareImg", list.get(position).img_list.get(0).img_url);
                    }
                    context.startActivity(intent);
                } else if (list.get(position).type.equals("2")) {
                    Intent intent = new Intent(context, VideoPlayerActivity.class);
                    intent.putExtra("id", list.get(position).id);
                    if (!dr_id.equals("")) {
                        intent.putExtra("dr_id", dr_id);
                    }
                    intent.putExtra("position", position);
                    intent.putExtra("shareImg", list.get(position).video_thumbnail_img);
                    context.startActivity(intent);
                }
            }
        });
    }

    public void notifyData() {

    }

    @Override
    public int getItemCount() {
        if (list.size() > 6) {
            return 6;
        } else {
            return list.size();
        }

    }

    class ViewHolder extends RecyclerView.ViewHolder {
        private TextView tvtitle, tvname, tvplaynum, tvflag, tvTime;
        private ImageView imgvideo, img_user;
        private RelativeLayout rl_item, rl_content;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            tvname = itemView.findViewById(R.id.tv_homevideo_name);
            tvtitle = itemView.findViewById(R.id.tv_homevideo_title);
            tvplaynum = itemView.findViewById(R.id.tv_homevideo_playnum);
            imgvideo = itemView.findViewById(R.id.img_video);
            img_user = itemView.findViewById(R.id.img_user);
            rl_item = itemView.findViewById(R.id.rl_item);
            tvTime = itemView.findViewById(R.id.tv_homevideo_time);
            rl_content = itemView.findViewById(R.id.rl_content);
        }
    }
}

其中因为图片展示的高度有最大高度与最小高度的限制，所以其中做了一写判断。还涉及到px与dp的转化。

    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }

好了。代码就这么多了，还是那句话，有什么好的建议支持留言交流哦。

谢谢~~