当前位置: 开发笔记 > Android > 正文

Android中实现可滑动的Tab的3种方式

作者：121lzg | 来源：互联网 | 2022-03-17 05:20

这篇文章主要介绍了Android中实现可滑动的Tab的3种方式,需要的朋友可以参考下

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;
        }

}
}

布局：

代码如下:

    android:id="@android:id/tabhost"
    android:layout_
    android:layout_ >

            android:layout_
        android:layout_
        android:orientation="vertical" >

                    android:id="@android:id/tabs"
            android:layout_
            android:layout_
            android:gravity="right|center_vertical" />

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;
        }

Bundle b = getArguments();

View v = inflater.inflate(R.layout.fragment_viewpager1_layout1, null);
v.setBackgroundColor(r.nextInt() >> 8 | 0xFF <<24);

            txvAddress.setText(b.getString("address", ""));
            return v;
        }

}
}

布局：

代码如下:

    android:layout_
    android:layout_
    android:orientation="vertical" >

            android:id="@+id/viewPager1"
        android:layout_
        android:layout_ />

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;
        }

}

Bundle b = getArguments();

View v = inflater.inflate(R.layout.fragment_viewpager1_layout1, null);
v.setBackgroundColor(r.nextInt() >> 8 | 0xFF <<24);

            txvAddress.setText(b.getString("address", ""));
            return v;
        }

}
}

布局：

代码如下:

    android:layout_
    android:layout_
    android:orientation="vertical" >

            android:id="@+id/tabWidget1"
        android:layout_
        android:layout_
        android:gravity="right|center_vertical" />

            android:id="@+id/viewPager1"
        android:layout_
        android:layout_ />

android
xml

推荐阅读

android
Android 九宫格布局详解及实现：人人网应用示例

本文深入探讨了人人网Android应用中独特的九宫格布局设计，解析其背后的GridView实现原理，并提供详细的代码示例。这种布局方式不仅美观大方，而且在现代Android应用中较为少见，值得开发者借鉴。 ... [详细]

蜡笔小新 2024-12-28 11:23:01
android
优化ListView性能

本文深入探讨了如何通过多种技术手段优化ListView的性能，包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]

蜡笔小新 2024-12-28 10:36:30
android
Android LED 数字字体的应用与实现

本文介绍了一种适用于 Android 应用的 LED 数字字体（digital font），并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景，能够增强视觉效果。 ... [详细]

蜡笔小新 2024-12-27 10:34:22
android
RecyclerView初步学习(一)

RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式，除了提供ViewHolder缓存模式，还可以自定义动画，分割符，布局样式，相比于传统的ListVi ... [详细]

蜡笔小新 2024-12-26 20:24:01
eclipse
解决JAX-WS动态客户端工厂弃用问题并迁移到XFire

在处理Java项目中的JAR包冲突时，我们遇到了JaxWsDynamicClientFactory被弃用的问题，并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]

蜡笔小新 2024-12-25 18:48:34
android
在Android中排列多行小部件 - Arranging Rows of Widgets in Android

本文介绍如何使用布局文件在Android应用中排列多行TextView和Button，使其占据屏幕的特定比例，并提供示例代码以帮助理解和实现。 ... [详细]

蜡笔小新 2024-12-25 10:33:17
android
Android MARS学习笔记：Intent基础与应用

本文介绍了Android开发中Intent的基本概念及其在不同Activity之间的数据传递方式，详细展示了如何通过Intent实现Activity间的跳转和数据传输。 ... [详细]

蜡笔小新 2024-12-24 12:23:09
java
将Web服务部署到Tomcat

本文介绍了如何在JDeveloper 12c中创建一个Java项目，并将其打包为Web服务，然后部署到Tomcat服务器。内容涵盖从项目创建、编写Web服务代码、配置相关XML文件到最终的本地部署和验证。 ... [详细]

蜡笔小新 2024-12-27 11:48:15
xml
XNA 3.0 游戏编程：从 XML 文件加载数据

本文介绍如何在 XNA 3.0 游戏项目中从 XML 文件加载数据。我们将探讨如何将 XML 数据序列化为二进制文件，并通过内容管道加载到游戏中。此外，还会涉及自定义类型读取器和写入器的实现。 ... [详细]

蜡笔小新 2024-12-27 11:39:44
xml
C# 教程：Unity 中通过 XML 配置文件传递参数给自定义生命周期构造函数

本文介绍如何在 Unity 的 XML 配置文件中，将参数传递给自定义生命周期管理器的构造函数。我们将详细探讨 CustomLifetimeManager 类的实现及其配置方法。 ... [详细]

蜡笔小新 2024-12-26 17:21:54
java
深入解析 org.apache.xmlbeans.SchemaType.getBaseEnumType() 方法及其应用

本文详细介绍了 Java 中 org.apache.xmlbeans.SchemaType 类的 getBaseEnumType() 方法，提供了多个代码示例，并解释了其在不同场景下的使用方法。 ... [详细]

蜡笔小新 2024-12-26 11:46:55
java
解决MyBatis Mapper绑定异常：org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

本文详细介绍了如何解决MyBatis中常见的BindingException错误，提供了多种排查和修复方法，确保Mapper接口与XML文件的正确配置。 ... [详细]

蜡笔小新 2024-12-25 19:42:47
xml
基于KVM的SRIOV直通配置及性能测试

SRIOV介绍、VF直通配置，以及包转发率性能测试小慢哥的原创文章，欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]

蜡笔小新 2024-12-25 19:26:39
xml
解析猫鼬 findOne 方法返回 null 的原因

本文探讨了在通过 API 端点调用时，使用猫鼬（Mongoose）的 findOne 方法总是返回 null 的问题，并提供了详细的解决方案和建议。 ... [详细]

蜡笔小新 2024-12-25 17:40:33
java
掌握Java EE的全面指南

探讨如何真正掌握Java EE，包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法，并提供了详尽的标准。 ... [详细]

蜡笔小新 2024-12-25 13:38:29

121lzg

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章