Android中自定义RatingBar，自定义星星间距，自定义样式，自定义显示效果

RatingBar是在等级，星级显示的时候，用的最多的，但是系统自带的效果，在星星间距大小上，以及将星星替换为其他造型上不能满足需求，所以需要自定义RatingBar；

自定义RatingBar非常简单：

一：简单的自定义（自定义样式）

1，确定展示出的选中和未选中两种状态的图片；

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@+android:id/background"
android:drawable="@drawable/star2"></item>
<item android:id="@+android:id/secondaryProgress"
android:drawable="@drawable/star2"></item>
<item android:id="@+android:id/progress"
android:drawable="@drawable/star1"></item>

</layer-list>

对于星星之间的间距，可以通过切图，切图的透明底图的大小来试下控制，星星的间距。

2，自定义样式

<style name="yogaCourseRatingBar" parent="@android:style/Widget.RatingBar">
<item name="android:progressDrawable">@drawable/yota_ratingbar_progress_drawable</item>
<item name="android:minHeight">13dp</item>
<item name="android:maxHeight">13dp</item>
</style>

3，使用

<RatingBar
android:id="@+id/ratingStart"
android:layout_toRightOf="@id/difficultTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_alignBottom="@id/difficultTV"
android:numStars="5"
android:stepSize="1"
android:rating="2"
android:isIndicator="true"
android:layout_marginLeft="5dp"
style="@style/yogaCourseRatingBar"/>

效果：



isIndicator属性表示，展出的星星可不可以点击，true表示不可以点击，只是展示星级，false表示可以手动触摸点击，给出评价的等级，

这个属性，api中给的解释是：

Whether this rating bar is an indicator (and non-changeable by
the user). [boolean]

很简单，就是修改了系统给出的几个属性，修改了显示的星星图片，修改了展示星星的高度，

默认情况下，星星底部有一段空白高度，因为系统给的minHeight和maxHeight是57，远远超出了星星图片的高度，星星展示的时候默认靠上展示了，所以底部就空出了空袭，但是通过margin和padding都无法修改这个空白区域。

系统默认的RatingBar样式：

<style name="Widget.RatingBar">
<item name="indeterminateOnly">false</item>
<item name="progressDrawable">@drawable/ratingbar_full</item>
<item name="indeterminateDrawable">@drawable/ratingbar_full</item>
<item name="minHeight">57dip</item>
<item name="maxHeight">57dip</item>
<item name="thumb">@null</item>
<item name="mirrorForRtl">true</item>
</style>

看看系统给出的三种style的效果：

<RatingBar
android:id="@+id/rat1"
android:layout_below="@id/ratingStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:rating="3"
style="@android:style/Widget.DeviceDefault.RatingBar.Small"/>

<RatingBar
android:id="@+id/rat2"
android:layout_below="@id/rat1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:rating="2"
style="@android:style/Widget.DeviceDefault.RatingBar"/>
<RatingBar
android:layout_below="@id/rat2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:rating="4"
style="@android:style/Widget.DeviceDefault.RatingBar.Indicator"/>

效果：（发现选中后的颜色，似乎不好控制啊，需要通过primaryColor来控制，这是APP的主色调，耦合度这么高，不好呀）

二：继承一个View,自定义一个RatingBarView控件（较深程度的自定义–自定义控件）

实现也是很简单的：

通过这个自定义，完全可以控制心心的大小、形状、图案，间距，点击回调事件处理，都可以处理了。

因为他其实是通过在一个viewgroup中addimageview来实现的。

