Android幻灯片效果实现-Gallery

移动开发 Android
我觉得在开发中,对一些控件的复用肯定是很多的,在首页(非载入页)一般都会有一个幻灯片效果,既可以放广告也可以放推荐,如果图片设计的好看,效果一般都会不错。

最近下载几款手机应用研究了下,发了有些自定义控件惊人的相似,所以我觉得在以后的开发中,对一些控件的复用肯定是很多的,在首页(非载入页)一般都会有一个幻灯片效果,既可以放广告也可以放推荐,如果图片设计的好看,效果一般都会不错,既然用到了Gallery,也附带把相框效果的例子写一写(淘宝详情界面的商品图片滑动展示)

一、效果图展示

(1)幻灯片效果展示:

(2)商品图片滑动展示

查看大图:

二、部分代码说明

(1)幻灯片效果的实现:

自定义Gallery:DetailGallery.java

可视界面:ImgSwitchActivity.java

适配类:GalleryIndexAdapter.java

1)自定义Gallery主要重写onFling通过按下和松手的位置不同比较是向右移动还是向左移动,部分代码如下:

  1. private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) { 
  2.         return e2.getX() > e1.getX(); 
  3.     } 
  4.     @Override 
  5.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, 
  6.             float velocityY) { 
  7.         int kEvent; 
  8.         if (isScrollingLeft(e1, e2)) { 
  9.             kEvent = KeyEvent.KEYCODE_DPAD_LEFT; 
  10.         } else { 
  11.             kEvent = KeyEvent.KEYCODE_DPAD_RIGHT; 
  12.         } 
  13.         onKeyDown(kEvent, null); 
  14.         return true
  15.     } 

2)在适配类 GalleryIndexAdapter主要完成幻灯片的循环播放,在getCount里面返回值返回Integer.MAX_VALUE,然后在getView里面根据position与传进来初始图片个数进行余数计算得到每次循环到哪张图片。部分代码如下:

  1. @Override 
  2.         public int getCount() { 
  3.             // TODO Auto-generated method stub 
  4.             return Integer.MAX_VALUE; 
  5.         } 
  6.         …… 
  7.         @Override 
  8.         public View getView(int position, View convertView, ViewGroup arg2) { 
  9.             // TODO Auto-generated method stub 
  10.             ImageView imageView = new ImageView(context); 
  11. imageView.setBackgroundResource(imagList.get(position%imagList.size())); 
  12.             imageView.setScaleType(ScaleType.FIT_XY); 
  13.             imageView.setLayoutParams(new Gallery.LayoutParams(Gallery.LayoutParams.FILL_PARENT 
  14.                     , Gallery.LayoutParams.WRAP_CONTENT)); 
  15.             return imageView; 
  16.         }   

