Android自定义星星评分控件,高效

下面为控件的实现历程:

此控件高效,直接使用ondraw绘制,先亮照:

由于Android自身的星星评分控件样式可以改,但是他的大小不好调整的缺点,只能用small normal这样的style调整,自定义不强,因此击发了我自定义星星控件的欲望。

星星评分控件的设计,大体规划为:

需要两张图片,一颗亮星星,一颗空星星;(当然图片不一定是星星,其他图片也可以,现在实验就用星星就好了)星星数量,间距可以自定义,星星的最小步进为0.1,在用户使用的时候与Android自带的方法一样。

星星控件大体分为两层,第一层空星星,第二层亮星星,第一层固定,第二层动态绘制,这样就可以实现评分。

在画星星的时候,由于在xml得出回来的对象是drawable,不必再转换为bitmap绘制,故直接绘制drawable,并且提升效率。

绘制drawable需要两个方法就够了

1、设置绘制到那里:

setBounds(int left ,int top , int right ,int bottom);

2、绘制:

draw(Canvas canvas);

设置错误setBounds会导致绘制变形:

把setbounds设置好后就一切正常:

经过一个for循环,五颗空星星就出来了,哈哈

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

上面几行代码成功强行装成了一个评了4分的

现在,显示几颗几颗的星星无压力,但是我们目标是需要步进为0.1的星星。

But

经过一系列的实验,发现Drawable对象没有能指定绘制需要的部分,也就是不能绘制半颗星星(反正找不到,找到可以评论告诉我),然后就采用了折中的方法,把Drawable对象变为Bitmap这样就好办了,再利用BitmapShader,想绘制多少就绘制多上(就是实现0.1步进),下面为1/3颗的效果:

转换方法:

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转换为画笔绘制:

    paint = new Paint();
    paint.setAntiAlias(true);
    paint.setShader(new BitmapShader(starFillBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
    在ondraw()方法绘制(三分之一个)
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;  //星星个数
    private int starSize;     //星星高度大小,星星一般正方形,宽度等于高度
    private float starMark = 0.0F;   //评分星星
    private Bitmap starFillBitmap; //亮星星
    private Drawable starEmptyDrawable; //暗星星
    private OnStarChangeListener onStarChangeListener;//监听星星变化接口
    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));
    }

    /**
     * 设置是否需要整数评分
     * @param integerMark
     */
    public void setIntegerMark(boolean integerMark){
        this.integerMark = integerMark;
    }

    /**
     * 设置显示的星星的分数
     *
     * @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);  //调用监听接口
        }
        invalidate();
    }

    /**
     * 获取显示星星的数目
     *
     * @return starMark
     */
    public float getStarMark(){
        return starMark;
    }

    /**
     * 定义星星点击的监听接口
     */
    public interface OnStarChangeListener {
        void onStarChange(float mark);
    }

    /**
     * 设置监听
     * @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转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"/>
        <!--星星个数-->
        <attr format="integer" name="starCount"/>
        <!--星星空图-->
        <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"/>

<重点>工程源码:http://download.csdn.net/detail/a756213932/9579325

时间: 2024-10-13 12:30:08

Android自定义星星评分控件,高效的相关文章

(转载)Android自定义标签列表控件LabelsView解析

Android自定义标签列表控件LabelsView解析 作者 donkingliang 关注 2017.03.15 20:59* 字数 759 阅读 406评论 0喜欢 3 无论是在移动端的App,还是在前端的网页,我们经常会看到下面这种标签的列表效果: 标签列表 标签从左到右摆放,一行显示不下时自动换行.这样的效果用Android源生的控件很不好实现,所以往往需要我们自己去自定义控件.我在开发中就遇到过几次要实现这样的标签列表效果,所以就自己写了个控件,放到我的GitHub,方便以后使用.有

android 自定义圆形imageview控件

首先,定义定义圆形Imageview类: import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.PorterDu

Android星星评分控件RatingBar的使用

在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里主要需要指定的是总星星数量,和当前的值,也就是总级别跟当前级别的量. <RatingBar   android:id="@+id/ratingBar"   android:numStars="5" //总级别,总分,星星个数   android:rating=&q

iOS 类似美团或饿了么评价中的星星评分控件

1.做的好几个项目都用到了评分控件,可以用来展示评分,也可以用来写评分,图片和间距大小都可以定制,之前就已经简单封装了一个,现在把它分享出来,有需要的拿去用. 2.下面是展示截图: image.png image.png 3.代码 https://github.com/alan12138/Custom-Control/tree/master/StarView 原文地址:https://www.cnblogs.com/alan12138/p/9634916.html

Android自定义标签列表控件LabelsView解析

版权声明:本文为博主原创文章,未经博主允许不得转载. 无论是在移动端的App,还是在前端的网页,我们经常会看到下面这种标签的列表效果:   标签从左到右摆放,一行显示不下时自动换行.这样的效果用Android源生的控件很不好实现,所以往往需要我们自己去自定义控件.我在开发中就遇到过几次要实现这样的标签列表效果,所以就自己写了个控件,放到我的GitHub,方便以后使用.有兴趣的同学也欢迎访问我的GitHub.查看源码实现和使用该控件.下面我将为大家介绍该控件的具体实现和使用. 要实现这样一个标签列

Android 自定义SwitchButton开关控件

SwitchButton开关控件早已经非常流行.有各种各样的样式,SwitchButton开关控件一般用于app软件设置那里,控制缓存.声音.提示.下载等等.是具有很好的UI体验以及用户的习惯性.那么再下面介绍一个SwitchButton开关控件.并附上源码. 源码下载:点击 一.看实现的效果图 二.自定义SwitchButton 这是一个继承CheckBox的SwitchButton类.来实现做这些动画效果的,首先准备好这些图片,然后canvas绘制控件 的边框.背景.以及按钮.绘制时候加上相

android自定义刷新类控件

android虽然定义了种类非常丰富的控件,但是有的时候这些自定义的控件还是不能满足我的要求,为了能够适配更多的需求,我们需要在原有的基础上进行自定义控件. 今天我向大家介绍的就是android中最常见的刷新类控件.因为我们最近正在参加一个项目,在项目组长的带领下,我学到了很多的东西,这对我的android技术的提升非常大,定义一个自定义控件可能不是很难,但是如何让这个自定义控件更加有效.更加快速地运行. 首先我们需要建立一个自定义控件类: package com.example.ui.widg

如何打造Android自定义的下拉列表框控件

一.概述 Android中的有个原生的下拉列表控件Spinner,但是这个控件有时候不符合我们自己的要求, 比如有时候我们需要类似windows 或者web网页中常见的那种下拉列表控件,类似下图这样的: 这个时候只有自己动手写一个了.其实实现起来不算很难, 本文实现的方案是采用TextView +ImageView+PopupWindow的组合方案. 先来看看我们的自己写的控件效果图吧:(源码在文章下面最后给出哈!) 二.自定义下拉列表框控件的实现 1. 自定义控件用到的布局文件和资源: 结果框

Android——自定义镂空遮盖控件

刚学完ViewDragHelper和PorterDuffXferMode的我,突然想做一个这样效果的自定义控件:点击ListView的列表项,通过ViewDragHelper用动画方式上下各弹出一个控件遮盖住ListView,这两个控件在遮盖listView的过程中有一部分是镂空的.先上效果图: 首先是进行页面的布局,让自定义控件PlayLayout继承自Franlayout,在最底层放的就是listView所在的子FramLayout(Id:midContent),然后依次在上面加上下两个看起