Android编程滑动效果之Gallery+GridView实现图片预览功能(附demo源码下载)

时间:2021-12-02 07:24:22

本文实例讲述了android编程滑动效果之gallery+gridview实现图片预览功能。分享给大家供大家参考,具体如下:

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

Android编程滑动效果之Gallery+GridView实现图片预览功能(附demo源码下载)

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

Android编程滑动效果之Gallery+GridView实现图片预览功能(附demo源码下载)

1、gridview

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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

?
1
2
3
4
gridview = (gridview) findviewbyid(r.id.mygrid);
gridimageadapter = new gridimageadapter(this);
gridview.setadapter(gridimageadapter);
gridview.setonitemclicklistener(listener); // 设置点击监听事件

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

?
1
2
3
4
5
6
7
8
9
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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

?
1
2
3
4
5
6
7
8
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,具体定义如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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:gravity="center"
  android:orientation="horizontal"
  android:padding="10dip" >
  <relativelayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#000000"
    android:padding="2dip" >
    <com.homer.gridgallery.mygallery
      android:id="@+id/mygallery"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:spacing="16dp" />
  </relativelayout>
</linearlayout>

完整实例代码点击此处本站下载

希望本文所述对大家android程序设计有所帮助。