Android开源框架Glide的基本使用-示例应用

Android开源框架Glide的使用-示例应用


来自 www.gratisography.com

  • 加载网络图片

  • 加载本地图片-简易图库

    工程源码

加载网络图片

引入对应的库

 
 
  1.   compile 'com.android.support:recyclerview-v7:25.0.0'
  2.   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

 
 
  1.   <?xml version="1.0" encoding="utf-8"?>
  2.   <android.support.v7.widget.RecyclerView
  3.       xmlns:android="http://schemas.android.com/apk/res/android"
  4.       android:layout_width="match_parent"
  5.       android:layout_height="match_parent"
  6.       android:id="@+id/recycler_view"></android.support.v7.widget.RecyclerView>

创建RecyclerView的每个item的布局 res/layout/list_item.xml

需要注意不要都写成match_parentwrap_content,不然就显示不出来瀑布流的效果

 
 
  1.   <?xml version="1.0" encoding="utf-8"?>
  2.   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.       android:orientation="vertical" android:layout_width="match_parent"
  4.       android:layout_height="wrap_content">
  5.       <ImageView
  6.           android:layout_width="match_parent"
  7.           android:layout_height="wrap_content"
  8.           android:adjustViewBounds="true"
  9.           android:id="@+id/image"/>
  10.   </LinearLayout>

创建RecyclerView的适配器,GankAdapter.java,主要的代码逻辑如下


  
  
  1.   @Override
  2.   public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  3.       View v = LayoutInflater.from(mContext).inflate(R.layout.list_item,parent,false);
  4.       return new ViewHolder(v);
  5.   }
  6.  
  7.   @Override
  8.   public void onBindViewHolder(ViewHolder holder, int position) {
  9.       final String url = mItems.get(position);
  10.       Log.e("tag","============onBindViewHolder url: "+url);
  11.       Glide.with(mContext)
  12.               .load(url)
  13.               .placeholder(R.mipmap.ic_launcher)
  14.               .diskCacheStrategy(DiskCacheStrategy.RESULT)
  15.               .into(holder.image);
  16.       holder.image.setOnClickListener(new View.OnClickListener(){
  17.           @Override
  18.           public void onClick(View v) {
  19.               Intent intent = new Intent();
  20.               intent.setClass(mContext,PreviewImageActivity.class);
  21.               intent.putExtra("url",url);
  22.               mContext.startActivity(intent);
  23.           }
  24.       });
  25.   }
  26.  
  27.   @Override
  28.   public int getItemCount() {
  29.       return mItems.size();
  30.   }
  31.  
  32.   public class ViewHolder extends RecyclerView.ViewHolder{
  33.        ImageView image;
  34.       public ViewHolder(View itemView) {
  35.           super(itemView);
  36.           image = (ImageView)itemView.findViewById(R.id.image);
  37.       }
  38.   }

显示RecyclerView,创建一个Fragment来显示 GankFragment.java
主要的显示逻辑如下:


  
  
  1.   @Nullable
  2.   @Override
  3.   public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  4.       View v = inflater.inflate(R.layout.fragment_list,container,false);
  5.       mClient = new OkHttpClient();
  6.       mReyclerView = (RecyclerView) v.findViewById(R.id.recycler_view);
  7.       mReyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));
  8.       mAdapter = new GankAdapter(getActivity(),mUrls);
  9.       mReyclerView.setAdapter(mAdapter);
  10.       loadApi(index);
  11.  
  12.       mReyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
  13.           @Override
  14.           public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
  15.               super.onScrollStateChanged(recyclerView, newState);
  16.           }
  17.  
  18.           @Override
  19.           public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
  20.               super.onScrolled(recyclerView, dx, dy);
  21.               if(isScrollToEnd(mReyclerView)){
  22.                   Log.e("tag","============scroll to end");
  23.                   index += 1;
  24.                   loadApi(index);
  25.               }
  26.           }
  27.       });
  28.  
  29.       return v;
  30.   }

为了加载网络图片,引入了OkHttpClient的第三方库

 
 
  1.   compile 'com.squareup.okhttp3:okhttp:3.4.1'

加载网络的图片的逻辑


  
  
  1.   private void loadApi(int page){
  2.     Request request = new Request.Builder().url("http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/"+page).build();
  3.     mClient.newCall(request).enqueue(new Callback() {
  4.         @Override
  5.         public void onFailure(Call call, IOException e) {
  6.             Log.e("tag","loading failure ");
  7.             e.printStackTrace();
  8.         }
  9.  
  10.         @Override
  11.         public void onResponse(Call call, Response response) throws IOException {
  12.             if(response.isSuccessful()){
  13.                 String result = response.body().string();
  14.                 try {
  15.                     JSONObject json = new JSONObject(result);
  16.                     JSONArray array = new JSONArray(json.getString("results"));
  17.                     for(int i = 0;i<array.length();i++){
  18.                         JSONObject ob = array.getJSONObject(i);
  19.                         mUrls.add(ob.getString("url"));
  20.                         Log.e("tag","========== url: "+ob.getString("url"));
  21.                     }
  22.  
  23.                     mHandler.sendEmptyMessage(2);
  24.                 }catch (JSONException e){
  25.                     e.printStackTrace();
  26.                 }
  27.  
  28.             }
  29.         }
  30.     });
  31.   }


效果图

加载本地图片

使用Glide加载本地图片,和网络图片使用的是同一个适配器的代码GankAdapter.java
显示逻辑代码LocalAlbumFragment.java,主要是从本地图像数据库中加载数据


  
  
  1.   private void loadAlbum(){
  2.     AsyncTask<Void, Void, Void> asyncTask = new AsyncTask<Void, Void, Void>() {
  3.         @Override
  4.         protected Void doInBackground(Void... params) {
  5.             Cursor  c = getContext().getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
  6.                     new String[]{MediaStore.Images.ImageColumns.DATA},null,null, MediaStore.Images.ImageColumns.DATE_TAKEN+" desc ");
  7.             if(null != c && c.getCount() > 0 && c.moveToFirst()){
  8.                 while (c.moveToNext()){
  9.                     mData.add(c.getString(c.getColumnIndex(MediaStore.Images.ImageColumns.DATA)));
  10.                 }
  11.             }
  12.             return null;
  13.         }
  14.  
  15.         @Override
  16.         protected void onPostExecute(Void aVoid) {
  17.             mHandler.sendEmptyMessage(2);
  18.  
  19.         }
  20.     };
  21.  
  22.     asyncTask.execute();
  23.  
  24.   }


效果图

添加图像变换

使用Glide库时,可以对图像做一些变换处理,如:圆角,模糊等处理,使用Glide.bitmapTransform()方法,
自己需要写对应的变换的方法,但是现在有很好的第三方库已经对一些常用的变换做了封装,可以直接使用,不要重复造轮子
引入第三方图像变换库 glide-transformations

 
 
  1.   compile 'jp.wasabeef:glide-transformations:2.0.1'

这个库提供很多的变换,如 剪裁相关的,颜色变化相关的,模糊相关的等,具体的请参考 源码
试用了一个圆形的效果

 
 
  1.   Glide.with(mContext)
  2.                 .load(url)
  3.                 .placeholder(R.mipmap.ic_launcher)
  4.                 .diskCacheStrategy(DiskCacheStrategy.RESULT)
  5.                 .bitmapTransform(new CropCircleTransformation(mContext)) //使用圆形变换,还可以使用其他的变换
  6.                 .into(holder.image);


效果图

当然,如果对这些效果都不满意,可以自己写对应的变换效果。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值