脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → android tab实现

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

 更新时间：2016年11月29日 10:42:55   作者：鸿洋_  
Android现在实现Tab类型的界面方式越来越多，本文详细介绍了Android实现Tab布局的4种方式，具有一定的参考价值，有兴趣的可以了解一下。

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自定义控件的创建方法

    Android自定义控件的创建方法

    这篇文章主要为大家详细介绍了Android自定义控件的创建方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Android带圆形数字进度的自定义进度条示例

    Android带圆形数字进度的自定义进度条示例

    本篇文章主要介绍了Android带圆形数字进度的自定义进度条示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • Android selector的实例详解

    Android selector的实例详解

    这篇文章主要介绍了Android selector的实例详解的相关资料,这里提供实例帮助大家理解掌握这部分知识，需要的朋友可以参考下
    2017-08-08
  • Android仿今日头条滑动页面导航效果

    Android仿今日头条滑动页面导航效果

    这篇文章主要为大家详细介绍了Android仿今日头条滑动页面导航效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • Android加载Assets目录中Xml布局文件

    Android加载Assets目录中Xml布局文件

    这篇文章主要为大家详细介绍了Android加载Assets目录中Xml布局文件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Android中EditText屏蔽第三方输入法表情的方法示例

    Android中EditText屏蔽第三方输入法表情的方法示例

    最近在工作终于遇到一个问题，因为第三方输入法表情的问题导致Android中TextView的内容显示异常，只能想办法解决了，下面这篇文章主要记录了在处理Android中EditText屏蔽第三方输入法表情的方法,需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-01-01
  • Android编程出现Button点击事件无效的解决方法示例

    Android编程出现Button点击事件无效的解决方法示例

    这篇文章主要介绍了Android编程出现Button点击事件无效的解决方法,结合实例形式分析了Android编程中出现Button点击事件无效的原因及相关的解决方法,需要的朋友可以参考下
    2018-02-02
  • Android 自定义九宫格手势锁

    Android 自定义九宫格手势锁

    本文通过实例代码给大家介绍了android自定义九宫格手势锁功能，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
    2017-06-06
  • Kotlin中Object关键字的使用示例介绍

    Kotlin中Object关键字的使用示例介绍

    在Kotlin中object是一个特殊的关键字。主要用于声明一个类的同时创建这个类的对象（例如单例）。在Kotlin中它有三个方面的应用：对象表达式，对象声明和伴生对象
    2022-09-09
  • Android使用RecyclerView实现水平滚动控件

    Android使用RecyclerView实现水平滚动控件

    这篇文章给大家介绍了利用Android使用RecyclerView实现水平滚动的效果，本文做了一个年龄滚动控件的例子，对大家开发Android具有一定参考借鉴价值，有需要的可以参考借鉴。
    2016-09-09

最新评论