打开思维的枷锁：选项卡切换、手势识别动作ViewFlipper的一个案例分析

1.案例图片展示：

2.案例功能扫描：

   1.ViewFlipper的页面切换功能，包括添加手势识别左右滑动切换，同时联动点击顶部选项卡切换；

   2.动态组合RadioGroup与ViewFlipper实现选项卡Tab与content联动；
   3.利用RadioButton实现顶部选项卡；
   4.动画Animation的定义及实现，包括xml方式和java代码；
   5.GestureDetector手势识别应用；

3.案例所需基本功：

   1.ViewFlipper控件的使用、

   2.RadioGroup控件应用、

   3.在代码中定义控件、

   4.事件监听机制（onClickListener/OnTouchListener）、

   5.Animation的使用（包含xml定义与java代码定义）、

   6.GestureDetector的使用。

4.案例图片素材：一张整幅图片背景图片、一张RadioButton未选中时的图片，一张选中时的图片（格式为.9.png），一张RadioButton中间间隔的图片。

5.案例实现分析：

   第一步：准备三个LayoutView，作为ViewFlipper的子View；

   第二步：实现ViewFlipper这个主View的功能；

       1.设计选项卡，通过RadioGroup与RadioButton来实现，需要学会如何在java中定义View的控件，包括设置LayoutParams参数与设置View控件属性；

       2.实现ViewFlipper控件，并将三个LayoutView作为它的子View加进去；
       3.给RadioGroup添加点击事件监控setOnCheckedChangeListener()，通过得到的RadioButton id来控制RadioButton点击状态显 示与ViewFlipper对应的 LayoutView显示；

       4.给ViewFlipper添加左右移动动画Animation；
       5.给ViewFlipper添加手势识别监听器，并设计其左右移动动画。

   第三步：在Activity里面通过setContentView()方法将这个主View加进去。

6.案例代码实现：

作为内容View的类LayoutFirst

