Android App中使用RatingBar實(shí)現(xiàn)星級(jí)打分功能的教程
RatingBar簡單介紹
RatingBar是基于SeekBar（拖動(dòng)條）和ProgressBar（狀態(tài)條）的擴(kuò)展，用星形來顯示等級(jí)評(píng)定，在使用默認(rèn)RatingBar時(shí)，用戶可以通過觸摸/拖動(dòng)/按鍵（比如遙控器）來設(shè)置評(píng)分， RatingBar自帶有兩種模式 ，一個(gè)小風(fēng)格 ratingBarStyleSmall，大風(fēng)格為ratingBarStyleIndicator，大的只適合做指示，不適用與用戶交互。
自定義RatingBar需要注意的地方
一般情況下，系統(tǒng)自帶的RatingBar是遠(yuǎn)遠(yuǎn)無法滿足開發(fā)需求的，我們根據(jù)圖片自定一個(gè)RatingBar，在開始實(shí)現(xiàn)自定義RatingBar之前，順帶說一下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)過程
首先，根據(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：是用來填充背景圖片的，和進(jìn)度條非常類似，當(dāng)我們?cè)O(shè)置最高評(píng)分時(shí)（android:numStars），系統(tǒng)就會(huì)根據(jù)我們的設(shè)置，來畫出以星星為單位的背景（假如android:numStars="5"，就會(huì)畫出5顆灰色的星星）
progress：是用來在背景圖片基礎(chǔ)上進(jìn)行填充的指示屬性（和進(jìn)度條類似，第一進(jìn)度位置）
secondaryProgress：同progress一樣屬于第二進(jìn)度位置（如果不定義這個(gè)，進(jìn)度條拖動(dòng)，每次就畫出一整顆星星（亮），第二進(jìn)度（暗）沒有覆蓋掉第一進(jìn)度之后的位置，從左往右是拖不出來N.5顆星星的，這樣評(píng)分效果就不完整）
其次，通過開始介紹，我們知道RatingBar的樣式是通過style來切換的，在android中，我們可以通過在styles.xml文件中通過設(shè)置style屬性，來繼承我們需要自定控件類型，如下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>
通過 parent屬性來選擇繼承的父類，我們這里繼承RatingBar類。
重新定義 progressDrawable屬性（RatingBar的背景條，和我們?cè)谑紫壤锩娼榻B的那樣）
maxHeight和minHeight可以根據(jù)我們圖片像素或者其他參考值來設(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)分的步長
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);
}
//此方法表示 開始拖動(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開發(fā)之自定義星星評(píng)分控件RatingBar用法示例
相關(guān)文章
flutter實(shí)現(xiàn)頁面多個(gè)webview的方案詳解
這篇文章主要為大家詳細(xì)介紹了flutter如何實(shí)現(xiàn)頁面多個(gè)webview的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解下2023-09-09
這篇文章主要為大家詳細(xì)介紹了Android自定義字母導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
View 的繪制是在 ViewRoot 的 performTraversals() 開始的，它歷經(jīng) measure(測(cè)量), layout(布局), draw(繪制) 三個(gè)流程將 View 顯示在屏幕上。2021-05-05
OkHttp 是 Square 公司開源的一款網(wǎng)絡(luò)框架,封裝了一個(gè)高性能的 http 請(qǐng)求庫,本文對(duì)OkHttp原理給大家詳細(xì)講解,感興趣的朋友跟隨小編一起看看吧2024-01-01
深入理解Android中Scroller的滾動(dòng)原理
今天給大家講解的是Scroller類的滾動(dòng)實(shí)現(xiàn)原理，可能很多朋友不太了解該類是用來干嘛的，但是研究Launcher的朋友應(yīng)該對(duì)他很熟悉，Scroller類是滾動(dòng)的一個(gè)封裝類，可以實(shí)現(xiàn)View的平滑滾動(dòng)效果，而我們今天就來探究一下為什么Scroller能夠?qū)崿F(xiàn)平滑滾動(dòng)。2016-08-08
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)拼圖小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
解析android 流量監(jiān)測(cè)的實(shí)現(xiàn)原理
本篇文章是對(duì)android中流量監(jiān)測(cè)的實(shí)現(xiàn)原理進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
談?wù)凙ndroid開發(fā)之RecyclerView的使用全解
這篇文章主要介紹了談?wù)凙ndroid開發(fā)之RecyclerView的使用全解，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2016-12-12
Android使用BroadcastReceiver監(jiān)聽網(wǎng)絡(luò)連接狀態(tài)的改變
這篇文章主要為大家詳細(xì)介紹了Android使用BroadcastReceiver監(jiān)聽網(wǎng)絡(luò)連接狀態(tài)的改變，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
Android TabHost如何實(shí)現(xiàn)頂部選項(xiàng)卡
這篇文章主要介紹了Android TabHost如何實(shí)現(xiàn)頂部選項(xiàng)卡,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09