一、背景

视觉过来提了一个需求，要求完成一个星级评分控件，该控件中的星星的颜色需要实现渐变的效果，并且没有渐变的规律，也就是说各个星星的颜色需要不一样，效果如下：

二、问题分析

星星控件对应的控件是android.support.v7.widget.AppCompatRatingBar，利用这个控件可以实现星级评分效果，但是每个星星的颜色是一样的，效果如下：

具体的实现代码如下：

<android.support.v7.widget.AppCompatRatingBarandroid:id="@+id/popup_ratingbar"android:layout_gravity="center_horizontal"android:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/Widget.DeviceDefault.Light.RatingBar.Color.DodgerBlue"android:numStars="5"android:rating="3.5"android:isIndicator="false" />

style的定义Widget.DeviceDefault.Light.RatingBar.Color.DodgerBlue：

<style name="Widget.DeviceDefault.Light.RatingBar.Color.DodgerBlue" parent="android:style/Widget.DeviceDefault.Light.RatingBar"><item name="android:progressDrawable">@drawable/mz_ratingbar_full_light_color_dodgerblue</item><item name="android:indeterminateDrawable">@drawable/mz_ratingbar_full_light_color_dodgerblue</item><item name="android:minHeight">29.3dip</item> </style>

mz_ratingbar_full_light_color_dodgerblue.xml

<layer-list xmlns:android="/apk/res/android"><item android:id="@+android:id/background" android:drawable="@drawable/mz_btn_bigstar_off" /><item android:id="@+android:id/secondaryProgress" android:drawable="@drawable/mz_btn_bigstar_off" /><item android:id="@+android:id/progress" android:drawable="@drawable/mz_ratingbar_full_filled_light_color_dodgerblue" /></layer-list>

mz_ratingbar_full_filled_light_color_dodgerblue.xml

<selector xmlns:android="/apk/res/android"><item android:state_pressed="true"android:state_window_focused="true"android:drawable="@drawable/mz_btn_bigstar_on_pressed_color_dodgerblue" /><item android:drawable="@drawable/mz_btn_bigstar_on_color_dodgerblue" /></selector>

mz_btn_bigstar_on_pressed_color_dodgerblue、mz_btn_bigstar_on_color_dodgerblue、mz_btn_bigstar_off是三种星星图片，分别对应星星的按下状态、正常状态和背景：

从上面的代码可以看到，AppCompatRatingBar提供了一个设置progressDrawable的接口，通过这个接口我们可以设置星星的样式，而我们在设置progressDrawable的时候，传入进去的只是一张星星的图片，那它是怎样做到绘制多个星星的呢？

首先，我们来看一下AppCompatRatingBar类的继承关系：

AppCompatRatingBar类

