最近在强化Android的技术,准备换个坑吃饭了。最近面试了几家公司,都 特别喜欢考两个点。RecycleView和Rxjava,嗯,那我就索性用这两个结合上缓存机制实现一下瀑布流。废话少说,先看效果
加载逻辑其实用上Rxjava就很简单了。利用concat操作符就很容易完成了。
一.先贴上布局,这个 很简单。
主activity布局
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycleView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
item布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/item_img"
android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"/>
</LinearLayout>
这两个都没啥好说的了。如果想美化一下,用CardView做子布局, 还能弄个阴影效果就很好看了。
二.代码部分
我先来贴上Adapter,这个没什么好说的,就是普通的Adapter
package com.xiaonan.cool.waterflowimage;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.List;
import java.util.Random;
public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private static List<String> list = null;
private static Context context = null;
//生成随机高度的Random
private Random rand;
private static ImageLoader loader = null;
public MyAdapter(Context cont,List<String> ll){
context = cont;
list = ll;
rand = new Random();
loader = new ImageLoader(cont);
}
@Override
public int getItemCount() {
return list.size();
}
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
View view = LayoutInflater.from(context).inflate(R.layout.recycle_item,viewGroup,false);
return new MyViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int position) {
ViewGroup.LayoutParams lp = ((MyViewHolder)viewHolder).image.getLayoutParams();
lp.height = 420; //这里我用了固定高度,如果想随机高度就用个随机数
((MyViewHolder)viewHolder).image.setLayoutParams(lp);
//设置tag
((MyViewHolder)viewHolder).image.setTag(list.get(position));
((MyViewHolder)viewHolder).image.setImageResource(R.mipmap.empty_img);
//下载/加载图片
loader.loadImage(list.get(position),((MyViewHolder)viewHolder).image);
}
class MyViewHolder extends RecyclerView.ViewHolder{
ImageView image = null;
public MyViewHolder(@NonNull View itemView) {
super(itemView);
image = itemView.findViewById(R.id.item_img);
}
}
}
然后是比较关键的部分,就是上面的ImageLoader的实现,这里面实现了图片下载和缓存的逻辑
package com.xiaonan.cool.waterflowimage;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.support.v4.util.LruCache;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.jakewharton.disklrucache.DiskLruCache;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Random;
import io.reactivex.Observable;
import io.reactivex.ObservableEmitter;
import io.reactivex.ObservableOnSubscribe;
import io.reactivex.android.schedulers.AndroidSchedulers;
import io.reactivex.functions.Consumer;
import io.reactivex.schedulers.Schedulers;
public class ImageLoader {
private LruCache<String,Bitmap> lruCache = null;
private static Context context = null;
private static DiskLruCache mDiskLruCache = null;
public ImageLoader(Context cont){
long maxMemory = Runtime.getRuntime().maxMemory();
//初始化LruCache,传入的参数一般是maxMemory/8
lruCache = new LruCache<String,Bitmap>((int) (Runtime.getRuntime().maxMemory() / 1024) / 8){
@Override
protected int sizeOf(String key, Bitmap value) {
return value.getByteCount() / 1024;
}
};
//这里初始化DiskLruCache
//参数1.存储路径
//参数2.app版本,这里版本如果变化,Disk缓存会全部失效
//参数3.1个key对应多少个文件
//参数4.存储大小
try {
mDiskLruCache = DiskLruCache.open(getDiskCacheDir(cont,"ImageTemp"), 1, 1, 10 * 1024 * 1024);
} catch (IOException e) {
e.printStackTrace();
Logger.d("缓存开启失败");
}
}
public void loadImage(final String url, final ImageView view){
final String hashKey = hashKeyForDisk(url);
//读取内存
Observable<Bitmap> memory = Observable.create(new ObservableOnSubscribe<Bitmap>() {
@Override
public void subscribe(ObservableEmitter<Bitmap> emitter) throws Exception {
Bitmap bitmap = getImageFromCache(hashKey);
if(bitmap != null){
Logger.d("------------------>>命中内存");
emitter.onNext(bitmap);
}else{
Logger.d("内存未命中");
emitter.onComplete();
}
}
}).subscribeOn(Schedulers.io());
//读取硬盘
Observable<Bitmap> disk = Observable.create(new ObservableOnSubscribe<Bitmap>() {
@Override
public void subscribe(ObservableEmitter<Bitmap> emitter) throws Exception {
Bitmap bitmap = getImageFromDisk(hashKey);
if(bitmap != null){
Logger.d("------------------>>命中硬盘");
//存缓存
putImageToCache(hashKey,bitmap);
//发射
emitter.onNext(bitmap);
}else{
Logger.d("硬盘未命中");
emitter.onComplete();
}
}
}).subscribeOn(Schedulers.io());
//网络加载
Observable<Bitmap> network = Observable.create(new ObservableOnSubscribe<Bitmap>() {
@Override
public void subscribe(ObservableEmitter<Bitmap> emitter) throws Exception {
try {
URL url_image = new URL(url);
HttpURLConnection connection = (HttpURLConnection) url_image.openConnection();
connection.setReadTimeout(5000);
connection.setConnectTimeout(8000);
connection.setUseCaches(true);
connection.connect();
int code = connection.getResponseCode();
if(code == 200){
InputStream is = connection.getInputStream();
//Inputstream不能二次调用,需要特殊处理
ByteArrayOutputStream baos = new ByteArrayOutputStream();
byte[] buffer = new byte[1024];
int len;
while ((len = is.read(buffer)) > -1 ) {
baos.write(buffer, 0, len);
}
baos.flush();
//调整数据缓存
Bitmap bitmap = BitmapFactory.decodeStream(new ByteArrayInputStream(baos.toByteArray()));
//存缓存
putImageToCache(hashKey,bitmap);
//存硬盘
putImageToDisk(hashKey,new ByteArrayInputStream(baos.toByteArray()));
//发射
emitter.onNext(bitmap);
is.close();
baos.close();
}
connection.disconnect();
} catch (Exception e) {
e.printStackTrace();
emitter.onError(e);
}
}
}).subscribeOn(Schedulers.io());
//这里用concat组合三个发布者,然后用firstElements依次调用
Observable.concat(memory,disk,network)
.firstElement()
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Consumer<Bitmap>() {
@Override
public void accept(Bitmap bitmap) throws Exception {
if(bitmap != null && url.equals(view.getTag())){
view.setImageBitmap(bitmap);
}
}
});
}
public static File getDiskCacheDir(Context context, String uniqueName) {
Logger.d("存储位置:"+context.getCacheDir().getPath() + File.separator + uniqueName);
return new File(context.getCacheDir().getPath() + File.separator + uniqueName);
}
public static void putImageToDisk(String key,InputStream is){
if(mDiskLruCache == null || getImageFromDisk(key) != null){
return;
}
BufferedOutputStream out = null;
BufferedInputStream in = null;
try {
DiskLruCache.Editor editor = mDiskLruCache.edit(key);
if(editor == null){
// 当editor为空的时候证明正在写入占用,直接返回
return;
}
OutputStream outputStream = editor.newOutputStream(0);
in = new BufferedInputStream(is, 8 * 1024);
out = new BufferedOutputStream(outputStream, 8 * 1024);
int b;
while ((b = in.read()) != -1) {
out.write(b);
}
outputStream.flush();
editor.commit();
} catch (IOException e) {
Logger.d(e.toString());
} finally {
try {
if(in != null){
in.close();
}
if(out != null){
out.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
public static Bitmap getImageFromDisk(String key){
if(mDiskLruCache == null){
return null;
}
Bitmap bitmap = null;
try{
DiskLruCache.Snapshot snapshot = mDiskLruCache.get(key);
if (snapshot != null) {
InputStream is = snapshot.getInputStream(0);
bitmap = BitmapFactory.decodeStream(is);
is.close();
}
}catch (Exception ae){
Logger.d(ae.toString());
}
return bitmap;
}
public void putImageToCache(String key,Bitmap bitmap){
if(getImageFromCache(key) == null){
lruCache.put(key,bitmap);
}
}
public Bitmap getImageFromCache(String key){
return lruCache.get(key);
}
//这里把URL用MD5+hash处理后生成固定位数的key,要不然URL太长
public static String hashKeyForDisk(String key) {
String cacheKey;
try {
final MessageDigest mDigest = MessageDigest.getInstance("MD5");
mDigest.update(key.getBytes());
cacheKey = bytesToHexString(mDigest.digest());
} catch (NoSuchAlgorithmException e) {
cacheKey = String.valueOf(key.hashCode());
}
return cacheKey;
}
private static String bytesToHexString(byte[] bytes) {
StringBuilder sb = new StringBuilder();
for (int i = 0; i < bytes.length; i++) {
String hex = Integer.toHexString(0xFF & bytes[i]);
if (hex.length() == 1) {
sb.append('0');
}
sb.append(hex);
}
return sb.toString();
}
public void onDestory(){
try {
lruCache = null;
mDiskLruCache.close();
mDiskLruCache = null;
} catch (IOException e) {
e.printStackTrace();
}
}
}
这个实现逻辑很简单。先判断memory,然后 判断disk有没有缓存, 最后调用network。下载图片后把Bitmap分别加载入内存,外部存储,然后把图片加载到指定 item。
最后贴上调用的Activity
public class MainActivity extends AppCompatActivity {
private static List<String> list;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
RecyclerView recyclerView = findViewById(R.id.recycleView);
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));
MyAdapter adapter = new MyAdapter(this,list);
recyclerView.setAdapter(adapter);
}
//我把许多百度找到的图片链接放入一个Sring类型的数组,然后把数组在这里转换成一个List
public void initData(){
list = new ArrayList<String>();
for(String itemUrl:Config.imageURLs){
list.add(itemUrl);
}
}
}
最后记录下遇到的问题
1.InputStream不能被调用多次,因为使用了read 后游标就到了尾部。为了解决这个 问题,把InputSteream转换成一个ByteArrayOutputStream,然后在需要调用的地方转存回来。这里在网络部分的Observerable中有体现
2.图片乱序问题可以利用view.setTag(URL)的方式给每个item带上tag,然后在加载图片的时候判断item的tag和当前需要加载的图片的url是不是一致,如果一致则加载,如果 不一致则忽略
3.图片闪动问题用 默认图片占位,在onCreateBinder中 给每个默认的位置都放上图片,这样能避免加载的时候图片闪动。闪动的主要问题是RecycleView的复用机制导致的。这个具体网上一搜一大堆。