android - 使用tablayout + view pager 实现　底部tab (bottom tab)

参考：http://blog.csdn.net/wufeng55/article/details/53080602  和　http://blog.csdn.net/wufeng55/article/details/53064763

安卓实现底部tab 貌似有多种方法，　包括：

radiogroup(很少用了）

tabhost

tablayout 

下面是使用tab_layout的实现方法．

1. 建立　TabFragment: 

package test.testandroidbottomtab;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class TabFragment extends android.support.v4.app.Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
        TextView textView = new TextView(getContext());
        textView.setText("TabFragment");
        return textView;
    }
}

2.  添加　SweetTabAdapter.java:

package test.testandroidbottomtab;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

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

/**
 * Created by siwei on 17-6-22.
 */
public class SweetTabAdapter extends FragmentPagerAdapter {
    Context myContext;

    List pagerList;
    String[] titles = { "title1", "title2", "title3"};

    private static final int[] icons = {R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher };

    public SweetTabAdapter(Context context, FragmentManager fm){
        super(fm);
        myContext = context;
        pagerList = new ArrayList<>();
        for(int i=0; i< 3; i++){
            pagerList.add(new TabFragment());
        }
    }

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

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

    }

    public View getTabView(int position){
        View view = LayoutInflater.from(myContext).inflate(R.layout.tab_view, null);
        TextView tv = (TextView) view.findViewById(R.id.tab_title);
        tv.setText(titles[position]);
        ImageView imageView = (ImageView) view.findViewById(R.id.tab_icon);
        imageView.setImageResource(icons[position]);
        return view;
    }

}

3. 添加　tab_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center">
    <ImageView
        android:id="@+id/tab_icon"
        android:background="@mipmap/ic_launcher"
        android:layout_width="24dp"
        android:layout_height="24dp" />
    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

4. activity_main.xml 如下：　

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

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_above="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

5. MainActivity.java  :

package com.yunbi;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

/**
 * 多tab Activity 示例. 实现多个tab 需要用Fragment, 一般配合ViewPager和TabLayout使用
 */
public class SweetTabActivity extends AppCompatActivity {

    ViewPager viewPager;
    TabLayout tableLayout;
    SweetTabAdapter sweetTabAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(com.yunbi.R.layout.activity_sweet_tab);

        viewPager = (ViewPager) findViewById(com.yunbi.R.id.view_pager);
        tableLayout = (TabLayout) findViewById(com.yunbi.R.id.tab_layout);

        sweetTabAdapter = new SweetTabAdapter(this, getSupportFragmentManager());
        viewPager.setAdapter(sweetTabAdapter);
        tableLayout.setTabMode(TabLayout.MODE_FIXED);
        tableLayout.setupWithViewPager(viewPager);
        tableLayout.getTabAt(0).select();
        // 给TableLayout添加tab选项卡
        for (int i = 0 ; i < sweetTabAdapter.getCount() ; i++){
            TabLayout.Tab tab = tableLayout.getTabAt(i);
            tab.setCustomView(sweetTabAdapter.getTabView(i));
        }
    }
}