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>

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


本文出自 “我的博客” 博客,请务必保留此出处http://huolailai.blog.51cto.com/9946966/1656387

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。