用Glide去實現圖片的快取和瀑布流

阿新 • • 發佈：2019-01-10

效果圖：
這裡寫圖片描述
上面的加號和回收箱能實現載入一個圖片和刪除一個圖片，結合上一篇實現的圖片的載入用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[] {
        "http://img.my.csdn.net/uploads/201407/26/1406383299_1976.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383291_6518.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383291_8239.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383290_9329.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383290_1042.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383275_3977.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383265_8550.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383264_3954.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383264_4787.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383264_8243.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383248_3693.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383243_5120.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383242_3127.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383242_9576.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383242_1721.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383219_5806.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383214_7794.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383213_4418.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383213_3557.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383210_8779.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383172_4577.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383166_3407.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383166_2224.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383166_7301.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383165_7197.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383150_8410.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383131_3736.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383130_5094.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383130_7393.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383129_8813.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383100_3554.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383093_7894.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383092_2432.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383092_3071.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383091_3119.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383059_6589.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383059_8814.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383059_2237.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383058_4330.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406383038_3602.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382942_3079.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382942_8125.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382942_4881.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382941_4559.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382941_3845.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382924_8955.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382923_2141.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382923_8437.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382922_6166.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382922_4843.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382905_5804.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382904_3362.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382904_2312.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382904_4960.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382900_2418.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382881_4490.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382881_5935.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382880_3865.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382880_4662.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382879_2553.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382862_5375.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382862_1748.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382861_7618.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382861_8606.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382861_8949.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382841_9821.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382840_6603.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382840_2405.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382840_6354.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382839_5779.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382810_7578.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382810_2436.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382809_3883.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382809_6269.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382808_4179.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382790_8326.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382789_7174.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382789_5170.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382789_4118.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382788_9532.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382767_3184.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382767_4772.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382766_4924.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382766_5762.jpg",
        "http://img.my.csdn.net/uploads/201407/26/1406382765_7341.jpg",
        "http://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"/>

用Glide去實現圖片的快取和瀑布流

效果圖：上面的加號和回收箱能實現載入一個圖片和刪除一個圖片，結合上一篇實現的圖片的載入用Glide實現圖片的快取，這次我們用RecyclerView來做，下面直接上程式碼，有問題留言大家一起探討… MainActivity程式碼： public

Android使用LruCache、DiskLruCache實現圖片快取+圖片瀑布流

PPS：本文僅用於學習利用LruCache、DiskLruCache圖片快取策略、實現瀑布流和Matix檢視大圖縮放移動等功能，如果想用到專案中，建議用更成熟的框架，如glide、picasso 等。先上效果圖： ###圖片瀑布流這個用

Tcl腳本調用高層API實現儀表使用和主機創建配置的自己主動化測試用例

sub ret eat ati 包含 lin name ref config #設置Chassis的基本參數，包含IP地址。port的數量等等 set chassisAddr 10.132.238.190 set islot 1 set portList {11 12

用UGUI方式實現圖片的遮罩，圓角圖片，圓形圖片效果

實現圖片的圓角效果，圓形圖片效果，是一個很常見的功能，如下很多人會使用shader來做，但是太麻煩了，網上關於UGUI實現這種效果的方法我也一直沒有找到我這裡知道一個很簡單的方法，不用寫一行程式碼現在我打算告訴你原理，就是通過Mask遮罩來實現第一步：

RecyclerView 實現縱向，橫向，和瀑布流的滾動佈局

實現縱向滾動 1，在app/build.gradle檔案，dependencies中新增如下內容 ----------------- compile ‘com.android.support:recyclerview-v7:24.2.1’ --------

Java：遞迴 - 用遞迴實現冒泡，和解決遞迴返回值問題

不能用for/while，使用遞迴實現冒泡和for/while一樣，只是迭代的引數都要寫成傳參否則會丟失狀態下面的程式碼loop表示每次的冒泡遍歷次數，執行時依次遞減。遞迴冒泡程式碼： /* * a recursive way of bubbleSort *

資料分析之用Power Query實現資料轉換和清洗（功能操作篇）

一個案例快速瞭解Power Query 憑藉 Power Query，可以搜尋資料來源，建立連線，然後按照可滿足你需求的方式調整資料（例如刪除列、更改資料型別或合併表格）以建立報表。例：將門店一&門店二兩個工作簿的資料整合到一張工作表，並統計出各銷售代表每個月的業

Android 完美實現圖片圓角和圓形對實現進行分析

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/24555655本來想在網上找個圓角的例子看一看，不盡人意啊，基本都是官方的Demo的那張原理圖，稍後會貼出。於是自己自定義了個View，實現圖片的圓角以及圓形效

用ajax去做圖片驗證碼登入

下面是view（）程式碼<script src="~/Scripts/jquery-1.10.2.js"></script> @*以下就是圖片驗證碼;使用者名稱、密碼、及驗證碼*@ <script language="javascript" type="tex

深度學習Caffe實戰（9）Windows 平臺caffe用MATLAB介面實現訓練網路和測試

上一篇介紹了網路協議中各個引數的作用，知道了各個引數的作用，想必應該可以嘗試修改網路結構了。前幾篇部落格介紹的都是用命令列訓練和測試網路，這篇部落格介紹如何用MATLAB介面實現訓練和測試網路，window平臺下caffe使用者本來就少，這方面的資料更少了，下一

Flutter 實現圖片快取到本地

網上可能有很多實現的外掛，有些動不動就上千行程式碼，其實很簡單只需要在原始碼的基礎上加一個本地快取就行，畢竟原始碼是最可靠的 https://github.com/dikeboy/flutter-cache-image-local Flutter 自帶的有2個圖片的Wid

【譯】Ngnix實現一個快取和縮略處理的反向代理伺服器

一兩個月前，我決定從我的站點中移除Varnish ，並用Nginx內建的快取系統替代它。我本來已經在我的python站點上用了nginx來反向代理，所以擺脫Varnish意味著少了一個麻煩。我花了好幾天時間閱讀怎樣配置nginx的快取，翻遍了我的python站點的不

用js去操作HTML元素和CSS樣式

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/htm

用原生JS實現圖片輪播切換功能

效果如圖：程式碼如下：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title

快速實現RecycleView的網格和瀑布流佈局新增頭部(尾部原理一樣，故略之)

RecycleView高度的解耦，非常靈活，通過佈局管理器LayoutManager控制其顯示的佈局；通過ItemDecoration控制Item間的間隔；通過ItemAnimator控制Item增刪的動畫；不過需要自己寫介面實現點選、長按事件。它只管回收與複用

Android實現圖片快取與非同步載入

ImageManager2這個類具有非同步從網路下載圖片，從sd讀取本地圖片，記憶體快取，硬碟快取，圖片使用動畫漸現等功能，已經將其應用在包含大量圖片的應用中一年多，沒有出現oom。 Android程式常常會記憶體溢位，網上也有很多解決方案，如軟引用，手動呼叫recycle

spring boot學習（06）：Redis 實現資料快取和 Session 共享

前言前面我們學習了redis的基本使用，我們知道redis最常用的應用場景，就是資料快取和session共享，Spring Boot 針對這兩個場景都做了一些優化，讓我們在實際專案中使用非常的方便。資料快取使用 Redis 做為資料快取

用VB+API實現網頁下載和資料提交功能。

其實如果是單純的下載網頁，程式碼可以更簡單，但俺這段程式碼不僅可以下載WEB頁面，同時還可以向WEB頁傳遞引數，完全可以替換XMLHTTP的GET功能，俺本來還想加上POST功能的，後來專案中不需要，所以就沒加了，想了解WININET API的朋友，應該依此

IOS基礎UI之(三)手寫UI和storyboard方式實現圖片移動和縮放

手寫UI是最早進行UI介面佈局的方法，優點是靈活自由，缺點是使程式碼看起來比較長。平時學習的時候可以多嘗試手寫ui，這樣會更深入熟悉控制元件。storyboard開發效率相對比較高。實際開發中看情況而定！！下面用這兩種方式分別實現圖片移動和縮放。功能描述：

用vue去實現百度下拉選單

在我們學習ajax的時候一定要做的例子就是下拉選單了吧？為什麼？因為當你輸入一個值的時候下面的div裡面會無重新整理的去加入資料，當時的實現也是挺難的，反正比下面的vue實現難。。。下面我們來看看vu

用Glide去實現圖片的快取和瀑布流

相關推薦