Fragment+FragmentTabHost+ViewPager實(shí)現(xiàn)底部菜單欄

總體思路

• Fragment：存放不同選項(xiàng)的頁(yè)面內(nèi)容
• FragmentTabHost：點(diǎn)擊切換選項(xiàng)卡
• ViewPager：實(shí)現(xiàn)頁(yè)面的左右滑動(dòng)效果

概念介紹

1.FragementTabHost
用于實(shí)現(xiàn)點(diǎn)擊選項(xiàng)進(jìn)行切換選項(xiàng)卡的自定義效果

使用FragmentTabHost，就是先用TabHost“裝著”Fragment，然后放進(jìn)MainActivity里面

2.ViewPager

• 定義：ViewPager是android擴(kuò)展包v4包中的類

android.support.v4.view.ViewPager

• 作用：左右切換當(dāng)前的View，實(shí)現(xiàn)滑動(dòng)切換的效果

1.ViewPager類直接繼承了ViewGroup類，和LinearLayout等布局一樣，都是一個(gè)容器，需要在里面添加我們想要顯示的內(nèi)容。
2.ViewPager類需要PagerAdapter適配器類提供數(shù)據(jù)，與ListView類似。
3.Goolgle官方建議ViewPager結(jié)合Fragment使用

3.Fragment

• 定義
  Fragment是Activity的界面中的一部分或一種行為

1.把Fragment認(rèn)為模塊化的一段Activity
2.它具有自己的生命周期，接收它自己的事件，并可以在activity運(yùn)行時(shí)被添加或刪除
3.Fragment不能獨(dú)立存在，它必須嵌入到Activity中，而且Fragment的生命周期只接受所在的Activity的影響。例如：當(dāng)Activity暫停時(shí)，它擁有的所有的Fragment都暫停了，當(dāng)Activity銷毀時(shí)，它擁有的所有Fragment都被銷毀。

• 作用
  主要是為了支持更動(dòng)態(tài)、更靈活的界面設(shè)計(jì)

實(shí)現(xiàn)步驟

1.在主xml布局里定義一個(gè)FragmentTabHost控件
2.定義菜單欄布局
3.定義每個(gè)Fragment布局
4.定義每個(gè)Fragment的Java類
5.定義適配器以關(guān)聯(lián)頁(yè)卡和ViewPage
6.定義MainActivity

• activity_main.xml
  <?xml version="1.0" encoding="utf-8"?>
  <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_parent"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:orientation="vertical"
  tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
  
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#ffff00"
        app:tabIndicatorColor="#66ff33"
        app:tabIndicatorHeight="20dp"
        app:tabTextColor="@color/colorPrimary"
        app:tabSelectedTextColor="#CC33FF"
        app:tabMode="fixed"
        app:tabBackground="@drawable/selected"/>
  
    </LinearLayout>
  

• 定義適配器關(guān)聯(lián)頁(yè)卡及菜單欄布局
  public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private String[] mTitles = new String[]{"首頁(yè)", "發(fā)現(xiàn)", "進(jìn)貨單","我的"};
  
    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }
  
    @Override
    public Fragment getItem(int position) {
        if (position == 1) {
            return new Fragment2();
        } else if (position == 2) {
            return new Fragment3();
        }else if (position==3){
            return new Fragment4();
        }
        return new Fragment1();
    }
  
    @Override
    public int getCount() {
        return mTitles.length;
    }
  
    //ViewPager與TabLayout綁定后，這里獲取到PageTitle就是Tab的Text
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
  

  }

• 定義每個(gè)fragment的布局

• 定義每個(gè)Fragment的Java類

    public class Fragment2 extends Fragment {
  
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater,
                         @Nullable ViewGroup container,
                         @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment2, container, false);
        }
  
    }
  

• 在MainActivity實(shí)現(xiàn)

    public class MainActivity extends AppCompatActivity {
  
        private TabLayout mTabLayout;
        private ViewPager mViewPager;
  
        private MyFragmentPagerAdapter myFragmentPagerAdapter;
  
        private TabLayout.Tab one;
        private TabLayout.Tab two;
        private TabLayout.Tab three;
        private TabLayout.Tab four;
  
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
  
            getSupportActionBar().hide();//隱藏掉整個(gè)ActionBar
            setContentView(R.layout.activity_main);
  
            //初始化視圖
            initViews();
        }
  
        private void initViews() {
  
            //使用適配器將ViewPager與Fragment綁定在一起
            mViewPager= (ViewPager) findViewById(R.id.viewPager);
            myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
            mViewPager.setAdapter(myFragmentPagerAdapter);
  
            //將TabLayout與ViewPager綁定在一起
            mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
            mTabLayout.setupWithViewPager(mViewPager);
  
            //指定Tab的位置
            one = mTabLayout.getTabAt(0);
            two = mTabLayout.getTabAt(1);
            three = mTabLayout.getTabAt(2);
            four = mTabLayout.getTabAt(3);
  
            //設(shè)置Tab的圖標(biāo)
            one.setIcon(R.mipmap.ic_launcher);
            two.setIcon(R.mipmap.ic_launcher);
            three.setIcon(R.mipmap.ic_launcher);
            four.setIcon(R.mipmap.ic_launcher);
        }
    }