Android 滑动效果基础篇(四)—— Gallery + GridView

简介:

http://blog.csdn.net/sunboy_2050/article/details/7467739


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



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



1、GridView

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

[java]  view plain copy print ?
  1. public class GridImageAdapter extends BaseAdapter {  
  2.     private Context mContext;  
  3.     Drawable btnDrawable;  
  4.   
  5.     public GridImageAdapter(Context context) {  
  6.         mContext = context;  
  7.         Resources resources = context.getResources();  
  8.         btnDrawable = resources.getDrawable(R.drawable.bg);  
  9.     }  
  10.   
  11.     @Override  
  12.     public int getCount() {  
  13.         return ImageSource.mThumbIds.length;  
  14.     }  
  15.   
  16.     @Override  
  17.     public Object getItem(int position) {  
  18.         return position;  
  19.     }  
  20.   
  21.     @Override  
  22.     public long getItemId(int position) {  
  23.         return position;  
  24.     }  
  25.   
  26.     @Override  
  27.     public View getView(int position, View convertView, ViewGroup parent) {  
  28.         ImageViewExt imageView;  
  29.         int space;  
  30.   
  31.         if (convertView == null) {  
  32.             imageView = new ImageViewExt(mContext);  
  33.             if (imageCol == 5) {  
  34.                 space = dm.heightPixels / imageCol - 6;  
  35.                 imageView.setLayoutParams(new GridView.LayoutParams(space, space));  
  36.             } else {  
  37.                 space = dm.widthPixels / imageCol - 6;  
  38.                 imageView.setLayoutParams(new GridView.LayoutParams( space, space));  
  39.             }  
  40.             imageView.setAdjustViewBounds(true);  
  41.             imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);    // 缩放图片使其长和宽一样  
  42.   
  43.              imageView.setPadding(3333);  
  44.         } else {  
  45.             imageView = (ImageViewExt) convertView;  
  46.         }  
  47.         imageView.setImageResource(ImageSource.mThumbIds[position]);  
  48.   
  49.         return imageView;  
  50.     }  
  51. }  
然后,用 GridImageAdapter填充GridView

[java]  view plain copy print ?
  1. gridView = (GridView) findViewById(R.id.myGrid);  
  2. gridImageAdapter = new GridImageAdapter(this);  
  3. gridView.setAdapter(gridImageAdapter);  
  4. gridView.setOnItemClickListener(listener); // 设置点击监听事件  

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

[java]  view plain copy print ?
  1. AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {  
  2.     @Override  
  3.     public void onItemClick(AdapterView<?> arg0, View arg1, int position, long id) {  
  4.         Intent intent = new Intent();  
  5.         intent.setClass(GridViewActivity.this, GalleryActivity.class);  
  6.         intent.putExtra("position", position);  
  7.         startActivity(intent);  
  8.     }  
  9. };  

2、Gallery

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

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

[java]  view plain copy print ?
  1. public class ImageAdapter extends BaseAdapter {  
  2.     private Context mContext;   
  3.     private int mPos;  
  4.   
  5.     public ImageAdapter(Context context) {  
  6.         mContext = context;  
  7.     }  
  8.   
  9.     public void setOwnposition(int ownposition) {  
  10.         this.mPos = ownposition;  
  11.     }  
  12.   
  13.     public int getOwnposition() {  
  14.         return mPos;  
  15.     }  
  16.   
  17.     @Override  
  18.     public int getCount() {  
  19.         return ImageSource.mThumbIds.length;  
  20.     }  
  21.   
  22.     @Override  
  23.     public Object getItem(int position) {   
  24.         mPos=position;  
  25.         return position;  
  26.     }  
  27.   
  28.     @Override  
  29.     public long getItemId(int position) {  
  30.         mPos=position;   
  31.         return position;  
  32.     }  
  33.   
  34.     @Override  
  35.     public View getView(int position, View convertView, ViewGroup parent) {  
  36.         mPos=position;  
  37.         ImageView imageview = new ImageView(mContext);  
  38.         imageview.setBackgroundColor(0xFF000000);  
  39.         imageview.setScaleType(ImageView.ScaleType.FIT_CENTER);  
  40.         imageview.setLayoutParams(new myGallery.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));  
  41.         imageview.setImageResource(ImageSource.mThumbIds[position]);  
  42.           
  43.         return imageview;  
  44.     }  
  45. }  

然后, ImageAdapter填充Gallery

[java]  view plain copy print ?
  1. myGallery  galllery = (myGallery) findViewById(R.id.mygallery);  
  2. Intent intent = getIntent();  
  3. position = intent.getIntExtra("position"0);   // 获取GridViewActivity传来的图片位置position   
  4. ImageAdapter imgAdapter=new ImageAdapter(this);       
  5. galllery.setAdapter(imgAdapter);        // 设置图片ImageAdapter  
  6. galllery.setSelection(position);        // 设置当前显示图片  
  7.       
  8.     Animation an= AnimationUtils.loadAnimation(this,R.anim.scale );     // Gallery动画  
  9.     galllery.setAnimation(an);   

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

