Android App中使用RatingBar實(shí)現(xiàn)星級(jí)打分功能的教程
RatingBar簡(jiǎn)單介紹
RatingBar是基于SeekBar(拖動(dòng)條)和ProgressBar(狀態(tài)條)的擴(kuò)展,用星形來(lái)顯示等級(jí)評(píng)定,在使用默認(rèn)RatingBar時(shí),用戶可以通過(guò)觸摸/拖動(dòng)/按鍵(比如遙控器)來(lái)設(shè)置評(píng)分, RatingBar自帶有兩種模式 ,一個(gè)小風(fēng)格 ratingBarStyleSmall,大風(fēng)格為ratingBarStyleIndicator,大的只適合做指示,不適用與用戶交互。
自定義RatingBar需要注意的地方
一般情況下,系統(tǒng)自帶的RatingBar是遠(yuǎn)遠(yuǎn)無(wú)法滿足開(kāi)發(fā)需求的,我們根據(jù)圖片自定一個(gè)RatingBar,在開(kāi)始實(shí)現(xiàn)自定義RatingBar之前,順帶說(shuō)一下res目錄下圖片放置目錄的區(qū)別:
在android sdk 1.5版本之前res目錄下面只有一個(gè)drawable一個(gè)目錄,在android sdk 1.6版本以后就出現(xiàn)了三個(gè)目錄,分別是drawable-hdpi、drawable-ldpi、drawable-mdpi、drawable-xhdpi,
(1)drawable-hdpi里面存放高分辨率的圖片,如WVGA (480x800),FWVGA (480x854)
(2)drawable-mdpi里面存放中等分辨率的圖片,如HVGA (320x480)
(3)drawable-ldpi里面存放低分辨率的圖片,如QVGA (240x320)
(4)drawable-xhdpi里面存放超大分辨率的圖片,至少960dp x 720dp
由于我們自定義實(shí)現(xiàn)的RatingBar里面使用到的星形圖片分辨率比較低,所以一般情況下,我們把圖片放到drawable-mdpi或者drawable-ldpi里面。
自定義RatingBar的實(shí)現(xiàn)過(guò)程
首先,根據(jù)圖片自定一個(gè)RatingBar的背景條,和圖片放到同一個(gè)目錄下面(比如drawable-mdpi),room_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/star1"></item> <span></span>
<item android:id="@+android:id/secondaryProgress"
android:drawable="@drawable/star1"></item>
<item android:id="@+android:id/progress"
android:drawable="@drawable/star2"></item>
</layer-list>
backgroud:是用來(lái)填充背景圖片的,和進(jìn)度條非常類似,當(dāng)我們?cè)O(shè)置最高評(píng)分時(shí)(android:numStars),系統(tǒng)就會(huì)根據(jù)我們的設(shè)置,來(lái)畫出以星星為單位的背景(假如android:numStars="5",就會(huì)畫出5顆灰色的星星)
progress:是用來(lái)在背景圖片基礎(chǔ)上進(jìn)行填充的指示屬性(和進(jìn)度條類似,第一進(jìn)度位置)
secondaryProgress:同progress一樣屬于第二進(jìn)度位置(如果不定義這個(gè),進(jìn)度條拖動(dòng),每次就畫出一整顆星星(亮),第二進(jìn)度(暗)沒(méi)有覆蓋掉第一進(jìn)度之后的位置,從左往右是拖不出來(lái)N.5顆星星的,這樣評(píng)分效果就不完整)
其次,通過(guò)開(kāi)始介紹,我們知道RatingBar的樣式是通過(guò)style來(lái)切換的,在android中,我們可以通過(guò)在styles.xml文件中通過(guò)設(shè)置style屬性,來(lái)繼承我們需要自定控件類型,如下styles.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="roomRatingBar" parent="@android:style/Widget.RatingBar"> <item name="android:progressDrawable">@drawable/room_rating_bar</item> <item name="android:minHeight">16dp</item> <item name="android:maxHeight">16dp</item> </style> </resources>
通過(guò) parent屬性來(lái)選擇繼承的父類,我們這里繼承RatingBar類。
重新定義 progressDrawable屬性(RatingBar的背景條,和我們?cè)谑紫壤锩娼榻B的那樣)
maxHeight和minHeight可以根據(jù)我們圖片像素或者其他參考值來(lái)設(shè)定。
最后,在我們需要用到RatingBar的xml配置文件里面添加RatingBar控件。
main.xml
<RatingBar android:id="@+id/room_ratingbar" style="@style/roomRatingBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numStars="5" android:rating="4" android:layout_marginLeft="10dp" > </RatingBar>
打分功能實(shí)例
使用SeekBar與RatingBar共同實(shí)現(xiàn):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <SeekBar android:id="@+id/seekBar1" android:layout_width="match_parent" android:layout_height="wrap_content" /> <RatingBar android:id="@+id/ratingbar1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_below="@id/seekBar1" android:numStars="4" android:stepSize="0.5" /> <Button android:id="@+id/button1" android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_below="@id/ratingbar1" android:text="增加RatingBar的星數(shù)"/> </RelativeLayout>
package com.android.xiong.seekbars;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
public class MainActivity extends Activity {
private SeekBar seekBar1;
private RatingBar ratingBar1;
private Button button1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
seekBar1=(SeekBar)findViewById(R.id.seekBar1);
seekBar1.setMax(100);
seekBar1.setSecondaryProgress(20);
seekBar1.setProgress(10);
SeekBarChangeListener seek=new SeekBarChangeListener();
seekBar1.setOnSeekBarChangeListener(seek);
ratingBar1=(RatingBar)findViewById(R.id.ratingbar1);
//設(shè)置RatingBar5顆星
ratingBar1.setNumStars(4);
//設(shè)置當(dāng)前的星數(shù)
ratingBar1.setRating(1.0f);
//設(shè)置RatingBar 評(píng)分的步長(zhǎng)
ratingBar1.setStepSize(0.5f);
RatingBarChangeLister rat=new RatingBarChangeLister();
ratingBar1.setOnRatingBarChangeListener(rat);
button1=(Button)findViewById(R.id.button1);
BuutonClick bu=new BuutonClick();
button1.setOnClickListener(bu);
}
class SeekBarChangeListener implements OnSeekBarChangeListener {
/**
* seekBar 當(dāng)前觸發(fā)的SeekBar控件
* progress 當(dāng)前的進(jìn)度
* fromUser 是否是用戶觸發(fā) 用戶觸發(fā)為true 否則為false
*/
@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
// TODO Auto-generated method stub
System.out.println("progress:"+progress+" fromUser:"+fromUser);
}
//此方法表示 開(kāi)始拖動(dòng)時(shí)觸發(fā)的方法
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
System.out.println(seekBar.getProgress());
}
//拖動(dòng)停止時(shí)觸發(fā)的方法
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
System.out.println(seekBar.getProgress());
}
}
class RatingBarChangeLister implements OnRatingBarChangeListener{
/**
* rattingBar當(dāng)前觸發(fā)的RatingBar控件
* rating 當(dāng)前的星數(shù)
* fromUser 是否是用戶觸發(fā)
*/
@Override
public void onRatingChanged(RatingBar ratingBar, float rating,
boolean fromUser) {
// TODO Auto-generated method stub
System.out.println("rating:"+ rating +" fromUser:"+fromUser);
}
}
class BuutonClick implements OnClickListener{
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
ratingBar1.setRating(ratingBar1.getRating()+0.5f);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
- Android RatingBar星星評(píng)分控件實(shí)例代碼
- Android評(píng)分控件RatingBar使用實(shí)例解析
- Android自定義View之自定義評(píng)價(jià)打分控件RatingBar實(shí)現(xiàn)自定義星星大小和間距
- Android控件之RatingBar自定義星級(jí)評(píng)分樣式
- Android UI控件RatingBar實(shí)現(xiàn)自定義星星評(píng)分效果
- Android星級(jí)評(píng)分條控件RatingBar使用詳解
- Android自定義控件RatingBar調(diào)整字體大小
- android之RatingBar控件用法詳解
- Android中SeekBar和RatingBar用法實(shí)例分析
- Android開(kāi)發(fā)之自定義星星評(píng)分控件RatingBar用法示例
相關(guān)文章
支持多項(xiàng)選擇的ExpandableListView
這篇文章主要為大家詳細(xì)介紹了支持多項(xiàng)選擇的ExpandableListView,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06
Android自定義view實(shí)現(xiàn)滑動(dòng)解鎖九宮格控件
這篇文章主要介紹了Android自定義view實(shí)現(xiàn)滑動(dòng)解鎖九宮格控件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
android 簡(jiǎn)單圖片動(dòng)畫播放的實(shí)例代碼
android 簡(jiǎn)單圖片動(dòng)畫播放的實(shí)例代碼,需要的朋友可以參考一下2013-06-06
Android library native調(diào)試代碼遇到的問(wèn)題解決
這篇文章主要介紹了Android library native 代碼不能調(diào)試解決方法匯總,android native開(kāi)發(fā)會(huì)碰到native代碼無(wú)法調(diào)試問(wèn)題,而app主工程中的native代碼是可以調(diào)試的2023-04-04
輕松實(shí)現(xiàn)安卓(Android)九宮格解鎖
在平常使用手機(jī)的過(guò)程中,九宮格解鎖是我們經(jīng)常接觸到的。常見(jiàn)的比如有鎖屏中的九宮格,還有支付寶中的九宮格等。因?yàn)榫艑m格可以保護(hù)用戶的隱私,所以它的應(yīng)用面很廣泛。那么今天我們就來(lái)自定義一個(gè)屬于自己的九宮格吧!2016-08-08
Android 8.0版本更新無(wú)法自動(dòng)安裝問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了Android 8.0版本更新無(wú)法自動(dòng)安裝問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06
Android實(shí)現(xiàn)今日頭條訂閱頻道效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)今日頭條訂閱頻道效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01
Android利用Flutter?path繪制粽子的示例代碼
端午將至,作為中華民族的非常重要的傳統(tǒng)節(jié)日,粽子那是必不可少的。今天跟隨本篇文章用Flutter?path畫一個(gè)會(huì)科普節(jié)日的的粽子吧2022-05-05
Android?ViewPager?+?Fragment實(shí)現(xiàn)滑動(dòng)頁(yè)面效果
本文通過(guò)實(shí)例代碼較詳細(xì)的給大家介紹了Android?ViewPager?+?Fragment實(shí)現(xiàn)滑動(dòng)頁(yè)面效果,需要的朋友可以參考下2018-06-06

