Question

如果我们必须在iOS上执行此操作Smiley Rating Bar ...我们该怎么做？

在链接示例中，使用gif，但让我们避免这个
如果我不得不这样做......我将使用5张脸部图像作为背景，并附上各自的描述。

对于在其位置移动的面部，X将使用UIPanGestureRecognizer：

class ViewController: UIViewController  , UIGestureRecognizerDelegate , UITextFieldDelegate{

@IBOutlet weak var image1: UIImageView!

var panGesture  = UIPanGestureRecognizer()

override func viewDidLoad() {
    super.viewDidLoad()
    panGesture = UIPanGestureRecognizer(target: self, action: #selector(ViewController.draggedView(_:)))
    image1.isUserInteractionEnabled = true
    image1.addGestureRecognizer(panGesture)
}

func draggedView(_ sender:UIPanGestureRecognizer){
    self.view.bringSubview(toFront: image1)
    let translation = sender.translation(in: self.view)
    image1.center = CGPoint(x: image1.center.x + translation.x, y: image1.center.y)
    sender.setTranslation(CGPoint.zero, in: self.view)

    }
}

我的问题是如何移动image1来检测下面图像“上方”的内容。像这样：

所以......任何帮助我都会感激

Answer 1

I have done the same thing, Please use

https://github.com/gali8/G8SliderStep/tree/master/G8SliderStep库。请使用以下G8SliderStep.swift文件中的Draw标签和Draw Images方法替换。

 @objc internal func drawLabels() {

    guard let ti = tickTitles else {
        return
    }

    if _stepTickLabels == nil {
        _stepTickLabels = []
    }

    if let sl = _stepTickLabels {
        for l in sl {
            l.removeFromSuperview()
        }
        _stepTickLabels?.removeAll()

        for index in 0..<ti.count {
            let title = ti[index]
            let lbl = UILabel()
            lbl.font = unselectedFont
            lbl.text = title
            lbl.textAlignment = .center
            lbl.sizeToFit()

            var offset: CGFloat = 0
            if index+1 < (steps%2 == 0 ? steps/2+1 : steps/2) {
                offset = trackLeftOffset/2
            }
            else if index+1 > (steps%2 == 0 ? steps/2+1 : steps/2) {
                offset = -(trackRightOffset/2)
            }
            if index == 0 {
                offset = trackLeftOffset
            }

            if index == steps {
                offset = -trackRightOffset
            }

            let x = offset + CGFloat(Double(index) * stepWidth) - (lbl.frame.size.width / 2)
            var rect = lbl.frame
            rect.origin.x = x
            rect.origin.y = bounds.midY - (bounds.size.height / 2) - rect.size.height + 80
            lbl.frame = rect
            self.addSubview(lbl)
            _stepTickLabels?.append(lbl)
        }
    }
}

@objc internal func drawImages() {
    guard let ti = tickImages else {
        return
    }

    if _stepTickImages == nil {
        _stepTickImages = []
    }

    if let sl = _stepTickImages {
        for l in sl {
            l.removeFromSuperview()
        }
        _stepTickImages?.removeAll()

        for index in 0..<ti.count {
            let img = ti[index]
            let imv = UIImageView(image: img)
            imv.contentMode = .scaleAspectFit
            imv.sizeToFit()

            var offset: CGFloat = 0

            if index+1 < (steps%2 == 0 ? steps/2+1 : steps/2) {
                offset = trackLeftOffset/2
            }
            else if index+1 > (steps%2 == 0 ? steps/2+1 : steps/2) {
                offset = -(trackLeftOffset/2)
            }

            if index == 0 {
                offset = trackLeftOffset
            }

            if index == steps {
                offset = -trackRightOffset
            }

            let x = offset + CGFloat(Double(index) * stepWidth) - (imv.frame.size.width / 2)
            var rect = imv.frame
            rect.origin.x = x
            rect.origin.y = bounds.midY - (bounds.size.height / 2)
            imv.frame = rect
            self.insertSubview(imv, at: 2) //index 2 => draw images below the thumb/above the line
            _stepTickImages?.append(imv)
        }
    }
}

Please get selected and unselected emoticons image from your personal resource, and pass those image in array as done in given example.In your view controller in viewDidLoad please write this code:
 override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        sliderStepBar.stepImages =   [UIImage(named:"terrible")!, UIImage(named:"bad")!, UIImage(named:"okay")!, UIImage(named:"good")!,UIImage(named:"great")!, ]

        sliderStepBar.tickTitles = ["Terrible", "Bad", "Okay", "Good", "Great"]
        sliderStepBar.tickImages = [#imageLiteral(resourceName: "unselectterrible"), #imageLiteral(resourceName: "unselectbad"), #imageLiteral(resourceName: "unselectokay"),#imageLiteral(resourceName: "unselectgood"),#imageLiteral(resourceName: "unselectgreat")]
        sliderStepBar.minimumValue = 4
        sliderStepBar.maximumValue = Float(sliderStepBar.stepImages!.count) + sliderStepBar.minimumValue - 1.0
        sliderStepBar.stepTickColor = UIColor.clear
        sliderStepBar.stepTickWidth = 40
        sliderStepBar.stepTickHeight = 40
        sliderStepBar.trackHeight = 5
        sliderStepBar.value = 5

    }

享受笑脸评分。编码愉快。

Answer 2

我已经创建了相同的图片，请检查下图

概述

轻松自定义（字体，颜色，图像，刻度，高度，宽度，舍入） @IBInspectable
可贴
可拖动
Swift 5.0以上
上面的Xcode 11
方向支持
手动拖放课程

找到代码的GIT URL

SmileyRating

笑脸评级栏迅速

2 个答案: