自我感覺ViewPager+fragment在Android中挺重要的，自己還不太明白
ViewPagerIndicator的思路：

• 先在佈局最上面載入一張黑色圖片，作為標籤的背景
• 然後將剩餘部分全都置為VIewPager，用來滑動。高度為0dp，用layout_weight=1分配剩餘位置
  -給最上面黑色圖片所在的區域設定三個TextView(有一定的侷限性，因為基礎比較差，所以先新增三個模組)
  Note:這時的控制元件是自定義的，所以需要寫完整的包名

新增Fragment，與ViewPager聯合起來使用。可以實現滑動效果
給每一個Fragment新增內容
當ViewPager滑動時，繪製一個小三角形隨它進行移動。
繪製三角形的分析：
因為是等腰，所以從(0,0)到(寬，0)再到(寬/2,高)

佈局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context
 
="com.example.viewpagerzidingyi.MainActivity"
    android:background="#ffffff">

    <com.example.viewpagerzidingyi.ViewPagerIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@mipmap/al"
        android:orientation
 
="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="目標"
            android:textColor="#CCFFFFFF"
            android:textSize="16sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="計劃"
            android:textColor="#CCFFFFFF"
            android:textSize="16sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="努力"
            android:textColor="#CCFFFFFF"
            android:textSize="16sp" />
    </com.example.viewpagerzidingyi.ViewPagerIndicator>

     <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/viewpager"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>

</LinearLayout>

package com.example.viewpagerzidingyi;

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.os.Bundle;
import android.view.Window;

import com.example.viewpagerzidingyi.simpleFragment.ViewPagerSFragment;

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

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private ViewPagerIndicator mIndicator;

    private List<String> mTitles= Arrays.asList("目標","計劃","努力");
    private List<ViewPagerSFragment> mContents=new ArrayList<ViewPagerSFragment>();
    private FragmentPagerAdapter pagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initViews();
        initDatas();

        mViewPager.setAdapter(pagerAdapter);
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //tabWidth偏移量   tabWidth*positionOffset +position*positionOffset
                mIndicator.scroll(position,positionOffset);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initDatas() {
        for (String title:mTitles){
            ViewPagerSFragment fragment=ViewPagerSFragment.newInstance(title);
            mContents.add(fragment);
        }
        pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public int getCount() {
                return mContents.size();
            }

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

    }

    private void initViews() {
        mViewPager= (ViewPager) findViewById(R.id.viewpager);
        mIndicator= (ViewPagerIndicator) findViewById(R.id.indicator);
    }
}

package com.example.viewpagerzidingyi.simpleFragment;

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

/**
 * Created by 杜春慧 on 2016/5/21.
 */
public class ViewPagerSFragment extends Fragment {
    //需要一個引數指明它的title
    public String mTitle;
    public static final String BUNDLE_TITLE = "title";



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

        if (bundle != null) {
            mTitle = bundle.getString(BUNDLE_TITLE);
        }

        TextView mTextView = new TextView(getActivity());
        mTextView.setText(mTitle);
        mTextView.setGravity(Gravity.CENTER);
        return mTextView;

    }

    public static ViewPagerSFragment newInstance(String title) {
        Bundle bundle = new Bundle();
        bundle.putString(BUNDLE_TITLE, title);

        ViewPagerSFragment fragment = new ViewPagerSFragment();
        fragment.setArguments(bundle);
        return fragment;
    }





}

package com.example.viewpagerzidingyi;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.LinearLayout;

/**
* Created by on 2016/5/21.
*/
public class ViewPagerIndicator extends LinearLayout {
//自定義的控制元件繼承源生控制元件，重寫四個方法
//自定義導航

private Paint mPaint;

//可以通過path構造三角形
private Path mPath;
//三角形框和高
private int mTriangleWidth;
private int mTriangleHeight;
//每一個三角形的底和每一個Tab是一樣的
private static final float RADIO_TRIANGLE_WIDTH=1/7F;
private int mInitTranslationX;
private int mTranslationX=0;

public ViewPagerIndicator(Context context) {
    this(context,null);

}

public ViewPagerIndicator(Context context, AttributeSet attrs) {
    super(context, attrs);
    //初始化畫筆
    mPaint=new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setColor(Color.parseColor("#ffffffff"));
    mPaint.setStyle(Paint.Style.FILL);
    //設定三角形不要太尖銳
    mPaint.setPathEffect(new CornerPathEffect(3));

}



//繪製三角形
@Override
protected void onDraw(Canvas canvas) {
    //在平移之前先儲存
    canvas.save();
    canvas.translate(mInitTranslationX+mTranslationX,getHeight()+8);
    canvas.drawPath(mPath,mPaint);

    canvas.restore();

    super.onDraw(canvas);
}

//設定三角形大小  適用於知道控制元件寬高來設定
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    mTriangleWidth = (int) (w / 3  *RADIO_TRIANGLE_WIDTH);
   //三角形偏移量
    mInitTranslationX = w / 3 /2 - mTriangleWidth /2;


    initTriangle();
}

//初始化三角形
private void initTriangle() {
mTriangleHeight = mTriangleWidth /2;
mPath = new Path();
mPath.moveTo(0,0);
mPath.lineTo(mTriangleWidth,0);
mPath.lineTo(mTriangleWidth/2,-mTriangleWidth);
mPath.close();
}
//三角形指示器跟隨手指移動
public void scroll(int position, float offset) {
int tabWidth = getWidth() / 3;
mTranslationX= (int) (tabWidth*(offset + position));
//重繪，呼叫該方法
invalidate();
}
}
最終結果如下：