/**
*
* TODO(自定义ratingbar)
* @author yujie.zhang
* 2017-4-10下午8:34:57
*/
public class RatingBarView extends LinearLayout {

public interface OnRatingListener {
void onRating(Object bindObject, int RatingScore);
}

private boolean mClickable = true;
private OnRatingListener onRatingListener;
private Object bindObject;
private float starImageSize;
private int starCount;
private Drawable starEmptyDrawable;
private Drawable starFillDrawable;
private int mStarCount;

public void setClickable(boolean clickable) {
this.mClickable = clickable;
}

public RatingBarView(Context context, AttributeSet attrs) {
super(context, attrs);
setOrientation(LinearLayout.HORIZONTAL);
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RatingBarView);
starImageSize = ta.getDimension(R.styleable.RatingBarView_starImageSize, 20);
starCount = ta.getInteger(R.styleable.RatingBarView_starCount, 5);
starEmptyDrawable = ta.getDrawable(R.styleable.RatingBarView_starEmpty);
starFillDrawable = ta.getDrawable(R.styleable.RatingBarView_starFill);
ta.recycle();

for (int i = 0; i < starCount; ++i) {
ImageView imageView = getStarImageView(context, attrs);
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mClickable) {
mStarCount = indexOfChild(v) + 1;
setStar(mStarCount, true);
if (onRatingListener != null) {
onRatingListener.onRating(bindObject, mStarCount);
}
}
}
});
addView(imageView);
}
}

private ImageView getStarImageView(Context context, AttributeSet attrs) {
ImageView imageView = new ImageView(context);
ViewGroup.LayoutParams para = new ViewGroup.LayoutParams(Math.round(starImageSize), Math.round(starImageSize));
imageView.setLayoutParams(para);
// TODO:you can change gap between two stars use the padding
//        imageView.setPadding(0, 0, 40, 0);
imageView.setPadding(0, 0, 0, 0);
imageView.setImageDrawable(starEmptyDrawable);
imageView.setMaxWidth(10);
imageView.setMaxHeight(10);
return imageView;
}

public void setStar(int starCount, boolean animation) {
starCount = starCount > this.starCount ? this.starCount : starCount;
starCount = starCount < 0 ? 0 : starCount;
for (int i = 0; i < starCount; ++i) {
((ImageView) getChildAt(i)).setImageDrawable(starFillDrawable);
if (animation) {
ScaleAnimation sa = new ScaleAnimation(0, 0, 1, 1);
getChildAt(i).startAnimation(sa);
}
}
for (int i = this.starCount - 1; i >= starCount; --i) {
((ImageView) getChildAt(i)).setImageDrawable(starEmptyDrawable);
}
}

public int getStarCount() {
return mStarCount;
}

public void setStarFillDrawable(Drawable starFillDrawable) {
this.starFillDrawable = starFillDrawable;
}

public void setStarEmptyDrawable(Drawable starEmptyDrawable) {
this.starEmptyDrawable = starEmptyDrawable;
}

public void setStarCount(int startCount) {
this.starCount = startCount;
}

public void setStarImageSize(float starImageSize) {
this.starImageSize = starImageSize;
}

public void setBindObject(Object bindObject) {
this.bindObject = bindObject;
}

/**
*这个回调，可以获取到用户评价给出的星星等级
*/
public void setOnRatingListener(OnRatingListener onRatingListener) {
this.onRatingListener = onRatingListener;
}
}

值得注意的是，需要在attr文件中自定义几个styleable属性样式：

<declare-styleable name="RatingBarView">

<attr name="starImageSize" format="dimension"/>
<attr name="starCount" format="integer"/>
<attr name="starEmpty" format="reference"/>
<attr name="starFill" format="reference"/>

</declare-styleable>

剩下的几个styleable，是系统提供的，查找的时候，发现直接通过我们定义的这个styleable映射到了系统的styleable资源去了。

使用：

xml中：

<com.family.heyqun.moudle_home_page.tool.RatingBarView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/custom_ratingbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
app:starCount="5"

app:starEmpty="@drawable/staroff"
app:starFill="@drawable/staron"
app:starImageSize="50dp" />

在MainActivity中：

int level=0;
RatingBarView custom_ratingbar=(RatingBarView)findViewById(R.id.ratingbar);

custom_ratingbar
.setOnRatingListener(new RatingBarView.OnRatingListener() {
@Override
public void onRating(Object bindObject, int ratingScore) {
Toast.makeText(FeedBackEvaluateActivity.this,                               String.valueOf(ratingScore), Toast.LENGTH_SHORT)
.show();
level = ratingScore;
}
});