Android 关于 RecyclerView 瀑布流显示图片时 Item 切换、闪烁等问题优化

问题分析

最近使用RecyclerView的瀑布流样式加载、显示图片，由于刚开始没有进行优化，会有Item切换、闪烁、跳页等等等问题，体验甚是差呀，这就需要我们去优化改进了。

先考虑下，为什么会有这样的问题呢？因为图片在加载的时候由于尺寸未知（特别是高度），所以Item需要重新计算自己的尺寸，这样又会导致重绘，由于瀑布流一次会加载多张图片，所以就产生了，Item切换、闪烁、跳页等问题。说到底就是在加载图片前，先确定Item的尺寸，避免Item重新计算自己的尺寸。Item的尺寸如何确定呢？那就要先得到要加载图片的尺寸，然后设置给Item中的ImageView。

解决方案

网上有的说法是对StaggeredGridLayoutManager进行如下设置：

layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);

经测试，确实解决了Item左右切换的问题，但是滑动时候每一列还是会跳动，同时顶部和底部有空白。继续优化吧。

我们的图片data是网络请求获得的，得到data后先进行一次处理：

@Override
public void onSuccess(List data) {
     DataService.startService(mActivity, data, mSubtype);
 }

通过启动一个IntentService，根据图片的url，获得对应的Bitmap，进而得到图片的尺寸信息：

public class DataService extends IntentService {
    public DataService() {
        super("");
    }

    public static void startService(Context context, List datas, String subtype) {
        Intent intent = new Intent(context, DataService.class);
        intent.putParcelableArrayListExtra("data", (ArrayList) datas);
        intent.putExtra("subtype", subtype);
        context.startService(intent);
    }

    @Override
    protected void onHandleIntent(Intent intent) {
        if (intent == null) {
            return;
        }

        List datas = intent.getParcelableArrayListExtra("data");
        String subtype = intent.getStringExtra("subtype");
        handleGirlItemData(datas, subtype);
    }

    private void handleGirlItemData(List datas, String subtype) {
        if (datas.size() == 0) {
            EventBus.getDefault().post("finish");
            return;
        }
        for (GirlItemData data : datas) {
            Bitmap bitmap = ImageLoader.load(this, data.getUrl());
            if (bitmap != null) {
                data.setWidth(bitmap.getWidth());
                data.setHeight(bitmap.getHeight());
            }

            data.setSubtype(subtype);
        }
        EventBus.getDefault().post(datas);
    }
}

最后将尺寸信息封装到data中，并通过EventBus传回。

为什么要用IntentService呢？因为它在子线程执行，执行完后自动结束，同时我们获得Bitmap是通过Glide，只能在子线程进行，毕竟这个过程是个耗时操作，所以子线程加持的IntentService还是省心省事的。

得到EventBus返回的data，就是刷新Adapter了，看一下Adapter中的操作：

@Override
protected void convert(RecyclerView.ViewHolder viewHolder, GirlItemData girlItemData) {
        ViewHolder holder = (ViewHolder) viewHolder;
        ScaleImageView imageView = holder.getView(R.id.girl_item_iv);
        imageView.setInitSize(girlItemData.getWidth(), girlItemData.getHeight());
        ImageLoader.load(NiceReadApplication.getContext(), girlItemData.getUrl(), imageView);
    }

其实ScaleImageView重写了ImageView的onMeasure方法，我们将图片的宽高设置给ScaleImageView，然后再加载图片。

效果

最后我们来对比下前后的效果：

优化前

优化后

源码链接...