使用tabLayout實現viewPager+Fragment

一.TabLayout的布局設置

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        <!-- 下方滾動的下划線顏色  -->
        app:tabIndicatorColor="#33aa22"
        <!-- 下方指示條的高度  -->
        app:tabIndicatorHeight="5dp"
        <!-- tab被選中后，文字的顏色  -->
        app:tabSelectedTextColor="#33aa22"
        <!--可以改變tab中的字體的大小-->
        app:tabTextAppearance="@style/App_Theme"
        <!-- tab中字體的顏色  -->
        app:tabTextColor="#33aa22"
 <!-- tab中設置橫向scroll  -->
 app:tabMode="scrollable"
/>

二.初始化數據（標題+fragment）

三.添加tab選項

mTabLayout.addTab(mTabLayout.newTab().setText(“標題字符串”);

 四.設置適配器（適配器中必須重寫這一步，不然標題不會顯示出來）

//ViewPager與TabLayout綁定后，這里獲取到PageTitle就是Tab的Text
@Override
public CharSequence getPageTitle(int position) {
    return listTitles.get(position);
}

五.將TabLayout和ViewPager關聯起來

mTabLayout.setupWithViewPager(mViewPager);

六.給Tabs設置適配器

mTabLayout.setTabsFromPagerAdapter(mAdapter);

 

實例代碼如下：

 MainActivity：

package activity.lijintao.bawei.com.tablayouttest;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    private LayoutInflater mInflater;
    private List<String> mTitleList = new ArrayList<>();//頁卡標題集合
    private View view1, view2, view3, view4, view5;//頁卡視圖
    private List<View> mViewList = new ArrayList<>();//頁卡視圖集合
    private List<String> listTitles;
    private List<Fragment> fragments;
    private List<TextView> listTextViews;

    @RequiresApi(api = Build.VERSION_CODES.GINGERBREAD)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.vp_view);
        mTabLayout = (TabLayout) findViewById(R.id.tabs);

        initData();



    }
    private void initData() {
        listTitles = new ArrayList<>();
        fragments = new ArrayList<>();
        listTextViews = new ArrayList<>();

        listTitles.add("推薦");
        listTitles.add("熱點");
        listTitles.add("視頻");
        listTitles.add("北京");
        listTitles.add("社會");
        listTitles.add("娛樂");
        listTitles.add("問答");
        listTitles.add("圖片");
        listTitles.add("科技");
        listTitles.add("汽車");
        listTitles.add("體育");
        listTitles.add("財經");
        listTitles.add("軍事");
        listTitles.add("國際");
        for (int i = 0; i < listTitles.size(); i++) {
            ContentFragment fragment = ContentFragment.newInstance(listTitles.get(i));
            fragments.add(fragment);

        }
        //mTabLayout.setTabMode(TabLayout.SCROLL_AXIS_HORIZONTAL);//設置tab模式，當前為系統默認模式
        for (int i=0;i<listTitles.size();i++){
            mTabLayout.addTab(mTabLayout.newTab().setText(listTitles.get(i)));//添加tab選項
        }

        FragmentPagerAdapter mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }

            @Override
            public int getCount() {
                return fragments.size();
            }
            //ViewPager與TabLayout綁定后，這里獲取到PageTitle就是Tab的Text
            @Override
            public CharSequence getPageTitle(int position) {
                return listTitles.get(position);
            }
        };
        mViewPager.setAdapter(mAdapter);

        mTabLayout.setupWithViewPager(mViewPager);//將TabLayout和ViewPager關聯起來。
        mTabLayout.setTabsFromPagerAdapter(mAdapter);//給Tabs設置適配器

    }
}

Fragment代碼：

package activity.lijintao.bawei.com.tablayouttest;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * 
 * date:2017/6/7
 */


public class ContentFragment extends Fragment {
    private View view;
    private static final String KEY = "title";
    private TextView tvContent;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        view = inflater.inflate(R.layout.contentfragment,container,false);
        tvContent = (TextView) view.findViewById(R.id.tv_content);
        String string = getArguments().getString(KEY);
        tvContent.setText(string);
        tvContent.setTextColor(Color.BLUE);
        tvContent.setTextSize(30);
        return view;
    }

    /**
     * fragment靜態傳值
     */
    public static ContentFragment newInstance(String str){
        ContentFragment fragment = new ContentFragment();
        Bundle bundle = new Bundle();
        bundle.putString(KEY,str);
        fragment.setArguments(bundle);

        return fragment;
    }
}

xml代碼：

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.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#F00"
        app:tabSelectedTextColor="#F00"
        app:tabTextColor="#1d1c1d"
        android:background="#f0F"
        app:tabMode="scrollable"

        >

        </android.support.design.widget.TabLayout>



    <!--可滑動的布局內容-->
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>


31 </LinearLayout>

contentfragment.xml

<?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">

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        />
</LinearLayout>

就這么些了，希望對你有所幫助！