Android可滑动Tab的3种实现方法

Android系统中有着各种各样的Tab组件，并且大部分也都支持滑动，本文将结合代码来实现3种方式的Android可滑动Tab组件，有需要的Android开发者可以收藏。

1. 第一种，使用 TabHost + viewPager 实现

该方法会有一个Bug，当设置tabHost.setCurrentTab()为0时，ViewPager不显示（准确的说是加载），只有点击其他任意一个tab后才会加载。

有解的同学吼一声~~~~~~~

Activity:

package com.swordy.demo.android.fragment;import java.util.Random;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.TabHost;import android.widget.TabHost.OnTabChangeListener;import android.widget.TabWidget;import android.widget.TextView;import com.swordy.demo.android.R;import com.swordy.library.android.util.ELog;/** * 1. 使用TabHost和ViewPager组合实现一个可以滑动的tab * 2. bug：如果当前页为0，则ViewPager第一次不加载。 *  * @author swordy * @email [e-mail] * @since Jan 20, 2014 * @version 1.0 */public class SlideTabs1 extends FragmentActivity{    private static final String TAG = "AndroidDemos.SlideTabs1";    private TabHost mTabHost;    private ViewPager mViewPager;    private PagerAdapter mPagerAdapter;    private String[] addresses = { "first", "second", "third" };    @Override    protected void onCreate(Bundle arg0)    {        super.onCreate(arg0);        setContentView(R.layout.fragment_slidetabs1);        mViewPager = (ViewPager) findViewById(R.id.viewPager1);        mPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());        mViewPager.setAdapter(mPagerAdapter);        mTabHost = (TabHost) findViewById(android.R.id.tabhost);        mTabHost.setup();        mTabHost.addTab(mTabHost.newTabSpec("one").setIndicator("one-1")                .setContent(R.id.viewPager1));        mTabHost.addTab(mTabHost.newTabSpec("two").setIndicator("two-2")                .setContent(R.id.viewPager1));        mTabHost.addTab(mTabHost.newTabSpec("three").setIndicator("three-3")                .setContent(R.id.viewPager1));        TabWidget tabWidget = mTabHost.getTabWidget();        int count = tabWidget.getChildCount();        for (int i = 0; i != count; i++)        {            final int index = i;            tabWidget.getChildAt(i).setOnClickListener(new OnClickListener() {                @Override                public void onClick(View v)                {                    mTabHost.setCurrentTab(index);                    mViewPager.setCurrentItem(index);                }            });        }        mTabHost.setOnTabChangedListener(new OnTabChangeListener() {            @Override            public void onTabChanged(String tabId)            {                ELog.i(TAG, "@--> onTabChanged by tabId: " + tabId);            }        });        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {            @Override            public void onPageSelected(int arg0)            {                ELog.i(TAG, "@--> onPageSelected: " + arg0);                mTabHost.setCurrentTab(arg0);            }            @Override            public void onPageScrolled(int arg0, float arg1, int arg2)            {            }            @Override            public void onPageScrollStateChanged(int arg0)            {            }        });    }    private class MyPagerAdapter extends FragmentStatePagerAdapter    {        public MyPagerAdapter(FragmentManager fm)        {            super(fm);        }        @Override        public Fragment getItem(int position)        {            ELog.i(TAG, "@--> getItem by position" + position);            ELog.i(TAG, "@--> getItem by position" + position);            return MyFragment.create(addresses[position]);        }        @Override        public int getCount()        {            return addresses.length;        }    }    public static class MyFragment extends Fragment    {        public static MyFragment create(String address)        {            ELog.i(TAG, "@--> MyFragment.create()");            MyFragment f = new MyFragment();            Bundle b = new Bundle();            b.putString("address", address);            f.setArguments(b);            return f;        }        @Override        public View onCreateView(LayoutInflater inflater, ViewGroup container,                Bundle savedInstanceState)        {            Random r = new Random(System.currentTimeMillis());            Bundle b = getArguments();            View v = inflater.inflate(R.layout.fragment_viewpager1_layout1, null);            v.setBackgroundColor(r.nextInt() >> 8 | 0xFF << 24);            TextView txvAddress = (TextView) v.findViewById(R.id.textView1);            txvAddress.setTextColor(r.nextInt() >> 8 | 0xFF << 24);            txvAddress.setBackgroundColor(r.nextInt() >> 8 | 0xFF << 24);            txvAddress.setText(b.getString("address", ""));            return v;        }    }}

