Android自定義星星評(píng)分控件
下面為控件的實(shí)現(xiàn)歷程:
此控件高效,直接使用ondraw繪制,先亮照:

由于Android自身的星星評(píng)分控件樣式可以改,但是他的大小不好調(diào)整的缺點(diǎn),只能用small normal這樣的style調(diào)整,自定義不強(qiáng),因此擊發(fā)了我自定義星星控件的欲望。
星星評(píng)分控件的設(shè)計(jì),大體規(guī)劃為:
需要兩張圖片,一顆亮星星,一顆空星星;(當(dāng)然圖片不一定是星星,其他圖片也可以,現(xiàn)在實(shí)驗(yàn)就用星星就好了)星星數(shù)量,間距可以自定義,星星的最小步進(jìn)為0.1,在用戶使用的時(shí)候與Android自帶的方法一樣。
星星控件大體分為兩層,第一層空星星,第二層亮星星,第一層固定,第二層動(dòng)態(tài)繪制,這樣就可以實(shí)現(xiàn)評(píng)分。
在畫星星的時(shí)候,由于在xml得出回來的對(duì)象是drawable,不必再轉(zhuǎn)換為bitmap繪制,故直接繪制drawable,并且提升效率。
繪制drawable需要兩個(gè)方法就夠了
1、設(shè)置繪制到那里:
setBounds(int left ,int top , int right ,int bottom);
2、繪制:
draw(Canvas canvas);

經(jīng)過一個(gè)for循環(huán),五顆空星星就出來了,哈哈
for (int i = 0;i < starCount;i++) {
starEmptyDrawable.setBounds(starSize * i, 0, starSize * (i + 1), starSize);
starEmptyDrawable.draw(canvas);
}

for (int i = 0;i < starCount;i++) {
starEmptyDrawable.setBounds(starSize * i, 0, starSize * (i + 1), starSize);
starEmptyDrawable.draw(canvas);
}
for (int i = 0;i < starCount -1;i++) {
starFillDrawable.setBounds(starSize * i, 0, starSize * (i + 1), starSize);
starFillDrawable.draw(canvas);
}
上面幾行代碼成功強(qiáng)行裝成了一個(gè)評(píng)了4分的
現(xiàn)在,顯示幾顆幾顆的星星無壓力,但是我們目標(biāo)是需要步進(jìn)為0.1的星星。
But
經(jīng)過一系列的實(shí)驗(yàn),發(fā)現(xiàn)Drawable對(duì)象沒有能指定繪制需要的部分,也就是不能繪制半顆星星(反正找不到,找到可以評(píng)論告訴我),然后就采用了折中的方法,把Drawable對(duì)象變?yōu)锽itmap這樣就好辦了,再利用BitmapShader,想繪制多少就繪制多上(就是實(shí)現(xiàn)0.1步進(jìn)),下面為1/3顆的效果:

