大家都知道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;
}
}
下面,你就可以即通过点击按钮来切换画面又可以通过手势滑动来切换啦。我这里写的很粗糙啦,画面切换的动画效果是没有写的。哈哈,理解这个基本应用就好啦。
![偷笑](http://static.blog.csdn.net/xheditor/xheditor_emot/default/titter.gif)