欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-02-18 12:30:58
本文实例讲述了android编程滑动效果之gallery+gridview实现图片预览功能。分享给大家供大家参考,具体如下: android系统自带一个gridview和...

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

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

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

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

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

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

<?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相关内容感兴趣的读者可查看本站专题:《android开发动画技巧汇总》、《android开发入门与进阶教程》及《android控件用法总结》。

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