用Glide去实现图片的缓存和瀑布流

最新推荐文章于 2024-06-27 11:20:22 发布
最新推荐文章于 2024-06-27 11:20:22 发布
阅读量3.2k 收藏 3
点赞数 2
分类专栏： android开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxyudia/article/details/51302951
版权

效果图：
这里写图片描述
上面的加号和回收箱能实现加载一个图片和删除一个图片，结合上一篇实现的图片的加载用Glide实现图片的缓存，这次我们用RecyclerView来做，下面直接上代码，有问题留言大家一起探讨…

MainActivity代码：

public class MainActivity extends AppCompatActivity {
    private List<String> mDatas;
    private RecyclerView recyclerView;
    private MyAdaper adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initDatas();
        initView();
    }


    private void initDatas() {
        //这里用list代替数组集合,方便添加和删除图片
        mDatas = new ArrayList<String>();
        for (int i = 0; i < Images.imageThumbUrls.length; i++) {
            mDatas.add(Images.imageThumbUrls[i]);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_staggered, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == R.id.id_action_add) {
            adapter.addItemView(0);
            adapter.notifyDataSetChanged();
        }

        if (item.getItemId() == R.id.id_action_delete) {
            adapter.removeItemView(0);
            adapter.notifyDataSetChanged();
        }
        return super.onOptionsItemSelected(item);
    }

    private void initView() {
        recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3,
                StaggeredGridLayoutManager.VERTICAL));
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        adapter = new MyAdaper(this, mDatas);
        recyclerView.setAdapter(adapter);
        //给Adapter设置监听
        adapter.setOnItemClickListener(new MyAdaper.OnRecyclerViewItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(MainActivity.this, "点击了第" + (position + 1) + "个", Toast.LENGTH_SHORT).show();
            }
        });
    }


}

MyAdapter代码：

public class MyAdaper extends RecyclerView.Adapter<MyAdaper.ViewHolder> implements View.OnClickListener {
    private Context mContext;
    private List<String> mDatas;
    private static int SCREE_WIDTH = 0;
    private OnRecyclerViewItemClickListener mOnItemClickListener = null;

    public MyAdaper(Context context, List<String> datas) {
        this.mContext = context;
        this.mDatas = datas;
        SCREE_WIDTH = mContext.getResources().getDisplayMetrics().widthPixels;
    }

    @Override
    public void onClick(View v) {
        if (mOnItemClickListener != null) {
            //当点击事件发生时,对应着去执行,我们自己写的cycleview的方法
            mOnItemClickListener.onItemClick(v, (Integer) v.getTag());
        }
    }

    //定义一个recycleview的监听器
    public static interface OnRecyclerViewItemClickListener {
        void onItemClick(View view, int position);
    }

    public void setOnItemClickListener(OnRecyclerViewItemClickListener listener) {
        this.mOnItemClickListener = listener;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.recycle_item, viewGroup, false);
        ImageView imageView = (ImageView) view.findViewById(R.id.id_num);
        //给imageview的高度设置动态高度,实现瀑布流,也可以用其它方法去动态的设置它的高度
        imageView.getLayoutParams().height = (int) (new Random().nextInt(150) + 100);
        imageView.getLayoutParams().width = SCREE_WIDTH / 3;
        ViewHolder holder = new ViewHolder(view);
        view.setOnClickListener(this);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
        //用Glide去加载图片
        Glide.with(mContext).load(mDatas.get(i)).centerCrop().placeholder(R.drawable.empty_photo).into(viewHolder.image);
        viewHolder.itemView.setTag(i);
    }

    @Override
    public int getItemCount() {
        return mDatas.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView image;

        public ViewHolder(View itemView) {
            super(itemView);
            image = (ImageView) itemView.findViewById(R.id.id_num);
        }
    }

    //给recyclerview 动态添加一个itemView

    protected void addItemView(int position) {
        mDatas.add(position, Images.imageThumbUrls[position]);
        //和notifyDatasetChange进行区别
        notifyItemInserted(position);

    }

    //给recyclerview 动态删除一个itemView
    protected void removeItemView(int position) {
        mDatas.remove(Images.imageThumbUrls[position]);
        notifyItemRemoved(position);

    }
}

