为ViewPager设置SimpleViewPagerIndicator

说到ViewPagerIndicator，网上有很多专门的开源库；
我这里重提一下，只是想试试它的实现方法；
记录下来，可以以后快速的修改迭代~~~

很简单的一个类：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

public class SimpleViewPagerIndicator extends LinearLayout
{

    private static final int COLOR_TEXT_NORMAL = 0xFF999999;

    private static final int COLOR_INDICATOR = Color.BLACK;

    private String[] mTitles;

    private int mTabCount;

    private int mIndicatorColor = COLOR_INDICATOR;

    private float mTranslationX;

    private Paint mPaint = new Paint();

    private int mTabWidth;

    private int oldPosition = 0;

    private ViewPager viewPager;

    public SimpleViewPagerIndicator(Context context)
    {
        this(context, null);
    }

    public SimpleViewPagerIndicator(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        mPaint.setColor(mIndicatorColor);
        mPaint.setStrokeWidth(10.0F);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh)
    {
        super.onSizeChanged(w, h, oldw, oldh);
        mTabWidth = w / mTabCount;
    }

    public void setTitles(String[] titles)
    {
        mTitles = titles;
        mTabCount = titles.length;
    }

    public void setIndicatorColor(int indicatorColor)
    {
        this.mIndicatorColor = indicatorColor;
    }

    @Override
    protected void dispatchDraw(Canvas canvas)
    {
        super.dispatchDraw(canvas);
        canvas.save();
        canvas.translate(mTranslationX, getHeight() - 2);
        canvas.drawLine(0, 0, mTabWidth, 0, mPaint);
        canvas.restore();
    }

    public void setViewPager(ViewPager viewPager)
    {

        if (viewPager instanceof ViewPager)
        {
            this.viewPager = viewPager;
            viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener()
            {
                @Override
                public void onPageSelected(int position)
                {
                    View v = getChildAt(position);
                    if (v instanceof TextView)
                    {
                    	TextView oldTv = (TextView) getChildAt(oldPosition);
                    	oldTv.setTextColor(COLOR_TEXT_NORMAL);
                    	
                        TextView tv = (TextView) v;
                        tv.setTextColor(COLOR_INDICATOR);

                        oldPosition = position;
                    }
                    if (onPageChangeListener != null)
                    {
                        onPageChangeListener.onPageSelected(position);
                    }
                }

                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
                {
                    scroll(position, positionOffset);
                }

                @Override
                public void onPageScrollStateChanged(int state)
                {

                }
            });
        }

    }

    public void scroll(int position, float offset)
    {
        mTranslationX = getWidth() / mTabCount * (position + offset);
        invalidate();
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev)
    {
        return super.dispatchTouchEvent(ev);
    }

    private void generateIndicators()
    {
        if (getChildCount() > 0)
            this.removeAllViews();
        int count = mTitles.length;

        setWeightSum(count);
        for (int i = 0; i < count; i++)
        {
            TextView tv = new TextView(getContext());
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT);
            lp.weight = 1;
            tv.setTag(i);
            tv.setGravity(Gravity.CENTER);
            tv.setTextColor(COLOR_TEXT_NORMAL);
            tv.setText(mTitles[i]);
            tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
            tv.setLayoutParams(lp);
            tv.setOnClickListener(new OnClickListener()
            {
                @Override
                public void onClick(View v)
                {
                    int position = (Integer) v.getTag();
                    if (viewPager != null)
                    {
                        viewPager.setCurrentItem(position);
                    }
                    if(onItemClickListener!=null){
                    	onItemClickListener.onItemClick(v, position);
                    }
                }
            });
            addView(tv);
        }
    }

    private OnPageChangeListener onPageChangeListener;

    public void setOnPageChangeListener(OnPageChangeListener onPageChangeListener)
    {
        this.onPageChangeListener = onPageChangeListener;
    }

    public interface OnPageChangeListener
    {
        public void onPageSelected(int position);
    }

    
    private OnItemClickListener onItemClickListener;
    
    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
		this.onItemClickListener = onItemClickListener;
	}

	public interface OnItemClickListener
    {
        public void onItemClick(View view,int position);
    }
    /**
     * 选中当前页 。此方法一定要在setTitles()，setViewPager()之后调用！
     * 
     * @param position
     */
    public void setCurrentItem(int position)
    {
        oldPosition = position;
        generateIndicators();
        if (viewPager != null)
        {
            viewPager.setCurrentItem(position);
        }
    }

    
}

