RecyclerView+Glide+PhotoView

最新推荐文章于 2017-11-09 14:19:42 发布

ChatHello

最新推荐文章于 2017-11-09 14:19:42 发布

阅读量2.5k

点赞数

分类专栏： 2017Android技术知识点总结

2017Android技术知识点总结专栏收录该内容

34 篇文章

订阅专栏

[java] view plain copy

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">RecyclerView是谷歌最新的代替ListView和GridView一款超赞控件，可以随意变成ListView,GridView,和瀑布流的样式，也许是才出来不久，苦恼的是它的监听事件有点麻烦，需要自己动手重写方法，后面代码里会体现出来。Glide是一款高效图片处理的第三包，比较其他的图片处理第三方包要高效，好用很多，自己可以上网查查了解了解。PhotoView是一款支持放大缩小图片浏览的第三方包，用法都很简单。</span>

先看看效果图：

主界面的瀑布流照片墙：

然后点击某一张图片，进入大图：

然后两点手势缩放图片，最后点击图片，退回到原图

activity代码：

[java] view plain copy

public class RecyclerViewGridImageActivity extends Activity {
private RecyclerView mRecyclerView;
private MyRecyclerViewAdapter adapter;
private String[] URLs = new String[]{
"http://pic3.nipic.com/20090617/1242397_083514091_2.jpg",
"http://pic28.nipic.com/20130422/12457151_164027506188_2.jpg",
"http://pic4.nipic.com/20091120/805653_183746006558_2.jpg",
"http://pic7.nipic.com/20100606/4899050_135353003843_2.jpg",
"http://pic4.nipic.com/20091218/3557379_083034065299_2.jpg",
"http://pic4.nipic.com/20090924/3308315_095324041734_2.jpg",
"http://pica.nipic.com/2008-01-18/2008118212025258_2.jpg",
"http://pica.nipic.com/2007-11-15/20071115103157516_2.jpg",
"http://pic6.nipic.com/20100427/4365846_231110093316_2.jpg",
"http://a2.att.hudong.com/79/22/01000000000000119062273272179.jpg",
"http://img4.duitang.com/uploads/item/201209/20/20120920165508_EuenZ.jpeg",
"http://img5.duitang.com/uploads/item/201207/25/20120725171947_CV3ZA.jpeg",
"http://pic24.nipic.com/20121029/3822951_090444696000_2.jpg",
"http://d.3987.com/lyzr_130620/004.jpg",
"http://pic14.nipic.com/20110527/2531170_101932834000_2.jpg",
"http://pica.nipic.com/2008-01-12/200811215275498_2.jpg",
"http://pica.nipic.com/2007-07-15/200771515512480_2.jpg",
"http://pic3.nipic.com/20090514/2639204_233912087_2.jpg",
"http://img4.chinaface.com/original/212dlz514BUdSEyhs4mJrrPXe1a4E.jpg",
"http://image.tianjimedia.com/uploadImages/2011/306/EQ2E3ZUPNMNV.jpg",
"http://h.hiphotos.baidu.com/image/pic/item/0b55b319ebc4b7452c1b0e16cdfc1e178a821526.jpg",
"http://a.hiphotos.baidu.com/image/pic/item/9f510fb30f2442a751a29476d543ad4bd01302b0.jpg",
"http://e.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494eec48c66ca29f5e0fe98257eb2.jpg",
"http://f.hiphotos.baidu.com/image/pic/item/1e30e924b899a901f19c32e519950a7b0308f5bc.jpg",
"http://e.hiphotos.baidu.com/image/pic/item/63d0f703918fa0eca4042edf229759ee3c6ddb25.jpg",
"http://h.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697f631428f51fbb2fb4216d806.jpg",
"http://b.hiphotos.baidu.com/image/pic/item/ac4bd11373f08202034236d14ffbfbedaa641b0f.jpg",
"http://e.hiphotos.baidu.com/image/pic/item/58ee3d6d55fbb2fbafb52bfa4b4a20a44723dcb8.jpg",
"http://a.hiphotos.baidu.com/image/pic/item/c8177f3e6709c93d08d97a679a3df8dcd1005472.jpg",
"http://h.hiphotos.baidu.com/image/pic/item/bd3eb13533fa828b01fbafb2ff1f4134960a5a82.jpg",
"http://b.hiphotos.baidu.com/image/pic/item/8326cffc1e178a82689d65adf403738da977e81e.jpg",
"http://h.hiphotos.baidu.com/image/pic/item/9825bc315c6034a8d141851dce1349540823768e.jpg",
"http://h.hiphotos.baidu.com/image/pic/item/72f082025aafa40f7c884d31af64034f79f0198b.jpg",
"http://a.hiphotos.baidu.com/image/pic/item/d53f8794a4c27d1eaa8358171fd5ad6edcc438bf.jpg",
"http://d.hiphotos.baidu.com/image/pic/item/902397dda144ad344a35e454d4a20cf430ad855e.jpg",
"http://a.hiphotos.baidu.com/image/pic/item/728da9773912b31be0f04c498318367adab4e136.jpg",
"http://d.hiphotos.baidu.com/image/pic/item/5bafa40f4bfbfbed88e0cfa07cf0f736aec31fb7.jpg",
"http://c.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a299fff02c79b25bc315c607c80.jpg",
"http://pic7.nipic.com/20100522/1263764_002013845527_2.jpg",
"http://a2.att.hudong.com/12/26/19300000362045133857269184471_950.jpg",
"http://pic.nipic.com/2008-03-01/2008319174451_2.jpg",
"http://pic23.nipic.com/20120824/8218020_193654254129_2.jpg",
"http://pic24.nipic.com/20121010/4388163_025151474144_2.jpg",
"http://pic11.nipic.com/20100803/4038389_093502059852_2.jpg",
"http://d.3987.com/mlxw_130629/002.jpg",
"http://pic.sayingfly.com/Photo/UpLoadFiles/2008-7-24/20087249442527.jpg",
"http://pic12.nipic.com/20110223/2709576_111836168000_2.jpg",
"http://pic14.nipic.com/20110609/2531170_055926229173_2.jpg",
"http://d.3987.com/dgblcsyjgqbz_20130314/001.jpg",
"http://pic.yesky.com/imagelist/06/47/985202_5664.jpg",
"http://pic19.nipic.com/20120324/3484432_092618805000_2.jpg"
};
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.myrecyclerviw_layout);
mRecyclerView = (RecyclerView) findViewById(R.id.myrecycler_layout);
adapter = new MyRecyclerViewAdapter(this, URLs);
mRecyclerView.setAdapter(adapter);
//瀑布流样式，在adapter里要添加随机高度
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
mRecyclerView.addItemDecoration(new DividerGridItemDecoration(this));
//GridView样式,在adapter中不要随机高度
// mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));
// mRecyclerView.addItemDecoration(new DividerGridItemDecoration(this));
//ListView样式，在adapter中不要随机高度
// mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
// mRecyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL_LIST));
// 设置item动画
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
adapter.setOnItemClickLitener(new MyRecyclerViewAdapter.OnItemClickLitener() {
@Override
public void onItemClick(View view, int position) {
Intent intent = new Intent(RecyclerViewGridImageActivity.this, ShowImageActivity.class);
String url = URLs[position];
intent.putExtra("URL", url);
startActivity(intent);
}
@Override
public void onItemLongClick(View view, int position) {
Toast.makeText(RecyclerViewGridImageActivity.this, "长按事件", Toast.LENGTH_SHORT).show();
}
});
}
}

