高仿微信app实战（二）- 自定义View实现底部导航栏

高仿微信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(