快捷導(dǎo)航

Android自定義星星評(píng)分控件

更新時(shí)間：2017年01月04日 08:40:06 作者：大家請(qǐng)叫我明哥

這篇文章主要為大家詳細(xì)介紹了Android自定義星星評(píng)分控件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

下面為控件的實(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，在用戶(hù)使用的時(shí)候與Android自帶的方法一樣。

星星控件大體分為兩層，第一層空星星，第二層亮星星，第一層固定，第二層動(dòng)態(tài)繪制，這樣就可以實(shí)現(xiàn)評(píng)分。

在畫(huà)星星的時(shí)候，由于在xml得出回來(lái)的對(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)過(guò)一個(gè)for循環(huán)，五顆空星星就出來(lái)了，哈哈

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)在，顯示幾顆幾顆的星星無(wú)壓力，但是我們目標(biāo)是需要步進(jìn)為0.1的星星。
But
經(jīng)過(guò)一系列的實(shí)驗(yàn)，發(fā)現(xiàn)Drawable對(duì)象沒(méi)有能指定繪制需要的部分，也就是不能繪制半顆星星（反正找不到，找到可以評(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)換為畫(huà)筆繪制：

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);

原理就是這樣，剩下就是邏輯問(wèn)題了，以下為星星控件代碼：

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)聽(tīng)星星變化接口
 private Paint paint;   //繪制星星畫(huà)筆
 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)聽(tīng)接口
  }
  invalidate();
 }

 /**
  * 獲取顯示星星的數(shù)目
  *
  * @return starMark
  */
 public float getStarMark(){
  return starMark;
 }


 /**
  * 定義星星點(diǎn)擊的監(jiān)聽(tīng)接口
  */
 public interface OnStarChangeListener {
  void onStarChange(float mark);
 }

 /**
  * 設(shè)置監(jiān)聽(tīng)
  * @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"/>
  <!--星星滿(mǎn)圖-->
  <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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: