Android开发——实现TabHost 随手滑动切换选项卡功能（绝对实用）

以前用TabHost只是点击导航栏选项卡才进行切换，今天试了下手势滑动进行切换，搜了好多资料感觉特别乱，花了好长时间整理了一下终于有效果了，自己写了一个Demo。

程序清单1：布局文件

说明：和我们写Tabhost布局文件一样

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TabHost

android:id="@android:id/tabhost" android:layout_width="fill_parent"

android:layout_height="fill_parent">

<LinearLayout android:orientation="vertical"

android:layout_width="fill_parent" android:layout_height="fill_parent">

<TabWidget android:id="@android:id/tabs"

android:layout_width="fill_parent" android:layout_height="wrap_content" />

<FrameLayout android:id="@android:id/tabcontent"

android:layout_width="fill_parent" android:layout_height="fill_parent" >

<LinearLayout

android:focusable="true"

android:focusableInTouchMode="true"

android:id="@+id/tab01"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="你好"

android:textSize="20sp"/>

<ListView

android:id="@+id/listview"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:dividerHeight="10dp"

android:divider="#D1D1D1"

>

</ListView>

</LinearLayout>

<LinearLayout

android:id="@+id/tab02"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="你好"

android:textSize="20sp"/>

<ListView

android:id="@+id/listview1"

android:layout_width="match_parent"

android:layout_height="match_parent">

</ListView>

</LinearLayout>

<LinearLayout

android:id="@+id/tab03"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="你好"

android:textSize="20sp"/>

<ListView

android:id="@+id/listview2"

android:layout_width="match_parent"

android:layout_height="360dp"

>

</ListView>

</LinearLayout>

</FrameLayout>

</LinearLayout>

</TabHost>

</LinearLayout>

程序清单2：

MainActivity.java

public class MainActivity extends TabActivity {

private static final int SWIPE_MIN_DISTANCE = 120;

private static final int SWIPE_MAX_OFF_PATH = 250;

private static final int SWIPE_THRESHOLD_VELOCITY = 200;

private GestureDetector gestureDetector;

View.OnTouchListener gestureListener;

private Animation slideLeftIn;

private Animation slideLeftOut;

private Animation slideRightIn;

private Animation slideRightOut;

private ViewFlipper viewFlipper;

int currentView = 0;

private static int maxTabIndex = 2;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

TabHost tabHost = getTabHost();

tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("tab1 ")

.setContent(R.id.tab01));

tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("tab2 ")

.setContent(R.id.tab02));

tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3 ")

.setContent(R.id.tab03));

tabHost.setCurrentTab(0);

slideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_left_in);

slideLeftOut = AnimationUtils

.loadAnimation(this, R.anim.slide_left_out);

slideRightIn = AnimationUtils

.loadAnimation(this, R.anim.slide_right_in);

slideRightOut = AnimationUtils.loadAnimation(this,

R.anim.slide_right_out);

gestureDetector = new GestureDetector(new MyGestureDetector());

gestureListener = new View.OnTouchListener() {

public boolean onTouch(View v, MotionEvent event) {

if (gestureDetector.onTouchEvent(event)) {

return true;

}

return false;

}

};

}

class MyGestureDetector extends GestureDetector.SimpleOnGestureListener {

@Override

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,

float velocityY) {

TabHost tabHost = getTabHost();

try {

if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)

return false;

if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE

&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {

Log.i("test ", "right");

if (currentView == maxTabIndex) {

currentView = 0;

} else {

currentView++;

}

tabHost.setCurrentTab(currentView);

} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE

&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {

Log.i("test ", "left");

if (currentView == 0) {

currentView = maxTabIndex;

} else {

currentView--;

}

tabHost.setCurrentTab(currentView);

}

} catch (Exception e) {

// nothing

}

return false;

}

}

//@Override

//public boolean onTouchEvent(MotionEvent event) {

//if (gestureDetector.onTouchEvent(event))

//return true;

//else

//return false;

//}

@Override

public boolean dispatchTouchEvent(MotionEvent event) {

if(gestureDetector.onTouchEvent(event)){

event.setAction(MotionEvent.ACTION_CANCEL);

}

return super.dispatchTouchEvent(event);

}

}

当然这里会用到关于滑动的四个xml文件   我们将它们存在 res\anim中 (anim文件要自己新建)

1、 slide_left_in

2、slide_lefe_out

3、slide_right_in

4、slide_right_out

1、 slide_left_in.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate

android:duration="500"

android:fromXDelta="100%p"

android:toXDelta="0" />

<alpha

android:duration="500"

android:fromAlpha="0.0"

android:toAlpha="1.0" />

</set>

2、slide_lefe_out.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate

android:duration="500"

android:fromXDelta="0"

android:toXDelta="-100%p" />

<alpha

android:duration="500"

android:fromAlpha="1.0"

android:toAlpha="0.0" />

</set>

3、slide_right_in.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate

android:duration="500"

android:fromXDelta="-100%p"

android:toXDelta="0" />

<alpha

android:duration="500"

android:fromAlpha="0.0"

android:toAlpha="1.0" />

</set>

4、slide_right_out.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate

android:duration="1500"

android:fromXDelta="0"

android:toXDelta="100%p" />

<alpha

android:duration="1500"

android:fromAlpha="1.0"

android:toAlpha="0.1" />

</set>

好了现在就完成了。来几张效果图：