乐码库:一个极速、放心、纯净的下载站! 更新: 资源发布
  • 您的位置:首页 > 技术文档 > AndRoid > Android实现Tab布局的4种方式(Fragment+TabPageIndicator+ViewPager)
  • 收藏本页
      Android实现Tab布局的4种方式(Fragment+TabPageIndicator+ViewPager)
      发布时间:2016-12-21 08:08:27 关键词: android,tab实现,android,tab页实现,android实现tab切换
      内容简介:Android现在实现Tab类型的界面方式越来越多,本文详细介绍了Android实现Tab布局的4种方式,具有一定的参考价值,有兴趣的可以了解一下。<br />

    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下载

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持乐码库。

      最新更新
      热门排行榜