Android标题栏渐变色，沉寂式状态栏

1.概述

今天给大家带来的是模仿QQ7.0标题栏之自定义Toolbar
github项目地址：[模仿QQ7.0标题栏之自定义Toolbar]
(https://github.com/laotan7237/EasyReader/blob/master/app/src/main/java/com/laotan/easyreader/view/ColorFilterToolBar.java)
作者原创，转载请注明出处谢谢。
效果图：

2.正文

自定义toolbar

首先我们先来说说自定义Toolbar，至于怎么让状态栏和Toolbar颜色相同等等在来说。
以下就是自定义Toolbar的代码了。接下来开始分析：

public class ColorFilterToolBar extends Toolbar {

    public static final int STRAT_BLUE= 0xFF4D8DFF;
    public static final int END_BLUE= 0xFF37B7FB;
    private Paint mPaint;
    private float windowWidth;
    private int height;

    public ColorFilterToolBar(Context context) {
        this(context, null);
    }

    public ColorFilterToolBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }


    public ColorFilterToolBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);
        WindowManager wm = (WindowManager) getContext()
                .getSystemService(Context.WINDOW_SERVICE);
        windowWidth = wm.getDefaultDisplay().getWidth();//获取屏幕宽度
    }

    @Override
    protected void onDraw(Canvas canvas) {
        for (int i = 1; i <= windowWidth; i++) {
            // 设置画笔颜色为自定义颜色
            mPaint.setColor((Integer) evaluateColor(Math.pow(i/ windowWidth,2),STRAT_BLUE,END_BLUE));
            canvas.drawRect(i-1, 0, i, height,mPaint);
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        height = h;
    }

    /**
     * 颜色变化过度
     *
     * @param fraction
     * @param startValue
     * @param endValue
     * @return
     */
    public Object evaluateColor(double fraction, Object startValue, Object endValue) {
        int startInt = (Integer) startValue;
        int startA = (startInt >> 24) & 0xff;
        int startR = (startInt >> 16) & 0xff;
        int startG = (startInt >> 8) & 0xff;
        int startB = startInt & 0xff;

        int endInt = (Integer) endValue;
        int endA = (endInt >> 24) & 0xff;
        int endR = (endInt >> 16) & 0xff;
        int endG = (endInt >> 8) & 0xff;
        int endB = endInt & 0xff;

        return (startA + (int) (fraction * (endA - startA))) << 24 |
                (startR + (int) (fraction * (endR - startR))) << 16 |
                (startG + (int) (fraction * (endG - startG))) << 8 |
                (startB + (int) (fraction * (endB - startB)));
    }
}

我们先单独说说这个颜色改变的方法原理是什么样的？
其实很简单就是传入一个开头（startValue）和结尾的数字（endValue），然后再传入一个0-1的数（fraction），这时候fraction可以是各种函数不过要是0-1之间。

   /**
     * 颜色变化过度
     *
     * @param fraction
     * @param startValue
     * @param endValue
     * @return
     */
     假设我们传入的start是FFFFFFFF,end是00000000
    public Object evaluateColor(double fraction, Object startValue, Object endValue) {
        int startInt = (Integer) startValue;//这个数字我们就不管了。还是当作他是FFFFFFFF
        int startA = (startInt >> 24) & 0xff;
        startInt >> 24=0xff  0xff&0xff = 0xff;下面以此类推
        int startR = (startInt >> 16) & 0xff;
        int startG = (startInt >> 8) & 0xff;
        int startB = startInt & 0xff;

        int endInt = (Integer) endValue;
        int endA = (endInt >> 24) & 0xff;
         startInt >> 24=0x00  0x00&0xff = 0x00;下面以此类推
        int endR = (endInt >> 16) & 0xff;
        int endG = (endInt >> 8) & 0xff;
        int endB = endInt & 0xff;

        return (startA + (int) (fraction * (endA - startA))) << 24 |
                (startR + (int) (fraction * (endR - startR))) << 16 |
                (startG + (int) (fraction * (endG - startG))) << 8 |
                (startB + (int) (fraction * (endB - startB)));
    }

大家自己多看看理解下就可以了。

构造方法我就不说了，onSizeChanged就是获取到toolbar的高度。

重点看看ondraw方法就可以了

    @Override
    protected void onDraw(Canvas canvas) {
        for (int i = 1; i <= windowWidth; i++) {
            // 设置画笔颜色为自定义颜色
            mPaint.setColor((Integer) evaluateColor(Math.pow(i/ windowWidth,2),STRAT_BLUE,END_BLUE));
            canvas.drawRect(i-1, 0, i, height,mPaint);
        }
    }

这个方法里面我们用一个for循环去遍历屏幕宽度，把屏幕宽度分成诺干个，1080*1920就是1080份以此类推。
然后我们给画笔设置颜色 mPaint.setColor((Integer) evaluateColor(Math.pow(i/ windowWidth,2),STRAT_BLUE,END_BLUE));
这个画笔颜色就是通过上面那个方法得到一个颜色值，Math.pow(i/ windowWidth,2)这个就是一个函数也可以直接用i/ windowWidth；后面这个是一次函数。一次函数的图像变化就是颜色变化规律。

核心思想

我们要把toolbar分成诺干个小正方形，然后他的宽度是1px，高度是onsizechange获取的所以就有 canvas.drawRect(i-1, 0, i, height,mPaint)
经过for循环1080次画了1080个小正方形就形成了背景图。

使用过程

• 在xml布局里面的代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.laotan.easyreader.view.ColorFilterToolBar
        android:id="@+id/toolbar_base_activity"
        android:layout_width="match_parent"
        android:layout_height="72dp"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:fitsSystemWindows="true"
        app:theme="@style/ToolbarStyle">
        <ImageView
            android:id="@+id/iv_base_back"
            android:layout_marginLeft="@dimen/dp_10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/icon_back"/>
        <TextView
            android:id="@+id/tv_toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:maxLines="1"
            android:text="我是标题"
            android:textColor="@color/colorWhite"
            android:textSize="20sp" />
        </com.laotan.easyreader.view.ColorFilterToolBar>

    <FrameLayout
        android:id="@+id/fl_toolbar_base"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

注意到toolbar有这么一个属性android:fitsSystemWindows=”true”这个就是为了让标题栏和toolbar颜色相同的。不过还要在stayle中配置这句 true如下：

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorTheme</item>
        <item name="colorPrimaryDark">@color/colorTheme</item>
        <item name="colorAccent">@color/colorAccent</item>

        //沉浸状态栏
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowTranslucentStatus">true</item>
        //可以让appbarlayout从最顶上开始，状态栏会覆盖toolbar

        //ActionBarDrawerToggle设置颜色
        <item name="colorControlNormal">@android:color/white</item>
    </style>

style在mainifest中的使用我就不说了。
之后可能还会写写QQ7.0下面会动的小人哈哈.
好了文章到这里就结束了，如果哪里写的不好或者不懂，请大家多反馈。喜欢的话记得给个star。