[java] view plain copy

myrecyclerviw_layout：


 
 
  
  
   
   
    
    [html] 
    
    view plain
    
     copy
    
     
   
   
  
  
  
  <?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical">  
  
    <android.support.v7.widget.RecyclerView  
        android:id="@+id/myrecycler_layout"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent">  
  
    </android.support.v7.widget.RecyclerView>  
</LinearLayout>

Adapter代码：

[java] view plain copy

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder> {
private String[] URLs;
private LayoutInflater mInflater;
private List<Integer> mHeights;
private Context mContext;
public interface OnItemClickLitener
{
void onItemClick(View view, int position);
void onItemLongClick(View view , int position);
}
private OnItemClickLitener mOnItemClickLitener;
public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener)
{
this.mOnItemClickLitener = mOnItemClickLitener;
}
public MyRecyclerViewAdapter(Context context, String[] urls) {
URLs = urls;
mContext = context;
mInflater = LayoutInflater.from(context);
//设置随机高度
mHeights = new ArrayList<Integer>();
for (int i = 0; i < URLs.length; i++) {
mHeights.add((int) (100 + Math.random() * 300));
}
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
MyViewHolder holder = new MyViewHolder(mInflater.inflate(
R.layout.recyclerview_item, parent, false));
return holder;
}
@Override
public void onBindViewHolder(final MyViewHolder holder, final int position) {
//设置随机高度
ViewGroup.LayoutParams lp = holder.imageView.getLayoutParams();
lp.height = mHeights.get(position);
holder.imageView.setLayoutParams(lp);
Glide.with(mContext)
.load(URLs[position])
.centerCrop()
.placeholder(R.mipmap.ic_launcher)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(holder.imageView);
// 如果设置了回调，则设置点击事件
if (mOnItemClickLitener != null)
{
holder.itemView.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
int pos = holder.getLayoutPosition();
mOnItemClickLitener.onItemClick(holder.itemView, pos);
}
});
holder.itemView.setOnLongClickListener(new OnLongClickListener()
{
@Override
public boolean onLongClick(View v)
{
int pos = holder.getLayoutPosition();
mOnItemClickLitener.onItemLongClick(holder.itemView, pos);
// removeData(pos);
return false;
}
});
}
}
@Override
public int getItemCount() {
return URLs.length;
}
// public void addData(int position)
// {
// mDatas.add(position, "Insert One");
// notifyItemInserted(position);
// }
//
//
public void removeData(int position)
{
// mDatas.remove(position);//List或ArrayList才有添加移除方法
notifyItemRemoved(position);
}
class MyViewHolder extends ViewHolder {
ImageView imageView;
public MyViewHolder(View view) {
super(view);
imageView = (ImageView) view.findViewById(R.id.id_num);
}
}
}

