用過RatingBar的都知道,這玩意比較坑,不好調整大小、間距、顏色及樣式等難以自定義。本文先講述原生RatingBar使用中的痛點,然後給出終極的解決方案。
一,顏色
這裏給出修改顏色的方法
在style.xml中添加style
<!--RatingBar顏色-->
<style name="RatingBar" parent="Theme.AppCompat">
<item name="colorControlNormal">@color/color_CCC</item>
<item name="colorControlActivated">#fec9a5</item>
</style>
然後給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
<!-- five_rating_bar.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/stars_gray" />
<item
android:id="@android:id/secondaryProgress"
android:drawable="@drawable/stars_gray" />
<item
android:id="@android:id/progress"
android:drawable="@drawable/stars_bright" />
</layer-list>
3,定義一個style
<style name="FiveStarsStyle1" parent="@android:style/Widget.Holo.RatingBar.Small">
<item name="android:progressDrawable">@drawable/five_rating_bar</item>
<item name="android:minHeight">40dp</item>
<item name="android:maxHeight">40dp</item>
</style>
4,使用
<RatingBar
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'
}
然後在佈局中引用
<per.wsj.library.AndRatingBar
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" 從右往左展示