ImageSwitcher的应用

在android的开发中很多时候都会用到图片的切换，我相信大家在安装完apk后，都会遇到弹出用户向导，介绍本版本apk的新功能，如果你用的是平板电脑或手机的话，可以左右滑动以切换视图，如果你用的是android机顶盒的话，可以按遥控器的左右键以切换视图。那么这种用户向导切换图片是怎么做的呢？ 当然答案有很多种，应该android中有太多方式可以实现了,比如ViewFilper ，ViewPager。这里我就介绍一种最简单的方式，那就是采用ImageSwitcher 图片切换器！

首先看一下ImageSwitcher的类继承结构：

 

java.lang.Object 
   ↳ android.view.View 
     ↳ android.view.ViewGroup 
       ↳ android.widget.FrameLayout 
         ↳ android.widget.ViewAnimator 
           ↳ android.widget.ViewSwitcher 
             ↳ android.widget.ImageSwitcher 

比较复杂！ 和这个类等同继续结构的还有一个叫做TextSwitcher。他们两个是ViewSwitcher的唯一的两个子类，在ViewSwitcher中定义了一个接口叫做ViewFactory，所以在使用ImageSwitcher和TextSwitcher时必须要实现这个接口，其实在这个接口中，就只有一个方法，如下：

 

 

public abstract View makeView () 
    Function：Creates a new View to be added in a ViewSwitcher.
    Returns： a View

好了，到这里介绍ImageSwitcher就差不多了，咋门先来看看最后的实现结果

 

最下面的4个小点可以理解为位置指示吧，当前在那一页，最明显的小点，就会留在那个位置。这是通过LinearLayout加入TextView来实现的，其实这些小点都是TextView，只是背景颜色不一样而已，这里后面会具体介绍。

我们先来看看布局文件：act_guide.xml

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageSwitcher
        android:id="@+id/guide_content"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/white" />

    <LinearLayout
        android:id="@+id/guide_indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        
        android:gravity="center_horizontal"
        android:orientation="horizontal" />
</FrameLayout>

 

由于美观，要实现图片滑动效果，所有这里添加了2个动画，在res下新建anim文件夹，添加如下文件

slide_in_right.xml

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="50%p"
        android:toXDelta="0" />

    <alpha
        android:duration="700"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

 

slide_out_left.xml

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-50%p" />

    <alpha
        android:duration="700"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

 

好，之前提过的个4个小圆点，是怎么画上去的呢？这里就需要在res下新建一个drawable文件夹，在里面添加两个绘图的配置文件：

indicator_n.xml 即没有选中的颜色

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thickness="10dp"
    android:useLevel="false" >
    <size
        android:height="40dp"
        android:width="40dp" />
    <solid android:color="#88666666" />
</shape>

indicator_s.xml 即选中了的颜色

 

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thickness="10dp"
    android:useLevel="false" >
    <size
        android:height="40dp"
        android:width="40dp" />
    <solid android:color="#ff0b7fe4" />
</shape>

 

 

好，接下来，我们来看看主activity是怎样调用的：

Act_guide.java

package dxd.android.imageswitcher;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.FrameLayout.LayoutParams;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.ViewSwitcher.ViewFactory;

public class ActGuide extends Activity implements ViewFactory {

	protected LayoutInflater mInflater;
	protected ImageSwitcher switcher;
	protected int[] itemIDs;
	protected int pos;
	protected int last;
	protected LinearLayout indicator;
	protected ViewGroup mParent;
	protected boolean intercept = false;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		mInflater = LayoutInflater.from(this);
		setContentView(R.layout.act_help);
		
		addViews() ;
	}

	protected void addViews() {
		itemIDs = new int[] { R.drawable.s1, R.drawable.s2, R.drawable.s3,R.drawable.s4};
		switcher = (ImageSwitcher)findViewById(R.id.guide_content);
		switcher.setFactory(this);
		switcher.setImageResource(itemIDs[pos]);
		
		indicator = (LinearLayout) findViewById(R.id.guide_indicator);
		for (int i = 0; i < itemIDs.length; i++) {
			TextView item = new TextView(this);
			item.setLayoutParams(new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
			if (i == 0) {
				item.setBackgroundResource(R.drawable.indicator_s);
			} else {
				item.setBackgroundResource(R.drawable.indicator_n);
			}
			indicator.addView(item);
		}
	    // 响应 触摸事件
	    switcher.setOnTouchListener(new OnTouchListener() {
			private float x;
			private boolean lock;

			@Override
			public boolean onTouch(View v, MotionEvent event) {
				switch (event.getAction()) {
				case MotionEvent.ACTION_DOWN:
					x = event.getX();
					lock = true;
					break;
				case MotionEvent.ACTION_MOVE:
					if (lock) {
						float dltaX = x - event.getX();
						if (dltaX > 100) {
							showNext();
							lock = false;
						} else if (dltaX < -100) {
							showPre();
							lock = false;
						}
				     }
					 break;
				}
				return true;
				}
		});
	}

	@Override
	public View makeView() {
		ImageView imageView = new ImageView(this);
		imageView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
		imageView.setScaleType(ScaleType.FIT_XY);
		return imageView;
	}
        // 响应左右按键
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		switch (keyCode) {
		case KeyEvent.KEYCODE_DPAD_LEFT:
			showPre();
			return true;
		case KeyEvent.KEYCODE_DPAD_RIGHT:
			showNext();
			return true;
		}
		return super.onKeyDown(keyCode, event);
	}

	protected void showNext() {
		last = pos++;
		if (pos == itemIDs.length) {
			pos = itemIDs.length - 1;
			return;
		}
		switcher.setInAnimation(this, R.anim.slide_in_right);
		switcher.setOutAnimation(this, R.anim.slide_out_left);
		switcher.setImageResource(itemIDs[pos]);
		indicator.getChildAt(last).setBackgroundResource(R.drawable.indicator_n);
		indicator.getChildAt(pos).setBackgroundResource(R.drawable.indicator_s);
	}

	protected void showPre() {
		last = pos--;
		if (pos < 0) {
			pos = 0;
			return;
		}
		switcher.setInAnimation(this, android.R.anim.slide_in_left);
		switcher.setOutAnimation(this, android.R.anim.slide_out_right);
		switcher.setImageResource(itemIDs[pos]);
		indicator.getChildAt(last).setBackgroundResource(R.drawable.indicator_n);
		indicator.getChildAt(pos).setBackgroundResource(R.drawable.indicator_s);
	}
}

主要的代码就是这样的了。当然，之前说了，这不是唯一能实现的方式，还有很多方式都可以实现这样的效果。但是，如果这个用户向导或其他什么向导，只要是以图片切换为主，那么就选用这个ImageSwitcher吧！ 方便快捷地就能够搭建好应用程序的外观。当然如果是需要View中有控件的切换的话，用ViewPager也是很好的选择。这里就不多介绍了，以后专门写出专题。