zoukankan      html  css  js  c++  java
  • Android攻城狮Gallery和ImageSwitcher制作图片浏览器

    使用Gallery 和 ImageSwitcher 制作图片浏览器
    Gallery介绍
    我们有时候在手机上或者PC上看到动态的图片,可以通过鼠标或者手指触摸来移动它,产生动态的图片滚动效果,还可以根据你的点击或者触摸来触发其他事件响应。同样的,在Android中也提供这种实现,这就是通过Gallery在UI上实现缩略图浏览器。
    -------------------------
    谷歌已经将Gallery列为过期的控件,建议使用HorizonScrollView或者ViewPager。
    -------------------------
    查看源码不难发现 ArrayAdapter 和 SimpleAdapter 都继承了 BaseAdapter。
    所以,我们也可以自己定义一个适配器!自定义的好处是自由度、灵活性会更大。
    BaseAdapter中的重要方法
    (1)public int getCount()——返回一定义的数据源的总数量
    (2)public Object getItem(int position)
        public long getItemId(int position)
    ——告诉适配器取得目前容器中的数据ID和对象
    (3)public View getView(int position,View convertView,ViewGroupparent)——取得目前要显示的图像View,传入数组ID值使之读取与成像。
    -----------------------------------
    使用 Gallery 浏览图片的步骤:
    1. 在 main.xml 中添加 Gallery标签。
    2. 在 MainActivity 中创建数据源,这里就是 int数组存放图片id。
    3. 自定义适配器。创建一个新类 ImageAdapter ,继承 BaseAdapter。重写getView(int position, View view, ViewGroup viewGroup)方法。
    4. 在 MainActivity加载适配器。

    自定义适配器的步骤
    1. 创建一个新类 IamgeAdapter ,继承BaseAdapter。
    2. 为了接收参数,需要构建有参的构造方法:
        private  int[]res; //用于接收数据源
        private Context context;//上下文信息,ImageView的初始化会用到
        //构造有参构造方法
        public ImageAdapter(int[]res,Context context){
            this.res=res;
            this.context=context;
        }
    3. 重写getView(),把图片ID(这里是res[position])转变为 ImageView,并返回 ImageView:
    public View getView(int position, View view, ViewGroup viewGroup) {
        ImageView image = new ImageView(context);
        image.setBackgroundResource(res[position]);
        //设置图片(ImageView)在Gallery中的缩略图的大小
        image.setLayoutParams(new Gallery.LayoutParams(400,300));//宽是400,高是300
        //设置缩放比例(scale)采取的类型
        image.setScaleType(ImageView.ScaleType.FIT_XY);//横向X-Y轴的拉伸
        return image;
    }
    其他方法的重写,写法固定:
    public int getCount() {
            return res.length;
    }
    public Object getItem(int position) {
            return res[position];
    }
    public long getItemId(int position) {
            return position;
    }




    无限轮播图片的实现:
    1. 改写 ImageAdapter 适配器的 onCount()方法,使它返回整数最大值 Integer.MAX_VALUE。
    2. 改写 getView():image.setBackgroundResource(res[position%res.length]);
    由于数组res的下标的上限是 Integer.MAX_VALUE,所以 position%res.length 的运算结果是一个循环数组。这样就实现了循环播放图片。
    ---------------------------------------------
    ImageSwitcher实现大图浏览的步骤:
    1. 在 main.xml 中添加 ImageSwitcher标签。
    2. 让 MainActivity 继承接口 ViewFactory。重写方法 makeView():
        public View makeView() {
            ImageView image = new ImageView(this);//初始化ImageView对象
            image.setScaleType(ImageView.ScaleType.FIT_CENTER);//保持宽高比例,并且居中显示
            return image;
        }
        重写 onItemSelected(),只写一句:imageSwitcher.setBackgroundResource(res[position%res.length]);//imageSwitch加载图片资源。
    3. 在 MainActivity 中创建和初始化 ImageSwitcher 的对象。之后加载工厂:imageSwitcher.setFactory(this);
       然后就是加载动画效果,比如:imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));//淡入的效果
    
    
    ImageSwitcher 大图浏览
    ImageSwitcher 和 ImageView 的功能有点类似,他们都可以用于显示图片,区别在于 ImageSwitcher 的效果更炫,它可以指定图片切换时的动画效果。
    为了让 ImageSwitcher 加载图片,必须让MainActivity实现接口ViewFactory。
    ---------------------------------------
    ViewFactory的使用
    ImageSwitcher 粗略的理解就是 ImageView 的选择器,它需要设置 ViewFactory。一般情况下,我们让该 ViewFactory 的 makeView()方法返回 ImageView。
    -----------------------------------
    为ImageSwitcher加入动画
    imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));//淡入的效果
    imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));//淡出的效果
     1 //gallery实现图片大图预览的循环播放
     2 //ImageSwitcher 和 ImageView 的功能有点类似,他们都可以用于显示图片,
     3 //区别在于 ImageSwitcher 的效果更炫,它可以指定图片切换时的动画效果。
     4 //ImageSwitcher实现ViewFactory,监听事件 OnItemSelectedListener 
     5 public class MainActivity extends Activity implements OnItemSelectedListener,
     6         ViewFactory {
     7     // 准备数据源
     8     private int[] res = { R.drawable.item1, R.drawable.item2, R.drawable.item3,
     9             R.drawable.item4, R.drawable.item5, R.drawable.item6,
    10             R.drawable.item7, R.drawable.item8, R.drawable.item9,
    11             R.drawable.item10, R.drawable.item11, R.drawable.item12 };
    12     private Gallery gallery;
    13     private ImageAdapter adapter;
    14     
    15 
    16     private ImageSwitcher imageSwitcher;
    17 
    18     // ArrayAdapter<String> adapter;
    19     // SimpleAdapter adapter2;
    20     @Override
    21     protected void onCreate(Bundle savedInstanceState) {
    22         super.onCreate(savedInstanceState);
    23         setContentView(R.layout.main);
    24         gallery = (Gallery) findViewById(R.id.gallery);
    25         imageSwitcher = (ImageSwitcher) findViewById(R.id.imageswitcher);
    26         
    27         // gallery加载适配器
    28         adapter = new ImageAdapter(res, this);
    29         gallery.setAdapter(adapter);
    30         gallery.setOnItemSelectedListener(this);
    31 
    32         imageSwitcher.setFactory(this);
    33         //添加动画效果
    34         imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
    35                 android.R.anim.fade_in));
    36         imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
    37                 android.R.anim.fade_out));
    38 
    39     }
    40 
    41     @Override
    42     public void onItemSelected(AdapterView<?> parent, View view, int position,
    43             long id) {
    44         // TODO Auto-generated method stub
    45         
    46         imageSwitcher.setBackgroundResource(res[position % res.length]);
    47     }
    48 
    49     @Override
    50     public void onNothingSelected(AdapterView<?> parent) {
    51         // TODO Auto-generated method stub
    52 
    53     }
    54 
    55     @Override
    56     public View makeView() {
    57         // TODO Auto-generated method stub
    58         ImageView imageView = new ImageView(this);
    59         imageView.setScaleType(ScaleType.FIT_CENTER);// 大图预览
    60         return imageView;
    61     }
    62 
    63 }
     1 public class ImageAdapter extends BaseAdapter {
     2     private int[] res;
     3     private Context context;
     4 
     5     public ImageAdapter(int[] res, Context context) {
     6         // TODO Auto-generated constructor stub
     7         this.res = res;
     8         this.context = context;
     9     }
    10 
    11     // 返回已定义的数据源总数量
    12     @Override
    13     public int getCount() {
    14         // TODO Auto-generated method stub
    15         
    16         //return res.length;
    17         return Integer.MAX_VALUE;//循环播放
    18     }
    19 
    20     // 告诉适配器取得目前容器中的数据ID和对象
    21     @Override
    22     public Object getItem(int position) {
    23         // TODO Auto-generated method stub
    24         return res[position];
    25     }
    26 
    27     @Override
    28     public long getItemId(int position) {
    29         // TODO Auto-generated method stub
    30         return position;
    31     }
    32 
    33     // 取得目前欲显示的图像view,传入数组ID值使之读取与成像
    34     @Override
    35     public View getView(int position, View convertView, ViewGroup parent) {
    36         // TODO Auto-generated method stub
    37         ImageView imageView = new ImageView(context);
    38         imageView.setBackgroundResource(res[position%res.length]);//循环播放
    39         imageView.setLayoutParams(new Gallery.LayoutParams(100,50));//设置图像大小
    40 
    41         imageView.setScaleType(ScaleType.FIT_XY);
    42         return imageView;
    43     }
    44 
    45 }

    
    























  • 相关阅读:
    最简单的图片轮播
    首页图片轮播效果
    windows简单杀死进程的批处理程序
    js实现无限级树形导航列表
    漂亮竖向菜单 有缓存 javascript
    竖向折叠二级导航JS代码(可防刷新ul/li结构)
    bzoj 1060: [ZJOI2007]时态同步【树形dp】
    bzoj 2733: [HNOI2012]永无乡【并查集+权值线段树】
    洛谷 P3952 时间复杂度【模拟】
    bzoj 2208: [Jsoi2010]连通数【tarjan+拓扑+dp】
  • 原文地址:https://www.cnblogs.com/my334420/p/6718486.html
Copyright © 2011-2022 走看看