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

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

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

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

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

1、GridView

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

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

然后,用GridImageAdapter填充GridView

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

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

  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

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

然后,用ImageAdapter填充Gallery

  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. Animation an= AnimationUtils.loadAnimation(this,R.anim.scale );     // Gallery动画
  8. galllery.setAnimation(an);

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

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

GalleryActivity的布局文件gallery.xml

    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>
上一篇:java第二次笔记


下一篇:脱离 Spring 实现复杂嵌套事务,之一(必要的概念)