FragmentTabHost+ViewPager实现滑动的底部导航栏

用FragmentTabhost+viewpager实现滑动的底部栏。

刚开始写的这几篇都是写底部导航栏，其实我只是想用不同的方式把不同的效果都实现一次，还有好几种方式能够实现的，可能再写一篇底部栏的就不写了。

先上效果图（找了一轮录屏软件发现还是找不到，最后还是用了应用宝的动态截图功能来生成gif）

我这些例子都是用相同的例子就不说了，你们可以看我上两篇。

这次结合了ViewPager的使用，后面实现广告栏和引导时还会用到ViewPager。
实现的方法其实就是监听viewpager的onpagerchange的时候改变fragmenttabhost的tab,如下:

       @Override
       public void onPageSelected(int position) {
              tabhost.setCurrentTab(position);
        }

同时监听fragmenttabhost的onTabChanged,然后为viewpager设置相应的页面，如下:

        @Override
        public void onTabChanged(String tabId) {
            int position = tabhost.getCurrentTab();
            viewpager.setCurrentItem(position);
        }

既然用到viewpager,那就先创建一个fragmentPagerAdapter,代码如下：

public class ViewPagerAdaper extends FragmentPagerAdapter{

private List<Fragment> fragments;
public ViewPagerAdaper(FragmentManager fm,List<Fragment> fragments) {
    super(fm);
    this.fragments = fragments;
}

@Override
public Fragment getItem(int position) {
    return fragments.get(position);
}

@Override
public int getCount() {
    return fragments.size();
}
}

那么再看一下主界面布局吧，代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    >
</android.support.v4.view.ViewPager>

<android.support.v4.app.FragmentTabHost
    android:id="@+id/tabhost"
    android:background="#ffffff"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</android.support.v4.app.FragmentTabHost>
</LinearLayout>

其实主界面的代码也挺简单的，我就直接上代码了，代码如下：

public class TabViewPagerActivity extends AppCompatActivity {

private ViewPager viewpager;
private FragmentTabHost tabhost;
private Class[] fragments = new Class[]{
        HomeFragment.class, ShopCarFragment.class, MineFragment.class
};
private int[] tabimgs = new int[]{
        R.drawable.home_selector,R.drawable.shopcar_selector,
        R.drawable.mine_selector
};
private String[] titles = new String[]{"首页","购物车","我的"};
private List<Fragment> fragmentlists = new ArrayList<Fragment>();
private ViewPagerAdaper mAdapter;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tabviewpager);
    initView();
    initTabs();
    initViewPager();
}

/**
 * 初始化viewpager
 */
private void initViewPager() {
    HomeFragment homefragment = new HomeFragment();
    MineFragment minefragment = new MineFragment();
    ShopCarFragment shopcarfragment = new ShopCarFragment();
    fragmentlists.add(homefragment);
    fragmentlists.add(shopcarfragment);
    fragmentlists.add(minefragment);
    mAdapter = new ViewPagerAdaper(getSupportFragmentManager(),fragmentlists);
    viewpager.setAdapter(mAdapter);
    viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }
        @Override
        public void onPageSelected(int position) {
            //当滑动到该的时候，设置对应的tab
                tabhost.setCurrentTab(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });
}

/**
 * 设置tab
 */
private void initTabs() {
    tabhost.setup(this,getSupportFragmentManager(),R.id.viewpager);
    for (int i = 0; i < fragments.length; i++) {
        View tabview = getLayoutInflater().inflate(R.layout.tab_item,null);
        ImageView tab_img = (ImageView) tabview.findViewById(R.id.tab_img);
        TextView tab_title = (TextView) tabview.findViewById(R.id.tab_title);
        tab_img.setImageResource(tabimgs[i]);
        tab_title.setText(titles[i]);
        tabhost.addTab(tabhost.newTabSpec(""+i).setIndicator(tabview),fragments[i],null);
    }
    tabhost.getTabWidget().setDividerDrawable(null);
    tabhost.setCurrentTab(0);
    tabhost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
        @Override
        public void onTabChanged(String tabId) {
            int position = tabhost.getCurrentTab();
            viewpager.setCurrentItem(position);
        }
    });
}

private void initView() {
    viewpager = (ViewPager) findViewById(R.id.viewpager);
    tabhost = (FragmentTabHost) findViewById(R.id.tabhost);
}
}

项目github地址