其实评分的星星实现不是很难，实现的方法很多，有用Quartz2D绘制的，有用self.backgroundColor = UIColor(patternImage: UIImage(named: "imageName")!)来实现等等，网友提供的实例也很好很多。
这里我使用的UIImageView排列来实现，只有一个file，功能简单，代码简洁，一行代码就可以得到想要的效果。可以设置星星的个数（总分），可以设置间距，可以设置大小，可以根据提供不同的图片，得到的“星星”可以不同。到这里你是不是有点好奇呢，到底有多简单。
代码文件如下：
//
// StartView.swift
// MeiTuan_Swift
//
// Created by JornWu on 16/9/5.
// Copyright © 2016年 Jorn.Wu(jorn_wza@sina.com). All rights reserved.
//
/****************************************************************************************************/
/*
**
** 这是评分的星星个数视图，直接init(...)传入所需的参数就可以生成视图
**
*/
/****************************************************************************************************/
import UIKit
class StarView: UIView {
private var rate: CGFloat! //评分
private var total: Int! //总分
private var mStarWH: CGFloat! //星星宽高，默认20
private var mSpace: CGFloat! //间距，默认3
private var starImageFull: UIImage! //星星图片(填充的)（表示得到分数）
private var starImageEmpty: UIImage! //星星图片(未填充的)（表示未得到的分数）
convenience init(withRate rate: CGFloat, total: Int, starWH: CGFloat?, space: CGFloat?, starImageFull: UIImage, starImageEmpty: UIImage) {
var wh: CGFloat
var sp: CGFloat
if starWH == nil{
wh = 20 //默认 20
}else {
wh = starWH!
}
if space == nil{
sp = 3 //默认 3
}else {
sp = space!
}
self.init(frame: CGRectMake(0, 0, (wh + sp) * CGFloat(total), wh + sp * 2))//根据星星大小来确定
self.rate = rate
self.total = total
self.mStarWH = wh
self.mSpace = sp
self.starImageFull = starImageFull
self.starImageEmpty = starImageEmpty
setupView()
}
private func setupView() {
///比例
let r = mStarWH / starImageFull.size.width ///因为星星的大小是固定的，所以要适配starView的大小
let imgWH = starImageFull.size.width ///星星大小
///1 铺好底层
for index in 0 ..< total {
let c = index % total
let starView = UIImageView(frame: CGRectMake(mSpace + (imgWH + mSpace) * CGFloat(c), mSpace, imgWH, imgWH))///space为间距
starView.image = starImageEmpty
starView.contentMode = UIViewContentMode.Left
starView.transform = CGAffineTransformScale(starView.transform, r, r)///比例缩放
starView.frame = CGRectMake(mSpace + (mStarWH + mSpace) * CGFloat(c), mSpace, mStarWH, mStarWH)///调整位置
self.addSubview(starView)
}
///2.1 计算最后一个星星的宽度
let w = rate % 1 * mStarWH ///swift 浮点数可以取余
if w != 0 {//w 为0时裁剪图片出错
///2.2 处理最后那个星星
let fImage = UIImage.cutImage(image: starImageFull, withSize: CGSizeMake(w, mStarWH))
///3.铺好得分的星星
let num = rate - (rate % 1) + 1
for index in 0 ..< Int(num) {
let c = index % total
if index != Int(num - 1) {
let starView = UIImageView(frame: CGRectMake(mSpace + (imgWH + mSpace) * CGFloat(c), mSpace, imgWH, imgWH))
starView.image = starImageFull
starView.contentMode = UIViewContentMode.Left
starView.transform = CGAffineTransformScale(starView.transform, r, r)///比例缩放
starView.frame = CGRectMake(mSpace + (mStarWH + mSpace) * CGFloat(c), mSpace, mStarWH, mStarWH)
self.addSubview(starView)
}else {
let starView = UIImageView(frame: CGRectMake(mSpace + (imgWH + mSpace) * CGFloat(c), mSpace, imgWH, imgWH))
starView.image = fImage
starView.contentMode = UIViewContentMode.Left
starView.transform = CGAffineTransformScale(starView.transform, r, r)///比例缩放
starView.frame = CGRectMake(mSpace + (mStarWH + mSpace) * CGFloat(c), mSpace, mStarWH, mStarWH)
self.addSubview(starView)
}
}
}else {
///3.铺好得分的星星
for index in 0 ..< Int(rate) {
let c = index % total
let starView = UIImageView(frame: CGRectMake(mSpace + (imgWH + mSpace) * CGFloat(c), mSpace, imgWH, imgWH))
starView.image = starImageFull
starView.contentMode = UIViewContentMode.Left
starView.transform = CGAffineTransformScale(starView.transform, r, r)///比例缩放
starView.frame = CGRectMake(mSpace + (mStarWH + mSpace) * CGFloat(c), mSpace, mStarWH, mStarWH)
self.addSubview(starView)
}
}
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect) {
// Drawing code
}
*/
}
当然还有一个剪切图片的方法：可以放在该文件里或作为UIImageView的extention。
实现原理就是，用表示空的星星铺在底层，然后再根据所得的分，铺在上面铺表示得分的星星。整数部分不用处理，小数部分需要裁剪一下图片就好了。详细情况看代码吧。
//
// UIImageExtension.swift
// MeiTuan_Swift
//
// Created by JornWu on 16/9/5.
// Copyright © 2016年 Jorn.Wu(jorn_wza@sina.com). All rights reserved.
//
import Foundation
import UIKit
extension UIImage {
static func cutImage(image img: UIImage, withSize size: CGSize) -> UIImage {
var newSize: CGSize
///适应图片比例
if (img.size.width / img.size.height) < (size.width / size.height) {//比例 高过大
newSize = CGSizeMake(img.size.width, img.size.width * (size.height / size.width))
}else {//比例 宽过大
newSize = CGSizeMake(img.size.height * (size.width / size.height), img.size.height)
}
let imageRef = CGImageCreateWithImageInRect(img.CGImage, CGRectMake(0, 0, newSize.width, newSize.height))
let newImage = UIImage(CGImage: imageRef!)
return newImage
}
}
然后在需要的地方添加这条代码就可以得到评分星星视图了：
let starView = StarView(withRate: 3.75, total: 5, starWH: 30, space: 3,starImageFull: UIImage(named: "icon_star_full")!, starImageEmpty: UIImage(named: "icon_star_empty")!)
starView本质是一个UIView，还可以根据starView.frame来调整位置。是不是很简单呢，当然如果你想要可以点击星星来进行评分的话，还得在这基础上进行拓展咯。喜欢给个赞吧😝😝😝。
网友评论