图片资源Images代码：

package user.example.com.myapplication;

public class Images {

    public final static String[] imageThumbUrls = new String[] {
        "https://img-my.csdn.net/uploads/201407/26/1406383299_1976.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383291_6518.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383291_8239.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383290_9329.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383290_1042.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383275_3977.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383265_8550.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383264_3954.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383264_4787.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383264_8243.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383248_3693.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383243_5120.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383242_3127.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383242_9576.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383242_1721.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383219_5806.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383214_7794.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383213_4418.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383213_3557.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383210_8779.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383172_4577.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383166_3407.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383166_2224.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383166_7301.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383165_7197.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383150_8410.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383131_3736.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383130_5094.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383130_7393.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383129_8813.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383100_3554.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383093_7894.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383092_2432.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383092_3071.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383091_3119.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383059_6589.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383059_8814.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383059_2237.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383058_4330.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406383038_3602.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382942_3079.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382942_8125.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382942_4881.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382941_4559.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382941_3845.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382924_8955.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382923_2141.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382923_8437.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382922_6166.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382922_4843.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382905_5804.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382904_3362.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382904_2312.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382904_4960.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382900_2418.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382881_4490.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382881_5935.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382880_3865.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382880_4662.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382879_2553.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382862_5375.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382862_1748.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382861_7618.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382861_8606.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382861_8949.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382841_9821.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382840_6603.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382840_2405.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382840_6354.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382839_5779.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382810_7578.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382810_2436.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382809_3883.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382809_6269.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382808_4179.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382790_8326.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382789_7174.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382789_5170.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382789_4118.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382788_9532.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382767_3184.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382767_4772.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382766_4924.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382766_5762.jpg",
        "https://img-my.csdn.net/uploads/201407/26/1406382765_7341.jpg",
        "https://img-my.csdn.net/uploads/201308/31/1377949442_4562.jpg"
    };
}

Glide使用缓存和设置图片显示样式的代码：

package user.example.com.myapplication;

import android.content.Context;
import com.bumptech.glide.Glide;
import com.bumptech.glide.GlideBuilder;
import com.bumptech.glide.load.DecodeFormat;
import com.bumptech.glide.load.engine.cache.InternalCacheDiskCacheFactory;
import com.bumptech.glide.load.engine.cache.LruResourceCache;
import com.bumptech.glide.module.GlideModule;

import java.io.File;

/**
 * Created by user on 2016/4/27.
 */
public class GlideConfiguration implements GlideModule {
    private Context mContext;

    @Override
    public void applyOptions(Context context, GlideBuilder builder) {
        mContext = context;
        builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
        //这里也能使用SD卡存储,换成相应的路径即可
        //builder.setDiskCache(new ExternalCacheDiskCacheFactory(context, getFileString(), 10 * 1024 * 1024));
        builder.setDiskCache(new InternalCacheDiskCacheFactory(context, getFileString(), 10 * 1024 * 1024));
        builder.setMemoryCache(new LruResourceCache(getUseAbleSize()));
    }

    @Override
    public void registerComponents(Context context, Glide glide) {

    }

    private String getFileString() {
        File dirFile = new File(mContext.getCacheDir().getAbsolutePath().toString() + "GlideBitampCache");
        File tempFile = new File(dirFile, "bitmaps");
        if (!tempFile.getParentFile().exists()) {
            tempFile.getParentFile().mkdirs();
        }
        return tempFile.getAbsolutePath().toString();
    }

    private int getUseAbleSize() {
        int result = (int) (Runtime.getRuntime().maxMemory() / 8);
        return result;
    }
}

下面看布局文件：

主布局文件activity_main:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="user.example.com.myapplication.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"/>
</RelativeLayout>

