TabLayout + ViewPager + Fragment

MainActivity

package bw.com.exam_demo;

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

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

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.Unbinder;

/**
 * TabLayout + ViewPager + Fragment
 */
public class MainActivity extends AppCompatActivity {

    private Unbinder unbinder;
    //导航
    @BindView(value = R.id.tab_layout_id)
    TabLayout mTabLayout;
    private List<String> titles = new ArrayList<>();

    //显示的内容
    @BindView(value = R.id.view_pager_id)
    ViewPager mVewPager;
    private List<Fragment> data = new ArrayList<>();//数据源
    private MyAdapter adapter;


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

        //TODO 绑定ButterKnife
        unbinder = ButterKnife.bind(this);

        //TODO 初始化标题
        titles.add("生钱");
        titles.add("花钱");
        titles.add("部落");
        titles.add("我的");

        //TODO 数据源
        data.add(new ShengQianFragment());
        data.add(new OtherFragment());
        data.add(new OtherFragment());
        data.add(new OtherFragment());

        //TODO 定义适配器
        adapter = new MyAdapter(getSupportFragmentManager());
        mVewPager.setAdapter(adapter);

        //TODO 将TabLayout和ViewPager绑定在一起
        mTabLayout.setupWithViewPager(mVewPager);
    }
    @Override
    protected void onDestroy() {
        super.onDestroy();
        //TODO 解绑ButterKnife
        unbinder.unbind();
    }
    //TODO 自定义的适配器
    class MyAdapter extends FragmentPagerAdapter
    {
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {
            return data.get(position);
        }
        @Override
        public int getCount() {
            return data.size();
        }
        //TODO 设置导航中的标题

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

  OtherFragment

package bw.com.exam_demo;


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


/**
 * A simple {@link Fragment} subclass.
 */
public class OtherFragment extends Fragment {


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


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

}

   ShengQianFragment

package bw.com.exam_demo;

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

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * 通过Retrofit获取网络数据, 显示到GridView中
 * 控件的初始化, 用ButterKnife
 * 图片的处理使用 Fresco,  圆形图片的处理
 *
 */
public class ShengQianFragment extends Fragment {

    @BindView(value = R.id.gv_id)
    GridView mGridView;

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

        View view = inflater.inflate(R.layout.fragment_sheng_qian, container, false);

        //TODO 绑定ButterKnife -- Fragment 必须这么写
        ButterKnife.bind(this,view);

        return view;
    }
}

    布局

  activity_main

  

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="bw.com.exam_demo.MainActivity">

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:id="@+id/tab_layout_id"
          />

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

</LinearLayout>

    fragment_other

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="bw.com.exam_demo.OtherFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />

</FrameLayout>

   fragment_sheng_qian

  

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="bw.com.exam_demo.ShengQianFragment">

    <!-- android:numColumns="2" 设置GridView 有多少列-->
   <GridView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:numColumns="2"
       android:id="@+id/gv_id"
       />

</FrameLayout>