Android修改RatingBar顏色、大小,間距以及自定義樣式終極方案

用過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"                         從右往左展示

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章