Android实现Tab布局的4种方式（Fragment+TabPageIndicator+ViewPager）

2024-04-03 09:09:53

Android现在实现Tab类型的界面方式越来越多，今天就把常见的实现方式给大家来个总结。目前写了：

1、传统的ViewPager实现

2、FragmentManager+Fragment实现

3、ViewPager+FragmentPagerAdapter实现

4、TabPageIndicator+ViewPager+FragmentPagerAdapter

1、传统的ViewPager实现

主要就是ViewPager+ViewAdapter这个还是比较常见的，就不多说了

效果图：

代码：

package com.example.mainframework02; 

import javautilArrayList;
import javautilList; 

import androidappActivity;
import androidosBundle;
import androidsupportvviewPagerAdapter;
import androidsupportvviewViewPager;
import androidsupportvviewViewPagerOnPageChangeListener;
import androidviewLayoutInflater;
import androidviewView;
import androidviewViewGroup;
import androidwidgetImageButton;
import androidwidgetImageView;
import androidwidgetLinearLayout; 

public class TraditionalViewPagerAcvitity extends Activity
{ 

  /**
   * ViewPager
   */
  private ViewPager mViewPager;
  /**
   * ViewPager的适配器
   */
  private PagerAdapter mAdapter;
  private List<View> mViews;
  private LayoutInflater mInflater; 

  private int currentIndex; 

  /**
   * 底部四个按钮
   */
  private LinearLayout mTabBtnWeixin;
  private LinearLayout mTabBtnFrd;
  private LinearLayout mTabBtnAddress;
  private LinearLayout mTabBtnSettings; 

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    superonCreate(savedInstanceState);
    setContentView(Rlayoutactivity_main);
    mInflater = LayoutInflaterfrom(this);
    mViewPager = (ViewPager) findViewById(Ridid_viewpager); 

    /**
     * 初始化View
     */
    initView(); 

    mViewPagersetAdapter(mAdapter); 

    mViewPagersetOnPageChangeListener(new OnPageChangeListener()
    { 

      @Override
      public void onPageSelected(int position)
      {
        resetTabBtn();
        switch (position)
        {
        case 0:
          ((ImageButton) mTabBtnWeixinfindViewById(Ridbtn_tab_bottom_weixin))
              setImageResource(Rdrawabletab_weixin_pressed);
          break;
        case 1:
          ((ImageButton) mTabBtnFrdfindViewById(Ridbtn_tab_bottom_friend))
              setImageResource(Rdrawabletab_find_frd_pressed);
          break;
        case 2:
          ((ImageButton) mTabBtnAddressfindViewById(Ridbtn_tab_bottom_contact))
              setImageResource(Rdrawabletab_address_pressed);
          break;
        case 3:
          ((ImageButton) mTabBtnSettingsfindViewById(Ridbtn_tab_bottom_setting))
              setImageResource(Rdrawabletab_settings_pressed);
          break;
        } 

        currentIndex = position;
      } 

      @Override
      public void onPageScrolled(int arg0, float arg1, int arg2)
      { 

      } 

      @Override
      public void onPageScrollStateChanged(int arg0)
      {
      }
    }); 

  } 

  protected void resetTabBtn()
  {
    ((ImageButton) mTabBtnWeixinfindViewById(Ridbtn_tab_bottom_weixin))
        setImageResource(Rdrawabletab_weixin_normal);
    ((ImageButton) mTabBtnFrdfindViewById(Ridbtn_tab_bottom_friend))
        setImageResource(Rdrawabletab_find_frd_normal);
    ((ImageButton) mTabBtnAddressfindViewById(Ridbtn_tab_bottom_contact))
        setImageResource(Rdrawabletab_address_normal);
    ((ImageButton) mTabBtnSettingsfindViewById(Ridbtn_tab_bottom_setting))
        setImageResource(Rdrawabletab_settings_normal);
  } 

  private void initView()
  { 

    mTabBtnWeixin = (LinearLayout) findViewById(Ridid_tab_bottom_weixin);
    mTabBtnFrd = (LinearLayout) findViewById(Ridid_tab_bottom_friend);
    mTabBtnAddress = (LinearLayout) findViewById(Ridid_tab_bottom_contact);
    mTabBtnSettings = (LinearLayout) findViewById(Ridid_tab_bottom_setting); 

    mViews = new ArrayList<View>();
    View first = mInflaterinflate(Rlayoutmain_tab_01, null);
    View second = mInflaterinflate(Rlayoutmain_tab_02, null);
    View third = mInflaterinflate(Rlayoutmain_tab_03, null);
    View fourth = mInflaterinflate(Rlayoutmain_tab_04, null);
    mViewsadd(first);
    mViewsadd(second);
    mViewsadd(third);
    mViewsadd(fourth); 

    mAdapter = new PagerAdapter()
    {
      @Override
      public void destroyItem(ViewGroup container, int position, Object object)
      {
        containerremoveView(mViewsget(position));
      } 

      @Override
      public Object instantiateItem(ViewGroup container, int position)
      {
        View view = mViewsget(position);
        containeraddView(view);
        return view;
      } 

      @Override
      public boolean isViewFromObject(View arg0, Object arg1)
      {
        return arg0 == arg1;
      } 

      @Override
      public int getCount()
      {
        return mViewssize();
      }
    };
  } 

}

