用户向导左右滑动页面实现之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
};
@Override
protected 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);
}
}

@Override
public View makeView() {
return new ImageView(this);
}

@Override
public 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实现此效果。