用过RatingBar的都知道,这玩意比较坑,不好调整大小、间距、颜色及样式等难以自定义。本文先讲述原生RatingBar使用中的痛点,然后给出终极的解决方案。
一,颜色
这里给出修改颜色的方法
在style.xml中添加style
@color/color_CCC
#fec9a5
然后给RatingBar添加属性
android:theme="@style/RatingBar"
这样可以该表ratingbar的颜色。
PS:网上有另一种方法添加属性
android:progressTint="@color/orange_main_color"
这种方法其实是有问题的,会在星星的左边有阴影.细心的测试小妹妹是不会放过这一点的.
二,大小
通过android:layout_height=“” 可以控制控件的高度,但是控件中的小星星的大小却不能跟着变化,这尼玛是有多坑
最简单的调整大小的方式是通过系统提供的两个style来控制
style="@style/Widget.AppCompat.RatingBar.Small"
style="@style/Widget.AppCompat.RatingBar.Indicator"
或
?android:attr/ratingBarStyleIndicator
?android:attr/ratingBarStyleSmall
但是这两种的大小也是固定的,而且设置了这种Style后Rating就不可以点击了,只能用代码设置值,一万个草泥马。
三,自定义样式
1,准备两个图标资源
stars_bright
stars_gray
2,新建drawable:five_rating_bar.xml
android:id="@android:id/background"
android:drawable="@drawable/stars_gray" />
android:id="@android:id/secondaryProgress"
android:drawable="@drawable/stars_gray" />
android:id="@android:id/progress"
android:drawable="@drawable/stars_bright" />
3,定义一个style
@drawable/five_rating_bar
40dp
40dp
4,使用
android:layout_marginTop="20dp"
android:id="@+id/rb3"
style="@style/FiveStarsStyle1"
android:numStars="5"
android:rating="3"
android:layout_width="wrap_content"
android:layout_height="30dp" />
此时图片显示还是有问题的,如下:
5,解决上面的问题
//1,获取图片的高度
Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.stars_bright);
starsImgHeight = bmp.getHeight();
//2,将获取的图片高度设置给RatingBar
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)ratingBar.getLayoutParams();
lp.width = LinearLayout.LayoutParams.WRAP_CONTENT;
lp.height =starsImgHeight;
ratingBar.setLayoutParams(lp);
也就是先获取图片资源的高度,然后取ratingBar的LayoutParams,对其设置高度,然后再set给ratingBar。
效果如下:
这种方式也真的是太太太low了,根据图片资源来控制高度的方式难以满足我们开发的需求。
四,终极解决方案(哈撒给!)
推荐一个AndRatingBar开源库,它继承自Android原生的RatingBar,也继承了RatingBar可拖动的优良传统,通过对内部drawable的重写实现了大小可以根据控件大小而改变,并且可以方便的设置颜色,自定义图标等。
github地址为:https://github.com/giswangsj/AndRatingBar
1,首先看一下预览效果:
可以看出AndRatingBar可以设置大小,间距,颜色,图标等样式,并且支持从右往左展示Rating,并且可以在RecyclerView中不会出现异常情况。
2,使用
AndRatingBar的使用也很简单
首先添加依赖:
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
dependencies {
implementation 'com.github.giswangsj:AndRatingBar:v1.0.0'
}
然后在布局中引用
android:layout_width="wrap_content"
android:layout_height="48dp"
app:starDrawable="@drawable/star_blue"
app:bgDrawable="@drawable/star_gray"
android:rating="2.5"/>
事件监听
ratingBar.setOnRatingChangeListener { ratingBar, rating ->
Log.e("ratingBar", "rating:$rating")
}
3,配置
前面提到过AndRatingBar继承自Android原生RatingBar,因此可以使用原生RatingBar的各种属性,常用如下:
android:rating="1" 设置Rating
android:numStars="8" 设置星星的数量
android:layout_height="36dp" 设置控件的高度
android:stepSize="0.5" 设置Rating的步长
android:isIndicator="true" 设置是否是指示器(只能代码设置,不可手动设置)
另外AndRatingBar提供了扩展属性,可以方便的进行样式设置:
app:starDrawable="" 设置星星的图标
app:bgDrawable="" 设置背景的图标
app:starColor="" 设置星星的颜色
app:subStarColor="" 设置二级颜色
app:bgColor="" 设置星星背景颜色
app:keepOriginColor="" 设置是否保持图标原有的颜色
app:starSpacing="4dp" 调整星星之间的间距
app:scaleFactor="1.2" 通过缩放比例调整星星之间的间距
app:right2Left="true" 从右往左展示