3)在可视界面里面实现逻辑控制,通过定时器定时刷新幻灯片,定时器通过定时发送消息,消息接受处理机制接收到消息之后,就模拟滑动事件,调 用Gallery的onFling方法实现图片自动切换效果。选择按钮的显示效果(RadioButton)需要在Gallery的 setOnItemSelectedListener进行处理。

  1. //定时器和事件处理5秒刷新一次幻灯片 
  2.     /** 展示图控制器,实现展示图切换 */ 
  3.         final Handler handler_gallery = new Handler() { 
  4.             public void handleMessage(Message msg) { 
  5.                 /* 自定义屏幕按下的动作 */ 
  6.                 MotionEvent e1 = MotionEvent.obtain(SystemClock.uptimeMillis(), 
  7.                         SystemClock.uptimeMillis(), MotionEvent.ACTION_UP, 
  8.                         89.333336f, 265.33334f, 0); 
  9.                 /* 自定义屏幕放开的动作 */ 
  10.                 MotionEvent e2 = MotionEvent.obtain(SystemClock.uptimeMillis(), 
  11.                         SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN, 
  12.                         300.0f, 238.00003f, 0); 
  13.                 myGallery.onFling(e2, e1, -8000); 
  14.                 /* 给gallery添加按下和放开的动作,实现自动滑动 */ 
  15.                 super.handleMessage(msg); 
  16.             } 
  17.         }; 
  18.         protected void onResume() { 
  19.             autogallery(); 
  20.             super.onResume(); 
  21.         }; 
  22.         private void autogallery() { 
  23.             /* 设置定时器,每5秒自动切换展示图 */ 
  24.             Timer time = new Timer(); 
  25.             TimerTask task = new TimerTask() { 
  26.                 @Override 
  27.                 public void run() { 
  28.                     Message m = new Message(); 
  29.                     handler_gallery.sendMessage(m); 
  30.                 } 
  31.             }; 
  32.             time.schedule(task, 80005000); 
  33.         } 
  34.     //指示按钮和gallery初始化过程以及事件监听添加过程 
  35.     //初始化 
  36.         void init(){ 
  37.             myGallery = (DetailGallery)findViewById(R.id.myGallery); 
  38.             gallery_points = (RadioGroup) this.findViewById(R.id.galleryRaidoGroup); 
  39.             ArrayList<Integer> list = new ArrayList<Integer>(); 
  40.             list.add(R.drawable.banner1); 
  41.             list.add(R.drawable.banner2); 
  42.             list.add(R.drawable.banner3); 
  43.             list.add(R.drawable.banner4); 
  44.             GalleryIndexAdapter adapter = new GalleryIndexAdapter(list, context); 
  45.             myGallery.setAdapter(adapter); 
  46.             //设置小按钮 
  47.             gallery_point = new RadioButton[list.size()]; 
  48.             for (int i = 0; i < gallery_point.length; i++) { 
  49.                 layout = (LinearLayout) inflater.inflate(R.layout.gallery_icon, null); 
  50.                 gallery_point[i] = (RadioButton) layout.findViewById(R.id.gallery_radiobutton); 
  51.                 gallery_point[i].setId(i);/* 设置指示图按钮ID */ 
  52.                 int wh = Tool.dp2px(context, 10); 
  53.                 RadioGroup.LayoutParams layoutParams = new RadioGroup.LayoutParams(wh, wh); // 设置指示图大小 
  54.                 gallery_point[i].setLayoutParams(layoutParams); 
  55.                 layoutParams.setMargins(4040);// 设置指示图margin值 
  56.                 gallery_point[i].setClickable(false);/* 设置指示图按钮不能点击 */ 
  57.                 layout.removeView(gallery_point[i]);//一个子视图不能指定了多个父视图 
  58.                 gallery_points.addView(gallery_point[i]);/* 把已经初始化的指示图动态添加到指示图的RadioGroup中 */ 
  59.             } 
  60.         } 
  61.         //添加事件 
  62.         void addEvn(){ 
  63.             myGallery.setOnItemSelectedListener(new OnItemSelectedListener() { 
  64.                 @Override 
  65.                 public void onItemSelected(AdapterView<?> arg0, View arg1, 
  66.                         int arg2, long arg3) { 
  67.                     // TODO Auto-generated method stub 
  68. gallery_points.check(gallery_point[arg2%gallery_point.length].getId()); 
  69.                 } 
  70.                 @Override 
  71.                 public void onNothingSelected(AdapterView<?> arg0) { 
  72.                     // TODO Auto-generated method stub 
  73.                 } 
  74.             }); 
  75.         } 

(2)商品图片滑动实现过程:

图片滑动效果和上面的幻灯片效果非常的类似,只是在逻辑处理和界面上有一些小小的区别。

