Android实现根据评分添加星级条

简述

在仿写豆瓣的时候，发现了根据评分不同，星级数也不同的星级条。

百度一搜，发现Android有自带控件UIRatingBar，而iOS得要自己写…好吧，那就写吧。

图片素材

首先，要准备三张图片，图片如下：
空星，半星，全星

因为我们可以看到，在豆瓣的评分星级条里，只有空、半、全星，所以只需要准备这3种图片。

思路

豆瓣的星级条中既有图片，又有文字，所以我们自定义一个继承于UIView的starView。

初始化方法

因为星级条要根据评分的数据来决定星的颗数，所以我们要重新创建一个初始化方法：

//在starView.m中写

- (instancetype)initWithFrame:(CGRect)frame score:(double)score;

//在starView.h中对其进行操作实现
- (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可以改成根据网络请求得到的评分数据。

根据添加星星图片

在这里，我设置的分数与星星的对应关系如下：

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颗星，所以对分数做如下处理：

_starScore = (_starScore / 2 - 0.3);

接下来就是用循环添加图片到view上，因为我们有三种图片，所以在循环中还要加判断，代码如下：

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"];
  }
 }
 }

这里的判断条件是数学问题，就不详细讲了。

当然，如果分数与星星的对应规则和我不同，那么就要适当修正这里的判断条件。

在星级条后添加分数

在豆瓣到星级条后面还有分数，因此我们在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。

效果图

