Android可滑動Tab的3種實現方法

codeceo發表於2015-03-10

原文網址 : http://www.codeceo.com/article/3-way-android-slide-tab.html

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 mryangjian@live.com
 * @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 mryangjian@live.com
 * @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 mryangjian@live.com
 * @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>

來自：碼農網

ANDROID

Android 的滑動分析以及各種實現
2019-02-27
Android
javascript實現tab切換的四種方法
2021-01-03
JavaScript
android Material Design 學習之十：底部Tab的兩種實現
2018-05-31
AndroidMaterial Design
html兩種方法來實現tab切換效果
2020-12-21
HTML
互動滑軌屏的幾種實現形式
2022-12-29
UI介面微信底部（ViewPager實現Tab，左右滑動+底部點選）
2020-04-05
UIViewpager
06#Web 實戰：實現可滑動的標籤頁
2022-11-25
Web
寫了個移動端可滑動（慣性滑動&回彈）Vue導航欄元件 ly-tab
2018-03-03
Vue元件
Android從零擼美團(三) – Android多標籤tab滑動切換 – 自定義View快速實現高度定製封裝
2018-11-03
AndroidView封裝
Android從零擼美團(三) - Android多標籤tab滑動切換 - 自定義View快速實現高度定製封裝
2018-11-03
AndroidView封裝
CSS 例項系列 - 01 - Tab 滑動門
2023-01-13
CSS
ItemTouchHelper實現可拖拽和側滑的列表
2019-03-04
css3實現側邊滑動選單
2018-03-22
CSSS3
簡單介紹android實現可以滑動的平滑曲線圖
2022-11-03
Android
透過滑動視窗實現介面呼叫的多種限制策略
2024-05-28
Vue.js 實現的 3D Tab選單
2021-03-06
Vue.js3D
短視訊app開發，介面滑動到底的幾種實現方式
2021-11-18
APP
3種方法實現CSS隱藏滾動條並可以滾動內容
2018-03-17
CSS
一種動態實現核隔離的方法
2023-10-30
Android 回撥方法的實現
2021-09-09
Android
Vue3實現元件級基類的幾種方法
2023-04-28
Vue元件
Android 設定TextView滑動滾動條和滑動效果
2018-09-14
AndroidTextView
android使用TabLayout+NestedScrollView 實現詳情介面tab頁關聯上下滑動檢視的效果
2020-11-28
AndroidTabLayoutView
Flutter之可滑動Widget
2019-05-17
Flutter
vue 實現tab切換動態載入不同的元件
2018-04-05
Vue元件
Android View篇之調整字型大小滑桿的實現
2019-05-11
AndroidView
Android 禁止ViewPager左右滑動
2018-03-20
AndroidViewpager
Android 截圖實現的幾種方式
2023-10-08
Android
jquery 實現滑動條的簡單驗證
2019-03-06
jQuery
滑動視窗最大值的golang實現
2018-12-13
Golang
css3實現動畫有幾種方式？
2021-09-09
CSSS3動畫
iOS 實現UINavigation全屏滑動返回(二)
2019-02-22
iOSUINavigation
用ListView簡單實現滑動列表
2019-01-22
View
自己實現一個滑動視窗
2018-12-12
Android側滑返回分析和實現（不高仿微信）
2018-08-06
Android
Android 動畫實現
2019-02-27
Android動畫
純CSS實現Tab欄的切換
2018-11-21
CSS
Android:巢狀滑動總結
2020-09-22
Android巢狀
CSS實現頁面切換時的滑動效果
2021-02-25
CSS

Android可滑動Tab的3種實現方法

Eclipse使用技巧總結

測試要走高冷路線，如何完美測試產品？

15個開發者最親睞的Android程式碼編輯器

Genius-Android 2.4.0 釋出，Android 開源框架

相關文章

Android可滑動Tab的3種實現方法

Eclipse使用技巧總結

測試要走高冷路線，如何完美測試產品？

15個開發者最親睞的Andr​​oid程式碼編輯器

Genius-Android 2.4.0 釋出，Android 開源框架

相關文章

15個開發者最親睞的Android程式碼編輯器