Ratingbar UseGuide

Ratingbar UseGuide

字数1925 阅读222 评论3 喜欢3

Ratingbar UseGuide

Ratingbar是一个评分控件，系统给我们提供了这样一个控件，样式如下：



这里写图片描述

相信大家都见过这样一个控件。本文将详细的讲解Ratingbar的使用和改造。

系统默认Ratingbar

RatingBar是基于SeekBar（拖动条）和ProgressBar（状态条）的扩展，用星形来显示等级评定。

我们来看下系统默认的Ratingbar：



这里写图片描述

这三种Ratingbar是系统给我们提供的样式，代码分别如下：

<RatingBar
android:id="@+id/origin_ratingbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:numStars="6"
android:rating="3"/>

<RatingBar
style="?android:attr/ratingBarStyleIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:numStars="7"
android:rating="3"/>

<RatingBar
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:numStars="8"
android:rating="3"/>

第一种为系统默认样式Ratingbar，不做任何改变，完全原生态。

第二种为大样式Ratingbar，使用系统Style

"?android:attr/ratingBarStyleIndicator"

第三种为小样式Ratingbar，使用系统Style

"?android:attr/ratingBarStyleSmall"

系统给我们提供的Ratingbar基本可以满足我们不高的需求，它提供了一些属性：

属性	作用
android:rating="3"	当前显示的Star数
android:numStars="7"	总共的Star数
android:stepSize="1.5"	Star增加时的步长
android:isIndicator="true"	Ratingbar是否可用

都很简单明了，看了就知道怎么用。

PS：很蛋疼的一点，系统的Ratingbar必须使用wrap_content布局，如果match_parent，定义的numStars就失效了。而且，系统的Ratingbar是无法调节Star与Star之间的间距的。

自定义样式Ratingbar

系统的Ratingbar虽然功能满足了，但是实在太丑，Star的样式还是无法控制，所以，我们可以通过Style来控制其样式。

创建Star图片

首先，我们创建一个drawable：

<?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/staroff"/>
<item
android:id="@+android:id/secondaryProgress"
android:drawable="@drawable/staroff"/>
<item
android:id="@+android:id/progress"
android:drawable="@drawable/staron"/>
</layer-list>

很简单，指定三个属性：
progress：用来在背景图片基础上进行填充的指示属性（和进度条类似，第一进度位置）
secondaryProgress：类似progressbar的二级进度条
background：用来填充背景图片，和进度条类似，当我们设置最高Star时（android:numStars），系统就会根据我们的设置，来画出以Star为单位的背景（例如android:numStars="5"，就会画出5颗灰色的Star）

引用的id在IDE中可能会报错，但是不影响编译。

定义Style

我们创建一个Style，用来定义Ratingbar的样式：

<style name="MyRatingBar" parent="@android:style/Widget.RatingBar">
<item name="android:progressDrawable">@drawable/ratingbar_bg</item>
<item name="android:minHeight">48dp</item>
<item name="android:maxHeight">48dp</item>
</style>

通过拓展Widget.RatingBar来自定义样式，并指定其android:progressDrawable参数为我们前面设置的图片样式。

引用Style

最后，我们在代码中引用自定义的Style：

<RatingBar
style="@style/MyRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:numStars="8"
android:rating="3"/>

最后的显示样式如下：



这里写图片描述

这里也有个蛋疼的地方，那就是，一旦设置了自定义的Star样式、背景，Star在Ratingbar中就无法竖直居中了，所以，只能靠切图时留好边距来调整位置，这样同时也能解决无法定义Star直接间隔的问题。

重写Ratingbar

这必须的，最后我们会发现，系统提供的这个Ratingbar太鸡肋了，实在是不好意思直接拿来用，所以，我们来重写一个Ratingbar。

重写Ratingbar，我们就不使用系统的方式——拓展progressbar的方式。我们创建一个ViewGroup，通过设置不同数量的图片，来控制显示的Star。

创建属性

首先我们自定义attrs属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<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>
</resources>

定义四个属性，分别用来控制显示Star的大小，数量，未填充的图像，填充的图像。

重写Ratingbar

我们通过继承LinearLayout的方式来实现，往LinearLayout里面塞ImageView。

package com.xys.ratingbarguide;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;

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.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 = starCount;
}

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

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

public void setOnRatingListener(OnRatingListener onRatingListener) {
this.onRatingListener = onRatingListener;
}
}

代码基本没有什么好说的，非常简单的自定义View。在显示Star的时候，我们还可以添加显示的动画，我这里就只做了一个简单的缩放动画。同时，通过设置imageView的padding，我们可以解决Star之间设置间距的问题。

最后，显示效果如下：



这里写图片描述

响应事件

Ratingbar的响应事件与progressbar的响应事件类似。通过设置监听来监听Star选择的改变，当然，我们自定义的RatingbarView设置了一个接口，来实现监听：

RatingBar customRatingbar = (RatingBar) findViewById(R.id.origin_ratingbar);
customRatingbar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
@Override
public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
Toast.makeText(MainActivity.this, String.valueOf(rating), Toast.LENGTH_SHORT).show();
}
});

RatingBarView originRatingbar = (RatingBarView) findViewById(R.id.custom_ratingbar);
originRatingbar.setOnRatingListener(new RatingBarView.OnRatingListener() {
@Override
public void onRating(Object bindObject, int RatingScore) {
Toast.makeText(MainActivity.this, String.valueOf(RatingScore), Toast.LENGTH_SHORT).show();
}
});

回调中的参数，就是Star的数量。除了回调，Ratingbar也提供了一些方法来返回Star的数量。

原生：
mRatingBar.getMax()
mRatingBar.getRating()

自定义：
mRatingBarView.getStarCount()

库

这个自定义Ratingbar可以放到单独的库项目中，作为UIKit来进行使用，那么为什么我这里没有呢？原因就是，我比较懒。需要的请自己抽一下，一共就两个文件。

以上，Ratingbar全解析结束，只留下一个Github:

https://github.com/xuyisheng/RatingbarGuide

欢迎fork、Star。

 推荐拓展阅读

 著作权归作者所有

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
¥
打赏支持 

 喜欢
 3
分享到微博 分享到微信 
更多分享

×

喜欢的用户

 程序猴2016.02.28
23:26



 Euterpe2016.01.09
23:46



 alighters2015.11.09
23:01

3条评论 （ 按时间正序· 按时间倒序· 按喜欢排序 ）添加新评论





alighters
2 楼 · 2015.11.09
23:01

这自定义的ratingBar没有实现原生触摸实现点击的效果么？

喜欢(0)回复

eclipse_xu： @david_wei 必须可以点击
完全自定义 想怎么改怎么改
回复2015.11.09
23:01

alighters： @eclipse_xu 额，理解错了。我意思是可以增加原生已经实现的一个功能，手指在星星上滑动，也能改变星星数目的效果。不过医生说话就是霸气，膜拜大神。
回复2015.11.09
23:06

 添加新回复