用法：

package com.example.testviewpagerindicator;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;

import com.me.view.SimpleViewPagerIndicator;

public class MainActivity extends FragmentActivity
{
    private Context context;

    private String[] titles = new String[]
    { "第1页", "第2页", "第3页", "第4页" };

    private SimpleViewPagerIndicator indicator;

    private ViewPager viewpager;

    private FragmentPagerAdapter pagerAdapter;

    private TabFragment[] fragments = new TabFragment[titles.length];

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context = this;
        initViews();
    }

    private void initViews()
    {
        for (int i = 0; i < titles.length; i++)
        {
            fragments[i] = (TabFragment) TabFragment.newInstance(titles[i]);
        }

        pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
        {
            @Override
            public int getCount()
            {
                return titles.length;
            }

            @Override
            public Fragment getItem(int position)
            {
                return fragments[position];
            }

        };

        viewpager = (ViewPager) findViewById(R.id.viewpager);
viewpager.setAdapter(pagerAdapter);

        indicator = (SimpleViewPagerIndicator) findViewById(R.id.indicator);
        indicator.setTitles(titles);
        indicator.setViewPager(viewpager);
        indicator.setCurrentItem(1);

        // indicator.setOnPageChangeListener(new SimpleViewPagerIndicator.OnPageChangeListener()
        // {
        //
        // @Override
        // public void onPageSelected(int position)
        // {
        // // TODO Auto-generated method stub
        // Toast.makeText(context, position + " clicked", Toast.LENGTH_SHORT).show();
        // }
        // });

    }

}

注意：使用了SimpleViewPagerIndicator之后，需要使用indicator.setOnPageChangeListener（...）监听页面的切换，不要再使用viewpager .setOnPageChangeListener（...）设置了。

最后是个Fragment：

package com.example.testviewpagerindicator;

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.TextView;

public class TabFragment extends Fragment
{
	public static final String TITLE = "title";
	private String mTitle = "Defaut Value";
	private TextView mTextView;

	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		if (getArguments() != null)
		{
			mTitle = getArguments().getString(TITLE);
		}
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState)
	{
		View view = inflater.inflate(R.layout.fragment_tab, container, false);
		mTextView = (TextView) view.findViewById(R.id.id_info);
		mTextView.setText(mTitle);
		return view;

	}

	public static TabFragment newInstance(String title)
	{
		TabFragment tabFragment = new TabFragment();
		Bundle bundle = new Bundle();
		bundle.putString(TITLE, title);
		tabFragment.setArguments(bundle);
		return tabFragment;
	}

}

主布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.example.testviewpagerindicator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <com.me.view.SimpleViewPagerIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#ffffffff" />

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

https://github.com/ogaclejapan/SmartTabLayout


http://www.open-open.com/lib/view/open1426474795101.html

一个带有回弹效果的ViewPager，这个类具体见：

http://gundumw100.iteye.com/blog/1775588

Android 高仿微信6.0主界面 带你玩转切换图标变色
http://blog.csdn.net/lmj623565791/article/details/41087219
Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
http://blog.csdn.net/lmj623565791/article/details/44098729
Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI
http://blog.csdn.net/lmj623565791/article/details/42160391
Android TabLayout 库：FlycoTabLayout
http://www.open-open.com/lib/view/open1447294190257.html