Android项目中用到Tab作为导航条切换页面的效果,我相信大家都用到过吧,但是在切换的时候,Tab下划线跟着手指滑动的比例而滑动,相关的两个Tab的文字的颜色根据手指的滑动,而发生颜色渐变的改变。
下面说一下原理:
整个实现的过程需要用到,viewpager+fragment+tab,另外tab下划线的滑动以及tab中文本的颜色的渐变,是根据viewpager的页面的滑动比例计算出来相对应的值,然后进行设置,下划线是设置margin—left来完成的,颜色的渐变是通过设置画笔的透明度来实现。
一、自定义TextView,根据页面滑动的比例,计算出文本的透明度,如果对自定义流程不太清楚,请向这里看过来:
package com.example.tab;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Looper;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
/**
* 自定义textview,可以根据透明度改变其颜色
* Created by xiaoyunfei on 16/4/7.
*/
public class MyTextView extends View {
/**
* 文本,默认:微信
*/
private String mText = "微信";
/**
* 文本大小
*/
private int mTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 10f, getResources().getDisplayMetrics());
/**
* 文本颜色
*/
private int mColor = 0xff45C01A;
/**
* 透明度
*/
private float mAlpha = 0f;
/**
* 显示文本区域的矩形
*/
private Rect mTextRect;
private Paint mPaint;
public MyTextView(Context context) {
this(context, null);
}
public MyTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.change_color_icon_view, defStyleAttr, 0);
int count = array.getIndexCount();
for (int i = 0; i < count; i++) {
int attr = array.getIndex(i);
switch (attr) {
case R.styleable.change_color_icon_view_color_://文本颜色
mColor = array.getColor(attr, 0xff45C01A);
break;
case R.styleable.change_color_icon_view_text_://文本
mText = array.getString(attr);
break;
case R.styleable.change_color_icon_view_textSize_://文本字号
mTextSize = array.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 10f, getResources().ge