ViewPager Example

activity_main.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"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#FF0000">

        <ImageView
            android:id="@+id/backImageView"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:src="@mipmap/ic_back" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="ViewPager Example"
            android:textColor="@android:color/white" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="@android:color/white">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:id="@+id/dakongyiTextView"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="大空翼"
                android:textColor="@color/colorPrimary" />

            <View
                android:background="@color/colorPrimary"
                android:id="@+id/dakongyiUnderlineView"
                android:layout_width="match_parent"
                android:layout_height="3dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:id="@+id/rixiangTextView"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="日向小次郎"
                android:textColor="@android:color/black" />

            <View
                android:id="@+id/rixiangUnderlineView"
                android:layout_width="match_parent"
                android:layout_height="3dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:id="@+id/conanTextView"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="柯南"
                android:textColor="@android:color/black" />

            <View
                android:id="@+id/conanUnderlineView"
                android:layout_width="match_parent"
                android:layout_height="3dp" />
        </LinearLayout>
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/picViewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

fragment_pic.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/picImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

PicFragment.java

package com.example.buish.viewpagerexample;

import android.os.Bundle;
import android.support.annotation.NonNull;
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.ImageView;

public class PicFragment extends Fragment {
    private int picIndex;
    private int[] resIds = {R.mipmap.dakongyi, R.mipmap.rixiang, R.mipmap.conan};
    private static final String KEY_PIC_INDEX = "PicIndex";

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        picIndex = getArguments().getInt(KEY_PIC_INDEX);
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_pic, null);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        ImageView picImageView = view.findViewById(R.id.picImageView);
        picImageView.setBackgroundResource(resIds[picIndex]);
    }

    public static PicFragment getInstance(int picIndex) {
        PicFragment picFragment = new PicFragment();
        Bundle args = new Bundle();
        args.putInt(KEY_PIC_INDEX, picIndex);
        picFragment.setArguments(args);
        return picFragment;
    }
}

PicFragmentPagerAdapter.java

package com.example.buish.viewpagerexample;

import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;

public class PicFragmentPagerAdapter extends FragmentPagerAdapter {
    private ArrayList<PicFragment> picFragments;

    public PicFragmentPagerAdapter(FragmentManager fragmentManager, ArrayList<PicFragment> picFragments) {
        super(fragmentManager);
        this.picFragments = picFragments;
    }

    @Override
    public PicFragment getItem(int i) {
        return picFragments.get(i);
    }

    @Override
    public int getCount() {
        return picFragments.size();
    }
}

MainActivity.java

package com.example.buish.viewpagerexample;

import android.graphics.Color;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private TextView[] titleTextViews;
    private View[] underlineViews;
    private ViewPager picViewPager;
    private ArrayList<PicFragment> picFragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.backImageView).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        initViews();
        initPicFragments();
        picViewPager.setAdapter(new PicFragmentPagerAdapter(getSupportFragmentManager(), picFragments));
        picViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {
            }

            @Override
            public void onPageSelected(int i) {
                for (int j = 0; j < 3; ++j) {
                    if (j == i) {
                        int color = getResources().getColor(R.color.colorPrimary);
                        titleTextViews[j].setTextColor(color);
                        underlineViews[j].setBackgroundColor(color);
                    } else {
                        titleTextViews[j].setTextColor(Color.BLACK);
                        underlineViews[j].setBackgroundColor(Color.WHITE);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {
            }
        });
    }

    private void initViews() {
        titleTextViews = new TextView[]{findViewById(R.id.dakongyiTextView), findViewById(R.id.rixiangTextView), findViewById(R.id.conanTextView)};
        underlineViews = new View[]{findViewById(R.id.dakongyiUnderlineView), findViewById(R.id.rixiangUnderlineView), findViewById(R.id.conanUnderlineView)};
        picViewPager = findViewById(R.id.picViewPager);
    }

    private void initPicFragments() {
        picFragments = new ArrayList();
        for (int i = 0; i < 3; ++i) {
            picFragments.add(PicFragment.getInstance(i));
            final int finalI = i;
            titleTextViews[i].setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    picViewPager.setCurrentItem(finalI);
                }
            });
        }
    }
}