Android简单的可设置间隔评分条的实现

最近比较忙,有一段时间没有写博客了,之前项目写过一个很简单的评分条,来分享一下:

安卓原生提供了SeekBar可拖动的评分条,不过有的时候并不怎么好用,当只需要去显示评分条(比如几颗星的评分)的情况下,不需要拖动,SeekBar本身没有方法去设置单项之间的间隔,比较普遍的做法就是去修改一下图片,在图片两边适当添加一些距离.用起来不是特别舒服,所以自己实现一下.

代码实现

代码比较简单,就直接贴一下.

先设置一下自定义属性attr:

<!--普通评分条图片-->
<attr name="mkNormalDrawable" format="reference"/>
<!--选中评分条图片-->
<attr name="mkSelectDrawable" format="reference"/>
<!--评分项间隔-->
<attr name="mkInterval" format="dimension"/>
<!--评分项高度-->
<attr name="mkHeight" format="dimension"/>
<!--评分项宽度-->
<attr name="mkWidth" format="dimension"/>
<!--评分项宽度-->
<attr name="mkSize" format="integer"/>
<declare-styleable name="MarkView">
<attr name="mkNormalDrawable"/>
<attr name="mkSelectDrawable"/>
<attr name="mkInterval"/>
<attr name="mkHeight"/>
<attr name="mkWidth"/>
<attr name="mkSize"/>
</declare-styleable>

MarkView:

package com.teda.makerunion.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.teda.makerunion.R;
import com.teda.makerunion.utils.LogUtils;

/**
* 评分条
* Created by junweiliu on 16/6/22.
*/
public class MarkView extends LinearLayout {

/**
* 需要创建的评分图片的个数
*/
private int childViewCount = 5;
/**
* 设置圆点间margin
*/
private int mInterval;
/**
* 当前选中的位置
*/
private int mCurrentPostion = 3;
/**
* 普通显示的图片
*/
private Bitmap normalBp;
/**
* 选中时显示的图片
*/
private Bitmap selectBp;
/**
* 评分单项宽度
*/
private int mWidth;
/**
* 评分单项高度
*/
private int mHeight;

public MarkView(Context context) {
this(context, null);
}

public MarkView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public MarkView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 获取自定义属性
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MarkView);
childViewCount = ta.getInteger(R.styleable.MarkView_mkSize, 5);
normalBp = drawableToBitamp(ta.getDrawable(R.styleable.MarkView_mkNormalDrawable));
selectBp = drawableToBitamp(ta.getDrawable(R.styleable.MarkView_mkSelectDrawable));
mInterval = ta.getDimensionPixelOffset(R.styleable.MarkView_mkInterval, 3);
mWidth = ta.getDimensionPixelOffset(R.styleable.MarkView_mkWidth, 0);
mHeight = ta.getDimensionPixelOffset(R.styleable.MarkView_mkHeight, 0);
ta.recycle();
init();
}

/**
* 初始化数据
*/
private void init() {
// 处理自定义属性
if (null == normalBp) {
normalBp = BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.star_dark);
}
if (null == selectBp) {
selectBp = BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.star_light);
}
if (0 == mWidth) {
mWidth = Math.max(selectBp.getWidth(), normalBp.getWidth());
}
if (0 == mHeight) {
mHeight = Math.max(selectBp.getWidth(), normalBp.getWidth());
}
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
// 如果是wrap_content设置为图片宽高,否则设置为父容器宽高
setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? sizeWidth : (mWidth + mInterval) * childViewCount
, (heightMode == MeasureSpec.EXACTLY) ? sizeHeight
: mHeight);
}

/**
* 重绘
*
* @param canvas
*/
@Override
protected void dispatchDraw(Canvas canvas) {
// 创建指示器圆点
if (getChildCount() < childViewCount && getChildCount() == 0) {
for (int i = 0; i < childViewCount; i++) {
addView(makeMarkItem());
}
}
// 设置默认选中指示器
setCurrentSteps(mCurrentPostion);
super.dispatchDraw(canvas);
}

/**
* 创建评分项
*
* @return
*/
private View makeMarkItem() {
ImageView iv = new ImageView(getContext());
LinearLayout.LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
lp.width = mWidth;
lp.height = mHeight;
lp.rightMargin = mInterval;
iv.setImageBitmap(normalBp);
iv.setLayoutParams(lp);
return iv;
}

/**
* 设置当前个数
*
* @param num
*/
public void setStepsNum(int num) {
this.mCurrentPostion = num;
setCurrentSteps(mCurrentPostion);
//        invalidate();
}

/**
* 设置当前的选中位置,进行图片替换
*
* @param currentSteps
*/
public void setCurrentSteps(int currentSteps) {
for (int i = 0; i < getChildCount(); i++) {
if (i < currentSteps)
((ImageView) getChildAt(i)).setImageBitmap(selectBp);
else
((ImageView) getChildAt(i)).setImageBitmap(normalBp);
}
}

/**
* drawable转bitmap
*
* @param drawable
* @return
*/
private Bitmap drawableToBitamp(Drawable drawable) {
if (null == drawable) {
return null;
}
if (drawable instanceof BitmapDrawable) {
BitmapDrawable bd = (BitmapDrawable) drawable;
return bd.getBitmap();
}
int w = drawable.getIntrinsicWidth();
int h = drawable.getIntrinsicHeight();
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, w, h);
drawable.draw(canvas);
return bitmap;
}
}

需要注意的是在下边两个地方中的默认图片需要自己提供一下.

if (null == normalBp) {
normalBp = BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.star_dark);
}
if (null == selectBp) {
selectBp = BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.star_light);
}

用法也比较简单,只需要在用到的地方调用setStepsNum方法即可.设置评分条单项之间间距可以通过设置控件的mkInterval属性来控制.