Android開源框架Glide的使用-示例應用
來自 www.gratisography.com
- 加載網絡圖片
- 加載本地圖片-簡易圖庫
加載網絡圖片
引入對應的庫
compile 'com.android.support:recyclerview-v7:25.0.0'
compile 'com.github.bumptech.glide:glide:3.7.0'
使用Glide加載網絡圖片, api接口: http://gank.io/api/data/福利/10/1
使用的網絡資源是 干貨集中營 提供的福利圖片資源，具體的api的接口請訪問 API
使用Glide開源框架加載圖片，Glide框架的具體使用簡介請參考 Android開源框架Glide的使用
使用RecyclerView實現瀑布流模式來顯示圖片
創建RecyclerView的布局res/layout/fragment_list.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/recycler_view"></android.support.v7.widget.RecyclerView>
創建RecyclerView的每個item的布局 res/layout/list_item.xml
需要注意不要都寫成
match_parent或wrap_content,不然就顯示不出來瀑布流的效果
<?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="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:id="@+id/image"/>
</LinearLayout>
創建RecyclerView的適配器，GankAdapter.java，主要的代碼邏輯如下
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = LayoutInflater.from(mContext).inflate(R.layout.list_item,parent,false);
return new ViewHolder(v);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
final String url = mItems.get(position);
Log.e("tag","============onBindViewHolder url: "+url);
Glide.with(mContext)
.load(url)
.placeholder(R.mipmap.ic_launcher)
.diskCacheStrategy(DiskCacheStrategy.RESULT)
.into(holder.image);
holder.image.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
Intent intent = new Intent();
intent.setClass(mContext,PreviewImageActivity.class);
intent.putExtra("url",url);
mContext.startActivity(intent);
}
});
}
@Override
public int getItemCount() {
return mItems.size();
}
public class ViewHolder extends RecyclerView.ViewHolder{
ImageView image;
public ViewHolder(View itemView) {
super(itemView);
image = (ImageView)itemView.findViewById(R.id.image);
}
}
顯示RecyclerView，創建一個Fragment來顯示 GankFragment.java
主要的顯示邏輯如下：
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_list,container,false);
mClient = new OkHttpClient();
mReyclerView = (RecyclerView) v.findViewById(R.id.recycler_view);
mReyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));
mAdapter = new GankAdapter(getActivity(),mUrls);
mReyclerView.setAdapter(mAdapter);
loadApi(index);
mReyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
if(isScrollToEnd(mReyclerView)){
Log.e("tag","============scroll to end");
index += 1;
loadApi(index);
}
}
});
return v;
}
為了加載網絡圖片，引入了OkHttpClient的第三方庫
compile 'com.squareup.okhttp3:okhttp:3.4.1'
加載網絡的圖片的邏輯
private void loadApi(int page){
Request request = new Request.Builder().url("http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/"+page).build();
mClient.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(Call call, IOException e) {
Log.e("tag","loading failure ");
e.printStackTrace();
}
@Override
public void onResponse(Call call, Response response) throws IOException {
if(response.isSuccessful()){
String result = response.body().string();
try {
JSONObject json = new JSONObject(result);
JSONArray array = new JSONArray(json.getString("results"));
for(int i = 0;i<array.length();i++){
JSONObject ob = array.getJSONObject(i);
mUrls.add(ob.getString("url"));
Log.e("tag","========== url: "+ob.getString("url"));
}
mHandler.sendEmptyMessage(2);
}catch (JSONException e){
e.printStackTrace();
}
}
}
});
}
效果圖
加載本地圖片
使用Glide加載本地圖片，和網絡圖片使用的是同一個適配器的代碼GankAdapter.java
顯示邏輯代碼LocalAlbumFragment.java,主要是從本地圖像數據庫中加載數據
private void loadAlbum(){
AsyncTask<Void, Void, Void> asyncTask = new AsyncTask<Void, Void, Void>() {
@Override
protected Void doInBackground(Void... params) {
Cursor c = getContext().getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
new String[]{MediaStore.Images.ImageColumns.DATA},null,null, MediaStore.Images.ImageColumns.DATE_TAKEN+" desc ");
if(null != c && c.getCount() > 0 && c.moveToFirst()){
while (c.moveToNext()){
mData.add(c.getString(c.getColumnIndex(MediaStore.Images.ImageColumns.DATA)));
}
}
return null;
}
@Override
protected void onPostExecute(Void aVoid) {
mHandler.sendEmptyMessage(2);
}
};
asyncTask.execute();
}
效果圖
添加圖像變換
使用Glide庫時，可以對圖像做一些變換處理，如：圓角，模糊等處理，使用Glide的.bitmapTransform()方法，
自己需要寫對應的變換的方法，但是現在有很好的第三方庫已經對一些常用的變換做了封裝，可以直接使用，不要重復造輪子
引入第三方圖像變換庫 glide-transformations
compile 'jp.wasabeef:glide-transformations:2.0.1'
這個庫提供很多的變換，如 剪裁相關的，顏色變化相關的，模糊相關的等，具體的請參考 源碼
試用了一個圓形的效果
Glide.with(mContext)
.load(url)
.placeholder(R.mipmap.ic_launcher)
.diskCacheStrategy(DiskCacheStrategy.RESULT)
.bitmapTransform(new CropCircleTransformation(mContext)) //使用圓形變換，還可以使用其他的變換
.into(holder.image);
效果圖
當然，如果對這些效果都不滿意，可以自己寫對應的變換效果