最后做出来到效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Android星级评分条控件RatingBar使用详解

    Android星级评分条控件RatingBar使用详解

    Android开发中,时不时的就有要实现星星的评分效果,比如某宝,某团,相信大家也都见过,当然了我们可以自己去画,也可以用美工给切的图去实现,其实在Android原生的控件中就可以来实现这样的效果,它就是RatingBar. 来,我们先看一张图(只在代码中引入了控件) 实现效果如下图: 我们先看一下它的继承关系:这玩意和SeekBar的类结构是一样的,也是ProgressBar的子类 相关属性: android:isIndicator:是否用作指示,用户无法更改,默认false android:

  • Android开发之拖动条/滑动条控件、星级评分控件功能的实例代码

    ProgressBar有2个子控件: SeekBar   拖动条控件 RatingBar   星级评分控件 1.拖动条控件 <SeekBar android:layout_width="300dp" android:layout_height="wrap_content" android:id="@+id/seekBar" android:min="0" android:max="100" andro

  • Android控件之RatingBar自定义星级评分样式

    Android控件之RatingBar自定义星级评分样式

    一.RatingBar简单介绍 RatingBar是基于SeekBar(拖动条)和ProgressBar(状态条)的扩展,用星形来显示等级评定,在使用默认RatingBar时,用户可以通过触摸/拖动/按键(比如遥控器)来设置评分, RatingBar自带有两种模式 ,一个小风格 ratingBarStyleSmall,大风格为ratingBarStyleIndicator,大的只适合做指示,不适用与用户交互. 效果图展示: 二.实例 1.布局文件 <?xml version="1.0&qu

  • Android星级评分条的实现代码

    Android星级评分条的实现代码

    RatingBar星级评分条 它跟拖动条类似.都允许用户拖动来改变进度,不同的是,星级评分条通过星星图案表示进度.想淘宝,等等都有这个东西.很简单. 重要记一个组件<RatingBar 属性列表></RatingBar>,属性见名知意 还有三个方法: 1.getRating()方法:获取等级,表示你当前选中了几颗星星 2.getStepSize()方法:每次最少可以改变多少星星(默认是0.5个) 3.getProgress()方法:获取进度,是前两个之积. activity_mai

  • Android实现根据评分添加星级条

    Android实现根据评分添加星级条

    简述 在仿写豆瓣的时候,发现了根据评分不同,星级数也不同的星级条. 百度一搜,发现Android有自带控件UIRatingBar,而iOS得要自己写-好吧,那就写吧. 图片素材 首先,要准备三张图片,图片如下: 空星,半星,全星 因为我们可以看到,在豆瓣的评分星级条里,只有空.半.全星,所以只需要准备这3种图片. 思路 豆瓣的星级条中既有图片,又有文字,所以我们自定义一个继承于UIView的starView. 初始化方法 因为星级条要根据评分的数据来决定星的颗数,所以我们要重新创建一个初始化方法

  • Android编程实现WebView添加进度条的方法

    本文实例讲述了Android编程实现WebView添加进度条的方法.分享给大家供大家参考,具体如下: 标准的XML界面 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

  • android自定义等级评分圆形进度条

    本文实例为大家分享了android评分圆形进度条的具体代码,供大家参考,具体内容如下 一.测试截图 二.实现原理 package com.freedomanlib; import java.util.Timer; import java.util.TimerTask; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import andr

  • Android高级界面组件之拖动条和评星条的功能实现

    Android高级界面组件之拖动条和评星条的功能实现

    一      拖动条 安卓手机音量设置都是给出一个拖动条,使得用户能够拖动滑块进行设置,这里我们介绍拖动条. 安卓拖动条控件是继承自ProgressBar控件,所以它能够支持ProgressBar的xml属性.但是他有自己的独特属性: android:max       设置最大的拖动两 android:progress     设置初始化进度 android:thumb        设置滑块图形 事件监听方面,拖动条需要注意:我们不在监听用户的点击操作,而是监听滑块的改变,下面用一个实例简单

  • Android view自定义实现动态进度条

    Android view自定义实现动态进度条

    Android  自定义view实现动态进度条 效果图: 这个是看了梁肖的demo,根据他的思路自己写了一个,但是我写的这个貌似计算还是有些问题,从上面的图就可以看出来,左侧.顶部.右侧的线会有被截掉的部分,有懂得希望能给说一下,改进一下,这个过程还是有点曲折的,不过还是觉得收获挺多的.比如通动画来进行动态的展示(之前做的都是通过Handler进行更新的所以现在换一种思路觉得特别好),还有圆弧的起止角度,矩形区域的计算等!关于绘制我们可以循序渐进,比如最开始先画圆,然后再画周围的线,最后设置动画

  • Android ListView中动态添加RaidoButton的实例详解

    Android ListView中动态添加RaidoButton的实例详解 这里讲解的内容是:从数据库中取得数据,将这些数据的value值赋值给Radiobutton的text属性,将这些数据的key值赋值给radiobutton的key值.同时实现点击一整行,更换radiobutton选择. XML代码:主要是添加一个ListView控件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&q

  • Android  view自定义实现动态进度条

    Android  view自定义实现动态进度条

    Android  自定义view实现动态进度条 效果图: 这个是看了梁肖的demo,根据他的思路自己写了一个,但是我写的这个貌似计算还是有些问题,从上面的图就可以看出来,左侧.顶部.右侧的线会有被截掉的部分,有懂得希望能给说一下,改进一下,这个过程还是有点曲折的,不过还是觉得收获挺多的.比如通动画来进行动态的展示(之前做的都是通过Handler进行更新的所以现在换一种思路觉得特别好),还有圆弧的起止角度,矩形区域的计算等!关于绘制我们可以循序渐进,比如最开始先画圆,然后再画周围的线,最后设置动画

  • Android实现向Launcher添加快捷方式的方法

    Android实现向Launcher添加快捷方式的方法

    本文实例讲述了Android实现向Launcher添加快捷方式的方法.分享给大家供大家参考.具体如下: 当我们在应用程序Launcher的桌面空白处长按触摸时,会出现一个对话框,提示选择要添加的桌面组件,如下图所示 选择快捷方式后,会弹出一个对话框,显示出了可添加快捷方式的Activity所属的应用程序的图标和名称的列表.当我们想把添加快捷方式的Activity添加到这一列表时,只需要在这个Activity注册时添加一个Action为android.intent.action.CREATE_SH

  • Android编程开发实现带进度条和百分比的多线程下载

    Android编程开发实现带进度条和百分比的多线程下载

    本文实例讲述了Android编程开发实现带进度条和百分比的多线程下载.分享给大家供大家参考,具体如下: 继上一篇<java多线程下载实例详解>之后,可以将它移植到我们的安卓中来,下面是具体实现源码: DownActivity.java: package com.example.downloads; import java.io.File; import java.io.IOException; import java.io.RandomAccessFile; import java.net.H

  • Android自定义View实现等级滑动条的实例

    Android自定义View实现等级滑动条的实例

     Android自定义View实现等级滑动条的实例 实现效果图: 思路: 首先绘制直线,然后等分直线绘制点: 绘制点的时候把X值存到集合中. 然后绘制背景图片,以及图片上的数字. 点击事件down的时候,换小图片为大图片.move的时候跟随手指移动. up的时候根据此时的X计算最近的集合中的点,然后自动吸附回去. 1,自定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <de

随机推荐