自定义头部ViewPagerIndicator

• 上传效果图一张
  

• 自定义view继承HorizontalScrollView

package com.example.myviewpagerindicatordemo.view;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.myviewpagerindicatordemo.R;

public class MyViewPagerIndicator extends HorizontalScrollView implements
        OnClickListener {

    private LinearLayout linearLayout;
    private ArrayList<View> viewList = new ArrayList<View>();
    private String[] titles;
    private ViewPager viewPager;

public MyViewPagerIndicator(Context context, AttributeSet            
attrs,int defStyle) {
        super(context, attrs, defStyle);
        initView();
    }

public MyViewPagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public MyViewPagerIndicator(Context context) {
        super(context);
        initView();
    }

    /**
     * 初始化操作
     */
    private void initView() {
        // 创建线性布局
        linearLayout = new LinearLayout(getContext());
        this.addView(linearLayout);
    }

    /**
     * 设置viewPager滑动监听
     * @param viewPager
     */
    @SuppressWarnings("deprecation")
    public void setViewPager(ViewPager viewPager) {
        this.viewPager = viewPager;
viewPager.setOnPageChangeListener(new OnPageChangeListener() {          
    @Override
    public void onPageSelected(int position) {
                setCurrentItem(position);

            }           
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

    @Override
    public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });
    }

    /**
     * 添加头部内容
     * @param titles
     */
public void addTitles(String[] titles) {
        this.titles = titles;
        //清空集合中的内容
        viewList.clear();
        for (int i = 0; i < titles.length; i++) {
            //填充头部视图
View view= View.inflate(getContext(),R.layout.titles_item, null);
TextView tv_tab = (TextView) view.findViewById(R.id.tv_tab);
TextView tv_line = (TextView) view.findViewById(R.id.tv_line);
            //将头部视图添加到集合
            viewList.add(view);
            //设置头部内容
            tv_tab.setText(titles[i]);
            //设置viewPager第一个界面对应的头部状态
            if (i == 0) {

                tv_tab.setTextColor(Color.RED);
                tv_line.setVisibility(View.VISIBLE);
            } else {
                tv_tab.setTextColor(Color.BLACK);
                tv_line.setVisibility(View.GONE);
            }
            //设置布局的ID
            view.setId(i);
            view.setOnClickListener(this);
            //设置布局中的参数
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            //布局添加空间
            linearLayout.addView(view, params);
        }
    }

    @Override
    public void onClick(View v) {

        setCurrentItem(v.getId());

    }

    /**
     * 设置ViewPager的位置
     * @param position
     */
    private void setCurrentItem(int position) {
        //获取布局中每个空间的宽度
        int width = linearLayout.getChildAt(position).getWidth();
        //滑动到的的位置
        this.scrollTo(width * position, 0);

        for (int i = 0; i < titles.length; i++) {

            View view = viewList.get(i);
TextView tv_tab = (TextView) view.findViewById(R.id.tv_tab);
TextView tv_line = (TextView) view.findViewById(R.id.tv_line);
            //设置对应的头部字体颜色和其下边的线的状态
            if (position == i) {
                // 设置传递过来的viewPager的当前页
                viewPager.setCurrentItem(i);
                //设置字体为红色
                tv_tab.setTextColor(Color.RED);
                //字体下的线为显示状态
                tv_line.setVisibility(View.VISIBLE);
            } else {
                //设置字体为黑色
                tv_tab.setTextColor(Color.BLACK);
                //字体下的线为隐藏状态
                tv_line.setVisibility(View.GONE);
            }
        }
    }
}

• mainactivity代码

package com.example.myviewpagerindicatordemo;

import com.example.myviewpagerindicatordemo.view.MyViewPagerIndicator;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class MainActivity extends Activity {

    // 设置的头部内容
    private String[] titles = {"哈哈","呵呵","吼吼","啦啦", "呀呀","嘎嘎","飞飞","吱吱","唧唧","歪歪","哒哒","QQ","滴滴", "嘻嘻" };
    // 设置头部对应的viewPager图片
    private int[] pics = { R.drawable.a10, R.drawable.a3, R.drawable.a5,R.drawable.a8, R.drawable.a9, R.drawable.a32, R.drawable.a35,R.drawable.a34, R.drawable.a33, R.drawable.a36, R.drawable.a37,R.drawable.a38, R.drawable.a39, R.drawable.ab };
    private MyViewPagerIndicator myViewPagerIndicator;
    private ViewPager viewpager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 查找控件
myViewPagerIndicator =(MyViewPagerIndicator)findViewById(R.id.myViewPagerIndicator);
        viewpager = (ViewPager) findViewById(R.id.viewpager);
        // 设置头部内容及 对应的viewPager
        myViewPagerIndicator.setViewPager(viewpager);
        myViewPagerIndicator.addTitles(titles);
        // 设置适配器
viewpager.setAdapter(new PagerAdapter() {

    @Override
    public boolean isViewFromObject(View view, Object object) {

                return view == object;
            }

    @Override
    public int getCount() {
                return pics.length;
            }

@Override
public Object instantiateItem(ViewGroup container, int position) {
        ImageView imageView = new ImageView(MainActivity.this);

                imageView.setImageResource(pics[position]);
                container.addView(imageView);
                return imageView;
            }

    @Override
    public void destroyItem(ViewGroup container, int position,
                    Object object) {

                container.removeView((View) object);
            }
        });

    }

}

• mainactivity的XML布局

<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" >

    <com.example.myviewpagerindicatordemo.view.MyViewPagerIndicator
        android:id="@+id/myViewPagerIndicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

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

</LinearLayout>

• 头部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" >

    <TextView
        android:id="@+id/tv_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="嘿嘿"
        android:textSize="20sp" />
    <TextView
        android:id="@+id/tv_line"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#f00"/>

</LinearLayout>