1.概述
今天给大家带来的是模仿QQ7.0标题栏之自定义Toolbar
<big>github项目地址：[模仿QQ7.0标题栏之自定义Toolbar]
(https://github.com/laotan7237/EasyReader/blob/master/app/src/main/java/com/laotan/easyreader/view/ColorFilterToolBar.java)</big>
作者原创，转载请注明出处谢谢。
效果图：
F29FF03E64DE793AA704581078ED1491.jpg
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中配置这句 <item name="android:windowTranslucentStatus">true</item>如下：
<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。
