问题分析
最近使用RecyclerView的瀑布流样式加载、显示图片,由于刚开始没有进行优化,会有Item切换、闪烁、跳页等等等问题,体验甚是差呀,这就需要我们去优化改进了。
先考虑下,为什么会有这样的问题呢?因为图片在加载的时候由于尺寸未知(特别是高度),所以Item需要重新计算自己的尺寸,这样又会导致重绘,由于瀑布流一次会加载多张图片,所以就产生了,Item切换、闪烁、跳页等问题。说到底就是在加载图片前,先确定Item的尺寸,避免Item重新计算自己的尺寸。Item的尺寸如何确定呢?那就要先得到要加载图片的尺寸,然后设置给Item中的ImageView。
解决方案
网上有的说法是对StaggeredGridLayoutManager进行如下设置:
layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
经测试,确实解决了Item左右切换的问题,但是滑动时候每一列还是会跳动,同时顶部和底部有空白。继续优化吧。
我们的图片data是网络请求获得的,得到data后先进行一次处理:
@Override
public void onSuccess(List<GirlItemData> data) {
DataService.startService(mActivity, data, mSubtype);
}
通过启动一个IntentService,根据图片的url,获得对应的Bitmap,进而得到图片的尺寸信息:
public class DataService extends IntentService {
public DataService() {
super("");
}
public static void startService(Context context, List<GirlItemData> datas, String subtype) {
Intent intent = new Intent(context, DataService.class);
intent.putParcelableArrayListExtra("data", (ArrayList<? extends Parcelable>) datas);
intent.putExtra("subtype", subtype);
context.startService(intent);
}
@Override
protected void onHandleIntent(Intent intent) {
if (intent == null) {
return;
}
List<GirlItemData> datas = intent.getParcelableArrayListExtra("data");
String subtype = intent.getStringExtra("subtype");
handleGirlItemData(datas, subtype);
}
private void handleGirlItemData(List<GirlItemData> 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,然后再加载图片。
效果
最后我们来对比下前后的效果: