TabLayout+ViewPager+Fragment製做頁卡

本人很懶，直接上代碼了。

佈局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.ztd.nahu.activity.HomeActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@android:color/transparent"
            app:tabIndicatorHeight="0dp"
            app:tabSelectedTextColor="@android:color/holo_red_light"
            app:tabTextColor="@android:color/black"
            android:layout_alignParentBottom="true">
        </android.support.design.widget.TabLayout>
        <android.support.v4.view.ViewPager
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/tab_layout"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

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:gravity="center"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/img"
        android:layout_width="20dp"
        android:layout_height="20dp" />
    <TextView
        android:id="@+id/title_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/tab_text_color"/>
</LinearLayout>

Activity代碼：

public class HomeActivity extends AppCompatActivity {
    @BindView(R.id.tab_layout)
    TabLayout mTabLayout;
    @BindView(R.id.container)
    ViewPager mViewPager;
    private TabPagerAdapter mSectionsPagerAdapter;
    private String[] titleArra = new String[]{"最新", "娛樂", "財經", "體育"};
    private int[] imgArra = {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        ButterKnife.bind(this);

        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new TabPagerAdapter(this, getSupportFragmentManager(), titleArra, imgArra);

        //TabLayout設置爲寬度佔滿屏幕或者爲可滾動
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);

        // Set up the ViewPager with the sections adapter.
        mViewPager.setAdapter(mSectionsPagerAdapter);
        mTabLayout.setupWithViewPager(mViewPager);

        //Add the tag elements
        for (int i = 0; i < titleArra.length; i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            tab.setCustomView(mSectionsPagerAdapter.getTabView(i));
        }
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_home, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

適配器：

public class TabPagerAdapter extends FragmentPagerAdapter {    private Context mContext;    private String[] titleArra = null;    private int[] imgArra = null;    public TabPagerAdapter(Context context, FragmentManager fm, String[] titleArra, int[] imgArra) {        super(fm);        this.mContext = context;        this.titleArra = titleArra;        this.imgArra = imgArra;    }    @Override    public Fragment getItem(int position) {        // getItem is called to instantiate the fragment for the given page.        // Return a PlaceholderFragment (defined as a static inner class below).        switch (position) {            case 0:                break;            case 1:                break;            case 2:                break;            case 3:                break;        }        return MapFragment.newInstance(position + 1);    }    @Override    public int getCount() {        return titleArra == null ? 0 : titleArra.length;    }    @Override    public CharSequence getPageTitle(int position) {        return titleArra != null ? titleArra[position] : null;    }    public View getTabView(int position) {        View view = LayoutInflater.from(mContext).inflate(R.layout.icon_layout, null);        TextView tv = (TextView) view.findViewById(R.id.title_tv);        ImageView imageView = (ImageView) view.findViewById(R.id.img);        if (imgArra == null || titleArra == null) {            return view;        }        tv.setText(titleArra[position]);        imageView.setImageResource(imgArra[position]);        return view;    }}