1)适配器类GalleryAdapter.java上面进行了图片缩放处理,节省了内存开销,又可把图片按照自己的要求缩放。

  1. //由于是测试case,所以图片都是写死的为了区别,在position = 1的时候换了一张图片 
  2.     public View getView(int position, View convertView, ViewGroup parent) { 
  3.                 // TODO Auto-generated method stub 
  4.                 ImageView imageView = (ImageView) LayoutInflater.from(context).inflate(R.layout.img, 
  5.                         null); 
  6.                 Bitmap bitmap = null
  7.                 try { 
  8.                     if(position == 1 ){ 
  9.                         bitmap = BitmapFactory.decodeStream(assetManager.open("xpic11247_s.jpg")); 
  10.                         imageView.setTag("xpic11247_s.jpg"); 
  11.                     } 
  12.                     else
  13.                         bitmap = BitmapFactory.decodeStream(assetManager.open("item0_pic.jpg")); 
  14.                         imageView.setTag("item0_pic.jpg"); 
  15.                     } 
  16.                 } catch (IOException e) { 
  17.                     // TODO Auto-generated catch block 
  18.                     e.printStackTrace(); 
  19.                 } 
  20.                 // 加载图片之前进行缩放 
  21.                 int width = bitmap.getWidth(); 
  22.                 int height = bitmap.getHeight(); 
  23.                 float newHeight = 200
  24.                 float newWidth = width*newHeight/height; 
  25.                 float scaleWidth = ((float) newWidth) / width; 
  26.                 float scaleHeight = ((float) newHeight) / height; 
  27.                 // 取得想要缩放的matrix参数 
  28.                 Matrix matrix = new Matrix(); 
  29.                 matrix.postScale(scaleWidth, scaleHeight); 
  30.                 // 得到新的图片 
  31.                 Bitmap newbm = Bitmap.createBitmap(bitmap, 00, width, height, matrix, true); 
  32.                 System.out.println(newbm.getHeight()+"-----------"+newbm.getWidth()); 
  33.                 imageView.setImageBitmap(newbm); 
  34.                 // } 
  35.                 return imageView; 
  36.             } 

2)添加了一个相框效果,如果图片加载失败,就会出现一个图片压缩之后大小相等的相框图片。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2.     <ImageView xmlns:android="http://schemas.android.com/apk/res/android" 
  3.         android:id="@+id/waterfall_image" 
  4.         android:layout_width="fill_parent" 
  5.         android:layout_height="fill_parent" 
  6.         android:background="@drawable/image_border" 
  7.         > 
  8.     </ImageView> 

三、开发中遇到一些问题

(1)layout.removeView(gallery_point[i]);//一个子视图不能指定了多个父视图

如果需要把当前子childview添加到另外一个view里面去,则必须在当前的父View里面移除掉当前的childView,如果不进行这样处理则 会抛出Caused by: java.lang.IllegalStateException异常,提示The specified child already has a parent. You must call removeView() on the child's parent first.

(2)在进行图片缩放的时候,记得处理好dp和px直接的转换。

责任编辑:闫佳明 来源: oschina
相关推荐

2009-02-09 17:45:12

Impressive播放幻灯片 SourceForg

2011-07-13 17:09:34

WPS幻灯片

2013-04-03 11:12:57

Java幻灯片切换

2020-10-15 06:00:22

LinuxLinux终端幻灯片

2013-05-31 09:36:13

Jquery3D效果

2014-10-29 11:46:00

2011-01-21 10:50:59

Windows 8

2013-07-05 10:26:40

Android

2012-05-25 14:41:19

JavaScript

2017-01-22 17:25:55

Android放大镜效果源码分析

2011-08-09 15:25:00

Windows7

2015-09-06 09:21:25

HTML5幻灯片系统H5Slides

2012-02-01 09:11:00

jQuery插件

2009-01-07 11:07:27

AJAXASP.NET.NET

2018-09-26 10:00:51

UbuntuLinux幻灯片

2010-08-03 11:29:09

Flex全屏

2024-03-11 08:35:25

Python工程幻灯片

2009-07-29 13:57:53

创建SlideShowASP.NET

2009-12-25 14:25:39

WPF图标

2013-07-23 07:03:51

Android开发学习Gallery实现3DAndroid源码下载
点赞
收藏

51CTO技术栈公众号