How to customize UISegmentedControl to change selected segment bottom border?

问题

I want to customize UISegmentedControl like this image:

回答1:

Use extension with this self.segmentController.customizeAppearance(for: 1)

Call addBorder method and pass your UISegmentedControl as a parameter

    static func addBorder(_ uiSegmentControl: UISegmentedControl){

    var upperBorder: CALayer = CALayer()
    upperBorder.backgroundColor = UIColor.init(red: 255.0, green:255.0, blue: 255.0, alpha: 1.0).cgColor
    upperBorder.frame = CGRect(x: 0, y: Int(ceil(uiSegmentControl.subviews[0].bounds.height))-1, width: Int(floor(uiSegmentControl.bounds.width)), height: 1)
    uiSegmentControl.layer.addSublayer(upperBorder)

    for i in 0..<uiSegmentControl.subviews.count {

        if i == uiSegmentControl.selectedSegmentIndex {
            upperBorder = CALayer()
            upperBorder.backgroundColor = UIColor.init(red: 215/255.0, green: 0.0, blue: 30/255.0, alpha: 1.0).cgColor
            upperBorder.frame = CGRect(x: i*Int(ceil(uiSegmentControl.subviews[i].bounds.width)), y: Int(ceil(uiSegmentControl.subviews[i].bounds.height))-1, width: Int(floor(uiSegmentControl.subviews[i].bounds.width)), height: 1)
            uiSegmentControl.layer.addSublayer(upperBorder)
        }
    }

}

extension UISegmentedControl {   
func customizeAppearance(for height: Int) {
    setDividerImage(UIImage().colored(with: .clear, size: CGSize(width: 1, height: height)), forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
    setBackgroundImage(UIImage().colored(with: .clear, size: CGSize(width: 1, height: height)), for: .normal, barMetrics: .default)
  }
}
extension UIImage {
    func colored(with color: UIColor, size: CGSize) -> UIImage {
    UIGraphicsBeginImageContext(size)
    let context = UIGraphicsGetCurrentContext()
    context!.setFillColor(color.cgColor);
    let rect = CGRect(origin: CGPoint(x: 0, y: 0), size: size)
    context!.fill(rect);
    let image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image!
}

回答2:

I think you have to make a custom menu for this, Here are some ideas that can help you

First of all you can make a collectionview.
Add this collectionview as subview inside your viewcontroller's view
Make a custom collectionview cell
Add textlabel inside the cell
Here in this specific case the width of the cell would be 1/4 of the collectionview frame's width
Now add a view for this sliderBar as a subview inside the cell, set constraitns to place it at the bottom of the cell

Hope these ideas help you get started..

回答3:

So the easier way is add one custom View inside that add four buttons and then select all buttons and click on StackView. Using Stackview you do not have to deal with constraints only pinned the constraints on Stackview. Now regarding your border line on button below. You can either add all border line for all button make hidden for unselected button or you can only add one border for selected button and change its x-position based on button selection using animation or without animation.

回答4:

The system UIsegumentcontrol can't implement what you say. You can use uiscrollview and uibutton or colletion view.

来源：https://stackoverflow.com/questions/45399743/how-to-customize-uisegmentedcontrol-to-change-selected-segment-bottom-border

标签

ios

swift

border

customization

uisegmentedcontrol