高仿微信app实战(二)- 自定义View实现底部导航栏
话不多说,先上效果图
本文要实现微信底部导航栏,通过自定义View实现。主界面的切换采用ViewPager+Fragement的方式实现。
一、自定义ColorfulRadioButton
由于要实现切换Tab过程中按钮颜色的渐变效果,所以通过自定义RadioButton有些困难,这里重新自定义一个View-ColorfulRadioButton。
首先写一下设计思路:
1、首先每个Button有两部分构成,分别是上方的icon图标和下方的文字,使用两个画笔分别绘制。
2、再onMesure中计算图标和文字的大小与绘制位置。
3、在onDraw中绘制View。通过两次绘制(第一次为灰色图标,第二次为带颜色和透明度图标)设置PorterDuffXfermode为DistIn实现背景色透明度的变化。不懂的可以参考这篇文章:PorterDuffXfermode(即图像混合模式)详解
(1)自定义View属性
列举一下我们的自定义View需要用户指定的属性
- Icon图标
- 底部文字
- 渐变颜色
- 字体大小
在value文件夹下attrs中声明这些属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ColorfulRadioButton">
<attr name="icon" format="reference"></attr>
<attr name="color" format="color"></attr>
<attr name="text" format="string"></attr>
<attr name="text_size" format="dimension"></attr>
</resources>
(2)实现自定义View
package com.example.sdk.widgets;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.os.Looper;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.KeyEvent;
import android.view.SoundEffectConstants;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewParent;
import android.widget.Checkable;
import android.widget.CompoundButton;
import com.example.sdk.R;
/**
* Created by 韩冰 on 2017/7/12.
*/
public class ColorfulRadioButton extends View implements Checkable{
public ColorfulRadioButton(Context context) {
this(context,null);
}
public ColorfulRadioButton(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
private int mColor = 0xFF45C01A; //默认渐变颜色
private Bitmap mIconBitmap;
private String mText = "Button"; //默认底部显示文字
private int mTextSize = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 12, getResources().getDisplayMetrics()); //默认字体大小
private Canvas mCanvas;
private Bitmap mBitmap;
private Paint mPaint;
private float mAlpha = 0; //透明度
private Rect mIconRect; //icon Rect
private Rect mTextBound; //文字Rect
private Paint mTextPaint; //绘制文字画笔
private OnCheckedChangeListener mOnCheckedChangedListener; //监听按钮状态变化
public ColorfulRadioButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ColorfulRadioButton);
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
if (attr == R.styleable.ColorfulRadioButton_icon) {
BitmapDrawable drawable = (BitmapDrawable) a.getDrawable(attr);
mIconBitmap = drawable.getBitmap();
} else if (attr == R.styleable.ColorfulRadioButton_color) {
mColor = a.getColor(attr, 0xFF45C01A);
} else if (attr == R.styleable.ColorfulRadioButton_text) {
mText = a.getString(attr);
} else if (attr == R.styleable.ColorfulRadioButton_text_size) {
mTextSize = (int) a.getDimension(attr, TypedValue
.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12,
getResources().getDisplayMetrics()));
}
}
a.recycle();
mTextBound = new Rect();
mTextPaint = new Paint();
mTextPaint.setTextSize(mTextSize);
mTextPaint.setColor(0Xff555555);
mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBound);
setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
setChecked(