這個(gè)自定義view的出現(xiàn)背景是因?yàn)槲覀兊捻?xiàng)目中有直播，所以需要一個(gè)控件來顯示給用戶當(dāng)前的直播狀態(tài)。其實(shí)就是一個(gè)圓角矩形，并不難畫。難畫的是中間有一個(gè)圓點(diǎn)需要在兩種顏色漸變過渡。當(dāng)時(shí)也是想了好久。寫在這里希望對(duì)自己對(duì)大家有些幫助?？聪滦Ч?/p>
為什么視頻轉(zhuǎn)換成gif都會(huì)變得很卡，但是之前的效果真的是不卡 真的不卡 真的不卡
公司招了一個(gè)動(dòng)效設(shè)計(jì)師，所以他是拼命的給app設(shè)計(jì)動(dòng)效，我們這些開發(fā)也是拼了命的去實(shí)現(xiàn)。不夸張的說我們公司的app首頁(yè)沒有不能動(dòng)的。即使是提示文字也會(huì)動(dòng)起來。他說這樣用戶體驗(yàn)會(huì)很好。哈哈哈，用戶的視覺體驗(yàn)確實(shí)好了。有時(shí)候自己看還是感覺很流弊。
好吧說重點(diǎn)
首先我們要先畫一個(gè)圓角矩形。圓角矩形還是很好畫的。但是這是需求改過一次的，之前他讓從一個(gè)點(diǎn)慢慢過渡到圓角矩形，后來以不能實(shí)現(xiàn)給婉拒了。（其實(shí)用path很好實(shí)現(xiàn)）哈哈哈
// 畫出外圓角邊框
mPaint.setColor(ContextCompat.getColor(mContext, R.color.notice_color));mPaint.setStyle(Paint.Style.STROKE);canvas.drawRoundRect(new RectF(3, 3, mWidth - 3, mHeight - 3), radius, radius, mPaint);
上面是畫了圓角的邊框，顏色固定還是特別好畫。對(duì)自定義view入門的同學(xué)也是非常的簡(jiǎn)單。
// 畫出左方的圓點(diǎn)mPaint.setStyle(Paint.Style.FILL);int colorFrom = getColorFrom(ContextCompat.getColor(mContext, R.color.circle_start_color), ContextCompat.getColor(mContext, R.color.circle_end_color), change_color * 0.1f);mPaint.setColor(colorFrom);canvas.drawCircle(30, (mHeight) / 2, circle_radius, mPaint);
上面是畫重中之重的圓點(diǎn)。我們可以看到有一個(gè)方法特別的重要---getColorFrom();這個(gè)方法可以取到漸變色的某一點(diǎn)的顏色，我們讓有一個(gè)時(shí)間差，那么漸變色的漸變過渡的效果就做出來了。
/** * 暴露給外層調(diào)用 用于提示給用戶攝像頭的播放狀態(tài) * * @param text */public void setNoticeText(String text) { this.text_notice = text; invalidate();}
這個(gè)方法是暴露給外層，如果攝像頭的狀態(tài)改變，那么也可以實(shí)時(shí)通知用戶。
/** * 取兩個(gè)顏色間的漸變區(qū)間 中的某一點(diǎn)的顏色 * * @param startColor * @param endColor * @param radio * @return */public int getColorFrom(int startColor, int endColor, float radio) { int redStart = Color.red(startColor); int blueStart = Color.blue(startColor); int greenStart = Color.green(startColor); int redEnd = Color.red(endColor); int blueEnd = Color.blue(endColor); int greenEnd = Color.green(endColor); int red = (int) (redStart + ((redEnd - redStart) * radio + 0.5)); int greed = (int) (greenStart + ((greenEnd - greenStart) * radio + 0.5)); int blue = (int) (blueStart + ((blueEnd - blueStart) * radio + 0.5)); return Color.argb(255, red, greed, blue);}
這個(gè)方法通過取兩個(gè)顏色漸變區(qū)間中某一點(diǎn)的顏色，那么我們每次重繪的時(shí)候，都會(huì)取這一點(diǎn)下一點(diǎn)的顏色。那么就會(huì)有過渡的效果。
目前我重新整理了一下代碼，編輯了styleable文件，將很多屬性暴露了出來。
包括漸變起始顏色，文字顯示等等。
有需要的可以看看指正。
