美文网首页
星级评分

星级评分

作者: 小凡凡520 | 来源:发表于2019-02-12 15:32 被阅读1次
一、背景

许多App都会有评价功能,这个时候或许会需要实现星级评分,下面我们来简单的实现一个星级评分功能。

二、简单案例
1642454-b35609500c0a3253.png 2248583-322b952d34d16407.png
三、案例实现(根据星级浮点值显示星级结果)

前提条件: 准备两张图片,灰色底星级切图以及满星级切图

    @IBOutlet weak var bgImg: UIImageView!
    @IBOutlet weak var frontImg: UIImageView!
    @IBOutlet weak var slider: UISlider!

    fileprivate let bgImgWidth:CGFloat = 240
    fileprivate let originImgName:String = "originImg.png"

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        slider.minimumValue = 0
        slider.maximumValue = 1
        slider.addTarget(self, action: #selector(change(value:)), for: .valueChanged)
        
        if let img = UIImage(named: originImgName) {
            let curImg = cutImage(image: img, fractonPart: CGFloat(slider.value))
            frontImg.frame = CGRect(x: frontImg.frame.origin.x, y: frontImg.frame.origin.y, width: bgImgWidth * CGFloat(slider.value), height: frontImg.frame.size.height)
            frontImg.image = curImg
        }
    }

    @objc func change(value:UISlider) {
        if let img = UIImage(named: originImgName) {
            let curImg = cutImage(image: img, fractonPart: CGFloat(value.value))
            frontImg.frame = CGRect(x: frontImg.frame.origin.x, y: frontImg.frame.origin.y, width: bgImgWidth * CGFloat(value.value), height: frontImg.frame.size.height)
            frontImg.image = curImg
        }
    }

    func cutImage(image:UIImage,fractonPart:CGFloat) -> UIImage? {
        let width = image.size.width * fractonPart * image.scale
        let newFrame = CGRect(x: 0, y: 0, width: width, height: image.size.height * image.scale)
        if let source = image.cgImage {
            if let resultImage = source.cropping(to: newFrame) {
                let result = UIImage(cgImage: resultImage, scale: image.scale, orientation: image.imageOrientation)
                return result
            }
        }
        return nil
    }

相关文章

  • 星级评分

    一、背景 许多App都会有评价功能,这个时候或许会需要实现星级评分,下面我们来简单的实现一个星级评分功能。 二、简...

  • 星级评分条,不用ratingbar

    星级评分条,不用ratingbar# 使用seekbar 说起星级评分,最先想到的就是ratingbar...但是...

  • 星级评分条

    XML属性 1.android:isIndicator 是否允许改变,true为步允许2.android:n...

  • 星级评分显示

    首先创建一个StarView 最后在要显示星级评价的界面将其带入 最后来一张显示图

  • 星级评分StarScoreDemo

    今天做了一个点击/拖动小星星评分功能的控件,效果如下: 支持点击和滑动 原理简介:一.使用了UIControl控件...

  • Excel根据数据进行“星级评分”也可以很有趣【D15-2020

    今日学习来源:微信公众号“Excel学习营” 今日学习内容:Excel星级评分 根据数值进行星级评分,让数据更直观...

  • 星星评分控件TQStarRatingView揭秘!(一)

    今天为大家带来一个iOS星级评分控件的实现,欢迎拍砖。 在github上搜索iOS星级评分控件,可以看到TQSta...

  • iOS实践:一步步实现星级评分

    星级评分在几乎每一个电商平台都会出现,其实在这个星级评分里面不管有多少分,最终我们只用到了三张图片。我们把这个星级...

  • 【iOS】实现星级评分

    许多App都会有评价功能,这个时候或许会需要实现星级评分,下面我们来简单的实现一个星级评分功能。 具体实现 导入资...

  • JS实现星级评分

    朋友给我一份星级评价的html代码,说不能实现多行星级评价,让我帮忙看一下。 帮朋友修改的,怕到时候自己也用到了,...

网友评论

      本文标题:星级评分

      本文链接:https://www.haomeiwen.com/subject/uilkeqtx.html