评价：所有的代码都集中在一个Activity中，显得代码比较乱。

2、FragmentManager+Fragment实现

主要利用了Fragment在主内容界面对Fragment的add,hide等事务操作。

效果图：

代码：

主Activity

package com.example.mainframework02.fragment; 

import androidannotationSuppressLint;
import androidappActivity;
import androidappFragmentManager;
import androidappFragmentTransaction;
import androidosBundle;
import androidviewView;
import androidviewViewOnClickListener;
import androidwidgetImageButton;
import androidwidgetLinearLayout; 

import comexamplemainframeworkR; 

public class FragmentMainActivity extends Activity implements OnClickListener
{
  private MainTab02 mTab02;
  private MainTab01 mTab01;
  private MainTab03 mTab03;
  private MainTab04 mTab04; 

  /**
   * 底部四个按钮
   */
  private LinearLayout mTabBtnWeixin;
  private LinearLayout mTabBtnFrd;
  private LinearLayout mTabBtnAddress;
  private LinearLayout mTabBtnSettings;
  /**
   * 用于对Fragment进行管理
   */
  private FragmentManager fragmentManager; 

  @SuppressLint("NewApi")
  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    superonCreate(savedInstanceState);
    setContentView(Rlayoutfragment_main);
    initViews();
    fragmentManager = getFragmentManager();
    setTabSelection(0);
  } 

  private void initViews()
  { 

    mTabBtnWeixin = (LinearLayout) findViewById(Ridid_tab_bottom_weixin);
    mTabBtnFrd = (LinearLayout) findViewById(Ridid_tab_bottom_friend);
    mTabBtnAddress = (LinearLayout) findViewById(Ridid_tab_bottom_contact);
    mTabBtnSettings = (LinearLayout) findViewById(Ridid_tab_bottom_setting); 

    mTabBtnWeixinsetOnClickListener(this);
    mTabBtnFrdsetOnClickListener(this);
    mTabBtnAddresssetOnClickListener(this);
    mTabBtnSettingssetOnClickListener(this);
  } 

  @Override
  public void onClick(View v)
  {
    switch (vgetId())
    {
    case Ridid_tab_bottom_weixin:
      setTabSelection(0);
      break;
    case Ridid_tab_bottom_friend:
      setTabSelection(1);
      break;
    case Ridid_tab_bottom_contact:
      setTabSelection(2);
      break;
    case Ridid_tab_bottom_setting:
      setTabSelection(3);
      break; 

    default:
      break;
    }
  } 

  /**
   * 根据传入的index参数来设置选中的tab页。
   *
   */
  @SuppressLint("NewApi")
  private void setTabSelection(int index)
  {
    // 重置按钮
    resetBtn();
    // 开启一个Fragment事务
    FragmentTransaction transaction = fragmentManagerbeginTransaction();
    // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
    hideFragments(transaction);
    switch (index)
    {
    case 0:
      // 当点击了消息tab时，改变控件的图片和文字颜色
      ((ImageButton) mTabBtnWeixinfindViewById(Ridbtn_tab_bottom_weixin))
          setImageResource(Rdrawabletab_weixin_pressed);
      if (mTab01 == null)
      {
        // 如果MessageFragment为空，则创建一个并添加到界面上
        mTab01 = new MainTab01();
        transactionadd(Ridid_content, mTab01);
      } else
      {
        // 如果MessageFragment不为空，则直接将它显示出来
        transactionshow(mTab01);
      }
      break;
    case 1:
      // 当点击了消息tab时，改变控件的图片和文字颜色
      ((ImageButton) mTabBtnFrdfindViewById(Ridbtn_tab_bottom_friend))
          setImageResource(Rdrawabletab_find_frd_pressed);
      if (mTab02 == null)
      {
        // 如果MessageFragment为空，则创建一个并添加到界面上
        mTab02 = new MainTab02();
        transactionadd(Ridid_content, mTab02);
      } else
      {
        // 如果MessageFragment不为空，则直接将它显示出来
        transactionshow(mTab02);
      }
      break;
    case 2:
      // 当点击了动态tab时，改变控件的图片和文字颜色
      ((ImageButton) mTabBtnAddressfindViewById(Ridbtn_tab_bottom_contact))
          setImageResource(Rdrawabletab_address_pressed);
      if (mTab03 == null)
      {
        // 如果NewsFragment为空，则创建一个并添加到界面上
        mTab03 = new MainTab03();
        transactionadd(Ridid_content, mTab03);
      } else
      {
        // 如果NewsFragment不为空，则直接将它显示出来
        transactionshow(mTab03);
      }
      break;
    case 3:
      // 当点击了设置tab时，改变控件的图片和文字颜色
      ((ImageButton) mTabBtnSettingsfindViewById(Ridbtn_tab_bottom_setting))
          setImageResource(Rdrawabletab_settings_pressed);
      if (mTab04 == null)
      {
        // 如果SettingFragment为空，则创建一个并添加到界面上
        mTab04 = new MainTab04();
        transactionadd(Ridid_content, mTab04);
      } else
      {
        // 如果SettingFragment不为空，则直接将它显示出来
        transactionshow(mTab04);
      }
      break;
    }
    transactioncommit();
  } 

  /**
   * 清除掉所有的选中状态。
   */
  private void resetBtn()
  {
    ((ImageButton) mTabBtnWeixinfindViewById(Ridbtn_tab_bottom_weixin))
        setImageResource(Rdrawabletab_weixin_normal);
    ((ImageButton) mTabBtnFrdfindViewById(Ridbtn_tab_bottom_friend))
        setImageResource(Rdrawabletab_find_frd_normal);
    ((ImageButton) mTabBtnAddressfindViewById(Ridbtn_tab_bottom_contact))
        setImageResource(Rdrawabletab_address_normal);
    ((ImageButton) mTabBtnSettingsfindViewById(Ridbtn_tab_bottom_setting))
        setImageResource(Rdrawabletab_settings_normal);
  } 

  /**
   * 将所有的Fragment都置为隐藏状态。
   *
   * @param transaction
   *      用于对Fragment执行操作的事务
   */
  @SuppressLint("NewApi")
  private void hideFragments(FragmentTransaction transaction)
  {
    if (mTab01 != null)
    {
      transactionhide(mTab01);
    }
    if (mTab02 != null)
    {
      transactionhide(mTab02);
    }
    if (mTab03 != null)
    {
      transactionhide(mTab03);
    }
    if (mTab04 != null)
    {
      transactionhide(mTab04);
    } 

  } 

}