recyclerview_item：


 
 
  
  
   
   
    
    [html] 
    
    view plain
    
     copy
    
     
   
   
  
  
  
  <?xml version="1.0" encoding="utf-8"?>  
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="wrap_content"  
    android:layout_margin="3dp">  
    <ImageView  
        android:id="@+id/id_num"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:scaleType="centerCrop"/>  
</FrameLayout>  
 
 
点击某张图片进入的Activity:


 
 
  
  
   
   
    
    [java] 
    
    view plain
    
     copy
    
     
   
   
  
  
  
  public class ShowImageActivity extends Activity {  
    private PhotoView mImageView;  
    private ProgressBar mProgressBar;  
  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.photoview_layout);  
        mImageView = (PhotoView) findViewById(R.id.iv_photo);  
        mProgressBar = (ProgressBar) findViewById(R.id.photoview_progressbar);  
        Intent intent = getIntent();  
        if (intent != null) {  
            String url = intent.getStringExtra("URL");  
            Glide.with(this)  
                    .load(url)  
                    .listener(new RequestListener<String, GlideDrawable>() {  
                        @Override  
                        public boolean onException(Exception e, String s, Target<GlideDrawable> target, boolean b) {  
  
                            return false;  
                        }  
  
                        @Override  
                        public boolean onResourceReady(GlideDrawable glideDrawable, String s, Target<GlideDrawable> target, boolean b, boolean b1) {  
                            mProgressBar.setVisibility(View.GONE);  
                            return false;  
                        }  
                    })  
                    .diskCacheStrategy(DiskCacheStrategy.ALL)  
                    .into(mImageView);  
        }  
        mImageView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {  
            @Override  
            public void onPhotoTap(View view, float x, float y) {  
                finish();  
            }  
        });  
    }  
}  
 
 
 
 
  
  
   
   
    
    [java] 
    
    view plain
    
     copy
    
     
   
   
  
  
  
  photoview_layout:  
 
 
 
 
  
  
   
   
    
    [java] 
    
    view plain
    
     copy
    
     
   
   
  
  
  
  <pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>  
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">  
  
    <uk.co.senab.photoview.PhotoView  
        android:id="@+id/iv_photo"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:clickable="true" />  
  
    <ProgressBar  
        android:id="@+id/photoview_progressbar"  
        style="@android:style/Widget.ProgressBar.Large"  
        android:layout_width="40dp"  
        android:layout_height="40dp"  
        android:layout_gravity="center"  
        android:indeterminateDuration="3000"  
        />  
</FrameLayout>

最后带上我的项目要添加的第三方包：



需要下载最新版的glide-3.6.1.jar

需要下载PhotoView第三方源码，然后导入它的library，如上图；