Android学习之ViewFlipper

最新推荐文章于 2024-04-21 11:05:56 发布

原创最新推荐文章于 2024-04-21 11:05:56 发布 · 2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Android

本文介绍了如何利用ViewFlipper在Android应用中实现多个页面的动态切换，并支持手势滑动操作。通过实例演示，展示了如何在布局文件中创建导航栏与动态内容页，以及在Activity中配置事件监听来实现页面展示与手势响应。

大家都知道Tab的用处，其实有时候tab的效果不是很理想，这时候用ViewFlipper也能做到这样的效果，而且更加的炫哦。
ViewFlipper的作用就是可以在一个页面实现多个页面的跳转，并且可以设置动画的效果。还可以手势滑动跳转哦。
通过一个例子来练习下吧。
先来张效果图，很丑的呀...

这里即实现了TAB相应的功能，还具有更多的动画效果，来试试吧....
这个例子主要是采用了android淘宝客户的方法来实现的...图片也是引用他的。
先说下地步导航的生成吧，直接上代码喽。
其实就个布局文件来生成的e。。
我叫他bottomTab.xml,当然他不是tab啦....

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="wrap_content">
	<FrameLayout android:layout_width="wrap_content" android:layout_alignParentBottom="true"
		android:layout_height="wrap_content" >

		<LinearLayout android:orientation="horizontal"
			android:layout_width="fill_parent" android:layout_height="fill_parent">
			<ImageView android:id="@+id/imv1" android:layout_width="wrap_content" android:visibility="invisible"
				android:layout_height="wrap_content" android:background="@drawable/btn_on" />
			<ImageView android:id="@+id/imv2" android:layout_width="wrap_content" android:visibility="invisible"
				android:layout_height="wrap_content" android:background="@drawable/btn_on" />
			<ImageView android:id="@+id/imv3" android:layout_width="wrap_content" android:visibility="invisible"
				android:layout_height="wrap_content" android:background="@drawable/btn_on" />
		</LinearLayout>

		<LinearLayout android:orientation="horizontal"
			android:layout_width="fill_parent" android:layout_height="fill_parent">
			<ImageButton android:id="@+id/img1" android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:background="@drawable/first_nm"/>
			<ImageButton android:id="@+id/img2" android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:background="@drawable/fourth_nm"/>
			<ImageButton android:id="@+id/img3" android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:background="@drawable/fifth_nm"/>
		</LinearLayout>
	</FrameLayout>
</RelativeLayout>

这个容易理解，主要就是将一个背景图和一个图片按钮重叠在一起，然后在设置点击事件是实现他们的visibity属性来实现效果.....
好了下面就是主页面了。。。。当当当当....

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/relativeLayout1"
	android:layout_width="fill_parent" android:layout_height="fill_parent"
	xmlns:android="http://schemas.android.com/apk/res/android">
	<include android:layout_width="fill_parent" android:id="@+id/tab"
		android:layout_height="60.0dip" layout="@layout/buttomtab"
		android:layout_alignParentBottom="true" />
	<ViewFlipper android:id="@+id/flipper" android:layout_above="@id/tab"
		android:layout_width="fill_parent" android:layout_height="wrap_content">
		<FrameLayout android:layout_width="fill_parent"
			android:layout_height="fill_parent">
			<ViewStub android:layout="@layout/v1" android:layout_width="fill_parent"
				android:layout_height="fill_parent" android:id="@+id/vs1" />
		</FrameLayout>
		<FrameLayout android:layout_width="fill_parent"
			android:layout_height="fill_parent">
			<ViewStub android:layout="@layout/v2" android:layout_width="fill_parent"
				android:layout_height="fill_parent" android:id="@+id/vs2" />
		</FrameLayout>
	</ViewFlipper>
</RelativeLayout>

