swift - 自定义分段控制效果

Question

这是我想做的:

但是，对于分段控制:我唯一能做的就是选择背景和色调。

如何个性化分段控件以实现此目标？如果不可能，我该怎么办？

非常感谢!

Answer 1

在 Swift 3 中试试这个:

 mySegment.isMomentary = true
 mySegment.layer.cornerRadius = mySegment.bounds.height / 2
 mySegment.layer.borderColor = UIColor.black.cgColor 
 mySegment.layer.borderWidth = 1
 mySegment.tintColor = UIColor.black
 mySegment.clipsToBounds = true

或者你必须使用 UIBezierPath 和 CAShapeLayer

var OldShape = CAShapeLayer()
var OldShape2 = CAShapeLayer()

 override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)


    mySegment.isMomentary = true
    mySegment.tintColor = UIColor.red
    mySegment.setTitle("Oui", forSegmentAt: 0)
    mySegment.setTitle("Non", forSegmentAt: 1)
    drawBorderLine(myView: mySegment)

    mySegment.layer.cornerRadius = mySegment.bounds.height / 2
    mySegment.clipsToBounds = true

    }

    func drawBorderLine(myView : UISegmentedControl)  {


   let path = UIBezierPath(roundedRect: myView.bounds,
                           byRoundingCorners: [.topLeft, .bottomLeft, .bottomRight, .topRight],
                           cornerRadii: CGSize(width: 20.0, height: myView.bounds.height / 2))

    path.move(to: CGPoint(x: myView.bounds.midX, y: myView.bounds.minY))
    path.addLine(to: CGPoint(x: myView.bounds.midX, y: myView.bounds.maxY))

    let shape = CAShapeLayer()
    shape.path = path.cgPath
    shape.fillColor = UIColor.clear.cgColor
    shape.lineWidth = 3
    shape.lineCap = kCALineCapRound
    shape.strokeColor = UIColor.lightGray.cgColor
    myView.layer.insertSublayer(shape, at: 0)




}


    @IBAction func valueChange(_ sender: UISegmentedControl) {

    // setting shape red
    let shape = CAShapeLayer()
    shape.fillColor = UIColor.clear.cgColor
    shape.lineWidth = 3
    shape.lineCap = kCALineCapRound
    shape.strokeColor = UIColor.red.cgColor

    // setting shape lightGray
    let shape2 = CAShapeLayer()
    shape2.fillColor = UIColor.clear.cgColor
    shape2.lineWidth = 3
    shape2.lineCap = kCALineCapRound
    shape2.strokeColor = UIColor.lightGray.cgColor




    switch sender.selectedSegmentIndex {
    case 1:
        let element = sender.subviews[0]
        let path = UIBezierPath(roundedRect: element.bounds, byRoundingCorners: [.topRight, .bottomRight],
                                cornerRadii: CGSize(width: 20.0, height: element.bounds.height / 2))


        shape.path = path.cgPath



        let element2 = sender.subviews[1]
        let path2 = UIBezierPath(roundedRect: element2.bounds, byRoundingCorners: [.bottomLeft, .topLeft],
                                 cornerRadii: CGSize(width: 20.0, height: element2.bounds.height / 2))



        shape2.path = path2.cgPath

        SelectAndDeselect(myViewSelect: element, myViewDeselect: element2, select: shape, deselect: shape2)



    case 0:

        let element = sender.subviews[1]
        let path = UIBezierPath(roundedRect: element.bounds, byRoundingCorners: [.topLeft, .bottomLeft],
                                cornerRadii: CGSize(width: 20.0, height: element.bounds.height / 2))


        shape.path = path.cgPath


        let element2 = sender.subviews[0]
        let path2 = UIBezierPath(roundedRect: element2.bounds, byRoundingCorners: [.bottomRight, .topRight],
                                 cornerRadii: CGSize(width: 20.0, height: element2.bounds.height / 2))


        shape2.path = path2.cgPath

        SelectAndDeselect(myViewSelect: element, myViewDeselect: element2, select: shape, deselect: shape2)



    default:
        break
    }


}

func SelectAndDeselect(myViewSelect : UIView, myViewDeselect : UIView, select : CAShapeLayer, deselect : CAShapeLayer )  {

    if OldShape.path != nil {

        OldShape.removeFromSuperlayer()
        OldShape = select
        myViewSelect.layer.addSublayer(OldShape)
    }else{
        OldShape = select
        myViewSelect.layer.addSublayer(OldShape)

    }

    if OldShape2.path != nil{
        OldShape2.removeFromSuperlayer()
        OldShape2 = deselect
        myViewDeselect.layer.addSublayer(OldShape2)
    }else{
        OldShape2 = deselect
        myViewDeselect.layer.addSublayer(OldShape2)

    }
}