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也是很好的选择。这里就不多介绍了，以后专门写出专题。

巴特西

ImageSwitcher的应用

最新文章

热门文章