带图标的分段控件的PureLayout

时间:2019-01-09 02:17:28

标签: ios swift pure-layout segmentedcontrol

我做了我的第一个分段控件,并且效果很好,现在我正在尝试优化代码,我想在我的类分段控件中尝试一些新的东西,例如Purelayout ...可以有人告诉我如何做同样的分段控件但如果采用纯布局,则欢迎其他任何想法或建议。

import UIKit


class VehicleSegmentedControl:UIControl {

private var imageViewList = [UIImageView]()
var thumbView = UIView()

var items: [String] = ["item1", "item2", "item3"] {
    didSet {
        setupImageView()
    }
}

var selectedIndex : Int = 0 {
    didSet {
        displayNewSelectedIndex()
    }
}

var selectedLabelColor : UIColor = UIColor.walkthroughOrangeAccent
var unselectedLabelColor : UIColor = UIColor.white
var thumbColor : UIColor = UIColor.orange


var font : UIFont! = UIFont.systemFont(ofSize: 12)

override init(frame: CGRect) {
    super.init(frame: frame)

    setupView()
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
    setupView()
}

func setupView(){
    layer.masksToBounds = true
    layer.borderColor = UIColor.walkthroughOrangeAccent.cgColor
    layer.borderWidth = 2

    backgroundColor = UIColor(white: 1, alpha: 0.2)

    setupImageView()

    addIndividualItemConstraints(items: imageViewList, mainView: self, padding: 0)

    insertSubview(thumbView, at: 0)

}

func setupImageView(){

    for label in imageViewList {
        label.removeFromSuperview()
    }

    imageViewList.removeAll(keepingCapacity: true)

    for index in 1...items.count {
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 150, height: 70))
        imageView.image = UIImage(named: items[index - 1])
        imageView.backgroundColor = UIColor.clear
        imageView.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(imageView)
        imageViewList.append(imageView)
    }

    addIndividualItemConstraints(items: imageViewList, mainView: self, padding: 0)
}

override func layoutSubviews() {
    super.layoutSubviews()
    layer.cornerRadius = frame.height/2.0
    var selectFrame = self.bounds
    let newWidth = selectFrame.width / CGFloat(items.count)
    selectFrame.size.width = newWidth
    thumbView.frame = selectFrame
    thumbView.backgroundColor = .walkthroughOrangeAccent
    thumbView.layer.cornerRadius = thumbView.frame.height / 2

    displayNewSelectedIndex()

}

override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {

    let location = touch.location(in: self)

    var calculatedIndex : Int?
    for (index, item) in imageViewList.enumerated() {
        if item.frame.contains(location) {
            calculatedIndex = index
        }
    }


    if calculatedIndex != nil {
        selectedIndex = calculatedIndex!
        sendActions(for: .valueChanged)
    }

    return false
}

func displayNewSelectedIndex(){
    for (_, item) in imageViewList.enumerated() {
        item.layer.masksToBounds = true
        item.layer.borderColor = unselectedLabelColor.cgColor
    }

    let imageView = imageViewList[selectedIndex]
    imageView.layer.borderColor = selectedLabelColor.cgColor

    UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping:  0.5, initialSpringVelocity: 0.8, options: .curveEaseIn, animations: {
        self.thumbView.frame = imageView.frame

    }, completion: nil)

}

func addIndividualItemConstraints(items: [UIView], mainView: UIView, padding: CGFloat) {

    for (index, button) in items.enumerated() {

        let topConstraint = NSLayoutConstraint(item: button, attribute: .top, relatedBy:.equal, toItem: mainView, attribute: .top, multiplier: 1.0, constant: 0)

        let bottomConstraint = NSLayoutConstraint(item: button, attribute: .bottom, relatedBy: .equal, toItem: mainView, attribute: .bottom, multiplier: 1.0, constant: 0)

        var rightConstraint : NSLayoutConstraint!

        if index == items.count - 1 {

            rightConstraint = NSLayoutConstraint(item: button, attribute: .right, relatedBy: .equal, toItem: mainView, attribute: .right, multiplier: 1.0, constant: -padding)

        }else{

            let nextButton = items[index+1]
            rightConstraint = NSLayoutConstraint(item: button, attribute: .right, relatedBy: .equal, toItem: nextButton, attribute: .left, multiplier: 1.0, constant: -padding)
        }


        var leftConstraint : NSLayoutConstraint!

        if index == 0 {

            leftConstraint = NSLayoutConstraint(item: button, attribute: .left, relatedBy:  .equal, toItem: mainView, attribute: .left, multiplier: 1.0, constant: padding)

        }else{

            let prevButton = items[index-1]
            leftConstraint = NSLayoutConstraint(item: button, attribute: .left, relatedBy: NSLayoutConstraint.Relation.equal, toItem: prevButton, attribute: .right, multiplier: 1.0, constant: padding)

            let firstItem = items[0]

            let widthConstraint = NSLayoutConstraint(item: button, attribute: .width, relatedBy: .equal, toItem: firstItem, attribute: .width, multiplier: 1.0  , constant: 0)

            mainView.addConstraint(widthConstraint)
        }

        mainView.addConstraints([topConstraint, bottomConstraint, rightConstraint, leftConstraint])
    }
}

}

0 个答案:

没有答案