Android 滑动效果基础篇(四)—— Gallery + GridView
阅读原文时间:2021年04月20日阅读:1

Android系统自带一个GridView和Gallery两个控件,GridView网格显示,Gallery单个浏览,两者结合起来可以真正实现Gallery浏览图片效果。

本示例通过GridView和Gallery两个控件,模仿实现一个完整的仿Gallery图像集的图片浏览效果。效果图如下:

1、GridView

首先,自定义一个GridImageAdapter图片适配器,用于填充GridView控件的图片

public class GridImageAdapter extends BaseAdapter { private Context mContext; Drawable btnDrawable; public GridImageAdapter(Context context) { mContext = context; Resources resources = context.getResources(); btnDrawable = resources.getDrawable(R.drawable.bg); } @Override public int getCount() { return ImageSource.mThumbIds.length; } @Override public Object getItem(int position) { return position; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ImageViewExt imageView; int space; if (convertView == null) { imageView = new ImageViewExt(mContext); if (imageCol == 5) { space = dm.heightPixels / imageCol - 6; imageView.setLayoutParams(new GridView.LayoutParams(space, space)); } else { space = dm.widthPixels / imageCol - 6; imageView.setLayoutParams(new GridView.LayoutParams( space, space)); } imageView.setAdjustViewBounds(true); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); // 缩放图片使其长和宽一样 imageView.setPadding(3, 3, 3, 3); } else { imageView = (ImageViewExt) convertView; } imageView.setImageResource(ImageSource.mThumbIds[position]); return imageView; } } 然后,用 GridImageAdapter填充GridView

gridView = (GridView) findViewById(R.id.myGrid); gridImageAdapter = new GridImageAdapter(this); gridView.setAdapter(gridImageAdapter); gridView.setOnItemClickListener(listener); // 设置点击监听事件

最后,设置GridView控件的点击监听事件

AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView arg0, View arg1, int position, long id) { Intent intent = new Intent(); intent.setClass(GridViewActivity.this, GalleryActivity.class); intent.putExtra("position", position); startActivity(intent); } };
2、Gallery

完成了GridView的图片显示、监听事件后,现在点击图片,会启动一个Activity来显示当前点击的图片,此时显示图片的控件便是Gallery

首先,同GridView一样,自定义一个ImageAdapter图片适配器,用来填充Gallery

public class ImageAdapter extends BaseAdapter { private Context mContext; private int mPos; public ImageAdapter(Context context) { mContext = context; } public void setOwnposition(int ownposition) { this.mPos = ownposition; } public int getOwnposition() { return mPos; } @Override public int getCount() { return ImageSource.mThumbIds.length; } @Override public Object getItem(int position) { mPos=position; return position; } @Override public long getItemId(int position) { mPos=position; return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { mPos=position; ImageView imageview = new ImageView(mContext); imageview.setBackgroundColor(0xFF000000); imageview.setScaleType(ImageView.ScaleType.FIT_CENTER); imageview.setLayoutParams(new myGallery.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); imageview.setImageResource(ImageSource.mThumbIds[position]); return imageview; } }
然后, 用 ImageAdapter填充Gallery

myGallery galllery = (myGallery) findViewById(R.id.mygallery); Intent intent = getIntent(); position = intent.getIntExtra("position", 0); // 获取GridViewActivity传来的图片位置position ImageAdapter imgAdapter=new ImageAdapter(this); galllery.setAdapter(imgAdapter); // 设置图片ImageAdapter galllery.setSelection(position); // 设置当前显示图片 Animation an= AnimationUtils.loadAnimation(this,R.anim.scale ); // Gallery动画 galllery.setAnimation(an);

此时,如果细心可以注意到,我们的Gallery也是自己定义的myGallery,具体定义如下:

public class myGallery extends Gallery { boolean isFirst = false; boolean isLast = false; public myGallery(Context context) { super(context); } public myGallery(Context context, AttributeSet paramAttributeSet) { super(context, paramAttributeSet); } /** 是否向左滑动(true - 向左滑动; false - 向右滑动) */ private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) { return e2.getX() > e1.getX(); } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { ImageAdapter ia = (ImageAdapter) this.getAdapter(); int p = ia.getOwnposition(); // 获取当前图片的position int count = ia.getCount(); // 获取全部图片的总数count int kEvent; if (isScrollingLeft(e1, e2)) { if (p == 0 && isFirst) { Toast.makeText(this.getContext(), "已是第一页", Toast.LENGTH_SHORT).show(); } else if (p == 0) { isFirst = true; } else { isLast = false; } kEvent = KeyEvent.KEYCODE_DPAD_LEFT; } else { if (p == count - 1 && isLast) { Toast.makeText(this.getContext(), "已到最后一页", Toast.LENGTH_SHORT).show(); } else if (p == count - 1) { isLast = true; } else { isFirst = false; } kEvent = KeyEvent.KEYCODE_DPAD_RIGHT; } onKeyDown(kEvent, null); return true; } }
GalleryActivity的布局文件gallery.xml

源码下载

参考推荐:

GridView

Grid View tutorial

Gallery

Gallery tutorial

ViewGroup

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器