标签:
1. ImageSwitcher
ImageSwitcher是Android中控制图片展示效果的一个控件,如:幻灯片效果...,颇有感觉啊。做相册一绝
2. 重要方法
setImageURI(Uri uri):设置图片地址
setImageResource(int resid):设置图片资源库
setImageDrawable(Drawable drawable):绘制图片
3. 设置动画效果
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_in));
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_out));
4. 创建ImageSwitcher是通过工厂来实现的,看下面代码:
imageSwicher.setFactory(this);
为了给ViewSwitcher添加多个组件,一般通过调用 ViewSwitcher 的 setFactory(ViewSwitcher.ViewFactory)方法为之设置 ViewFactory, 并由该 ViewFactory 为之创建View即可。
为imageSwitcher设置ViewFactory:
@Override public View makeView() { ImageView imageView = new ImageView(this); imageView.setImageResource(arrayPictures[pictureIndex]); return imageView; }
下面再来看看setFactory()方法的具体代码:
public void setFactory(ViewFactory factory) { mFactory = factory; obtainView(); obtainView(); }
可以看到在setFactory的同时,调用了两遍obtainView()方法,obtainView()方法就是给ImageSwitcher添加子ImageView的,调用两遍就是添加了两个子ImageView
再来看看obtainView()方法的具体代码:
private View obtainView() { View child = mFactory.makeView(); LayoutParams lp = (LayoutParams) child.getLayoutParams(); if (lp == null) { lp = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT); } addView(child, lp); return child; }
可以看到obtainView()方法的的职责就是:通过makeView()方法创建View,然后把创建出来的View添加到ImageSwitcher上
再来看看下面的方法:
public void setImageResource(int resid) { ImageView image = (ImageView)this.getNextView(); image.setImageResource(resid); showNext(); }
此方法就是用来显示下一张图片的,我们可以看到这个方法里面调用了getNextView()方法和showNext()方法,那么我们来看看这两个方法的具体代码:
public View getNextView() { int which = mWhichChild == 0 ? 1 : 0; return getChildAt(which); }
public void showNext() { setDisplayedChild(mWhichChild + 1); }
getNextView()方法是在两个子ImageView之间切换,showNext()方法是负责显示这两个子View中的哪一个
也就是说,现用getNextView()方法得到下一个View,然后重新设置这个View的imageResource,最后通过showNext()方法将下一个View显示出来.
5. 实例:
(1)新建一个Android工程,如下:
(2)来到主布局文件之中activity_main.xml,如下:
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" 6 tools:context="com.himi.galleryimageswitcherdemo.MainActivity" > 7 8 9 <ImageSwitcher 10 android:id="@+id/imageSwicher" 11 android:layout_width="fill_parent" 12 android:layout_height="0dip" 13 android:layout_weight="1" 14 android:background="@android:color/white" 15 android:gravity="center" /> 16 17 </LinearLayout>
(3)来到MainActivity,如下:
1 package com.himi.galleryimageswitcherdemo; 2 3 import android.app.Activity; 4 import android.os.Bundle; 5 import android.view.MotionEvent; 6 import android.view.View; 7 import android.view.View.OnTouchListener; 8 import android.view.animation.AnimationUtils; 9 import android.widget.ImageSwitcher; 10 import android.widget.ImageView; 11 import android.widget.ViewSwitcher.ViewFactory; 12 13 public class MainActivity extends Activity implements ViewFactory, 14 OnTouchListener{ 15 16 private ImageSwitcher imageSwicher; 17 18 // 图片数组 19 private int[] arrayPictures = { R.drawable.img1, R.drawable.img2, 20 R.drawable.img3, R.drawable.img4 }; 21 // 要显示的图片在图片数组中的Index 22 private int pictureIndex; 23 // 左右滑动时手指按下的X坐标 24 private float touchDownX; 25 // 左右滑动时手指松开的X坐标 26 private float touchUpX; 27 28 @Override 29 public void onCreate(Bundle savedInstanceState) { 30 super.onCreate(savedInstanceState); 31 setContentView(R.layout.activity_main); 32 33 imageSwicher = (ImageSwitcher) findViewById(R.id.imageSwicher); 34 35 // 为ImageSwicher设置Factory,用来为ImageSwicher制造ImageView 36 imageSwicher.setFactory(this); 37 // 设置ImageSwitcher左右滑动事件 38 imageSwicher.setOnTouchListener(this); 39 } 40 41 public View makeView() { 42 ImageView imageView = new ImageView(this); 43 imageView.setImageResource(arrayPictures[pictureIndex]); 44 return imageView; 45 } 46 47 public boolean onTouch(View v, MotionEvent event) { 48 if (event.getAction() == MotionEvent.ACTION_DOWN) { 49 // 取得左右滑动时手指按下的X坐标 50 touchDownX = event.getX(); 51 return true; 52 } else if (event.getAction() == MotionEvent.ACTION_UP) { 53 // 取得左右滑动时手指松开的X坐标 54 touchUpX = event.getX(); 55 // 从左往右,看前一张 56 if (touchUpX - touchDownX > 100) { 57 // 取得当前要看的图片的index 58 pictureIndex = pictureIndex == 0 ? arrayPictures.length - 1 59 : pictureIndex - 1; 60 // 设置图片切换的动画 61 imageSwicher.setInAnimation(AnimationUtils.loadAnimation(this, 62 android.R.anim.slide_in_left)); 63 imageSwicher.setOutAnimation(AnimationUtils.loadAnimation(this, 64 android.R.anim.slide_out_right)); 65 // 设置当前要看的图片 66 imageSwicher.setImageResource(arrayPictures[pictureIndex]); 67 // 从右往左,看下一张 68 } else if (touchDownX - touchUpX > 100) { 69 // 取得当前要看的图片的index 70 pictureIndex = pictureIndex == arrayPictures.length - 1 ? 0 71 : pictureIndex + 1; 72 // 设置图片切换的动画 73 74 imageSwicher.setInAnimation(AnimationUtils.loadAnimation(this, 75 android.R.anim.fade_out)); 76 imageSwicher.setOutAnimation(AnimationUtils.loadAnimation(this, 77 android.R.anim.fade_in)); 78 // 设置当前要看的图片 79 imageSwicher.setImageResource(arrayPictures[pictureIndex]); 80 } 81 return true; 82 } 83 return false; 84 } 85 86 }
布署程序到手机上,如下:
滑动之后跳转到下一张图片,如下:
Android 高级UI设计笔记12:ImageSwitcher图片切换器
标签:
原文地址:http://www.cnblogs.com/hebao0514/p/5425415.html