Android攻城狮Gallery和ImageSwitcher制作图片浏览器
生活随笔
收集整理的這篇文章主要介紹了
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 }
自定義適配器的步驟 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 }
?
?
轉載于:https://www.cnblogs.com/my334420/p/6718486.html
總結
以上是生活随笔為你收集整理的Android攻城狮Gallery和ImageSwitcher制作图片浏览器的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jQuery ajax - getScr
- 下一篇: Html5音乐可视化之音乐的获取和播放