自定义书签导航

效果展示：

切换后：

实现思路：
1.三个书签其实就是三个TextView，先用shape画出TextView的两种状态，然后用选择器selector去切换TextView的状态。
2.创建三个Fragment，然后使用FragmentPagerAdapter进行适配。
3.三个TextView设置监听方法，当切换TextView时，Fragment也会相应的改变，也可以给三个ViewPager设置监听。
好了，不多说，下面开始代码展示咯：

1、Activity的布局代码：

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

    <ImageView
        android:id="@+id/iv_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/pic2"/>

    <RelativeLayout
        android:id="@+id/rl_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="50dp"
            android:layout_marginTop="222dp"
            android:background="#0ff"
            android:orientation="vertical">
            <LinearLayout
                android:layout_marginTop="50dp"
                android:layout_width="match_parent"
                android:layout_height="38dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/tv_message"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginBottom="4dp"
                    android:layout_marginLeft="12dp"
                    android:layout_marginTop="4dp"
                    android:layout_weight="1"
                    android:background="@drawable/left_blue_selector"
                    android:gravity="center"
                    android:text="游戏信息"
                    android:textColor="@color/text_selector"

                    />

                <TextView
                    android:id="@+id/tv_gift"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginBottom="4dp"
                    android:layout_marginTop="4dp"
                    android:layout_weight="1"
                    android:background="@drawable/blue_selector"
                    android:gravity="center"
                    android:text="游戏礼包"

                    />
                <TextView
                    android:id="@+id/tv_pl"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginBottom="4dp"
                    android:layout_marginRight="12dp"
                    android:layout_marginTop="4dp"
                    android:layout_weight="1"
                    android:background="@drawable/right_blue_selector"
                    android:gravity="center"
                    android:text="评论"

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

2.选择器selector的代码，我就演示一个了，其他两个选择器都差不多：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <!-- 当我们点击TtxtView时，我们就会选择left_blue_selector_true这个状态，也就是选中状态。-->
    <item android:drawable="@drawable/left_blue_selector_true" android:state_selected="true"/>
    <item android:drawable="@drawable/left_blue_selector_false"/>
</selector>

3.shopa中的代码：
选中状态：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--画圆角-->
    <!--bottomLeftRadius:左下角的圆的半径-->
    <!--android:radius="4dp":代表四个角的圆角的半径-->
    <corners
        android:bottomLeftRadius="4dp"
        android:topLeftRadius="4dp" />
    <!--shape中间填充部分的颜色：蓝色-->
    <solid android:color="@android:color/holo_blue_light" />
    <!--shape边框的颜色-->
    <stroke
        android:width="2px"
        android:color="@android:color/holo_blue_light" />
</shape>

未选中状态：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--画圆角-->
    <!--bottomLeftRadius:左下角的圆的半径-->
    <!--android:radius="4dp":代表四个角的圆角的半径-->
    <corners
        android:bottomLeftRadius="4dp"
        android:topLeftRadius="4dp"
        />
    <!--shape中间填充部分的颜色：白色-->
    <solid android:color="@android:color/white" />
    <!--shape边框的颜色-->
    <stroke
        android:width="1dp"
        android:color="@android:color/holo_blue_light" />

</shape>

4.Activity中的java代码：

public class GameDetailActivity extends BaseActivity {
    private BaseFragmentPageAdapter mAdapter;
    private List<Fragment> list;
    private ViewPager mViewpager;
    private RelativeLayout rlContainer;
    private ImageView ivBg;
    private int offset;
    private boolean isShow=false;
    private TextView textView1,textView2,textView3;
    @Override
    protected int setViewId() {
        return R.layout.activity_game_detail;
    }
    @Override
    protected void findviews() {
        rlContainer = (RelativeLayout) findViewById(R.id.rl_container);
        ivBg = (ImageView) findViewById(R.id.iv_bg);
        textView1= (TextView) findViewById(R.id.tv_message);
        textView2= (TextView) findViewById(R.id.tv_gift);
        textView3= (TextView) findViewById(R.id.tv_pl);
        mViewpager= (ViewPager) findViewById(R.id.viewpager);
    }


    @Override
    protected void initEvent() {
        //TODO 这三个text的点击监听事件，其他也必须设置这三个点击事件，不然点击text的时候会被图片隐藏
        textView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView1.setSelected(true);
                textView3.setSelected(false);
                textView2.setSelected(false);
                mViewpager.setCurrentItem(0);//TODO　setCurrentItem(0)方法表示获得viewpager中的第一个Fragment。
            }
        });
        textView2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                textView1.setSelected(false);
                textView3.setSelected(false);
                textView2.setSelected(true);
                mViewpager.setCurrentItem(1);
            }
        });
        textView3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView1.setSelected(false);
                textView3.setSelected(true);
                textView2.setSelected(false);
                mViewpager.setCurrentItem(2);
            }
        });
        textView1.performClick();
        loadData();
        mAdapter=new BaseFragmentPageAdapter(getSupportFragmentManager(),list);
        mViewpager.setAdapter(mAdapter);
        //TODO ViewPager的监听
        mViewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                switch (position){
                    case 0:
                        textView1.setSelected(true);
                        textView3.setSelected(false);
                        textView2.setSelected(false);
                        break;
                    case 1:
                        textView1.setSelected(false);
                        textView2.setSelected(true);
                        textView3.setSelected(false);
                        break;
                    case 2:
                        textView2.setSelected(false);
                        textView3.setSelected(true);
                        textView1.setSelected(false);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
  @Override
    protected void loadData() {
        list = new ArrayList<>();
        FragmentGift  gift = new FragmentGift();
        FragmentMessage message = new FragmentMessage();
        FragmentPl pl = new FragmentPl();
        list.add(message);//TODO 第一个添加的Fragment就等于setCurrentItem(0)。为ViewPager中的第一个fragment。
        list.add(gift);
        list.add(pl);

    }
}

5.适配器

public class BaseFragmentPageAdapter extends FragmentPagerAdapter
{

    /**
     * Fragment集合
     */
    private List<Fragment> list;

    private List<String> titles;

    public BaseFragmentPageAdapter(FragmentManager fm, List<Fragment> list)
    {
        super(fm);
        this.list = list;
    }



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

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

    /**
     * 返回当前position对应的title
     * 
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position)
    {
        String title = "";
        //如果使用了两个参数的构造方法，会导致titles为null，所以加入此判断
        if (titles != null)
        {
            title = titles.get(position);
        }
        return title;
    }
}