各个TabFragment，一共四个TabFragment，下面贴出两个，基本都一样。

package com.example.mainframework02.fragment; 

import androidannotationSuppressLint;
import androidappFragment;
import androidosBundle;
import androidviewLayoutInflater;
import androidviewView;
import androidviewViewGroup; 

@SuppressLint("NewApi")
public class MainTab01 extends Fragment
{ 

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
    return inflaterinflate(comexamplemainframeworkRlayoutmain_tab_01, container, false); 

  } 

} 

package com.example.mainframework02.fragment; 

import androidannotationSuppressLint;
import androidappFragment;
import androidosBundle;
import androidviewLayoutInflater;
import androidviewView;
import androidviewViewGroup; 

import comexamplemainframeworkR; 

@SuppressLint("NewApi")
public class MainTab02 extends Fragment
{ 

  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
    return inflaterinflate(Rlayoutmain_tab_02, container, false); 

  } 

}

评价：每个Fragment中的控件的处理，都是独立到各自的类中，相对来说主Activity简化了不少，可惜没有左右滑动的效果了。

3、ViewPager+Fragment实现

主要通过ViewPager和FragmentPagerAdapter一起来实现。

效果图：

代码：

主Activity

package com.example.mainframework03; 

import javautilArrayList;
import javautilList; 

