1.概述
今天給大家?guī)淼氖悄７翾Q7.0標(biāo)題欄之自定義Toolbar
<big>github項(xiàng)目地址：[模仿QQ7.0標(biāo)題欄之自定義Toolbar]
(https://github.com/laotan7237/EasyReader/blob/master/app/src/main/java/com/laotan/easyreader/view/ColorFilterToolBar.java)</big>
作者原創(chuàng)，轉(zhuǎn)載請注明出處謝謝珊蟀。
效果圖：
2.正文
自定義toolbar
首先我們先來說說自定義Toolbar菊值，至于怎么讓狀態(tài)欄和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++) {
// 設(shè)置畫筆顏色為自定義顏色
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)));
}
}
我們先單獨(dú)說說這個顏色改變的方法原理是什么樣的俊性？
其實(shí)很簡單就是傳入一個開頭（startValue）和結(jié)尾的數(shù)字（endValue），然后再傳入一個0-1的數(shù)（fraction）描扯，這時候fraction可以是各種函數(shù)不過要是0-1之間定页。
/**
* 顏色變化過度
*
* @param fraction
* @param startValue
* @param endValue
* @return
*/
假設(shè)我們傳入的start是FFFFFFFF,end是00000000
public Object evaluateColor(double fraction, Object startValue, Object endValue) {
int startInt = (Integer) startValue;//這個數(shù)字我們就不管了。還是當(dāng)作他是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)));
}
大家自己多看看理解下就可以了绽诚。
構(gòu)造方法我就不說了典徊，onSizeChanged就是獲取到toolbar的高度。
重點(diǎn)看看ondraw方法就可以了
@Override
protected void onDraw(Canvas canvas) {
for (int i = 1; i <= windowWidth; i++) {
// 設(shè)置畫筆顏色為自定義顏色
mPaint.setColor((Integer) evaluateColor(Math.pow(i/ windowWidth,2),STRAT_BLUE,END_BLUE));
canvas.drawRect(i-1, 0, i, height,mPaint);
}
}
這個方法里面我們用一個for循環(huán)去遍歷屏幕寬度恩够，把屏幕寬度分成諾干個卒落，1080*1920就是1080份以此類推。
然后我們給畫筆設(shè)置顏色 mPaint.setColor((Integer) evaluateColor(Math.pow(i/ windowWidth,2),STRAT_BLUE,END_BLUE));
這個畫筆顏色就是通過上面那個方法得到一個顏色值蜂桶，Math.pow(i/ windowWidth,2)這個就是一個函數(shù)也可以直接用i/ windowWidth儡毕；后面這個是一次函數(shù)。一次函數(shù)的圖像變化就是顏色變化規(guī)律。
核心思想
我們要把toolbar分成諾干個小矩形腰湾，然后他的寬度是1px雷恃，高度是onsizechange獲取的所以就有 canvas.drawRect(i-1, 0, i, height,mPaint)
經(jīng)過for循環(huán)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="我是標(biāo)題"
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"這個就是為了讓標(biāo)題欄和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>
//沉浸狀態(tài)欄
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowTranslucentStatus">true</item>
//可以讓appbarlayout從最頂上開始倒槐，狀態(tài)欄會覆蓋toolbar
//ActionBarDrawerToggle設(shè)置顏色
<item name="colorControlNormal">@android:color/white</item>
</style>
style在mainifest中的使用我就不說了。
之后可能還會寫寫QQ7.0下面會動的小人哈哈.
好了文章到這里就結(jié)束了附井，如果哪里寫的不好或者不懂讨越，請大家多反饋。喜歡的話記得給個star永毅。