布局：

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/tabhost"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical" >        <TabWidget            android:id="@android:id/tabs"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="right|center_vertical" />        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="match_parent"            android:layout_height="match_parent" >            <android.support.v4.view.ViewPager                android:id="@+id/viewPager1"                android:layout_width="match_parent"                android:layout_height="match_parent" />        </FrameLayout>    </LinearLayout></TabHost>

2. 第二种，使用官方提供的方法 ActionBar + ViewPager 实现

该方法有两个缺陷，或者说不是缺陷，只是我没有找到解决的办法。

第一，tab点上不是很灵敏，可能就是这么设定的，为了防止频繁加载吧，但是体验稍稍不爽；

第二，ActionBar在最顶部，如果我的布局是：顶部一个带返回按钮的标题栏，中间是tab，底部是tabcontent，怎么搞？

Activity：

package com.swordy.demo.android.fragment;import java.util.Random;import android.app.ActionBar;import android.app.ActionBar.Tab;import android.app.ActionBar.TabListener;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import com.swordy.demo.android.R;/** * 1. 使用ActionBar和ViewPager实现可以滑动的Tab *  * @author swordy * @email [e-mail] * @since Jan 20, 2014 * @version 1.0 */public class SlideTabs2 extends FragmentActivity{    private static final String TAG = "AndroidDemos.SlideTabs2";    private ViewPager mViewPager;    private ActionBar mActionBar;    private MyPagerAdapter mPagerAdapter;    private String[] addresses = { "first", "second", "third" };    private Tab[] mTabs = new Tab[addresses.length];    @Override    protected void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.fragment_viewpager1);        mViewPager = (ViewPager) findViewById(R.id.viewPager1);        mPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());        mViewPager.setAdapter(mPagerAdapter);        mViewPager.setOnPageChangeListener(mPageChangeListener);        mActionBar = getActionBar();        mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);        mActionBar.setDisplayShowTitleEnabled(false);        mActionBar.setDisplayShowHomeEnabled(false);        for (int i = 0; i != addresses.length; i++)        {            mTabs[i] = mActionBar.newTab().setText(addresses[i]).setTabListener(mTabListener);            mActionBar.addTab(mTabs[i]);        }    }    private OnPageChangeListener mPageChangeListener = new OnPageChangeListener() {        @Override        public void onPageSelected(int arg0)        {            mActionBar.setSelectedNavigationItem(arg0);        }        @Override        public void onPageScrolled(int arg0, float arg1, int arg2)        {        }        @Override        public void onPageScrollStateChanged(int arg0)        {        }    };    private TabListener mTabListener = new TabListener() {        @Override        public void onTabSelected(Tab tab, android.app.FragmentTransaction ft)        {            if (tab == mTabs[0])            {                mViewPager.setCurrentItem(0);            } else if (tab == mTabs[1])            {                mViewPager.setCurrentItem(1);            } else if (tab == mTabs[2])            {                mViewPager.setCurrentItem(2);            }        }        @Override        public void onTabUnselected(Tab tab, android.app.FragmentTransaction ft)        {            // TODO Auto-generated method stub        }        @Override        public void onTabReselected(Tab tab, android.app.FragmentTransaction ft)        {            // TODO Auto-generated method stub        }    };    public class MyPagerAdapter extends FragmentPagerAdapter    {        public MyPagerAdapter(FragmentManager fm)        {            super(fm);        }        @Override        public Fragment getItem(int position)        {            return MyFragment.create(addresses[position]);        }        @Override        public int getCount()        {            return addresses.length;        }    }    public static class MyFragment extends Fragment    {        public static MyFragment create(String address)        {            MyFragment f = new MyFragment();            Bundle b = new Bundle();            b.putString("address", address);            f.setArguments(b);            return f;        }        @Override        public View onCreateView(LayoutInflater inflater, ViewGroup container,                Bundle savedInstanceState)        {            Random r = new Random(System.currentTimeMillis());            Bundle b = getArguments();            View v = inflater.inflate(R.layout.fragment_viewpager1_layout1, null);            v.setBackgroundColor(r.nextInt() >> 8 | 0xFF << 24);            TextView txvAddress = (TextView) v.findViewById(R.id.textView1);            txvAddress.setTextColor(r.nextInt() >> 8 | 0xFF << 24);            txvAddress.setBackgroundColor(r.nextInt() >> 8 | 0xFF << 24);            txvAddress.setText(b.getString("address", ""));            return v;        }    }}

布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <android.support.v4.view.ViewPager        android:id="@+id/viewPager1"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

3. 【推荐】第三种，使用 TabWidget + ViewPager 实现

该方法不错，推荐使用。

Activity：

package com.swordy.demo.android.fragment;import java.util.Random;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.Button;import android.widget.TabWidget;import android.widget.TextView;import com.swordy.demo.android.R;/** * 1. 使用TabWidget和ViewPager实现可滑动的Tab *  * @author swordy * @email [e-mail] * @since Jan 20, 2014 * @version 1.0 */public class SlideTabs3 extends FragmentActivity{    private static final String TAG = "AndroidDemos.SlideTabs3";    private ViewPager mViewPager;    private PagerAdapter mPagerAdapter;    private TabWidget mTabWidget;    private String[] addresses = { "first", "second", "third" };    private Button[] mBtnTabs = new Button[addresses.length];    @Override    protected void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.fragment_slidetabs3);        mTabWidget = (TabWidget) findViewById(R.id.tabWidget1);        mTabWidget.setStripEnabled(false);        mBtnTabs[0] = new Button(this);        mBtnTabs[0].setFocusable(true);        mBtnTabs[0].setText(addresses[0]);        mBtnTabs[0].setTextColor(getResources().getColorStateList(R.color.button_bg_color_selector));        mTabWidget.addView(mBtnTabs[0]);        /*          * Listener必须在mTabWidget.addView()之后再加入，用于覆盖默认的Listener，         * mTabWidget.addView()中默认的Listener没有NullPointer检测。         */        mBtnTabs[0].setOnClickListener(mTabClickListener);        mBtnTabs[1] = new Button(this);        mBtnTabs[1].setFocusable(true);        mBtnTabs[1].setText(addresses[1]);        mBtnTabs[1].setTextColor(getResources().getColorStateList(R.color.button_bg_color_selector));        mTabWidget.addView(mBtnTabs[1]);        mBtnTabs[1].setOnClickListener(mTabClickListener);        mBtnTabs[2] = new Button(this);        mBtnTabs[2].setFocusable(true);        mBtnTabs[2].setText(addresses[2]);        mBtnTabs[2].setTextColor(getResources().getColorStateList(R.color.button_bg_color_selector));        mTabWidget.addView(mBtnTabs[2]);        mBtnTabs[2].setOnClickListener(mTabClickListener);        mViewPager = (ViewPager) findViewById(R.id.viewPager1);        mPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());        mViewPager.setAdapter(mPagerAdapter);        mViewPager.setOnPageChangeListener(mPageChangeListener);        mTabWidget.setCurrentTab(0);    }    private OnClickListener mTabClickListener = new OnClickListener() {        @Override        public void onClick(View v)        {            if (v == mBtnTabs[0])            {                mViewPager.setCurrentItem(0);            } else if (v == mBtnTabs[1])            {                mViewPager.setCurrentItem(1);            } else if (v == mBtnTabs[2])            {                mViewPager.setCurrentItem(2);            }        }    };    private OnPageChangeListener mPageChangeListener = new OnPageChangeListener() {        @Override        public void onPageSelected(int arg0)        {            mTabWidget.setCurrentTab(arg0);        }        @Override        public void onPageScrolled(int arg0, float arg1, int arg2)        {        }        @Override        public void onPageScrollStateChanged(int arg0)        {        }    };    private class MyPagerAdapter extends FragmentStatePagerAdapter    {        public MyPagerAdapter(FragmentManager fm)        {            super(fm);        }        @Override        public Fragment getItem(int position)        {            return MyFragment.create(addresses[position]);        }        @Override        public int getCount()        {            return addresses.length;        }    }    public static class MyFragment extends Fragment    {        public static MyFragment create(String address)        {            MyFragment f = new MyFragment();            Bundle b = new Bundle();            b.putString("address", address);            f.setArguments(b);            return f;        }        @Override        public View onCreateView(LayoutInflater inflater, ViewGroup container,                Bundle savedInstanceState)        {            Random r = new Random(System.currentTimeMillis());            Bundle b = getArguments();            View v = inflater.inflate(R.layout.fragment_viewpager1_layout1, null);            v.setBackgroundColor(r.nextInt() >> 8 | 0xFF << 24);            TextView txvAddress = (TextView) v.findViewById(R.id.textView1);            txvAddress.setTextColor(r.nextInt() >> 8 | 0xFF << 24);            txvAddress.setBackgroundColor(r.nextInt() >> 8 | 0xFF << 24);            txvAddress.setText(b.getString("address", ""));            return v;        }    }}

布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <TabWidget        android:id="@+id/tabWidget1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="right|center_vertical" />    <android.support.v4.view.ViewPager        android:id="@+id/viewPager1"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>