Android 自定义的颜色滑动转换ViewPager指示器 ColorTransformIndicator

本文参考:http://blog.csdn.net/lmj623565791/article/details/44098729

先来看看效果图

       

一 使用

1 布局 

   添加一个自定义控件

<span style="font-family: Arial, Helvetica, sans-serif;"><?xml version="1.0" encoding="utf-8"?></span>

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

    <com.rios.indicator.indicatior.indicator.Indicator
        android:id="@+id/indicator"
        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>

添加一个背景用的shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="5dp"/>
	<solid android:color="#5000"/>
</shape>

2 代码调用

mIndicator = (Indicator) findViewById(R.id.indicator);
ViewPager = (ViewPager) findViewById(R.id.viewpager);

private String[] mTitles = {"同城", "笑话", "图片","天气","电影","音乐","机票","彩票","游戏","小说",
			"股票","理财","新闻","军事","社会","娱乐"};
private void setIndicator() {
		//移动方块背景颜色更改 shape_indicator.xml
		mIndicator.setViewPager(mViewPager);
		mIndicator.setTitleString(mTitles);//mTitles的大小要和mViewPager的大小一致
//		mIndicator.setColorTextBack(Color.BLACK);//设置字体背景颜色
//		mIndicator.setColorTextCurrent(0xFFF0FFFF);//设置字体选择时的颜色
//		mIndicator.setBackgroundColor(0xFFFF6A6A);//设置背景颜色
//		mIndicator.setTitleTextSize(20);//设置字体大小
		mIndicator.setParams();//使以上参数生效
		mIndicator.setOnClickItemListener(new Indicator.OnClickItemListener() {
			@Override
			public void OnItemClick(View childView, int position) {
				Toast.makeText(IndicatorActivity.this,"你点击的是:"+position+"  "+
						((TextView)childView).getText().toString(),Toast.LENGTH_SHORT).show();
			}
		});
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
			}
			@Override
			public void onPageScrolled(int position, float positionOffset,
									   int positionOffsetPixels) {
//--------------设置颜色切换位置
				mIndicator.setPosition(position, positionOffset);
			}
			@Override
			public void onPageScrollStateChanged(int state) {

			}
		});
	}

很简单吧

二 原理

 字体颜色转换原理是绘了二次字体 ,第一次全绘,第二次绘需要的范围,那绘范围怎么绘呢,其实有个方法能实现 就是 

canvas.clipRect  只能在矩形区域里绘制

mPaint.setColor(mColorTextBack);
//第一次全绘
canvas.drawText(mAttrText, 0, mHeight, mPaint);
mPaint.setColor(mColorTextCurrent);
//限制范围
canvas.clipRect(mRect);
//第二次绘
canvas.drawText(mAttrText, 0, mHeight, mPaint);


三 源码下载
https://github.com/rios168/ColorTransformIndicator
如果好用 记得点击 star 支持