Android学习笔记——顶/底部Tab菜单栏结合Fragmen

Fragment+FragmentTabHost+ViewPager实现底部菜单栏

总体思路

• Fragment：存放不同选项的页面内容
• FragmentTabHost：点击切换选项卡
• ViewPager：实现页面的左右滑动效果

概念介绍

1.FragementTabHost
用于实现点击选项进行切换选项卡的自定义效果

使用FragmentTabHost，就是先用TabHost“装着”Fragment，然后放进MainActivity里面

2.ViewPager

• 定义：ViewPager是android扩展包v4包中的类

android.support.v4.view.ViewPager

• 作用：左右切换当前的View，实现滑动切换的效果

1.ViewPager类直接继承了ViewGroup类，和LinearLayout等布局一样，都是一个容器，需要在里面添加我们想要显示的内容。
2.ViewPager类需要PagerAdapter适配器类提供数据，与ListView类似。
3.Goolgle官方建议ViewPager结合Fragment使用

3.Fragment

• 定义
  Fragment是Activity的界面中的一部分或一种行为

1.把Fragment认为模块化的一段Activity
2.它具有自己的生命周期，接收它自己的事件，并可以在activity运行时被添加或删除
3.Fragment不能独立存在，它必须嵌入到Activity中，而且Fragment的生命周期只接受所在的Activity的影响。例如：当Activity暂停时，它拥有的所有的Fragment都暂停了，当Activity销毁时，它拥有的所有Fragment都被销毁。

• 作用
  主要是为了支持更动态、更灵活的界面设计

实现步骤

1.在主xml布局里定义一个FragmentTabHost控件
2.定义菜单栏布局
3.定义每个Fragment布局
4.定义每个Fragment的Java类
5.定义适配器以关联页卡和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>
  

• 定义适配器关联页卡及菜单栏布局
  public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private String[] mTitles = new String[]{"首页", "发现", "进货单","我的"};
  
    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];
    }
  

  }

• 定义每个fragment的布局

• 定义每个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实现

    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();//隐藏掉整个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);
  
            //设置Tab的图标
            one.setIcon(R.mipmap.ic_launcher);
            two.setIcon(R.mipmap.ic_launcher);
            three.setIcon(R.mipmap.ic_launcher);
            four.setIcon(R.mipmap.ic_launcher);
        }
    }