Ratingbar UseGuide

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

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

系统默认Ratingbar

RatingBar是基于SeekBar（拖动条）和ProgressBar（状态条）的扩展，用星形来显示等级评定。我们来看下系统默认的Ratingbar：

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

<RatingBar==”6″android:rating=”3″/><RatingBar==”7″android:rating=”3″/><RatingBar==”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：

=”http://schemas.android.com/apk/res/android”><itemandroid:id=”@+android:id/background”android:drawable=”@drawable/staroff”/><itemandroid:id=”@+android:id/secondaryProgress”android:drawable=”@drawable/staroff”/><item>

很简单，指定三个属性：

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

定义Style

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

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

引用Style

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

<RatingBar==”8″android:rating=”3″/>

最后的显示样式如下：

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

重写Ratingbar

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

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

创建属性

首先我们自定义attrs属性：

=====></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;{{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;(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() {(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 paddingimageView.setPadding(0, 0, 40, 0);imageView.setImageDrawable(starEmptyDrawable);imageView.setMaxWidth(10);imageView.setMaxHeight(10);return imageView;}(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);}}() {return mStarCount;}(Drawable starFillDrawable) {this.starFillDrawable = starFillDrawable;}(Drawable starEmptyDrawable) {this.starEmptyDrawable = starEmptyDrawable;}(int startCount) {this.starCount = starCount;}(float starImageSize) {this.starImageSize = starImageSize;}(Object bindObject) {this.bindObject = bindObject;}(OnRatingListener onRatingListener) {this.onRatingListener = onRatingListener;}}

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

最后，，显示效果如下：

响应事件三人一条心，黄土变成金。

相关文章：

你感兴趣的文章：

标签云：