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); } }