package com.javaee.main.layout;import android.content.Context;import android.view.Gravity;import android.widget.RelativeLayout;import android.widget.TextView;public class LayoutFirst extends RelativeLayout{public LayoutFirst(Context context) {super(context);// TODO Auto-generated constructor stubinitLayout(context);}private void initLayout(Context context){LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);TextView tv = new TextView(context);tv.setText("LayoutA");tv.setTextSize(28.0f);tv.setGravity(Gravity.CENTER);this.addView(tv, params);}}

类LayoutSecond：

package com.javaee.main.layout;import android.content.Context;import android.view.Gravity;import android.widget.RelativeLayout;import android.widget.TextView;public class LayoutSecond extends RelativeLayout{public LayoutSecond(Context context) {super(context);// TODO Auto-generated constructor stubinitLayout(context);}private void initLayout(Context context){LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);TextView tv = new TextView(context);tv.setText("LayoutB");tv.setTextSize(28.0f);tv.setGravity(Gravity.CENTER);this.addView(tv, params);}}

类LayoutThird

package com.javaee.main.layout;import android.content.Context;import android.view.Gravity;import android.widget.RelativeLayout;import android.widget.TextView;public class LayoutThird extends RelativeLayout{public LayoutThird(Context context) {super(context);// TODO Auto-generated constructor stubinitLayout(context);}private void initLayout(Context context){LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);TextView tv = new TextView(context);tv.setText("LayoutC");tv.setTextSize(28.0f);tv.setGravity(Gravity.CENTER);this.addView(tv, params);}}

辅助动画类AnimationHelper

package com.javaee.main.anim;import android.view.animation.AccelerateInterpolator;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;public class AnimationHelper {// 从右边出来滑动效果public static Animation inFromRight() {Animation inFRight = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, +1.0f,Animation.RELATIVE_TO_PARENT, 0.0f,Animation.RELATIVE_TO_PARENT, 0.0f,Animation.RELATIVE_TO_PARENT, 0.0f);inFRight.setDuration(500);inFRight.setInterpolator(new AccelerateInterpolator());return inFRight;}// 从左边出来滑动效果public static Animation inFromLeft() {Animation inFLeft = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -1.0f,Animation.RELATIVE_TO_PARENT, 0.0f,Animation.RELATIVE_TO_PARENT, 0.0f,Animation.RELATIVE_TO_PARENT, 0.0f);inFLeft.setDuration(500);inFLeft.setInterpolator(new AccelerateInterpolator());return inFLeft;}// 从左边出去效果public static Animation outToLeft() {Animation outToLeft = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f,Animation.RELATIVE_TO_PARENT, -1.0f,Animation.RELATIVE_TO_PARENT, 0.0f,Animation.RELATIVE_TO_PARENT, 0.0f);outToLeft.setDuration(500);outToLeft.setInterpolator(new AccelerateInterpolator());return outToLeft;}// 从右边出去public static Animation outToRight() {Animation outTRight = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f,Animation.RELATIVE_TO_PARENT, 1.0f,Animation.RELATIVE_TO_PARENT, 0.0f,Animation.RELATIVE_TO_PARENT, 0.0f);outTRight.setDuration(500);outTRight.setInterpolator(new AccelerateInterpolator());return outTRight;}}

主界面类MyViewFlipper

package com.javaee.main.mainView;import com.javaee.main.R;import com.javaee.main.anim.AnimationHelper;import com.javaee.main.layout.LayoutFirst;import com.javaee.main.layout.LayoutSecond;import com.javaee.main.layout.LayoutThird;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Shader.TileMode;import android.graphics.drawable.BitmapDrawable;import android.util.Log;import android.view.GestureDetector;import android.view.GestureDetector.OnGestureListener;import android.view.Gravity;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;import android.view.animation.AnimationUtils;import android.widget.ImageView;import android.widget.RadioButton;import android.widget.RadioGroup;import android.widget.RadioGroup.OnCheckedChangeListener;import android.widget.RelativeLayout;import android.widget.ViewFlipper;public class MyViewFlipper extends RelativeLayout {private final static int ID_RADIO_GROUP = 0X0005;private final static int ID_RADIO_BUTTON1 = 0X0008;private final static int ID_RADIO_BUTTON2 = 0X0007;private final static int ID_RADIO_BUTTON3 = 0X0006;private RadioGroup rGroup;private RadioButton bn_1;private RadioButton bn_2;private RadioButton bn_3;private ViewFlipper flipper;private LayoutFirst first;private LayoutSecond second;private LayoutThird third;public MyViewFlipper(Context context) {super(context);// TODO Auto-generated constructor stubinitLayout(context);}// 初始化Layoutprivate void initLayout(final Context context) {Bitmap bmnull = null;// 设置View的背景BitmapDrawable mDraw = new BitmapDrawable(getResources(),BitmapFactory.decodeResource(getResources(),R.drawable.browse_bg_tile));mDraw.setTileModeXY(TileMode.REPEAT, TileMode.REPEAT);this.setBackgroundDrawable(mDraw);//创建RadioGrouprGroup = new RadioGroup(context);rGroup.setOrientation(CENTER_HORIZONTAL);rGroup.setGravity(Gravity.CENTER_HORIZONTAL);rGroup.setId(ID_RADIO_GROUP);//创建RadioGroup的layout参数LayoutParams gourpLParams = new LayoutParams(LayoutParams.FILL_PARENT, 55);gourpLParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);this.addView(rGroup, gourpLParams);//给RadioGroup添加监听器rGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {// TODO Auto-generated method stubcheckedChange(checkedId);}});//创建RadioButtonbn_1 = new RadioButton(context);bn_1.setId(ID_RADIO_BUTTON1);bn_1.setBackgroundResource(R.drawable.nav_inactive_tile);bn_1.setButtonDrawable(new BitmapDrawable(bmnull));bn_1.setText("Tab1");bn_1.setTextColor(0xff839359);bn_1.getPaint().setFakeBoldText(true);bn_1.setGravity(Gravity.CENTER);RadioGroup.LayoutParams buttonParams = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);buttonParams.weight = 1;rGroup.addView(bn_1, buttonParams);//创建中间间隔ImageViewImageView imageView = new ImageView(context);imageView.setBackgroundResource(R.drawable.nav_divider);buttonParams = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);rGroup.addView(imageView, buttonParams);//创建第二个RadioButtonbn_2 = new RadioButton(context);bn_2.setId(ID_RADIO_BUTTON2);bn_2.setBackgroundResource(R.drawable.nav_inactive_tile);bn_2.setButtonDrawable(new BitmapDrawable(bmnull));bn_2.setText("Tab2");bn_2.setTextColor(0xff839359);bn_2.getPaint().setFakeBoldText(true);bn_2.setGravity(Gravity.CENTER);buttonParams = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);buttonParams.weight = 1;rGroup.addView(bn_2, buttonParams);//中间间隔viewimageView = new ImageView(context);imageView.setBackgroundResource(R.drawable.nav_divider);buttonParams = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);rGroup.addView(imageView, buttonParams);//第三个RadioButtonbn_3 = new RadioButton(context);bn_3.setId(ID_RADIO_BUTTON3);bn_3.setBackgroundResource(R.drawable.nav_inactive_tile);bn_3.setButtonDrawable(new BitmapDrawable(bmnull));bn_3.setText("Tab3");bn_3.setTextColor(0xff839359);bn_3.getPaint().setFakeBoldText(true);bn_3.setGravity(Gravity.CENTER);buttonParams = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);buttonParams.weight = 1;rGroup.addView(bn_3, buttonParams);//创建flipper对象flipper = new ViewFlipper(context);flipper.setInAnimation(AnimationUtils.loadAnimation(context, R.anim.in_to_left));flipper.setOutAnimation(AnimationUtils.loadAnimation(context, R.anim.out_to_left));flipper.setOnTouchListener(mOnTouchListener);flipper.setPersistentDrawingCache(ViewGroup.PERSISTENT_ALL_CACHES);flipper.setFlipInterval(1000);flipper.setClickable(true);gourpLParams = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.MATCH_PARENT);gourpLParams.addRule(RelativeLayout.BELOW, ID_RADIO_GROUP);this.addView(flipper, gourpLParams);first = new LayoutFirst(context);second = new LayoutSecond(context);third = new LayoutThird(context);gourpLParams = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);flipper.addView(first, gourpLParams);flipper.addView(second, gourpLParams);flipper.addView(third, gourpLParams);}private OnTouchListener mOnTouchListener = new OnTouchListener(){@Overridepublic boolean onTouch(View v, MotionEvent event) {// TODO Auto-generated method stubreturn mGestureDetector.onTouchEvent(event);}};GestureDetector mGestureDetector = new GestureDetector(new OnGestureListener() {@Overridepublic boolean onSingleTapUp(MotionEvent e) {// TODO Auto-generated method stubreturn false;}@Overridepublic void onShowPress(MotionEvent e) {// TODO Auto-generated method stub}@Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,float distanceY) {// TODO Auto-generated method stubreturn false;}@Overridepublic void onLongPress(MotionEvent e) {// TODO Auto-generated method stub}@Overridepublic boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {// TODO Auto-generated method stubif(velocityX > 0){System.out.println("左边-velocityX:" + velocityX);rightNext();} else {System.out.println("右边-velocityX:" + velocityX);leftNext();}return false;}@Overridepublic boolean onDown(MotionEvent e) {// TODO Auto-generated method stubreturn false;}});private void checkedChange(int id){switch (id) {case 0:case ID_RADIO_BUTTON1:flipper.setDisplayedChild(0);bn_1.setBackgroundResource(R.drawable.nav_active_2options);bn_2.setBackgroundResource(R.drawable.nav_inactive_tile);bn_3.setBackgroundResource(R.drawable.nav_inactive_tile);break;case 1:case ID_RADIO_BUTTON2:flipper.setDisplayedChild(1);bn_1.setBackgroundResource(R.drawable.nav_inactive_tile);bn_2.setBackgroundResource(R.drawable.nav_active_2options);bn_3.setBackgroundResource(R.drawable.nav_inactive_tile);break;case 2:case ID_RADIO_BUTTON3:flipper.setDisplayedChild(2);bn_1.setBackgroundResource(R.drawable.nav_inactive_tile);bn_2.setBackgroundResource(R.drawable.nav_inactive_tile);bn_3.setBackgroundResource(R.drawable.nav_active_2options);break;}}private void leftNext(){flipper.setInAnimation(AnimationHelper.inFromRight());flipper.setOutAnimation(AnimationHelper.outToLeft());flipper.showNext();checkedChange(flipper.getDisplayedChild());}private void rightNext(){flipper.setInAnimation(AnimationHelper.inFromLeft());flipper.setOutAnimation(AnimationHelper.outToRight());flipper.showPrevious();checkedChange(flipper.getDisplayedChild());}}

Activity启动类MainActivity

package com.javaee.main;import com.javaee.main.mainView.MyViewFlipper;import android.app.Activity;import android.os.Bundle;import android.view.Window;import android.view.WindowManager;public class MainActivity extends Activity {    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);        MyViewFlipper flipper = new MyViewFlipper(this);        setContentView(flipper);    }}

参考播客：http://blog.csdn.net/sunboy_2050/article/details/7420567