码迷,mamicode.com
首页 > 移动开发 > 详细

Android 高级UI设计笔记12:ImageSwitcher图片切换器

时间:2016-04-23 21:10:54      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!