import androidosBundle;
import androidsupportvappFragment;
import androidsupportvappFragmentActivity;
import androidsupportvappFragmentPagerAdapter;
import androidsupportvviewViewPager;
import androidsupportvviewViewPagerOnPageChangeListener;
import androidwidgetImageButton;
import androidwidgetLinearLayout; 

public class MainActivity extends FragmentActivity
{ 

  private ViewPager mViewPager;
  private FragmentPagerAdapter mAdapter;
  private List<Fragment> mFragments = new ArrayList<Fragment>(); 

  /**
   * 底部四个按钮
   */
  private LinearLayout mTabBtnWeixin;
  private LinearLayout mTabBtnFrd;
  private LinearLayout mTabBtnAddress;
  private LinearLayout mTabBtnSettings; 

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    superonCreate(savedInstanceState);
    setContentView(Rlayoutactivity_main);
    mViewPager = (ViewPager) findViewById(Ridid_viewpager); 

    initView(); 

    mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
    { 

      @Override
      public int getCount()
      {
        return mFragmentssize();
      } 

      @Override
      public Fragment getItem(int arg0)
      {
        return mFragmentsget(arg0);
      }
    }; 

    mViewPagersetAdapter(mAdapter); 

    mViewPagersetOnPageChangeListener(new OnPageChangeListener()
    { 

      private int currentIndex; 

      @Override
      public void onPageSelected(int position)
      {
        resetTabBtn();
        switch (position)
        {
        case 0:
          ((ImageButton) mTabBtnWeixinfindViewById(Ridbtn_tab_bottom_weixin))
              setImageResource(Rdrawabletab_weixin_pressed);
          break;
        case 1:
          ((ImageButton) mTabBtnFrdfindViewById(Ridbtn_tab_bottom_friend))
              setImageResource(Rdrawabletab_find_frd_pressed);
          break;
        case 2:
          ((ImageButton) mTabBtnAddressfindViewById(Ridbtn_tab_bottom_contact))
              setImageResource(Rdrawabletab_address_pressed);
          break;
        case 3:
          ((ImageButton) mTabBtnSettingsfindViewById(Ridbtn_tab_bottom_setting))
              setImageResource(Rdrawabletab_settings_pressed);
          break;
        } 

        currentIndex = position;
      } 

      @Override
      public void onPageScrolled(int arg0, float arg1, int arg2)
      { 

      } 

      @Override
      public void onPageScrollStateChanged(int arg0)
      {
      }
    }); 

  } 

  protected void resetTabBtn()
  {
    ((ImageButton) mTabBtnWeixinfindViewById(Ridbtn_tab_bottom_weixin))
        setImageResource(Rdrawabletab_weixin_normal);
    ((ImageButton) mTabBtnFrdfindViewById(Ridbtn_tab_bottom_friend))
        setImageResource(Rdrawabletab_find_frd_normal);
    ((ImageButton) mTabBtnAddressfindViewById(Ridbtn_tab_bottom_contact))
        setImageResource(Rdrawabletab_address_normal);
    ((ImageButton) mTabBtnSettingsfindViewById(Ridbtn_tab_bottom_setting))
        setImageResource(Rdrawabletab_settings_normal);
  } 

  private void initView()
  { 

    mTabBtnWeixin = (LinearLayout) findViewById(Ridid_tab_bottom_weixin);
    mTabBtnFrd = (LinearLayout) findViewById(Ridid_tab_bottom_friend);
    mTabBtnAddress = (LinearLayout) findViewById(Ridid_tab_bottom_contact);
    mTabBtnSettings = (LinearLayout) findViewById(Ridid_tab_bottom_setting); 

    MainTab01 tab01 = new MainTab01();
    MainTab02 tab02 = new MainTab02();
    MainTab03 tab03 = new MainTab03();
    MainTab04 tab04 = new MainTab04();
    mFragmentsadd(tab01);
    mFragmentsadd(tab02);
    mFragmentsadd(tab03);
    mFragmentsadd(tab04);
  }
}

还有4个TabFragment，下面贴一个，四个基本一样

package com.example.mainframework03; 

import androidosBundle;
import androidsupportvappFragment;
import androidviewLayoutInflater;
import androidviewView;
import androidviewViewGroup; 

