xcode上的自定义uislider

时间：2015-01-05 07:00:32

标签： swift uislider

我学得很快。我有个问题。 如何创建这样的，泡泡标签总是跟随滑块圈，当他们按+滑块也改变+1（标签也改变+1），所以做 - 按钮：

http://i57.tinypic.com/2ztfudi.jpg http://i57.tinypic.com/2ztfudi.jpg

滑块值更改时

静态标签更改：

@IBAction func sliderValueChanged(sender: UISlider) {
    var currentValue = Int(sender.value)
    stepper.value = Double(currentValue)
    labelku.text = "\(currentValue)"
}
步进值更改时

静态标签更改：

@IBAction func stepperValueChanged(sender: UIStepper) {
    var stepperValue = Int(sender.value)
    slider.value = Float(stepperValue)
    labelku.text = Int(sender.value).description
}

编辑：我把气泡语法放在每个ibaction中，所以每当currentValue或stepperValue改变时，气泡就会改变它的位置

编辑：这是执行该操作的长代码，但可能更短。它是由你决定。我喜欢更长的一个：）

@IBAction func sliderValueChanged(sender: UISlider) {
    var currentValue = Int(sender.value)
    stepper.value = Double(currentValue)
    labelku.text = "\(currentValue)"
    if(currentValue == 0 || currentValue == 1 || currentValue == 2 || currentValue == 3 || currentValue == 4 || currentValue == 5 || currentValue == 6){
        self.catImageView.hidden = false
        self.catImageView2.hidden = true
        self.catImageView3.hidden = true
        let catImages1 = (1...6).map { UIImage(named: "ra_tr_\($0)")! }
        self.catImageView.animationImages = catImages1
        self.catImageView.animationDuration = 1.0
        self.catImageView.startAnimating()
    }else if(currentValue == 7 || currentValue == 8){
        self.catImageView.stopAnimating()
        self.catImageView.hidden = true
        self.catImageView2.hidden = false
        self.catImageView3.hidden = true
        let catImages2 = (1...6).map { UIImage(named: "ra_av_\($0)")! }
        self.catImageView2.animationImages = catImages2
        self.catImageView2.animationDuration = 1.0
        self.catImageView2.startAnimating()
    }else if(currentValue == 9 || currentValue == 10){
        self.catImageView2.stopAnimating()
        self.catImageView.hidden = true
        self.catImageView2.hidden = true
        self.catImageView3.hidden = false
        let catImages3 = (1...12).map { UIImage(named: "ra_ve_\($0)")! }
        self.catImageView3.animationImages = catImages3
        self.catImageView3.animationDuration = 1.0
        self.catImageView3.startAnimating()
    }
    if(currentValue == 0){
        nomor0.hidden = false
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(currentValue == 1){
        nomor0.hidden = true
        nomor1.hidden = false
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(currentValue == 2){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = false
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(currentValue == 3){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = false
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(currentValue == 4){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = false
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(currentValue == 5){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = false
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(currentValue == 6){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = false
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(currentValue == 7){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = false
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(currentValue == 8){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = false
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(currentValue == 9){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = false
        nomor10.hidden = true
    }else if(currentValue == 10){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = false
    }
}
@IBAction func stepperValueChanged(sender: UIStepper) {
    var stepperValue = Int(sender.value)
    //println(Int(sender.value))
    slider.value = Float(stepperValue)
    labelku.text = Int(sender.value).description
    if(stepperValue == 0 || stepperValue == 1 || stepperValue == 2 || stepperValue == 3 || stepperValue == 4 || stepperValue == 5 || stepperValue == 6){
        self.catImageView.hidden = false
        self.catImageView2.hidden = true
        self.catImageView3.hidden = true
        let catImages1 = (1...6).map { UIImage(named: "ra_tr_\($0)")! }
        self.catImageView.animationImages = catImages1
        self.catImageView.animationDuration = 1.0
        self.catImageView.startAnimating()
    }else if(stepperValue == 7 || stepperValue == 8){
        self.catImageView.stopAnimating()
        self.catImageView.hidden = true
        self.catImageView2.hidden = false
        self.catImageView3.hidden = true
        let catImages2 = (1...6).map { UIImage(named: "ra_av_\($0)")! }
        self.catImageView2.animationImages = catImages2
        self.catImageView2.animationDuration = 1.0
        self.catImageView2.startAnimating()
    }else if(stepperValue == 9 || stepperValue == 10){
        self.catImageView2.stopAnimating()
        self.catImageView.hidden = true
        self.catImageView2.hidden = true
        self.catImageView3.hidden = false
        let catImages3 = (1...12).map { UIImage(named: "ra_ve_\($0)")! }
        self.catImageView3.animationImages = catImages3
        self.catImageView3.animationDuration = 1.0
        self.catImageView3.startAnimating()
    }
    if(stepperValue == 0){
        nomor0.hidden = false
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(stepperValue == 1){
        nomor0.hidden = true
        nomor1.hidden = false
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(stepperValue == 2){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = false
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(stepperValue == 3){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = false
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(stepperValue == 4){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = false
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(stepperValue == 5){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = false
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(stepperValue == 6){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = false
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(stepperValue == 7){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = false
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(stepperValue == 8){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = false
        nomor9.hidden = true
        nomor10.hidden = true
    }else if(stepperValue == 9){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = false
        nomor10.hidden = true
    }else if(stepperValue == 10){
        nomor0.hidden = true
        nomor1.hidden = true
        nomor2.hidden = true
        nomor3.hidden = true
        nomor4.hidden = true
        nomor5.hidden = true
        nomor6.hidden = true
        nomor7.hidden = true
        nomor8.hidden = true
        nomor9.hidden = true
        nomor10.hidden = false
    }
}
override func viewDidLoad() {
    super.viewDidLoad()
    stepper.wraps = true
    stepper.autorepeat = true
    stepper.minimumValue = 0
    slider.minimumValue = 0
    stepper.maximumValue = 10
    slider.maximumValue = 10
    stepper.stepValue = 1
    stepper.value = 0
    slider.value = 0
    questionText.text = question.description

    self.catImageView.animationDuration = 1.0
    self.catImageView.animationImages = getCatAnimation(labelku.tag)
    self.catImageView.startAnimating()

    answerLabel.layer.borderWidth = 1.0
    answerLabel.layer.cornerRadius = 5.2
    answerLabel.layer.borderColor = ColorLightGreyForQuestion.CGColor
    answerLabel.text = placeHolderText

    self.answerLabel.backgroundColor = UIColor(patternImage: UIImage(named: "buble.png")!)
    answerLabel.textColor = UIColor.whiteColor()
}

希望它可以帮助其他人。

问候。

1 个答案:

答案 0 :(得分：0)

您可以尝试使用PaintCode，这是一个将图形转换为代码的应用。它非常适合您尝试制作的东西。您可以导出到Swift（或Objective-C）。

Here是我发现的解释PaintCode的最佳视频。 PaintCode可以免费试用（相当严格，因为你无法打开保存的文件），花费大约80美元。

修改的

此代码创建于11分钟，46秒：

![func drawSlider(#value: CGFloat, textValue: String, leftText: String, rightText: String) {
    //// General Declarations
    let context = UIGraphicsGetCurrentContext()

    //// Color Declarations
    let color = UIColor(red: 0.170, green: 0.565, blue: 0.571, alpha: 1.000)
    let color2 = UIColor(red: 0.120, green: 0.635, blue: 0.521, alpha: 1.000)

    //// Variable Declarations
    let barWidth: CGFloat = value * 20
    let buttonPosition: CGFloat = 20 + value * 20
    let bubblePosition: CGFloat = value * 20 + 1

    //// Rectangle Drawing
    let rectanglePath = UIBezierPath(rect: CGRectMake(31, 96, 200, 4))
    UIColor.grayColor().setFill()
    rectanglePath.fill()


    //// Rectangle 2 Drawing
    let rectangle2Path = UIBezierPath(rect: CGRectMake(31, 96, barWidth, 4))
    color.setFill()
    rectangle2Path.fill()


    //// Oval Drawing
    var ovalPath = UIBezierPath(ovalInRect: CGRectMake(buttonPosition, 88, 20, 19))
    color.setFill()
    ovalPath.fill()


    //// Group
    CGContextSaveGState(context)
    CGContextTranslateCTM(context, bubblePosition, 19)



    //// Oval 2 Drawing
    var oval2Path = UIBezierPath()
    oval2Path.moveToPoint(CGPointMake(35.42, 56.15))
    oval2Path.addCurveToPoint(CGPointMake(57, 28.5), controlPoint1: CGPointMake(47.81, 53.06), controlPoint2: CGPointMake(57, 41.85))
    oval2Path.addCurveToPoint(CGPointMake(28.5, 0), controlPoint1: CGPointMake(57, 12.76), controlPoint2: CGPointMake(44.24, 0))
    oval2Path.addCurveToPoint(CGPointMake(0, 28.5), controlPoint1: CGPointMake(12.76, 0), controlPoint2: CGPointMake(0, 12.76))
    oval2Path.addCurveToPoint(CGPointMake(23.94, 56.64), controlPoint1: CGPointMake(0, 42.69), controlPoint2: CGPointMake(10.37, 54.45))
    oval2Path.addCurveToPoint(CGPointMake(29, 65), controlPoint1: CGPointMake(25.42, 56.88), controlPoint2: CGPointMake(27.45, 65))
    oval2Path.addCurveToPoint(CGPointMake(35.42, 56.15), controlPoint1: CGPointMake(31.39, 65), controlPoint2: CGPointMake(33.2, 56.71))
    color2.setFill()
    oval2Path.fill()
    color.setStroke()
    oval2Path.lineWidth = 2
    oval2Path.stroke()


    //// Text Drawing
    let textRect = CGRectMake(9, 10, 40, 39)
    let textStyle = NSMutableParagraphStyle.defaultParagraphStyle().mutableCopy() as NSMutableParagraphStyle
    textStyle.alignment = NSTextAlignment.Center

    let textFontAttributes = \[NSFontAttributeName: UIFont(name: ".HelveticaNeueDeskInterface-Regular", size: 34)!, NSForegroundColorAttributeName: UIColor.whiteColor(), NSParagraphStyleAttributeName: textStyle\]

    let textTextHeight: CGFloat = NSString(string: textValue).boundingRectWithSize(CGSizeMake(textRect.width, CGFloat.infinity), options: NSStringDrawingOptions.UsesLineFragmentOrigin, attributes: textFontAttributes, context: nil).size.height
    CGContextSaveGState(context)
    CGContextClipToRect(context, textRect);
    NSString(string: textValue).drawInRect(CGRectMake(textRect.minX, textRect.minY + (textRect.height - textTextHeight) / 2, textRect.width, textTextHeight), withAttributes: textFontAttributes)
    CGContextRestoreGState(context)



    CGContextRestoreGState(context)


    //// Text 2 Drawing
    let text2Rect = CGRectMake(19, 113, 48, 29)
    let text2Style = NSMutableParagraphStyle.defaultParagraphStyle().mutableCopy() as NSMutableParagraphStyle
    text2Style.alignment = NSTextAlignment.Center

    let text2FontAttributes = \[NSFontAttributeName: UIFont(name: ".HelveticaNeueDeskInterface-Regular", size: 14)!, NSForegroundColorAttributeName: UIColor.grayColor(), NSParagraphStyleAttributeName: text2Style\]

    let text2TextHeight: CGFloat = NSString(string: leftText).boundingRectWithSize(CGSizeMake(text2Rect.width, CGFloat.infinity), options: NSStringDrawingOptions.UsesLineFragmentOrigin, attributes: text2FontAttributes, context: nil).size.height
    CGContextSaveGState(context)
    CGContextClipToRect(context, text2Rect);
    NSString(string: leftText).drawInRect(CGRectMake(text2Rect.minX, text2Rect.minY + (text2Rect.height - text2TextHeight) / 2, text2Rect.width, text2TextHeight), withAttributes: text2FontAttributes)
    CGContextRestoreGState(context)


    //// Text 3 Drawing
    let text3Rect = CGRectMake(200, 113, 48, 29)
    let text3Style = NSMutableParagraphStyle.defaultParagraphStyle().mutableCopy() as NSMutableParagraphStyle
    text3Style.alignment = NSTextAlignment.Center

    let text3FontAttributes = \[NSFontAttributeName: UIFont(name: ".HelveticaNeueDeskInterface-Regular", size: 14)!, NSForegroundColorAttributeName: UIColor.grayColor(), NSParagraphStyleAttributeName: text3Style\]

    let text3TextHeight: CGFloat = NSString(string: rightText).boundingRectWithSize(CGSizeMake(text3Rect.width, CGFloat.infinity), options: NSStringDrawingOptions.UsesLineFragmentOrigin, attributes: text3FontAttributes, context: nil).size.height
    CGContextSaveGState(context)
    CGContextClipToRect(context, text3Rect);
    NSString(string: rightText).drawInRect(CGRectMake(text3Rect.minX, text3Rect.minY + (text3Rect.height - text3TextHeight) / 2, text3Rect.width, text3TextHeight), withAttributes: text3FontAttributes)
    CGContextRestoreGState(context)
}]

此代码完全未经测试......

Preview in PaintCode

有四个参数;

  1. 滑块的值（期望0到10）
  2. 要放入冒泡的文字值
  3. 左侧文字
  4. 正确的文字

    5. 代码限制 - 它是固定宽度（200px）。但这可能会改变。

    后续步骤：

    1. 通过扩展UIView
      2. 创建自定义视图
    2. 创建表示四个变量的属性
    3. 从draw方法
      4. 调用上述代码
    4. 将您的自定义视图添加到您的UIViewController或其他任何

      5. 以下是PaintCode file供参考。

相关问题
最新问题