主角上场喽，首先我们先看下<include>的使用，看名字就知道就是引用其他布局文件啦，是的，这里我们把刚才新建的bottomTab文件应用了出来，并且让他呆在底部。
然后就是ViewFlipper啦，在他的内部里我们可以设置N多个layout布局啦，当然这个layout也可以是FrameLayout,LinerLayout等等啦。看ViewStub,这里有采用了另一种方式来引用其他的布局文件。viewStub是看不见的哦，所以在后面的Activity里你就要设置他的visibity属性来让他显示出来，或者将他inflate出来。
布局文件基本OK了，下面就是她们登场的时间啦。
Activity中的代码。

package com.tt;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.view.ViewStub;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class TTActivity extends Activity implements OnClickListener, OnTouchListener, OnGestureListener {
	private ImageButton img1, img2, img3;
	private ImageView imv1, imv2, imv3;
	private View bottomTab;
	private ViewFlipper vf;
	private View vs1,vs2;
	private GestureDetector gd;
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		findView();
		
		//注册时间
		img1.setOnClickListener(this);
		img2.setOnClickListener(this);
		img3.setOnClickListener(this);
		vf.setOnTouchListener(this);//触摸事件
		gd = new GestureDetector(this);//手势事件的注册，一定要将滑动事件交给他处理啦，不然很麻烦
		vf.setLongClickable(true);//设置ViewFlipper长按有效
	}

	public void findView() {
		LayoutInflater inflater = getLayoutInflater();
		bottomTab = inflater.inflate(R.layout.buttomtab, null);
		imv1 = (ImageView) findViewById(R.id.imv1);
		img1 = (ImageButton) findViewById(R.id.img1);
		imv2 = (ImageView) findViewById(R.id.imv2);
		img2 = (ImageButton) findViewById(R.id.img2);
		imv3 = (ImageView) findViewById(R.id.imv3);
		img3 = (ImageButton) findViewById(R.id.img3);
		vf = (ViewFlipper)findViewById(R.id.flipper);
		vs1 = (ViewStub)findViewById(R.id.vs1);
		vs2 = (ViewStub)findViewById(R.id.vs2);
		
	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch (v.getId()) {
		case R.id.img1:
			img1.setImageResource(R.drawable.first_on);
			imv1.setVisibility(View.VISIBLE);
			vs1.setVisibility(View.VISIBLE);//ViewStub显示出来呀
//			vf.showNext();
			vf.setDisplayedChild(0);//注意这里，我是让他显示自己想用的View哦
			break;
		case R.id.img2:
			img2.setImageResource(R.drawable.fourth_on);
			imv2.setVisibility(View.VISIBLE);
			vs2.setVisibility(View.VISIBLE);
			vf.setDisplayedChild(1);
//			vf.showNext();
			break;
		case R.id.img3:
			img3.setImageResource(R.drawable.fifth_on);
			imv3.setVisibility(View.VISIBLE);
			break;
		default:
			break;
		}

	}

	@Override
	public boolean onTouch(View arg0, MotionEvent arg1) {
		// TODO Auto-generated method stub
		return gd.onTouchEvent(arg1);//注意这里，就是要把事件交给GestureDetector处理，这样会简单很多
	}

	@Override
	public boolean onDown(MotionEvent arg0) {
		// TODO Auto-generated method stub
		return false;
	}
	
	//这就是那个手势滑动的动作啦
	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float x,
			float y) {
		// TODO Auto-generated method stub
		if(e1.getX()-e2.getX()>100){//这里面的算数就是我们滑动手势时从触摸到离开的距离啦
			vf.showNext();
		}else if(e2.getX()-e1.getX()>100){
			vf.showPrevious();
		}
		return false;
	}

	@Override
	public void onLongPress(MotionEvent arg0) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
			float arg3) {
		// TODO Auto-generated method stub
		return false;
	}

	@Override
	public void onShowPress(MotionEvent arg0) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public boolean onSingleTapUp(MotionEvent arg0) {
		// TODO Auto-generated method stub
		return false;
	}
}

下面，你就可以即通过点击按钮来切换画面又可以通过手势滑动来切换啦。我这里写的很粗糙啦，画面切换的动画效果是没有写的。哈哈，理解这个基本应用就好啦。