public class MainTab01 extends Fragment
{ 

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
    return inflaterinflate(Rlayoutmain_tab_01, container, false); 

  } 

}

评价：实现效果和第一种效果一模一样，每个Fragment独自处理自己内部的逻辑，代码整洁很多，并且支持左右滑动。感觉是第一种和第二种的结合版本。

4、TabPageIndicator+ViewPager+FragmentPagerAdapter

实现方式和3是一致的，但是使用了TabPageIndicator作为tab的指示器，效果还是不错的，这个之前写过，就不再贴代码了。

效果图：

好了，就总结了这么多，肯定还有很多别的实现方式，大家可以留言，有时间会继续完善这篇总结的。

第一种和第二种的源码：demo下载

第三种方式的源码：demo下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Android App在ViewPager中使用Fragment的实例讲解

据说Android最推荐的是在ViewPager中使用FragMent,即ViewPager中的页面不像前面那样用LayoutInflater直接从布局文件加载,而是一个个Fragment.注意这里的Fragment 是android.support.v4.view包里的Fragment,而不是android.app包里的Fragment. 使用v4包里的Fragment的Activity必须继承自FragmentActivity. 其实使用Fragment与前面不使用Fragment非常类似:
Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是Android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen
Android App中ViewPager与Fragment结合的一些问题解决

在了解ViewPager的工作原理之前,先回顾ListView的工作原理: ListView只有在需要显示某些列表项时,它才会去申请可用的视图对象:如果为所有的列表项数据创建视图对象,会浪费内存: ListView找谁去申请视图对象呢? 答案是adapter.adapter是一个控制器对象,负责从模型层获取数据,创建并填充必要的视图对象,将准备好的视图对象返回给ListView: 首先,通过调用adapter的getCount()方法,ListView询问数组列表中包含多少个对象(为避免出现数组
Android App中使用ViewPager+Fragment实现滑动切换效果

在android应用中,多屏滑动是一种很常见的风格,没有采用viewpager的代码实现会很长,如果采用ViewPager,代码就会短很多,但是使用ViewPager也有弊端:需要导入android-support-v4.jar.细节无法控制.不过现在情况已经不一样了,android-support-v4中提供了很多实用的功能,以至于现在新建一个android工程默认都会导入这个jar包.那我们就也采用viewpager来做滑动吧.另外一个概念就是Fragment和FragmentActivit
Android中ViewPager实现滑动指示条及与Fragment的配合

自主实现滑动指示条先上效果图: 1.XML布局布局代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match
android 中viewpager+fragment仿微信底部TAG完美渐变

viewpager+fragment仿微信底部TAG完美渐变,在图片渐变的同时字的颜色也在变,注意,是渐变哦! 效果图: activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:zhy="http://schemas.android.com/apk/res/com.Sing.weixin" xmlns:tools="
Android仿微信Viewpager-Fragment惰性加载（lazy-loading）

前言今天起床,拿起手机开机第一时间当然是打开微信了,左右滑动Viewpager,发现它使用了一种叫惰性加载,或者说懒加载(lazy-loading)的方式加载Viewpager中的Fragment.效果如图: 什么是lazy-loading呢?顾名思义就是在必要的时候才加载,否则不进行View的绘制和数据的加载.原因是Viewpager一次只会显示一个页卡,那么刚开始的时候,只需加载第一张Fragment页卡,其他的不加载,当用户向右滑动切换再进行加载.因为其他Fragment对于用户来说是不
Android基于ViewPager Fragment实现选项卡

先给大家展示效果图: 1.新建TestFragmen继承Fragment public class TestFragment extends Fragment { private static final String TAG = "TestFragment"; private String hello;// = "hello android"; private String defaultHello = "default value"; pri
Android中ViewPager和Fragment的使用

小案例 XML中 <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> 创建Fragment fragments = new Arr
Android中ViewPager获取当前显示的Fragment

前言在项目中,有时会用到在ViewPager中显示同样类型的Fragment,同时这样的Fragment的个数是动态的,但是PagerAdapter没有给我们提供getCurrentFragment类似的方法.下面就给大家介绍下Android中ViewPager获取当前显示的Fragment的方法,一起看看吧. 一.使用 getSupportFragmentManager().findFragmentByTag()方法 Viewpager + FragmentPagerAdapter 情况下

Android实现Tab布局的4种方式（Fragment+TabPageIndicator+ViewPager）

相关推荐

随机推荐