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布局里面的代码如下
注意到toolbar有这么一个属性android:fitsSystemWindows="true"这个就是为了让标题栏和toolbar颜色相同的。不过还要在stayle中配置这句
style在mainifest中的使用我就不说了。
之后可能还会写写QQ7.0下面会动的小人哈哈.
好了文章到这里就结束了，如果哪里写的不好或者不懂，请大家多反馈。喜欢的话记得给个star。