用户向导左右滑动页面实现之ImageSwitcher

当第一次打开一个app时，通常有一个使用向导介绍本APK的基本功能和使用方法，这个向导是非常重要的，方便用户能快速知道和适应该app怎样用。

实现此使用向导有很多种方法，比如用ImageSwitcher，ViewPager。当然要用ViewSwitcher或是ViewGroup去实现也是可以的，只不过有点大材小用了。

用ImageSwitcher和ViewPager的区别就在于ImageSwitcher能轻松地指定页面切换的动画！这里先总结下ImageSwitcher的实现。

首先，定义布局文件activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <ImageSwitcher         android:id="@+id/switcher"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        >    </ImageSwitcher>    <LinearLayout         android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:id="@+id/dots"        android:layout_alignParentBottom="true"        android:layout_marginBottom="50dp"        android:gravity="center_horizontal"        ></LinearLayout></RelativeLayout>

布局文件中有一个id为dots的LinearLayout就是一会儿可以切换显示的小圆点。

让你的Activity实现ViewFactory接口，做为imageSwitcher.setFactory的参数，小圆点的实现是根据可切换图片的张数动态添加到dots中的。具体的代码如下：

package com.example.imageswitcher;import android.annotation.SuppressLint;import android.app.ActionBar.LayoutParams;import android.app.Activity;import android.os.Bundle;import android.view.KeyEvent;import android.view.View;import android.widget.ImageSwitcher;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import android.widget.ViewSwitcher.ViewFactory;public class MainActivity extends Activity implements  ViewFactory {private ImageSwitcher mSwitcher ;private LinearLayout mLinearLayout ;private ImageView[] mImageViewDots ;private int mIndex = 0 ;private int mImageRes[] = new int[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e,R.drawable.g};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mLinearLayout = (LinearLayout)findViewById(R.id.dots);mSwitcher = (ImageSwitcher)findViewById(R.id.switcher);initDots();mSwitcher.setFactory(this);mSwitcher.setImageResource(mImageRes[0]);mImageViewDots[0].setBackgroundResource(R.drawable.dot_focus);}@SuppressLint("NewApi")public void initDots(){mLinearLayout.removeAllViews() ;mImageViewDots = new ImageView[mImageRes.length] ;for(int i=0 ;i<mImageRes.length ;i++){ImageView dot = new ImageView(this);dot.setBackgroundResource(R.drawable.dot_nomal);dot.setLayoutParams(new LayoutParams(30,30)) ;TextView tv = new TextView(this);tv.setLayoutParams(new LayoutParams(30,30));mImageViewDots[i] = dot ;mLinearLayout.addView(dot);mLinearLayout.addView(tv);}}@Overridepublic View makeView() {return new ImageView(this);}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {if(keyCode == KeyEvent.KEYCODE_DPAD_LEFT){if(mIndex == 0){mIndex = mImageRes.length -1 ;}else{--mIndex ;}mSwitcher.setInAnimation(MainActivity.this, R.anim.left_in) ;mSwitcher.setOutAnimation(MainActivity.this, R.anim.right_out) ;mSwitcher.setImageResource(mImageRes[mIndex%mImageRes.length]);}else if(keyCode == KeyEvent.KEYCODE_DPAD_RIGHT){if(mIndex == mImageRes.length - 1){mIndex = 0 ;}else{++mIndex ;}mSwitcher.setInAnimation(MainActivity.this, R.anim.rigth_in) ;mSwitcher.setOutAnimation(MainActivity.this, R.anim.left_out) ;mSwitcher.setImageResource(mImageRes[mIndex%mImageRes.length]);}for(int i=0 ;i<mImageViewDots.length ;i++){if(i == mIndex%mImageRes.length){mImageViewDots[i].setBackgroundResource(R.drawable.dot_focus);}else{mImageViewDots[i].setBackgroundResource(R.drawable.dot_nomal);}}return super.onKeyDown(keyCode, event);}}

这里可切换的图片可随意制定。这里来说一下切换动画，这里总有4个动画，分为两组。第一组是当ImageSwitcher向左切换图片的时候，首先setInAnimation是设置即将出现的那张图片的动画，setOutAnimation是设置即将消息的那张图片的动画，分别是left_in,rigth_out。第二组则是与之相反的。四个动画分别如下（放在res/anim目录下）：

left_in.xml

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

rigth_out.xml

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

rigth_in.xml

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

left_out.xml

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

针对小圆点，我是用drawable.xml文件去画的，在程序中可以指定它的大小。这里设置了两种颜色，用于区别当前在第几个页面。

dot_focus.xml

<?xml version="1.0" encoding="utf-8"?>  <shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="oval"      >      <corners android:radius="5dip" />       <solid android:color="#33FF00" /></shape>

dot_nomal.xml

<?xml version="1.0" encoding="utf-8"?>  <shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="oval"      >      <corners android:radius="5dip" />      <solid android:color="#FFFF99" /></shape>

我是在Android机顶盒上开发的此Demo，所有捕捉的是左键和右键。如果是手机端的话，可以捕捉手势。上一张大概的图：

接下来将用ViewPager实现此效果。

源码参考