Android 滑动效果基础篇（四）—— Gallery + GridView

我会带着你远行 2022-08-24 11:08 226阅读 0赞

原文地址：[http://blog.csdn.net/ithomer/article/details/7467739][http_blog.csdn.net_ithomer_article_details_7467739] 作者：[阳光岛主][Link 1]

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

![http_blog.csdn.net_ithomer_article_details_7467739][]![1334975271_4983.png][]

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

![1334935213_6511.png][]

**1、GridView**

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

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

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(3, 3, 3, 3);  
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][view plain] [print][view plain] [?][view plain]

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][view plain] [print][view plain] [?][view plain]

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][view plain] [print][view plain] [?][view plain]

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][view plain] [print][view plain] [?][view plain]

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][view plain] [print][view plain] [?][view plain]

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][view plain] [print][view plain] [?][view plain]

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****>**

[http_blog.csdn.net_ithomer_article_details_7467739]: http://blog.csdn.net/ithomer/article/details/7467739
[Link 1]: http://my.csdn.net/sunboy_2050
[1334975271_4983.png]: https://img-my.csdn.net/uploads/201204/21/1334975271_4983.png
[1334935213_6511.png]: https://img-my.csdn.net/uploads/201204/20/1334935213_6511.png
[view plain]: http://blog.csdn.net/ithomer/article/details/7467739#

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android 滑动效果入门篇（一）—— ViewFlipper

[ViewFilpper][]是Android官方提供的一个View容器类，继承于ViewAnimator类，用于实现页面切换，也可以设定时间间隔，让它自动播放。

拼搏现实的明天。/ 2023年10月16日 18:58/ 0 赞/ 4 阅读

相关 android中gridview实现动态表格,Android GridView实现桌面效果

一.在XML文件中设定GridView android:layout\_width="wrap\_content" android:layout\_height="wrap

水深无声/ 2022年10月16日 07:36/ 0 赞/ 204 阅读

相关 Android 滑动效果进阶篇（六）—— 倒影效果

原文地址：[http://blog.csdn.net/ithomer/article/details/7483169][http_blog.csdn.net_ithomer_a

妖狐艹你老母/ 2022年08月24日 11:08/ 0 赞/ 220 阅读

相关 Android 滑动效果基础篇（四）—— Gallery + GridView

原文地址：[http://blog.csdn.net/ithomer/article/details/7467739][http_blog.csdn.net_ithomer_a

我会带着你远行/ 2022年08月24日 11:08/ 0 赞/ 227 阅读

相关 Android 滑动效果基础篇（三）—— Gallery仿图像集浏览

原文地址：[http://blog.csdn.net/ithomer/article/details/7455601][http_blog.csdn.net_ithomer_a

以你之姓@/ 2022年08月24日 11:08/ 0 赞/ 225 阅读

相关 Android 滑动效果入门篇（二）—— Gallery

原文地址：[http://blog.csdn.net/ithomer/article/details/7442556][http_blog.csdn.net_ithomer_a

红太狼/ 2022年08月24日 11:08/ 0 赞/ 228 阅读

相关 Android 滑动效果入门篇（一）—— ViewFlipper

原文地址：[http://blog.csdn.net/ithomer/article/details/7420567][http_blog.csdn.net_ithomer_a

我不是女神ヾ/ 2022年08月24日 11:07/ 0 赞/ 311 阅读

相关 Android 滑动效果入门篇（一）—— ViewFlipper

[ViewFilpper][]是[Android][]官方提供的一个View容器类，继承于ViewAnimator类，用于实现页面切换，也可以设定时间间隔，让它自动播放。

偏执的太偏执、/ 2022年08月22日 04:53/ 0 赞/ 210 阅读

相关 Android滑动回弹效果

原理： addHeaderView里做的事： 1.测量出header的宽高，调用了measureView方法 2.设置LayoutParams，宽：MATCH\_PAR

左手的ㄟ右手/ 2022年08月21日 04:45/ 0 赞/ 272 阅读

相关 Android gallery实现选中放大的效果

最近也在一点点学习，还是老样子，把新学的知识总结一下，方便以后参考用。现在大多Android入门教程中，都给大家教了gallery的基本用法，浏览图片时大小一样，比较

╰半夏微凉°/ 2021年06月10日 20:42/ 0 赞/ 430 阅读