布局recycle_item：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/id_num"
        android:layout_width="100dp"
        android:layout_gravity="center"
        android:layout_height="100dp"
        android:gravity="center"
        android:padding="2dp"
        android:src="@drawable/empty_photo"
        android:text="1" />

</LinearLayout>

最后配置文件Manifests加入：

<meta-data
            android:name="user.example.com.myapplication.GlideConfiguration"
            android:value="GlideModule"
            />

权限：

 <uses-permission android:name="android.permission.INTERNET"/>

详情请点击代码下载（里面多余的类，可以删除）
参考：鸿洋大神的 Android RecyclerView 使用完全解析 体验艺术般的控件
参考：RecyclerView使用介绍

melonss
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
RecyclerView+CardView+Glide加载图片实现瀑布流
05-03
配合博客：Android框架之路——Glide加载图片（结合RecyclerView、CardView）
Android瀑布流
djun100的专栏
08-27 4596
应朋友之邀，临时改个demo，大体就这个样子，图片上层想加什么加什么，加载的是本地图片，不是网络的，但也可以拿来参考。因为不是本人现在项目用到的，改完了就不深究了，还有更重要的要忙。关键代码： package com.dodowaterfall; import java.io.IOException; import java.util.ArrayList; import java.util.A
安卓开发中的Glide库的使用
最新发布
m0_66843126的博客
06-27 1392
是一个功能强大的工具，它允许对加载的图片进行各种变换处理。使用方式：首先调用 Glide.with(context)，然后指定要加载的图片资源，最后调用 into(imageView) 将图片设置到 ImageView。更新 ID：如果你想要 Glide 缓存经过此变换的图片，你需要重写 equals 和 hashCode 方法，以确保不同的变换实例能被正确识别。android.permission.WRITE_EXTERNAL_STORAGE：允许应用程序写入存储在外部存储上的文件，例如SD卡。
Android Studio [RecyclerView/瀑布流显示]
weixin_30401605的博客
04-16 125
PuRecyclerViewActivity.java package com.xdw.a122.recyclerview; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.RecyclerView; import...
android 瀑布流图片实现
woshizoe的专栏
02-21 1095
http://blog.csdn.net/xyz_lmn/article/details/8102078 自pinterest使用了瀑布流展示图片后，有很多应用开始使用瀑布流的方式，像蘑菇街，美丽说。这里的瀑布流实现使用了开源代码。 layout： [html] view plaincopy xml version="
android瀑布流响应式布局,使用grid布局实现的图片瀑布流响应式布局
weixin_42615743的博客
05-26 330
CSS语言：CSSSCSS确定body {display: grid;place-content: center;background: #111;}.waterfall {width: 80vw;margin: 10em 0;display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));grid-gap: 1...
Glide缓存图片Demo
11-13
在Android应用开发中，图片加载是一项非常常见的任务，而Glide作为一个高效的图片加载库，...学习和掌握这一技术，对于Android开发者来说，无论是开发轮播图、瀑布流还是其他任何需要图片加载的组件，都将大有裨益。
Android RecyclerView实现瀑布流，图片自适应高度，不闪烁，解决位置交换
01-20
本篇文章将详细讲解如何在RecyclerView中实现瀑布流效果，同时确保图片自适应高度且不闪烁，并解决位置交换时的问题。 首先，我们要创建两个XML布局文件。`activity_waterfall`是主布局，`item_waterfall`是...
瀑布流（带有图片缓存）
12-03
在Android中，我们可以使用像Glide、Picasso、Fresco等第三方库来实现图片缓存功能。这些库内部都有完善的图片加载和缓存策略，比如Glide支持自定义缓存大小，Picasso有强大的图片处理能力，Fresco则提供了强大的离...
Glide简单瀑布流DEMO
02-23
在瀑布流DEMO中，可能使用了RecyclerView来实现视图的复用和滚动效果，同时配合StaggeredGridLayoutManager实现瀑布流布局。具体操作如下： 1. **创建RecyclerView**：在XML布局文件中添加RecyclerView，并设置对应...
android可以刷新和加载更多的图片瀑布流
07-06
android可以刷新和加载更多的图片瀑布流
Android瀑布流照片墙实现 体验不规则排列的美感
01-04
传统界面的布局方式总是行列分明、坐落有序的，这种布局已是司空见惯，在不知不觉中大家都已经对它产生了审美疲劳。这个时候瀑布流布局的出现，就给人带来了耳目一新的感觉，这种布局虽然看上去貌似毫无规律，但是却有一种说不上来的美感，以至于涌现出了大批的网站和应用纷纷使用这种新颖的布局来设计界面。 记得我在之前已经写过一篇关于如何在Android上实现照片墙功能的文章了，但那个时候是使用的GridView来进行布局的，这种布局方式只适用于“墙”上的每张图片大小都相同的情况，如果图片的大小参差不齐，在GridView中显示就会非常的难看。而使用瀑布流的布局方式就可以很好地解决这个问题，因此今天我们也来赶一下
Android recyclerview实现图片自适应高度的瀑布流
03-25
效果图和详细介绍在：https://blog.csdn.net/vida990717/article/details/88798109
Android Studio开发——使用RecyclerView实现图片瀑布流+分割线
bdwdwks的博客
03-29 1529
Android Studio开发——使用RecyclerView实现图片瀑布流+分割线 文章目录Android Studio开发——使用RecyclerView实现图片瀑布流+分割线任务描述：一、基本过程1. 引入依赖2. 布局中添加RecyclerView3.item布局（我这里只放置了一个ImageView控件）4. Adapter适配器设置5. 在Fragment中初始化RecyclerVi...
使用RecyclerView和Glide实现图片瀑布流（防止错位）
qq_20949825的博客
08-03 5199
使用RecyclerView和Glide实现图片瀑布流（防止错位）最近正在学习Android的新控件RecyclerView,感觉这是一个自由度很高的控件，除了可以实现最基本的ListView,GridView的功能之外，还可以实现瀑布流的效果。 最近正在学习Android的新控件RecyclerView,感觉这是一个自由度很高的控件，除了可以实现最基本的ListView,GridView的功能之外
android 瀑布流_RecyclerView 瀑布流图片错位问题-->测试可以
weixin_39999532的博客
11-27 495
RecyclerView 瀑布流图片错位问题​www.jianshu.com1PeterGuo/RecyclerViewRecyclerView 瀑布流图片错位问题​www.jianshu.com1PeterGuo/RecyclerView​github.comAndroid瀑布流优化，解决Recyclerview展示大批量图片时Item自动切换、闪烁、空白等问题---> 没有测试Andro...
安卓学习笔记-RecyclerView使用Glide加载网络图片瀑布流失效的情况以及瀑布流item间距设置
qq275467589的博客
05-15 895
瀑布流失效问题 RecycleView瀑布流用Glide加载网络图片会导致瀑布流失效，因为不知道网络加载的图片具体高度是多少；这时候我们可以手动设置图片高度，随机值，这样瀑布流就能正常使用了 @Override public void onBindViewHolder(@NonNull ViewHolder holder, int position) { ResultBeanData.ResultBean.HotInfoBean hotInfoBean = datas.get(.
android横向瀑布流布局,GitHub - wikison/android_waterfall: Android版的瀑布流布局
weixin_32662187的博客
05-25 187
Android瀑布流实例此项目由于最初设计问题，导致现在问题比较多，暂时停止维护。我现在在其他类似的瀑布流上进行完善开发,####请关注：有必要解释一下程序为什么采用addview方式而不是做成类似于ListView的那种Adapter数据方式。首先考虑的是这样实现比较简单，代码量不多，简单易懂，不用涉及AdapterView里的一些复杂View显示方法(onMeasure,onLayout等)，...
Android图片缓存库对比：UniversalImageLoader、Picasso与Glide
本文将深入探讨Android图片缓存的原理和特性对比，重点关注Universal ImageLoader、Picasso、Glide这三个在Android开发中广泛应用的图片加载库。首先，Universal ImageLoader作为早期的开源项目，被广泛采纳，而...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值