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

关注

原创最新推荐文章于 2026-03-11 05:05:18 发布 3.2k 阅读 AI 写同款· GEO 优化 ›

TabHost + ViewFlipper实现滑动翻页、切换tab动画效果历史最牛、绝对原创、代码简洁、功能强大，华丽的使用TabHost与ViewFlipper结合实现滑动翻页效果，支持tab背景图片自动切换.之前看到别人写的实现方法是重写TabHost，但是代码太繁琐。本程序虽然资源分高点儿，但绝对物超所值，下载了如有问题请站内联系。立即下载

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 stub
		initLayout(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 stub
		initLayout(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 stub
		initLayout(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 stub
		initLayout(context);
	}

	// 初始化Layout
	private 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);
		
		//创建RadioGroup
		rGroup = 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() {
			
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				// TODO Auto-generated method stub
				checkedChange(checkedId);
			}
		});
		
		//创建RadioButton
		bn_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);
		
		//创建中间间隔ImageView
		ImageView imageView = new ImageView(context);
		imageView.setBackgroundResource(R.drawable.nav_divider);
		buttonParams = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		rGroup.addView(imageView, buttonParams);
		
		//创建第二个RadioButton
		bn_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);
		
		//中间间隔view
		imageView = new ImageView(context);
		imageView.setBackgroundResource(R.drawable.nav_divider);
		buttonParams = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		rGroup.addView(imageView, buttonParams);
		
		//第三个RadioButton
		bn_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(){

		@Override
		public boolean onTouch(View v, MotionEvent event) {
			// TODO Auto-generated method stub
			return mGestureDetector.onTouchEvent(event);
		}
		
	};
	
	GestureDetector mGestureDetector = new GestureDetector(new OnGestureListener() {
		
		@Override
		public boolean onSingleTapUp(MotionEvent e) {
			// TODO Auto-generated method stub
			return false;
		}
		
		@Override
		public void onShowPress(MotionEvent e) {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
				float distanceY) {
			// TODO Auto-generated method stub
			return false;
		}
		
		@Override
		public void onLongPress(MotionEvent e) {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
				float velocityY) {
			// TODO Auto-generated method stub
			if(velocityX > 0){
				System.out.println("左边-velocityX:" + velocityX);
				rightNext();
			} else {
				System.out.println("右边-velocityX:" + velocityX);
				leftNext();
			}
			return false;
		}
		
		@Override
		public boolean onDown(MotionEvent e) {
			// TODO Auto-generated method stub
			return 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.youkuaiyun.com/sunboy_2050/article/details/7420567

收录于