FragmentTabHost+ViewPager+Fragment实现底部Tab导航

一、传统实现导航栏有4种方式

1、TabHost + Activity (淘汰)

2、RadioButton +VIewPager/Fragmnet （比较繁琐）

3、FragmentTabHost+ViewPager/Fragment

4、BottomNavigationView + VIewPager/Fragmnet

 

二、我们先用FragmentTabHost +Fragment实现导航栏

 

 

1. 布局

 

 

 

 

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="yu.cai.caishop.MainActivity">

    <FrameLayout
        android:id="@+id/contentLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"></FrameLayout>

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

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"></FrameLayout>

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

注意控件的id必须是Android提供的标准id, 即”@android:id”.

 

 

 

 

Fragment布局, 包含一行文字提示.

 

<?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:background="#F6F6F6"
    android:orientation="vertical"
    android:padding="5dp">


    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="2dp"
        android:text="主页" />
</LinearLayout>

Tab布局, 包含一个图片控件.

 

 

 

 

<?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:background="#F6F6F6"
    android:orientation="vertical"
    android:padding="5dp">

    <ImageView
        android:id="@+id/tab_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="2dp"
        android:text="主页"
        android:textColor="@color/textview_color_selector"/>
</LinearLayout>

 

 

 

2. 主页

public class MainActivity extends AppCompatActivity {

    private FragmentTabHost tabhost;
    private LayoutInflater mInflater;
    private List<Tab> list;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initTab();

    }

    private void initTab() {
        initTabData();
        mInflater = LayoutInflater.from(this);
        tabhost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        tabhost.setup(this,getSupportFragmentManager(),R.id.contentLayout);
        tabhost.getTabWidget().setDividerDrawable(null); //去掉按钮之间的分割线
        for (int i = 0; i < list.size(); i++) {
            TabHost.TabSpec tabSpecOne = tabhost.newTabSpec(list.get(i).getTitle());
            View view = mInflater.inflate(R.layout.tab_view_layout,null);
           ImageView img = (ImageView) view.findViewById(R.id.tab_img);
           TextView textView = (TextView) view.findViewById(R.id.tab_text);
            img.setImageResource(list.get(i).getImg());
            textView.setText(list.get(i).getTitle());
            tabSpecOne.setIndicator(view);
            tabhost.addTab(tabSpecOne, list.get(i).getFragment(),null);
        }
        tabhost.setCurrentTab(2);
        tabhost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabI) {
                Log.e("app",tabI);
            }
        });
    }

    private void initTabData(){
        list = new ArrayList<>();
        Tab tabOne = new Tab(OneFragment.class,"首页",R.drawable.imgone_selector);
        Tab tabTwo = new Tab(TwoFragment.class,"动态",R.drawable.imgtwo_selector);
        Tab tabThree = new Tab(ThreeFragment.class,"游戏",R.drawable.imgthree_selector);
        Tab tabFour = new Tab(FourFragment.class,"我的",R.drawable.imgfour_selector);
        list.add(tabOne);
        list.add(tabTwo);
        list.add(tabThree);
        list.add(tabFour);
    }
}

 

 

 

 

 

 

package yu.cai.caishop.bean;

/**
 * Created by admin on 2017-3-16.
 */

public class Tab {
    private String title;
    private int img;
    private Class fragment;

    public Tab() {
    }

    public Tab(Class fragment, String title, int img) {
        this.fragment = fragment;
        this.title = title;
        this.img = img;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public int getImg() {
        return img;
    }

    public void setImg(int img) {
        this.img = img;
    }

    public Class getFragment() {
        return fragment;
    }

    public void setFragment(Class fragment) {
        this.fragment = fragment;
    }
}

效果

 

 

 

 

如果使用 viewPager +FragmentTabHost 容器换成 viewPager即可

 

 

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="yu.cai.fragmenttabhost_viewpager.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.v4.view.ViewPager>

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
       >
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"></FrameLayout>
    </android.support.v4.app.FragmentTabHost>
</LinearLayout>

 

 

 

 

 

 

public class MainActivity extends AppCompatActivity implements TabHost.OnTabChangeListener, ViewPager.OnPageChangeListener {

    private ViewPager viewPager;
    List<Tab> list;
    private LayoutInflater mInflater;
    private FragmentTabHost tabhost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        initTab();
        initPager();
    }

    private void initPager() {
        List<Fragment> listFragment = new ArrayList<>();
        OneFragment oneFragment = new OneFragment();
        TwoFragment twoFragment = new TwoFragment();
        ThreeFragment threeFragment = new ThreeFragment();
        FourFragment fourFragment = new FourFragment();
        listFragment.add(oneFragment);
        listFragment.add(twoFragment);
        listFragment.add(threeFragment);
        listFragment.add(fourFragment);
        MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager(),listFragment);
        viewPager.setAdapter(adapter);
        viewPager.setCurrentItem(2);
        viewPager.addOnPageChangeListener(this);
    }

    private void initTab() {
        initTabData();
        mInflater = LayoutInflater.from(this);
        tabhost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        tabhost.setup(this,getSupportFragmentManager(),R.id.viewPager);
        tabhost.getTabWidget().setDividerDrawable(null); //去掉按钮之间的分割线
        for (int i = 0; i < list.size(); i++) {
            TabHost.TabSpec tabSpecOne = tabhost.newTabSpec(list.get(i).getTitle());
            View view = mInflater.inflate(R.layout.tab_view_layout,null);
            ImageView img = (ImageView) view.findViewById(R.id.tab_img);
            TextView textView = (TextView) view.findViewById(R.id.tab_text);
            img.setImageResource(list.get(i).getImg());
            textView.setText(list.get(i).getTitle());
            tabSpecOne.setIndicator(view);
            tabhost.addTab(tabSpecOne, list.get(i).getFragment(),null);
        }
        tabhost.setCurrentTab(2);
        tabhost.setOnTabChangedListener(this);
    }

    private void initTabData(){
        list = new ArrayList<>();
        Tab tabOne = new Tab(OneFragment.class,"首页",R.drawable.imgone_selector);
        Tab tabTwo = new Tab(TwoFragment.class,"动态",R.drawable.imgtwo_selector);
        Tab tabThree = new Tab(ThreeFragment.class,"游戏",R.drawable.imgthree_selector);
        Tab tabFour = new Tab(FourFragment.class,"我的",R.drawable.imgfour_selector);
        list.add(tabOne);
        list.add(tabTwo);
        list.add(tabThree);
        list.add(tabFour);
    }

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

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//表示在前一个页面滑动到后一个页面的时候，在前一个页面滑动前调用的方法
    }

    @Override
    public void onPageSelected(int position) {//position是表示你当前选中的页面位置Postion，这事件是在你页面跳转完毕的时候调用的。
        tabhost.setCurrentTab(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
//arg0 ==1的时候表示正在滑动，arg0==2的时候表示滑动完毕了，arg0==0的时候表示什么都没做，就是停在那。
    }
}