使用FragmentTabHost实现仿QQ的切换，并在里面嵌套TabLayout+ViewPager的滑动切换

本篇文章要实现的功能是在界面的底部放置一个FragmentTabHost实现类似QQ底部切换栏的功能，切换的内容用Fragment填充，然后再Fragment的里面再放入TabLayout和ViewPager，实现滑动切换的效果。

这里只需要一个Activity，我就放在MainActivity里面，直接上布局代码

<LinearLayout
        android:orientation="vertical"
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:background="#e9e7ef"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        <android.support.v4.app.FragmentTabHost
            android:id="@android:id/tabhost"
            android:layout_gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="0" />
        </android.support.v4.app.FragmentTabHost>
    </LinearLayout>

这里我只粘贴了局部代码，前面的那个LinearLayout是作为存放Fragment的容器

然后是MainActivity的代码（详细的功能实现就看注释吧）

import android.support.v4.app.FragmentTabHost;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

import demo.yang.com.baisi.Essence.View.Essence_Fragment;
import demo.yang.com.baisi.PersonalCenter.View.PersonalCenter_Fragment;
import demo.yang.com.baisi.Posts.View.Posts_Fragment;
import demo.yang.com.baisi.R;
import demo.yang.com.baisi.Release.View.Release_Fragment;
import demo.yang.com.baisi.Shopping.View.Shopping_Fragment;

public class MainActivity extends AppCompatActivity implements TabHost.OnTabChangeListener,View.OnClickListener {

    private LayoutInflater layoutInflater;
    private FragmentTabHost fragmentTabHost;
    //存放Fragment的界面
    private Class fragmentArray[] = {Essence_Fragment.class, Posts_Fragment.class, Release_Fragment.class, Shopping_Fragment.class, PersonalCenter_Fragment.class};
    //Tab选项卡的文字
    private String mTabTextArray[] = {"aa","bb","cc","dd","ee"};
    //tab选项卡的图标id
    private int mTabImageResIDArray[] = {R.drawable.square_frament_item_imagebackground,R.drawable.grabwork_fragment_item_imagebackground,R.drawable.yaoming,R.drawable.mywork_fragment_item_imagebackground,R.drawable.personnalcenter_fragment_item_imagebackground};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        layoutInflater = LayoutInflater.from(this);
        initView();
    }

    //初始化组件
    public void initView(){
        fragmentTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        fragmentTabHost.setup(MainActivity.this,getSupportFragmentManager(),R.id.realtabcontent);
        int count = fragmentArray.length;
        fragmentTabHost.getTabWidget().setDividerDrawable(null);
        for (int i = 0;i<count;i++){
            //为每一个Tab按钮设置图标、文字和内容
            TabHost.TabSpec tabSpec = fragmentTabHost.newTabSpec(mTabTextArray[i]).setIndicator(getTabItemView(i));
            //将Tab按钮添加进Tab选项卡中,并绑定对应碎片
            fragmentTabHost.addTab(tabSpec,fragmentArray[i],null);
        }
        //碎片tab切换监听
        fragmentTabHost.setOnTabChangedListener(this);
    }

    //给TabItem设置图标和文字
    private View getTabItemView(int index){
        View itemView;
        TextView itemTextView;
        ImageView itemImageView;
        itemView = layoutInflater.inflate(R.layout.fragmenthost_tab_item,null);
        itemImageView = (ImageView) itemView.findViewById(R.id.fragmentHost_tab_item_imageView);
        itemTextView = (TextView) itemView.findViewById(R.id.fragmentHost_tab_item_textView);
        itemImageView.setImageResource(mTabImageResIDArray[index]);
        itemTextView.setText(mTabTextArray[index]);
        if (index == 2){//这里是项目需求，设置成了只显示图标
            itemTextView.setVisibility(View.GONE);
        }
        return itemView;
    }

    @Override
    public void onClick(View view) {

    }

    @Override
    public void onTabChanged(String s) {

    }
}

接着来看底部切换的碎片的布局代码，里面放入了TabLayout和ViewPager

<android.support.design.widget.TabLayout
        android:id="@+id/essence_top_tablayout"
        android:background="@color/colorAccent"
        app:tabTextColor="@android:color/darker_gray"
        app:tabSelectedTextColor="@android:color/darker_gray"
        app:tabIndicatorColor="#f4f7fe"
        app:tabMode="scrollable"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/essence_top_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

然后还是直接上碎片的代码

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import demo.yang.com.baisi.Essence.Adapter.EssencePagerAdapter;
import demo.yang.com.baisi.R;


public class Essence_Fragment extends Fragment {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    private String mParam1;
    private String mParam2;

    public Essence_Fragment() {
        // Required empty public constructor
    }

    public static Essence_Fragment newInstance(String param1, String param2) {
        Essence_Fragment fragment = new Essence_Fragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_essence, container, false);
        viewPager = (ViewPager) view.findViewById(R.id.essence_top_viewpager);
        tabLayout = (TabLayout) view.findViewById(R.id.essence_top_tablayout);
        EssencePagerAdapter essencePagerAdapter = new EssencePagerAdapter(getChildFragmentManager());
        essencePagerAdapter.addFragment(Essence_content_Fragment.newInstance("shehui"),"社会");
        essencePagerAdapter.addFragment(Essence_content_Fragment.newInstance("meinv"),"美女");
        essencePagerAdapter.addFragment(Essence_content_Fragment.newInstance("lengzhishi"),"冷知识");
        essencePagerAdapter.addFragment(Essence_content_Fragment.newInstance("youxi"),"游戏");
        viewPager.setAdapter(essencePagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
        return view;
    }

}

这里主要是看OnCreateView里面的代码，首先通过inflater.inflate的方法获取view，然后对TabLayout已经ViewPager进行初始化，然后new一个ViewPager的适配器（稍后给代码），通过适配器添加tab和设置tab的标题，最后通过TabLayout的setupWithViewPager方法将TabLayout与ViewPager绑定在一起

下面是ViewPager的适配器的代码

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

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

public class EssencePagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> mFragment = new ArrayList<>();
    private final List<String> mFragmentTitles = new ArrayList<>();

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

    public void addFragment(Fragment fragment,String string){
        mFragment.add(fragment);
        mFragmentTitles.add(string);
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitles.get(position);
    }

}

这里的ViewPager还是使用Fragment来填充，下面是填充ViewPager的Fragment

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import demo.yang.com.baisi.R;

public class Essence_content_Fragment extends Fragment {

    private static final String ARG_PARAM1 = "param1";

    private String mParam1;

    public Essence_content_Fragment() {
        // Required empty public constructor
    }

    public static Essence_content_Fragment newInstance(String param1) {
        Essence_content_Fragment fragment = new Essence_content_Fragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_essence_content, container, false);
    }

}

他的布局文件可以先随便放一个TextView用于展现功能，这里就不粘代码了。

通过以上的代码，就实现了我们需要的功能，其他具体的优化就请有心人继续深究了，如果我这里写得有什么不足的地方，欢迎大家指出。