[java]  view plain copy print ?
  1. public class myGallery extends Gallery {  
  2.     boolean isFirst = false;  
  3.     boolean isLast = false;  
  4.   
  5.     public myGallery(Context context) {  
  6.         super(context);  
  7.     }  
  8.   
  9.     public myGallery(Context context, AttributeSet paramAttributeSet) {  
  10.         super(context, paramAttributeSet);  
  11.     }  
  12.   
  13.     /** 是否向左滑动(true - 向左滑动; false - 向右滑动) */  
  14.     private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {     
  15.         return e2.getX() > e1.getX();  
  16.     }  
  17.   
  18.     @Override  
  19.     public boolean onFling(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {  
  20.         ImageAdapter ia = (ImageAdapter) this.getAdapter();  
  21.         int p = ia.getOwnposition();    // 获取当前图片的position  
  22.         int count = ia.getCount();      // 获取全部图片的总数count  
  23.         int kEvent;  
  24.         if (isScrollingLeft(e1, e2)) {  
  25.             if (p == 0 && isFirst) {  
  26.                 Toast.makeText(this.getContext(), "已是第一页", Toast.LENGTH_SHORT).show();  
  27.             } else if (p == 0) {  
  28.                 isFirst = true;  
  29.             } else {  
  30.                 isLast = false;  
  31.             }  
  32.   
  33.             kEvent = KeyEvent.KEYCODE_DPAD_LEFT;  
  34.         } else {  
  35.             if (p == count - 1 && isLast) {  
  36.                 Toast.makeText(this.getContext(), "已到最后一页", Toast.LENGTH_SHORT).show();  
  37.             } else if (p == count - 1) {  
  38.                 isLast = true;  
  39.             } else {  
  40.                 isFirst = false;  
  41.             }  
  42.   
  43.             kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;  
  44.         }  
  45.         onKeyDown(kEvent, null);  
  46.         return true;  
  47.     }  
  48. }  

GalleryActivity的布局文件gallery.xml

[html]  view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:gravity="center"  
  6.     android:orientation="horizontal"  
  7.     android:padding="10dip" >  
  8.     <RelativeLayout  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:background="#000000"  
  12.         android:padding="2dip" >  
  13.         <com.homer.gridgallery.myGallery  
  14.             android:id="@+id/mygallery"  
  15.             android:layout_width="fill_parent"  
  16.             android:layout_height="fill_parent"  
  17.             android:spacing="16dp" />  
  18.     </RelativeLayout>  
  19. </LinearLayout>  


源码下载



参考推荐:

GridView

Grid View tutorial

Gallery

Gallery tutorial

ViewGroup


相关文章
|
7月前
|
Android开发
Android 分享机顶盒项目的封装类《GridView》(二)(转)
Android 分享机顶盒项目的封装类《GridView》(二)(转)
48 2
|
4月前
|
Android开发
Android使用ViewPager做无限轮播,人为滑动时停止
Android使用ViewPager做无限轮播,人为滑动时停止
83 2
|
6月前
|
API Android开发 开发者
`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView
【6月更文挑战第26天】`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView。它提供高效的数据视图复用,优化的布局管理,支持多种布局(如线性、网格),并解耦数据、适配器和视图。RecyclerView的灵活性、性能(如局部刷新和动画支持)和扩展性使其成为现代Android开发的首选,特别是在处理大规模数据集时。
70 2
|
6月前
|
前端开发 API Android开发
26. 【Android教程】网格视图 GridView
26. 【Android教程】网格视图 GridView
85 2
|
5月前
|
Android开发
Android仿高德首页三段式滑动
Android仿高德首页三段式滑动
153 0
|
6月前
|
编解码 Android开发
Android 解决TextView多行滑动与NestedScrollView嵌套滑动冲突的问题
Android 解决TextView多行滑动与NestedScrollView嵌套滑动冲突的问题
101 0
|
7月前
|
Android开发
Android使用ViewPager实现图片轮播系列之三:手动滑动 + 左右箭头(1)
Android使用ViewPager实现图片轮播系列之三:手动滑动 + 左右箭头(1)
|
6月前
|
XML Android开发 UED
|
7月前
|
XML Java Android开发
Android 分享机顶盒项目的封装类《GridView》(三)(转)
Android 分享机顶盒项目的封装类《GridView》(三)(转)
40 2
|
7月前
|
Android开发
Android教程之Android 用户界面-表格视图(GridView)
Android教程之Android 用户界面-表格视图(GridView)
54 1