Eg:Gallery与ImageSwitcher结合的图片浏览小程序

原创 2012年03月24日 21:10:11

先来看一下程序运行截图:

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

1.Gallery功能模块的实现:

    1.1.res/layout,相应的xml文件中添加<Gallery/>元素,注意布局文件是相对布局(RelativeLayout)

   

<Gallery
    android:id="@+id/gallery"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"/>
    1.2.activity中Gallery实例化

Gallery gallery = (Gallery) findViewById(R.id.gallery);
    1.3.为项目添加图片资源(sample_1~sample_7)

   

    1.4.为Gallery定制适配器(adapter)

//定制适配器
    public class ImageAdapter extends BaseAdapter {
        int mGalleryItemBackground;
        private Context mContext;

        private Integer[] mImageIds = {
                R.drawable.sample_1,
                R.drawable.sample_2,
                R.drawable.sample_3,
                R.drawable.sample_4,
                R.drawable.sample_5,
                R.drawable.sample_6,
                R.drawable.sample_7
        };

        public ImageAdapter(Context c) {
            mContext = c;
            TypedArray attr = mContext.obtainStyledAttributes(R.styleable.HelloGallery);
            mGalleryItemBackground = attr.getResourceId(
                    R.styleable.HelloGallery_android_galleryItemBackground, 0);
            attr.recycle();
        }

        public int getCount() {
            return mImageIds.length;
        }

        public Object getItem(int position) {
            return null;
        }

        public long getItemId(int position) {
            return mImageIds[position];
        }

        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = new ImageView(mContext);

            imageView.setImageResource(mImageIds[position]);
            imageView.setLayoutParams(new Gallery.LayoutParams(150, 100));
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setBackgroundResource(mGalleryItemBackground);

            return imageView;
        }
    }

    1.5.为Gallery实例设置适配器

final ImageAdapter myImageAdapter=new ImageAdapter(this);
gallery.setAdapter(myImageAdapter);

2.ImageSwitcher功能模块的实现:

    2.1.为activity添加(实现)ViewFactory接口

public class Ch04_GalleryWithImageSwitcherActivity extends Activity implements ViewFactory{...}
    2.2.实现该接口的函数(该函数用来创建View并返回给ImageSwitcher实例)
   /**   
     * override for ViewSwitcher.ViewFactory#makeView()
     */
	@Override
	public View makeView() {
		// TODO Auto-generated method stub
		ImageView tmp_imageView=new ImageView(this);
		tmp_imageView.setBackgroundColor(0xff0000);
		tmp_imageView.setScaleType(ImageView.ScaleType.FIT_XY);
		tmp_imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
		return tmp_imageView;
	}
    2.3.res/layout,<Gallery/>标签所在的布局文件xml中添加<ImageSwitcher/>,注意<ImageSwitcher>标签一定要在<Gallery/>标签前面

<ImageSwitcher android:id="@+id/switcher"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
    />

    2.2.ImageSwitcher实例化,并进行动态设置

        //ImageSwitcher
        mSwitcher=(ImageSwitcher)findViewById(R.id.switcher);
        mSwitcher.setFactory(this);
        //设置动态效果
        mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left));
        mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right));

3.将两者结合起来(通过给Gallery设置监听器,并在监听器中调用ImageSwitcher实例的setImageResource()函数):

   

        mSwitcher.setImageResource((int) myImageAdapter.getItemId(0));  //为ImageSwitcher设置默认图片
        gallery.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                Toast.makeText(Ch04_GalleryWithImageSwitcherActivity.this, "" + position, Toast.LENGTH_SHORT).show();
                mSwitcher.setImageResource((int) myImageAdapter.getItemId(position));
            }
        });
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////本文涉及资源:

   1.本文对应实例源代码

微信小程序选择图片和预览图片

作者>:燕潇洒 视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片.wx.chooseImage此方法是用来选择图片的方法,具体使用如下: data: { avatar...
  • yanxiaosa
  • yanxiaosa
  • 2017年05月31日 08:56
  • 10791

小程序实现图片预览功能

为什么要实现小程序图片预览功能? 因为有些图片太小,我们需要将图片放大,才能查看图片上的信息。 为了实现这项功能我们需要调用该函数:var current = e.target.dataset.s...
  • babulongbo
  • babulongbo
  • 2017年12月23日 18:08
  • 113

微信小程序Demo组件大全(对话框、指示器、五星评分,画廊,影院座位……

微信小程序 - 自定义组件预览 用微信web开发者工具打开src目录(请注意,是src目录,不是整个项目) 使用 组件的wxml结构请看src/components/下的...
  • rolan1993
  • rolan1993
  • 2017年06月19日 15:17
  • 1708

利用Gallery和ImageSwitcher实现在线相册图片预览功能(异步加载图片)

Android利用Gallery和ImageSwitcher实现相册功能(异步加载图片) MainActivity.java [java] view plaincopy ...
  • shotaSu
  • shotaSu
  • 2016年01月28日 15:42
  • 729

imageSwitcher在线相册 预览功能异步加载图片

  • 2015年04月24日 12:54
  • 364KB
  • 下载

Android中ImageSwitcher详解(注意与图片浏览器的区别)

先看看继承关系,ImageSwitcher和TextSwitcher的继承关系是一样的。两个重要的父类:ViewSwitcher和ViewAnimator 继承于ViewSwitcher,说明具备了...
  • YUZHIBOYI
  • YUZHIBOYI
  • 2012年06月28日 17:26
  • 14871

Android利用Gallery和ImageSwitcher实现在线相册图片预览功能(异步加载图片)

  • 2014年04月14日 16:24
  • 363KB
  • 下载

小程序图片预览

【小程序】预览图片 小程序 公司小程序需要实现一个图片放大预览的效果,微信里面的图片一半都有这个效果,于是找了找微信jssdk文档,找到了实现这个功能的AP...
  • lamenw
  • lamenw
  • 2017年10月10日 19:53
  • 376

这个一个图片浏览小程序

  • 2010年09月09日 18:00
  • 50KB
  • 下载

学习Android之第七个小程序头像选择(自定义对话框、Gallery、ImageSwitcher)

效果图如下:            一共一个activity和两个xml。 ******当我们需要使用的组件不在setContentView()设置的布局文件中,那我们就需要使用in...
  • u011609853
  • u011609853
  • 2014年04月25日 00:09
  • 1141
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Eg:Gallery与ImageSwitcher结合的图片浏览小程序
举报原因:
原因补充:

(最多只允许输入30个字)