轉(zhuǎn)換方法:
private Bitmap drawableToBitmap(Drawable drawable)
{
if (drawable == null)return null;
Bitmap bitmap = Bitmap.createBitmap(starSize, starSize, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, starSize, starSize);
drawable.draw(canvas);
return bitmap;
}
把Bitmap轉(zhuǎn)換為畫筆繪制:
paint = new Paint(); paint.setAntiAlias(true); paint.setShader(new BitmapShader(starFillBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
在ondraw()方法繪制(三分之一個(gè))
canvas.drawRect(0,0,starSize/3,starSize,paint);
原理就是這樣,剩下就是邏輯問題了,以下為星星控件代碼:
package com.dming.starbar;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
/**
* Created by DMing on 2016/7/18.
*
*/
public class StarBar extends View{
private int starDistance = 0; //星星間距
private int starCount = 5; //星星個(gè)數(shù)
private int starSize; //星星高度大小,星星一般正方形,寬度等于高度
private float starMark = 0.0F; //評(píng)分星星
private Bitmap starFillBitmap; //亮星星
private Drawable starEmptyDrawable; //暗星星
private OnStarChangeListener onStarChangeListener;//監(jiān)聽星星變化接口
private Paint paint; //繪制星星畫筆
private boolean integerMark = false;
public StarBar(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public StarBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
/**
* 初始化UI組件
*
* @param context
* @param attrs
*/
private void init(Context context, AttributeSet attrs){
setClickable(true);
TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RatingBar);
this.starDistance = (int) mTypedArray.getDimension(R.styleable.RatingBar_starDistance, 0);
this.starSize = (int) mTypedArray.getDimension(R.styleable.RatingBar_starSize, 20);
this.starCount = mTypedArray.getInteger(R.styleable.RatingBar_starCount, 5);
this.starEmptyDrawable = mTypedArray.getDrawable(R.styleable.RatingBar_starEmpty);
this.starFillBitmap = drawableToBitmap(mTypedArray.getDrawable(R.styleable.RatingBar_starFill));
mTypedArray.recycle();
paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(new BitmapShader(starFillBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
}
/**
* 設(shè)置是否需要整數(shù)評(píng)分
* @param integerMark
*/
public void setIntegerMark(boolean integerMark){
this.integerMark = integerMark;
}
/**
* 設(shè)置顯示的星星的分?jǐn)?shù)
*
* @param mark
*/
public void setStarMark(float mark){
if (integerMark) {
starMark = (int)Math.ceil(mark);
}else {
starMark = Math.round(mark * 10) * 1.0f / 10;
}
if (this.onStarChangeListener != null) {
this.onStarChangeListener.onStarChange(starMark); //調(diào)用監(jiān)聽接口
}
invalidate();
}
/**
* 獲取顯示星星的數(shù)目
*
* @return starMark
*/
public float getStarMark(){
return starMark;
}
/**
* 定義星星點(diǎn)擊的監(jiān)聽接口
*/
public interface OnStarChangeListener {
void onStarChange(float mark);
}
/**
* 設(shè)置監(jiān)聽
* @param onStarChangeListener
*/
public void setOnStarChangeListener(OnStarChangeListener onStarChangeListener){
this.onStarChangeListener = onStarChangeListener;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(starSize * starCount + starDistance * (starCount - 1), starSize);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (starFillBitmap == null || starEmptyDrawable == null) {
return;
}
for (int i = 0;i < starCount;i++) {
starEmptyDrawable.setBounds((starDistance + starSize) * i, 0, (starDistance + starSize) * i + starSize, starSize);
starEmptyDrawable.draw(canvas);
}
if (starMark > 1) {
canvas.drawRect(0, 0, starSize, starSize, paint);
if(starMark-(int)(starMark) == 0) {
for (int i = 1; i < starMark; i++) {
canvas.translate(starDistance + starSize, 0);
canvas.drawRect(0, 0, starSize, starSize, paint);
}
}else {
for (int i = 1; i < starMark - 1; i++) {
canvas.translate(starDistance + starSize, 0);
canvas.drawRect(0, 0, starSize, starSize, paint);
}
canvas.translate(starDistance + starSize, 0);
canvas.drawRect(0, 0, starSize * (Math.round((starMark - (int) (starMark))*10)*1.0f/10), starSize, paint);
}
}else {
canvas.drawRect(0, 0, starSize * starMark, starSize, paint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getX();
if (x < 0) x = 0;
if (x > getMeasuredWidth()) x = getMeasuredWidth();
switch(event.getAction()){
case MotionEvent.ACTION_DOWN: {
setStarMark(x*1.0f / (getMeasuredWidth()*1.0f/starCount));
break;
}
case MotionEvent.ACTION_MOVE: {
setStarMark(x*1.0f / (getMeasuredWidth()*1.0f/starCount));
break;
}
case MotionEvent.ACTION_UP: {
break;
}
}
invalidate();
return super.onTouchEvent(event);
}
/**
* drawable轉(zhuǎn)bitmap
*
* @param drawable
* @return
*/
private Bitmap drawableToBitmap(Drawable drawable)
{
if (drawable == null)return null;
Bitmap bitmap = Bitmap.createBitmap(starSize, starSize, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, starSize, starSize);
drawable.draw(canvas);
return bitmap;
}
}
attrs的文件:
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="RatingBar"> <!--星星間距--> <attr format="dimension" name="starDistance"/> <!--星星大小--> <attr format="dimension" name="starSize"/> <!--星星個(gè)數(shù)--> <attr format="integer" name="starCount"/> <!--星星空?qǐng)D--> <attr format="reference" name="starEmpty"/> <!--星星滿圖--> <attr format="reference" name="starFill"/> </declare-styleable> </resources>
XML的使用方式:
<com.dming.starbar.StarBar android:id="@+id/starBar" android:layout_below="@+id/display" android:layout_width="wrap_content" android:layout_height="wrap_content" ratingbar:starEmpty="@drawable/star_empty" ratingbar:starFill="@drawable/star_full" ratingbar:starDistance="5dp" ratingbar:starCount="8" ratingbar:starSize="30dp"/>
<重點(diǎn)>工程源碼:http://xiazai.jb51.net/201701/yuanma/AndroidStarBar(jb51.net).rar
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android開發(fā)之拖動(dòng)條/滑動(dòng)條控件、星級(jí)評(píng)分控件功能的實(shí)例代碼
- Android開發(fā)之自定義星星評(píng)分控件RatingBar用法示例
- Android自定義星星可滑動(dòng)評(píng)分控件
- Android RatingBar星星評(píng)分控件實(shí)例代碼
- Android評(píng)分控件RatingBar使用實(shí)例解析
- Android評(píng)分RationBar控件使用詳解
- Android星級(jí)評(píng)分條控件RatingBar使用詳解
- Android UI控件RatingBar實(shí)現(xiàn)自定義星星評(píng)分效果
- Android控件之RatingBar自定義星級(jí)評(píng)分樣式
- Android自定義View仿大眾點(diǎn)評(píng)星星評(píng)分控件
相關(guān)文章
Android開發(fā)準(zhǔn)確獲取手機(jī)IP地址的兩種方式
這篇文章主要介紹了Android開發(fā)準(zhǔn)確獲取手機(jī)IP地址的兩種方式,需要的朋友可以參考下2020-03-03
Android仿微信雷達(dá)掃描效果的實(shí)現(xiàn)方法
最近看了一個(gè)視頻講了一種微信雷達(dá)掃描的實(shí)現(xiàn)方案,借鑒了一下,自己也寫一個(gè)玩玩,所以下面這篇文章主要給大家介紹了利用Android模仿微信雷達(dá)掃描效果的實(shí)現(xiàn)方法,需要的朋友可以參考借鑒,下面來一起看看吧。2017-06-06
Android中RecyclerView實(shí)現(xiàn)橫向滑動(dòng)代碼
這篇文章主要介紹了Android中RecyclerView實(shí)現(xiàn)橫向滑動(dòng)代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
Kotlin + Flow 實(shí)現(xiàn)Android 應(yīng)用初始化任務(wù)啟動(dòng)庫
這篇文章主要介紹了Kotlin + Flow 實(shí)現(xiàn)Android 應(yīng)用初始化任務(wù)啟動(dòng)庫的方法,幫助大家更好的理解和學(xué)習(xí)使用Android,感興趣的朋友可以了解下2021-03-03
Android 實(shí)現(xiàn)圓圈擴(kuò)散水波動(dòng)畫效果兩種方法
這篇文章主要介紹了Android 實(shí)現(xiàn)圓圈擴(kuò)散水波動(dòng)畫效果兩種方法,需要的朋友可以參考下2018-05-05
Android實(shí)現(xiàn)多個(gè)連續(xù)帶數(shù)字圓圈效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)多個(gè)連續(xù)帶數(shù)字圓圈效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
android SectorMenuView底部導(dǎo)航扇形菜單的實(shí)現(xiàn)代碼
這篇文章主要介紹了android SectorMenuView底部導(dǎo)航扇形菜單的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
Android編程實(shí)現(xiàn)使用handler在子線程中更新UI示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)使用handler在子線程中更新UI,涉及Android線程與界面布局相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
詳解Android App中創(chuàng)建ViewPager組件的方法
這篇文章主要介紹了詳解Android App中創(chuàng)建ViewPager組件的方法,ViewPager最基本的功能就是可以使視圖滑動(dòng),需要的朋友可以參考下2016-03-03

