Android實現(xiàn)根據(jù)評分添加星級條
簡述
在仿寫豆瓣的時候,發(fā)現(xiàn)了根據(jù)評分不同,星級數(shù)也不同的星級條。
百度一搜,發(fā)現(xiàn)Android有自帶控件UIRatingBar,而iOS得要自己寫…好吧,那就寫吧。
圖片素材
首先,要準備三張圖片,圖片如下:
空星,半星,全星
因為我們可以看到,在豆瓣的評分星級條里,只有空、半、全星,所以只需要準備這3種圖片。
思路
豆瓣的星級條中既有圖片,又有文字,所以我們自定義一個繼承于UIView的starView。
初始化方法
因為星級條要根據(jù)評分的數(shù)據(jù)來決定星的顆數(shù),所以我們要重新創(chuàng)建一個初始化方法:
//在starView.m中寫 - (instancetype)initWithFrame:(CGRect)frame score:(double)score; //在starView.h中對其進行操作實現(xiàn) - (instancetype)initWithFrame:(CGRect)frame score:(double)score{ self = [super initWithFrame:frame]; //記得把傳過來的score賦值給全局變量_starScore _starScore = score; return self; }
這樣,我們就可以在ViewController.m中利用此方法初始化一個星級條視圖:
starView *star = [[CJTStarView alloc] initWithFrame:CGRectMake(100, 100, 200, 50) score:6.8];
此處的score可以改成根據(jù)網(wǎng)絡請求得到的評分數(shù)據(jù)。
根據(jù)添加星星圖片
在這里,我設置的分數(shù)與星星的對應關系如下:
4.6-5.5 2.5顆星
5.6-6.5 3顆星
6.6-7.5 3.5顆星
7.6-8.5 4顆星
8.6-9.5 4.5顆星
而因為我們只有5顆星,所以對分數(shù)做如下處理:
_starScore = (_starScore / 2 - 0.3);
接下來就是用循環(huán)添加圖片到view上,因為我們有三種圖片,所以在循環(huán)中還要加判斷,代碼如下:
for (int count = 0; count < 5; count++) { UIImageView *starImageView = [[UIImageView alloc] init]; starImageView.frame = CGRectMake(count * self.frame.size.height, 0, self.frame.size.height, self.frame.size.height); [self addSubview:starImageView]; if (count <= _starScore - 0.5) { starImageView.image = [UIImage imageNamed:@"stars_full"]; } else { if (_starScore - count >= 0 && _starScore - count < 0.5) { starImageView.image = [UIImage imageNamed:@"stars_half"]; } else { starImageView.image = [UIImage imageNamed:@"stars_empty"]; } } }
這里的判斷條件是數(shù)學問題,就不詳細講了。
當然,如果分數(shù)與星星的對應規(guī)則和我不同,那么就要適當修正這里的判斷條件。
在星級條后添加分數(shù)
在豆瓣到星級條后面還有分數(shù),因此我們在view中添加一個UILabel對象。
UILabel *scoreLabel = [[UILabel alloc] init]; scoreLabel.frame = CGRectMake( 5 * self.frame.size.height + 10, 8, self.frame.size.width - 5 * self.frame.size.height - 10, self.frame.size.height - 8); scoreLabel.text = [NSString stringWithFormat:@"%.1f", _starScore]; scoreLabel.textColor = [UIColor grayColor]; scoreLabel.font = [UIFont systemFontOfSize:25];
這里要注意,因為我們在設置星級圖的時候會修改_starScore的值,所以要在添加星星圖片之前設置UILabel。
效果圖
最后做出來到效果如下:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Android開發(fā)教程之ContentProvider數(shù)據(jù)存儲
這篇文章主要介紹了Android開發(fā)教程之ContentProvider數(shù)據(jù)存儲的相關資料,需要的朋友可以參考下2016-12-12詳解Android中的MVP架構(gòu)分解和實現(xiàn)
本篇文章主要介紹了詳解Android中的MVP架構(gòu)分解和實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02Android從網(wǎng)絡中獲得一張圖片并顯示在屏幕上的實例詳解
這篇文章主要介紹了Android從網(wǎng)絡中獲得一張圖片并顯示在屏幕上的實例詳解的相關資料,希望通過本文能幫助大家實現(xiàn)這樣的功能,需要的朋友可以參考下2017-08-08Android音頻處理之通過AudioRecord去保存PCM文件進行錄制,播放,停止,刪除功能
這篇文章主要介紹了Android音頻處理之通過AudioRecord去保存PCM文件進行錄制,播放,停止,刪除功能的相關資料,需要的朋友可以參考下2016-11-11