@Overrideprotected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);Bitmap sampleTile = mAppCompatProgressBarHelper.getSampleTime();if (sampleTile != null) {// 根据星星个数计算控件的宽度final int width = sampleTile.getWidth() * getNumStars();setMeasuredDimension(ViewCompat.resolveSizeAndState(width, widthMeasureSpec, 0),getMeasuredHeight());}}

AppCompatRatingBar会根据星星的个数来计算控件的宽度，也就是控件的宽度等于：单个星星的宽度 X 星星个数。

在AppCompatRatingBar中并没有绘制的逻辑，查看父类RatingBar的代码，也没用重写onDraw方法，继续在父类中查找，在ProgressBar的onDraw方法中，有绘制星星的逻辑

@Overrideprotected synchronized void onDraw(Canvas canvas) {super.onDraw(canvas);drawTrack(canvas);}void drawTrack(Canvas canvas) {final Drawable d = mCurrentDrawable;if (d != null) {...d.draw(canvas);...}}

在ProgressBar的构造函数中，会对progressDrawable进行处理

public ProgressBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {super(context, attrs, defStyleAttr, defStyleRes);...if (progressDrawable != null) {// Calling setProgressDrawable can set mMaxHeight, so make sure the// corresponding XML attribute for mMaxHeight is read after calling// this method.if (needsTileify(progressDrawable)) {setProgressDrawableTiled(progressDrawable);} else {setProgressDrawable(progressDrawable);}}...}public void setProgressDrawableTiled(Drawable d) {if (d != null) {d = tileify(d, false);}setProgressDrawable(d);}private Drawable tileify(Drawable drawable, boolean clip) {...if (drawable instanceof BitmapDrawable) {...final BitmapDrawable clone = (BitmapDrawable) bitmap.getConstantState().newDrawable();、// 横向重复平铺clone.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);if (clip) {return new ClipDrawable(clone, Gravity.LEFT, ClipDrawable.HORIZONTAL);} else {return clone;}}...}

在ProgressBar的构造函数中，会根据prgressDrawable生成一个新的drawable，这个drawable横向是prgressDrawable的平铺效果，然后再把新的drawable设为progressDrawable。所以，我们只给控件的背景只设置了一个星星的图片，但是它会根据设置的星星个数计算控件的宽度，然后再对星星drawable进行横向平铺直到填满控件。

现在我们各个星星的颜色要求不一样，而现在控件的绘制逻辑是只传入一张星星的图片，然后将星星图片横向平铺知道撑满控件，现有的控件已经无法满足星星颜色渐变的需求了。这是，我们可以考虑自定义控件。

三、解决办法

既然现有的控件已经无法满足需求，我们就要考虑自定义控件来满足需求。分析过后尝试了以下几种方法：

1、在原有控件基础上绘制一层渐变的矩形

首先我们自定义控件MzAppCompatRatingBar，继承于AppCompatRatingBar，重新它的onDraw方法，在原有控件的基础上绘制一层渐变的矩形，代码如下：

protected synchronized void onDraw(Canvas canvas) {super.onDraw(canvas);Drawable progressDrawable = getProgressDrawable();if (progressDrawable != null) {canvas.save();mPaint.setShader(new LinearGradient((float) progressDrawable.getBounds().left, (float) progressDrawable.getBounds().top,(float) progressDrawable.getBounds().right, (float) progressDrawable.getBounds().bottom, Color.argb(0, 255, 255, 255), Color.argb(150, 255, 255, 255), Shader.TileMode.REPEAT));canvas.drawPaint(mPaint);canvas.restore();}}

实现效果：

这种方式其实就是在原有控件的基础上盖了一层渐变的矩形，两者效果的叠加就会产生一种渐变的效果，如果背景色改变了，渐变的颜色也需要改变，与背景色一致，否则就会看到星星控件有背景色，比如：

这种方式实现的效果，整个控件是从左到右颜色逐渐渐变的，而按照视觉的要求，每个星星的颜色是固定的，并且也没有渐变的规律，所以使用这种方式是不可以的。

2、在原有控件基础上绘制自己的星星

既然原有的控件无法定制每个星星的颜色，那我们是否可以考虑自己绘制各个星星呢？我们可以在原有的控件基础上绘制五个颜色不一样的星星，然后根据滑动的进度来设置裁剪区域，只绘制进度左边的内容，代码如下：

// 加载五张星星的图片private void createStarDrawables(int[] starColors) {mStarDrawables = new ArrayList<>();mStarDrawables.add(getResources().getDrawable(R.drawable.mz_btn_bigstar_on_pressed_color_limegreen));mStarDrawables.add(getResources().getDrawable(R.drawable.mz_btn_bigstar_on_pressed_color_grey));mStarDrawables.add(getResources().getDrawable(R.drawable.mz_btn_bigstar_on_pressed_color_firebrick));mStarDrawables.add(getResources().getDrawable(R.drawable.mz_btn_bigstar_on_pressed_color_coral));mStarDrawables.add(getResources().getDrawable(R.drawable.mz_btn_bigstar_on_pressed_color_seagreen));}@Overrideprotected synchronized void onDraw(Canvas canvas) {super.onDraw(canvas);// 先绘制原来的控件// 在原来控件的基础上根据进度绘制颜色不一样的星星Drawable progressDrawable = getProgressDrawable();if (progressDrawable != null) {canvas.save();// 获得进度位置final int pogressPos = getProgressPos();// 根据进度位置设置裁剪区域canvas.clipRect(0, 0, pogressPos, getHeight());int drawableLeft = getPaddingLeft();int drawableTop = getPaddingTop();// 绘制五张星星for (Drawable drawable : mStarDrawables) {drawable.setBounds(drawableLeft, drawableTop, drawableLeft + drawable.getIntrinsicWidth(), drawableTop + drawable.getIntrinsicHeight());drawableLeft += drawable.getIntrinsicWidth();drawable.draw(canvas);}canvas.restore();}}/*** 获取进度所对应的位置* @return*/private int getProgressPos() {int available = getWidth() - getPaddingLeft() - getPaddingRight();final int progressPos = (int) (getScale() * available + 0.5f) + getPaddingLeft();return progressPos;}/*** 获得当前滑动进度的百分比* @return*/private float getScale() {final int max = getMax(); // 最大进度return max > 0 ? getProgress() / (float) max : 0;}

显示效果如下：

ok，这个正式我们想要的效果，通过在原有控件上盖上自己绘制的星星，我们可以实现视觉的需求。

3、通过滤镜效果绘制不同颜色的星星

通过方法二，已经可以实现视觉提出的需求，但是，这种方法有一个缺点：每种颜色的星星都需要提供图片，增加了公共资源的大小。

那么，有什么改进的办法呢？在android中，可以通过setColorFilter来改变drawable的颜色，那么我们是否可以只提供一张纯色的星星图片，然后通过setColorFilter来动态改变星星的颜色呢？答案是可以的，改进后的代码如下：

private void init() {createStarDrawables(new int[]{0xFFFF9602, 0xFFFFA300, 0xFFFEB100, 0xFFF9BE00, 0xFFF9BE00});}private void createStarDrawables(int[] starColors) {mStarColors = starColors;mstarDrawable = getResources().getDrawable(R.drawable.mz_btn_bigstar_test, null);}@Overrideprotected synchronized void onDraw(Canvas canvas) {super.onDraw(canvas);if (mStarDrawable != null && mStarColors != null) {// 在原来RatingBar的基础上在绘制一层颜色不一样的星星canvas.save();final int pogressPos = getProgressPos();canvas.clipRect(0, 0, pogressPos, getHeight());int drawableLeft = getPaddingLeft();int drawableTop = getPaddingTop();for (int i=0; i<getNumStars(); i++) {int starColor;if (i >= mStarColors.length) {starColor = mStarColors[mStarColors.length - 1];} else {starColor = mStarColors[i];}mStarDrawable.setColorFilter(starColor, PorterDuff.Mode.SRC_IN); // 对drawable进行染色处理mStarDrawable.setBounds(drawableLeft, drawableTop, drawableLeft + mStarDrawable.getIntrinsicWidth(), drawableTop + mStarDrawable.getIntrinsicHeight());drawableLeft += mStarDrawable.getIntrinsicWidth();mStarDrawable.draw(canvas);}canvas.restore();}}

其中mz_btn_bigstar_test是一张纯色的星星图片，如下：

绘制效果如下：

通过利用滤镜来改变drawable的颜色，我们完美解决了需要多张图片资源的情况。

四、代码整理

对于自定义控件，在完成了基本的功能后，我们还需要整理代码，定义属性和样式给应用使用，分析应该提供哪些接口给应用。比如在星级评分控件中，应用应该可以自定义星星的图片和颜色，所有我们需要定义属性给应用自定义 星星的图片和颜色，并在代码中提供相应的接口。

import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.PorterDuff;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.widget.RatingBar;import mon.R;public class MzRatingBar extends RatingBar {private Drawable mStarDrawable;private int[] mStarColors;public MzRatingBar(Context context) {this(context, null);}public MzRatingBar(Context context, AttributeSet attrs) {this(context, attrs, 0);}public MzRatingBar(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.MzRatingBar, defStyleAttr, 0);int colorArrayId = a.getResourceId(R.styleable.MzRatingBar_mcStarColors, R.array.mc_rating_bar_default_colors);mStarColors = getResources().getIntArray(colorArrayId);mStarDrawable = a.getDrawable(R.styleable.MzRatingBar_mcStarDrawable);if (mStarDrawable == null) {mStarDrawable = getResources().getDrawable(R.drawable.mz_btn_big_star_on);}a.recycle();}@Overrideprotected synchronized void onDraw(Canvas canvas) {super.onDraw(canvas);if (mStarDrawable != null && mStarColors != null) {// 在原来RatingBar的基础上在绘制一层颜色不一样的星星canvas.save();final int pogressPos = getProgressPos();canvas.clipRect(0, 0, pogressPos, getHeight());int drawableLeft = getPaddingLeft();int drawableTop = getPaddingTop();for (int i=0; i<getNumStars(); i++) {int starColor;if (i >= mStarColors.length) {starColor = mStarColors[mStarColors.length - 1];} else {starColor = mStarColors[i];}mStarDrawable.setColorFilter(starColor, PorterDuff.Mode.SRC_IN);mStarDrawable.setBounds(drawableLeft, drawableTop, drawableLeft + mStarDrawable.getIntrinsicWidth(), drawableTop + mStarDrawable.getIntrinsicHeight());drawableLeft += mStarDrawable.getIntrinsicWidth();mStarDrawable.draw(canvas);}canvas.restore();}}/*** 设置各个星星的颜色* @param starColors*/public void setStarColors(int[] starColors) {if (starColors != null) {mStarColors = starColors;}}/*** 获取进度所对应的位置* @return*/private int getProgressPos() {int available = getWidth() - getPaddingLeft() - getPaddingRight();final int progressPos = (int) (getScale() * available + 0.5f) + getPaddingLeft();return progressPos;}private float getScale() {final int max = getMax();return max > 0 ? getProgress() / (float) max : 0;}}

在attrs.xml声明属性的定义

<declare-styleable name="MzRatingBar"><attr name="mcStarColors" format="reference" /><attr name="mcStarDrawable" format="reference" /></declare-styleable>

定义常用的style，这里定义了大星星和小星星两套style给应用使用

<style name="mon.MzRatingBar.Large" parent="android:style/Widget.DeviceDefault.Light.RatingBar"><item name="android:progressDrawable">@drawable/mc_ratingbar_big_full_light</item><item name="android:indeterminateDrawable">@drawable/mc_ratingbar_big_full_light</item><item name="android:minHeight">29.3dip</item><item name="mcStarDrawable">@drawable/mz_btn_big_star_on</item><item name="mcStarColors">@array/mc_rating_bar_default_colors</item></style><style name="mon.MzRatingBar.Small" parent="android:style/Widget.DeviceDefault.Light.RatingBar"><item name="android:progressDrawable">@drawable/mc_ratingbar_small_full_light</item><item name="android:indeterminateDrawable">@drawable/mc_ratingbar_small_full_light</item><item name="android:minHeight">14.7dip</item><item name="mcStarDrawable">@drawable/mz_btn_small_star_on</item><item name="mcStarColors">@array/mc_rating_bar_default_colors</item></style>

mc_ratingbar_big_full_light.xml

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="/apk/res/android"><item android:id="@android:id/background" android:drawable="@drawable/mz_btn_big_star" /><item android:id="@android:id/secondaryProgress" android:drawable="@drawable/mz_btn_big_star_secondary" /><item android:id="@android:id/progress" android:drawable="@drawable/mz_btn_big_star" /></layer-list>

mc_ratingbar_small_full_light.xml

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="/apk/res/android"><item android:id="@android:id/background" android:drawable="@drawable/mz_btn_small_star" /><item android:id="@android:id/secondaryProgress" android:drawable="@drawable/mz_btn_small_star_secondary" /><item android:id="@android:id/progress" android:drawable="@drawable/mz_btn_small_star" /></layer-list>

在arrays.xml中声明默认的星星颜色

<array name="mc_rating_bar_default_colors" translatable="false"><item>#ff961d</item><item>#fda21f</item><item>#fcb121</item><item>#fabd23</item><item>#f6c84b</item></array>

上面用到的资源有mz_btn_big_star_on、mz_btn_big_star_on、mz_btn_big_star_secondary、mz_btn_small_star_on、mz_btn_small_star_on、mz_btn_small_star_secondary,如下：

五、应用使用

定义好控件后，应用就可以使用了，具体用法如下：

1、在xml中使用

<mon.widget.MzRatingBarandroid:id="@+id/ratingbar1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"style="@style/mon.MzRatingBar.Large"android:isIndicator="false"android:numStars="5"android:rating="3" /><mon.widget.MzRatingBarandroid:id="@+id/ratingbar2"android:layout_below="@id/ratingbar1"android:layout_marginTop="20dp"android:layout_centerHorizontal="true"android:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/mon.MzRatingBar.Small"android:isIndicator="false"android:numStars="5"android:rating="3" />

效果如下：

２、自定义星星的颜色

<mon.widget.MzRatingBarandroid:id="@+id/ratingbar1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"style="@style/mon.MzRatingBar.Large"app:mcStarColors="@array/rating_bar_colors"android:isIndicator="false"android:numStars="5"android:rating="3" /><mon.widget.MzRatingBarandroid:id="@+id/ratingbar2"android:layout_below="@id/ratingbar1"android:layout_marginTop="20dp"android:layout_centerHorizontal="true"android:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/mon.MzRatingBar.Small"app:mcStarColors="@array/rating_bar_colors"android:isIndicator="false"android:numStars="5"android:rating="3" />

<array name="rating_bar_colors" translatable="false"><item>#43b56b</item><item>#44aff9</item><item>#f56455</item><item>#5ecddf</item><item>#f6b944</item></array>

通过设置mcStarColors，指定一个颜色数组，颜色数组为各个星星的颜色。 也可以在代码中直接调用接口。效果如下：

六、总结

１、在接到控件方面的需求时，首先我们要考虑利用现有的控件是否能够达到要求，通过给原生控件定义样式能够满足大部分的控件需求； ２、在原生控件不能满足需求时，我们需要分析需求，选择一个最接近需求的控件继承，然后在该控件上扩展； ３、自定义控件需要大量的知识积累，才能做出完美的自定义控件。