使用StaggeredGridLayoutManager瀑布流,Glide显示图片

来源:互联网 发布:淘宝动漫周边网店 编辑:程序博客网 时间:2024/05/19 23:13

      • 用一个实体bean来保存图片的url宽高信息
      • Adapter中的修改

在RecyclerView中使用StaggeredGridLayoutManager一般如下(这里是按照VERTICAL):

 mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,VERTICAL));

RecyclerView的itemView的布局如下:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              xmlns:app="http://schemas.android.com/apk/res-auto"              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:orientation="vertical"              android:padding="2dp">    <ImageView          android:scaleType="fitCenter"        android:id="@+id/iv_image"        android:layout_width="match_parent"        android:layout_height="wrap_content"/></LinearLayout>

如果此时直接在RecycleView的adapter中使用

 Glide.with(context).load(url).into( Imageview);

这中方式往往不能很好的展示
那是因为imageview没有一个合适高度来展示图片.
所以
第一步应该获取图片的原始的宽高
第二步计算宽高比
第三步修改imageview的高度即可

用一个实体bean来保存图片的url,宽,高信息

/** * Created by hxb♬ on 2017/12/2. */public class PicBean {    //图片的url    private String url ;    //imageview的宽    private int width;    //imageview的高    private int height;    public String getUrl() {        return url;    }    public void setUrl(String url) {        this.url = url;    }    public int getWidth() {        return width;    }    public void setWidth(int width) {        this.width = width;    }    public int getHeight() {        return height;    }    public void setHeight(int height) {        this.height = height;    }}

Adapter中的修改

这里的adapter用的是下面这个库
https://github.com/CymChad/BaseRecyclerViewAdapterHelper

/** * Created by hxb♬ on 2017/11/22. */public class PicAdapter extends BaseQuickAdapter<PicBean, BaseViewHolder> {    public PicAdapter(@Nullable List<PicBean> data) {        super(R.layout.item_pic, data);    }    @Override     protected void convert(BaseViewHolder helper, final PicBean item) {    //如果使用原生的RecyclerView.Adapter则下面的代码简单修改后可以放在onBindViewHolder中        final ImageView imageView = helper.getView(R.id.iv_image);        final Context context = imageView.getContext();        String url = item.getUrl();        int height = item.getHeight();        int width = item.getWidth();        if (height > 0) {        //如果height>0说明PicBean中的width,height信息已经修改,这时就修改imageview的宽高            ViewGroup.LayoutParams layoutParams = imageView.getLayoutParams();            layoutParams.width = width;            layoutParams.height = height;            imageView.setLayoutParams(layoutParams);              //直接加载图片             Glide.with(context).load(url).into( imageView );        } else {         //如果height<=0,就说明还没有设置PicBean的width,height            Glide.with(context).load(url)                    .asBitmap()                    .into(new SimpleTarget<Bitmap>() {                        @Override                        public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {                            //这里的width,height就是图片的原始宽高                            int width = resource.getWidth();                            int height = resource.getHeight();                            //计算出宽高比                            float ratio = (width * 1f) / height;                            //获取imageview的宽度,由于此时的StaggeredGridLayoutManager是                            //VERTICAL的,所以imageview的宽度是可以确定的                            int imageViewWidth = imageView.getWidth();                            //得到imageview的高度                            int imageViewHeight = (int) (imageViewWidth / ratio);                            //修改PicBean                            item.setWidth(imageViewWidth);                            item.setHeight(imageViewHeight);                            notifyDataSetChanged();                        }                    });        }    }}

到此完毕
另外,如果imageview有padding的话,可能imageview中图片会有模糊的情况,所以最好不要在imageview中设置padding

阅读全文
0 0
原创粉丝点击