记得淘宝里面买家给卖家评分的时候会有一个星星状的评分条,其实就是基于RatingBar做了自定义使用了。那么本篇文章就对RatingBar的使用做一个基本的认识。
接下来就是正题,那就是对于RatingBar,我到底想要做些什么。一般都有这样的需求:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <RatingBar android:id="@+id/ratingBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numStars="5" android:rating="3.5" android:stepSize="0.5" /> </LinearLayout>
接着就是activity的代码:
package com.itydl.ratingbar; import android.app.Activity; import android.os.Bundle; import android.widget.RatingBar; public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar); } }
先做个理论说明,再看一看运行示例。
这里,就对布局文件上几个属性进行说明,因为这是我们构建RatingBar必须要了解的,而且还是我们需要修改的。这里,就要提示各位,如果你的布局中有RatingBar,那么你的layout_width和layout_height最好要设置成wrap_content,至少layout_width是必须这么做的,因为如果没有这么做,那么很可能你的星星显示不出来,当然,你可以修改一下星星的大小,就可以显示更多的星星。那么,接下来,就是介绍RatingBar中的相关属性。
android:rating = "3.5",这一条是设置默认的分数,可以是浮点数,因为我们的RatingBar其实是评分条,所以星星的数量其实就是用来显示分数的数量,而默认的分数就是应用一开始出现的星星的数量。
android:numStars="5",这个是设置显示的星星数量,理论上,是任何整数都可以,但是我的建议就是最好就是5,因为如果多于5的话,我试过,就我的手机,3.7寸大的屏幕,最多只能显示5.8,为什么是这么怪的数据,因为那个第六个星星根本就还有一角没有显示出来。
android:stepSize = "0.5“,这是显示步长的。什么是步长,就是当你的分数增加时,是按照多大的分数增加的,就像这里,步长是0.5,那么你的手机上显示的星星是可以用你的手指点击来增加分数的,而这里就会按照一次点击增加0.5的步长,就是半颗星星。
但是,这里有点必须要注意,就是我们有时候,不,应该是大部分情况,都不希望我们的RatingBar是可以改动的,是固定的显示分数的,那么,这时我们应该怎样做呢?就是再增加一条属性,就是android:isIndicator="true",这样分数就会固定,不会改变,所以,步长的设定就完全没有必要。
当然,上面的某些属性也是有相应的方法是可以更改的,但是一般情况下都是不需要修改的,如果你的设计需要的话,可以看一下文档,里面有介绍,那么我这里就不多说了。
运行示例:
二.RatingBar样式的修改
1.大小。
默认的RatingBar的星星大小,老实说,实在太大了,因为有时候我们呢,会想要将RatingBar放在其他组件上,如ListView,所以,默认的大小肯定不符合我们的要求。那么,我们需要将星星变小一点,于是就需要在RatingBar的布局中添加这么一句:style="?android:attr/ratingBarStyleSmall"这样,星星的大小就会变小,效果图如下:
很抱歉,就我目前收集到的资料来看,星星的大小就只有默认和变小这两种模式,没有其他的情况,但是就我目前的使用情况来说,已经足够了,如果你们有其他要求,那么,我的建议就是换掉默认的星星图案吧。
接下来就是颜色和图样的改变。为什么这两条要放在一块讲呢?因为这两条的修改就是自定义自己的RatingBar,所谓的自定义,其实就是用自己的图样换掉默认的图案,这样是最好的情况,因为包括大小,颜色等等你都能使用自己满意的样式。因为我实在是没有找到什么相关的方法和资料能够解决这个问题,基本上,网上都是选择替换掉图案,因为系统中的星星的图案是固定的,它就只是一张图片而已,所以应该真的是没法用代码进行修改。应该吧?因为以后可能就不一样了吧。方法如下:
2.RatingBar的自定义设置:
我们还是要在我们的RatingBar的布局中添加这么一句:style="@style/myRatingBar",然后就是开始创建我们的myRatingBar的xml文件了。在res/values添加样式,在res/values目录下创建一个xml文件,然后下面是代码:
<style name="MyRatingBar" parent="@android:style/Widget.RatingBar"> <item name="android:progressDrawable">@drawable/myRatingBar</item> <item name="android:minHeight">15dip</item> <item name="android:maxHeight">15dip</item> </style>item name="android:minHeight"和item name="android:maxHeight"可以自己定义自己的RatingBar的大小。
接着是在res/drawable下创建我们的myRatingBar.xml文件,代码如下:
<?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/rating" /> <item android:id="@+android:id/progress" android:drawable="@drawable/rating_show" /> </layer-list>这里面,第一个item是设置背景图案的,第二个item是设置RatingBar图案的。 到了这里,基本上的设置已经搞定了,我们可以自定义属于自己的RatingBar了。运行来看看长得啥样吧: 当然,您也可以直接通过引入drable的方式给RatingBar定义样式。例如下面:
在drawable文件下面,加入如下xml文件:
<?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/rating_small_empty"> </item> <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/rating_small_half"> </item> <item android:id="@android:id/progress" android:drawable="@drawable/rating_small_full"> </item> </layer-list>
三个item分别表示:1、星星的背景色为rating_small_empty这张图片的颜色;2、星星的进度,或者说是半个星星是rating_small_half的样式;3、星星总进度或者说是全部填充星星为rating_small_full这张图片的背景色。
在布局文件中就应该这么引用了:
<RatingBar android:id="@+id/ratingBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:numStars="5" android:progressDrawable="@drawable/custom_ratingbar" android:rating="3.5" android:stepSize="0.5" />
最后再看一下运行结果:
至此,打完收工~~~