- <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">RecyclerView是谷歌最新的代替ListView和GridView一款超赞控件,可以随意变成ListView,GridView,和瀑布流的样式,也许是才出来不久,苦恼的是它的监听事件有点麻烦,需要自己动手重写方法,后面代码里会体现出来。Glide是一款高效图片处理的第三包,比较其他的图片处理第三方包要高效,好用很多,自己可以上网查查了解了解。PhotoView是一款支持放大缩小图片浏览的第三方包,用法都很简单。</span>
先看看效果图:
主界面的瀑布流照片墙:
然后点击某一张图片,进入大图:
然后两点手势缩放图片,最后点击图片,退回到原图
activity代码:
- 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();
- }
- });
- }
- }
myrecyclerviw_layout:
- <?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代码:
- 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:
点击某张图片进入的Activity:
- <?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>
最后带上我的项目要添加的第三方包:
- 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();
- }
- });
- }
- }
- photoview_layout:
- <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,如上图;