运行效果图
preview.gif
完整项目地址
Github：仿微信底部渐变导航栏
顶部标题栏地址
简书：顶部标题栏
自定义View
自定义View命名为 ChangeColorIconWithText，在values目录中创建attr.xml文件并自定义四个属性分别为图标、背景色、底部文本、底部文本大小
<declare-styleable name="ChangeColorIconWithText">
<attr name="icon" format="reference"/>
<attr name="text" format="string"/>
<attr name="color" format="color"/>
<attr name="text_size" format="dimension"/>
</declare-styleable>
ChangeColorIconWithText 类进行绘图操作，并向外提供改变透明度和图标的方法
/**
* @desciption: 自定义图标和文本颜色渐变 进行绘图操作，并向外提供改变透明度和图标的方法
*/
public class ChangeColorIconWithText extends View {
private static final String INSTANCE_STATUS = "instance_status";
private static final String STATUS_ALPHA = "status_alpha";
/**
* 图标默认背景色
*/
private final int DEFAULT_ICON_BACKGROUND_COLOR = 0xFF45C01A;
/**
* 图标背景色
*/
private int mColor = 0xFF45C01A;
/**
* 图标
*/
private Bitmap mIconBitmap;
/**
* 图标底部文本
*/
private String mText = "微信";
/**
* 默认字体12sp
*/
private int mTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
12, getResources().getDisplayMetrics());
private Bitmap mBitmap;
/**
* 透明度（0.0-1.0）
*/
private float mAlpha;
/**
* 图标绘制区域
*/
private Rect mIconRect;
/**
* 文本绘制区域
*/
private Rect mTextRect;
/**
* 文本画笔
*/
private Paint mTextPaint;
public ChangeColorIconWithText(Context context) {
this(context, null);
}
public ChangeColorIconWithText(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public ChangeColorIconWithText(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ChangeColorIconWithText);
mColor = typedArray.getColor(R.styleable.ChangeColorIconWithText_color, DEFAULT_ICON_BACKGROUND_COLOR);
BitmapDrawable bitmapDrawable = (BitmapDrawable) typedArray.getDrawable(R.styleable.ChangeColorIconWithText_icon);
if (bitmapDrawable != null) {
mIconBitmap = bitmapDrawable.getBitmap();
}
mText = typedArray.getString(R.styleable.ChangeColorIconWithText_text);
//默认字体大小12sp
mTextSize = (int) typedArray.getDimension(R.styleable.ChangeColorIconWithText_text_size,
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
12, getResources().getDisplayMetrics()));
typedArray.recycle();
init();
}
/**
* 初始化画笔、文本显示范围
*/
private void init() {
mTextRect = new Rect();
mTextPaint = new Paint();
mTextPaint.setTextSize(mTextSize);
mTextPaint.setColor(mColor);
//将TextView 的文本放入一个矩形中， 测量TextView的高度和宽度
mTextPaint.getTextBounds(mText, 0, mText.length(), mTextRect);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制原图标
canvas.drawBitmap(mIconBitmap, null, mIconRect, null);
//math.ceil(x)返回大于等于参数x的最小整数,即对浮点数向上取整(math.ceil(8.4)=9)
int alpha = (int) Math.ceil(255 * mAlpha);
//内存去准备mBitmap，setAlpha，纯色，xfermode，图标
setupTargetBitmap(alpha);
// 1、绘制原文本 ； 2、绘制变色的文本
drawSourceText(canvas, alpha);
drawTargetText(canvas, alpha);
canvas.drawBitmap(mBitmap, 0, 0, null);
}
/**
* 在内存中绘制可变色的Icon
* 在mBitmap上绘制以mColor颜色为Dst，DST_IN模式下的图标
*
* @param alpha Src颜色的透明度
*/
private void setupTargetBitmap(int alpha) {
mBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(mBitmap);
Paint paint = new Paint();
paint.setColor(mColor);
//抗锯齿
paint.setAntiAlias(true);
//防抖动
paint.setDither(true);
//设置画笔的透明度,取值范围为0~255，数值越小越透明
paint.setAlpha(alpha);
//在图标背后先绘制一层mColor颜色的背景
canvas.drawRect(mIconRect, paint);
//过度模式
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
paint.setAlpha(255);
//在mBitmap上绘制以iconBackgroundColor颜色为Dst，DST_IN模式下的图标
canvas.drawBitmap(mIconBitmap, null, mIconRect, paint);
}
/**
* 绘制默认状态下的字体
*
* @param canvas Canvas
* @param alpha 字体颜色透明度
*/
private void drawSourceText(Canvas canvas, int alpha) {
mTextPaint.setColor(0xff333333);
mTextPaint.setAlpha(255 - alpha);
int x = getMeasuredWidth() / 2 - mTextRect.width() / 2;
int y = mIconRect.bottom + mTextRect.height();
canvas.drawText(mText, x, y, mTextPaint);
}
/**
* 绘制滑动到该标签时的字体
*
* @param canvas Canvas
* @param alpha 字体颜色透明度
*/
private void drawTargetText(Canvas canvas, int alpha) {
mTextPaint.setColor(mColor);
mTextPaint.setAlpha(alpha);
int x = getMeasuredWidth() / 2 - mTextRect.width() / 2;
int y = mIconRect.bottom + mTextRect.height();
canvas.drawText(mText, x, y, mTextPaint);
}
/**
* 保存状态
*
* @return Parcelable
*/
@Override
protected Parcelable onSaveInstanceState() {
Bundle bundle = new Bundle();
bundle.putParcelable(INSTANCE_STATUS, super.onSaveInstanceState());
bundle.putFloat(STATUS_ALPHA, mAlpha);
return bundle;
}
/**
* 恢复状态
*
* @param state Parcelable
*/
@Override
protected void onRestoreInstanceState(Parcelable state) {
if (state instanceof Bundle) {
Bundle bundle = (Bundle) state;
mAlpha = bundle.getFloat(STATUS_ALPHA);
super.onRestoreInstanceState(bundle.getParcelable(INSTANCE_STATUS));
return;
}
super.onRestoreInstanceState(state);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//因为图标是正方形且需要居中显示的，所以View的大小去掉padding和文字所占空间后，
//剩余的空间的宽和高的最小值才是图标的边长
int iconWidth = Math.min(getMeasuredWidth() - getPaddingLeft() - getPaddingRight(),
getMeasuredHeight() - getPaddingTop() - getPaddingBottom() - mTextRect.height());
int left = getMeasuredWidth() / 2 - iconWidth / 2;
int top = getMeasuredHeight() / 2 - (mTextRect.height() + iconWidth) / 2;
//获取图标的绘制范围
mIconRect = new Rect(left, top, left + iconWidth, top + iconWidth);
}
/**
* 设置图标透明度并重绘
*
* @param alpha 透明度
*/
public void setIconAlpha(float alpha) {
this.mAlpha = alpha;
invalidateView();
}
/**
* 判断当前是否为UI线程，是则直接重绘，否则调用postInvalidate()利用Handler来重绘
*/
private void invalidateView() {
if (Looper.getMainLooper() == Looper.myLooper()) {
invalidate();
} else {
postInvalidate();
}
}
}
网友评论