話說我們終于來到了真正的自定義 view 環(huán)節(jié)了，用 canvas 來繪制我們想要的一切了葵硕。開始嘛梳庆，總要有點不一樣的，咱們的開始從 自定義 ratingBar 開始鳞溉，系統(tǒng)的 ratingBar 那是一個蛋星星疼啊瘾带，不能調(diào)整星星大小，要是替換星星圖片資源的話熟菲，還容易出問題看政，不是星星顯示不全就是下面長腳了 ~
所以 自定義 ratingBar 是非常有顯示意義的，ratingBar 說難不難抄罕，說簡單也不簡單允蚣，對于初學(xué)者練手及其具有重要意義，通過 自定義 ratingBar 我們可以熟悉 自定義 view 中所有的代碼細(xì)節(jié)贞绵，寫完我們自己的 ratingBar 后厉萝，自定義 view 對于我們來說就不算陌生了恍飘。
這是我寫的：
第一個星星的黑框不要在意榨崩，只是表示圖片的尺寸范圍，項目種已經(jīng)去掉了章母。這個 ratingBar 打磨的差不多了母蛛，大家可以直接復(fù)制過去用滴 ~
項目地址：BW_Libs
我用的是矢量圖，矢量圖在 4.x 上的兼容太是個問題了乳怎，具體請看：
項目思路
ratingBar 的思路并不難彩郊，就是根據(jù)數(shù)量畫星星，星星一般都是圖片蚪缀，區(qū)別是 png 還是矢量圖秫逝，當(dāng)然也可以不用圖全程用 path 畫，但是我是沒找到畫星星的 paht 路徑出來询枚，有心無力啊
我這里的 ratingBar 星星可以調(diào)節(jié)大小违帆，默認(rèn)我給了個 24dp，大家在使用時高自適應(yīng)就行金蜀，高根據(jù)設(shè)置的星星大小走刷后，為了圖省事，星星都是正方形的哦
自定義參數(shù)沒幾個渊抄，如下：
<declare-styleable name="MyRatingBar">
<!--星星間距-->
<attr name="starStep" format="dimension"/>
<!--星星大小-->
<attr name="starSize" format="dimension"/>
<!--當(dāng)前星星個數(shù)-->
<attr name="currentStarCount" format="float"/>
<!-- 最大星星個數(shù)-->
<attr name="maxStarCount" format="integer"/>
<!--星星選中圖-->
<attr name="drawable_select" format="reference"/>
<!--星星半選中圖-->
<attr name="drawable_halfSelect" format="reference"/>
<!--星星未選中圖-->
<attr name="drawable_unSelect" format="reference"/>
<!--是或可以觸摸-->
<attr name="canTouch" format="boolean"/>
</declare-styleable>
基本仿照系統(tǒng)原生的 ratingbar ，但是添加了星星尺寸和間距。圖片方面因為要支持半星所以有3種圖：全星勾习，半星族奢，沒星
繪制上也是簡單的很，canvas 每繪制一張圖，canvas 位移指定寬度
selectDrawable.draw(canvas)
canvas?.translate((startSize + startSetp).toFloat(), 0f)
ratingBar 中最有難度的就是區(qū)分星星是全的還是半的還是沒有的了抱慌，我是利用一個集合存儲每個星星的顯示狀態(tài)逊桦，根據(jù)設(shè)置的評分?jǐn)?shù)，計算全星抑进，半星强经，沒星的分界點，我這里主要有小數(shù)就算半星
對評分?jǐn)?shù)取整寺渗，評分?jǐn)?shù)要是大于取整的數(shù)匿情，那說明有小數(shù)，就有半星信殊，那么分界點就是這個取整之后的整數(shù)了炬称，然后往星星顯示狀態(tài)的集合里寫入相應(yīng)個數(shù)的數(shù)據(jù)就行
fun cauculateStartState() {
startInfoList.clear()
if (currentStartCount == 0f) {
(1..maxStartCount).forEach { startInfoList.add(STATE_UNSELECT) }
return
}
var index: Int = currentStartCount.toInt()
if (index >= 1) (1..index).forEach { startInfoList.add(STATE_SELECT) }
// 說明有小數(shù)位
if (currentStartCount > index) {
startInfoList.add(STATE_HALF)
index += 2
} else {
index++
}
if (maxStartCount >= index) {
(index..maxStartCount).forEach { startInfoList.add(STATE_UNSELECT) }
}
}
觸摸的話也不難，用觸摸點的 x 坐標(biāo) / 星星大小+分割大小涡拘，分析得到 float 值玲躯，根據(jù)小數(shù)位范圍判斷是全星還是半星
override fun onTouchEvent(event: MotionEvent?): Boolean {
if (!canTouch) return false
if (event?.action == MotionEvent.ACTION_DOWN) {
if (event.x >= width) {
setRating(maxStartCount.toFloat())
return true
}
var index_float: Float = event.x / (startSize + startSetp)
var index_int: Int = index_float.toInt()
if (index_float <= (index_int + 0.3f)) {
setRating(index_int.toFloat())
return true
}
if (index_float > (index_int + 0.3f) && index_float < (index_int + 0.7f)) {
setRating(index_int + 0.5f)
return true
}
if (index_float >= (index_int + 0.7f)) {
setRating((index_int + 1).toFloat())
return true
}
}
return true
}
