FragmentTabHost+ViewPage实现底部导航窗口切换

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/darling_R/article/details/53065091

如今app的风格都大同小异，底部导航栏风格更是备受青睐，今天闲来无事就写一下比较常用的底部导航栏效果的实现，采用FragmentTabHost+Viewpager来实现。
文章末尾有demo地址。

先看看效果图

第一步
先来看看mainActivity的布局：
main_activity

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

    <!--FragmentTabHost-->
    <android.support.v4.app.FragmentTabHost
        android:id="@+id/tabHost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#F6F6F6"
        android:paddingBottom="5dp"
        android:paddingTop="5dp">
        <!-- FragmentTabHost中的内容部分 -->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp" />

    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

下面是tab标签每个Item的布局
main_tab_item

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingTop="3dp">

    <ImageView
        android:id="@+id/main_tab_item_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:padding="3dp" />

    <TextView
        android:id="@+id/main_tab_item_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/text_gray"
        android:textSize="10sp" />
</LinearLayout>

第二步
直接上代码

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TextView;

import com.yh.ziroom.R;
import com.yh.ziroom.ui.base.BaseActivity;
import com.yh.ziroom.ui.life.fragment.LifeFragment;
import com.yh.ziroom.ui.minsu.fragment.MinsuFragment;
import com.yh.ziroom.ui.rent.fragment.RentFragment;
import com.yh.ziroom.ui.ziruyi.fragment.ZiruyiFragment;
import com.yh.ziroom.ui.ziruyu.fragment.ZiruyuFragment;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;

public class MainActivity extends BaseActivity implements TabHost.OnTabChangeListener, ViewPager.OnPageChangeListener {
    @BindView(android.R.id.tabcontent)
    FrameLayout tabcontent;
    @BindView(R.id.tabHost)
    FragmentTabHost tabHost;
    @BindView(R.id.viewPage)
    ViewPager viewPage;

    private int mIndex = 0;//tab标签索引
    private LayoutInflater mLayoutInflater;
    private TextView mLastTextView;

    private String[] mTitles = {"友家/整租", "自如寓", "民宿", "自如驿", "生活服务"};
    private int[] mTabbgImg = {R.drawable.rent_select, R.drawable.ziruyu_select, R.drawable.minsu_select, R.drawable.ziruyi_select, R.drawable.life_select};
    private Class<?>[] fragmentArray = {RentFragment.class, ZiruyuFragment.class, MinsuFragment.class, ZiruyiFragment.class, LifeFragment.class};
    private List<Fragment> fragments;
    private RentFragment rentFragment;
    private ZiruyuFragment ziruyuFragment;
    private MinsuFragment minsuFragment;
    private ZiruyiFragment ziruyiFragment;
    private LifeFragment lifeFragment;

    private MyViewPageAdapter mViewPageAdapter;

    @Override
    protected int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initView() {
        mLayoutInflater = LayoutInflater.from(this);
        mLastTextView = new TextView(this);
        tabHost.setup(this, getSupportFragmentManager(), R.id.viewPage);
        //去掉分割线
        tabHost.getTabWidget().setDividerDrawable(null);
        tabHost.setOnTabChangedListener(this);

        int count = mTitles.length;
        for (int i = 0; i < count; i++) {
            TabHost.TabSpec tabSpec = tabHost.newTabSpec(mTitles[i]).setIndicator(setItemView(i));
            tabHost.addTab(tabSpec, fragmentArray[i], null);
        }
        tabHost.setCurrentTab(mIndex);

        initViewPage();

    }
//初始化viewpager，跟以往写法相同，
    private void initViewPage() {
        fragments = new ArrayList<>();
        rentFragment = RentFragment.newInstance("", "");
        ziruyuFragment = ZiruyuFragment.newInstance("", "");
        minsuFragment = MinsuFragment.newInstance("", "");
        ziruyiFragment = ZiruyiFragment.newInstance("", "");
        lifeFragment = LifeFragment.newInstance("", "");

        fragments.add(rentFragment);
        fragments.add(ziruyuFragment);
        fragments.add(minsuFragment);
        fragments.add(ziruyiFragment);
        fragments.add(lifeFragment);

        mViewPageAdapter = new MyViewPageAdapter(getSupportFragmentManager());
        viewPage.setAdapter(mViewPageAdapter);
        viewPage.setOnPageChangeListener(this);

    }

    @Override
    public void onTabChanged(String s) {
        mLastTextView.setTextColor(getResources().getColor(R.color.text_gray));
        LinearLayout view = (LinearLayout) tabHost.getCurrentTabView();
        TextView text = (TextView) view.getChildAt(1);
        text.setTextColor(getResources().getColor(R.color.text_black));
        mLastTextView = text;
        //设置当点击tab标签的时候，viewpager联动
        int position = tabHost.getCurrentTab();
        viewPage.setCurrentItem(position);
    }

    //给tab标签设置文字、图片
    private View setItemView(int index) {
        View view = mLayoutInflater.inflate(R.layout.main_tab_item, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.main_tab_item_imageview);
        imageView.setBackgroundResource(mTabbgImg[index]);

        TextView textView = (TextView) view.findViewById(R.id.main_tab_item_textview);
        textView.setText(mTitles[index]);
        return view;
    }
//下面三个重写的方法都是viewpager的，
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        //viewpager滑动的偏移量
    }

    @Override
    public void onPageSelected(int position) {
        //viewpager滑动后显示的当前页的index
        tabHost.setCurrentTab(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //state==1的时候表示正在滑动，state==2的时候表示滑动完毕了，state==0的时候表示停在那。
    }
    //viewpager的adapter
    public class MyViewPageAdapter extends FragmentPagerAdapter {


        public MyViewPageAdapter(FragmentManager fm) {
            super(fm);
        }

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

        @Override
        public int getCount() {
            return fragments == null ? 0 : fragments.size();
        }
    }
}

demo地址