如何自定义 UISegmentedControl 以更改所选段的底部边框？

Question

我想自定义 UISegmentedControl，如下图：

Answer 1

系统UIsegumentcontrol无法实现你说的。您可以使用 uiscrollview 和 uibutton 或集合视图。

Answer 2

我认为你必须为此制作一个自定义菜单，这里有一些想法可以帮助你

首先你可以做一个collectionview。
将此集合视图添加为您 viewcontroller 视图中的子视图
制作自定义集合视图单元格
在单元格内添加文本标签
在此特定情况下，单元格的宽度为 1/4 集合视图框架的宽度
现在为这个 sliderBar 添加一个视图作为单元格内的子视图，设置约束将其放在单元格底部

希望这些想法能帮助您入门..

Answer 3

所以更简单的方法是在里面添加一个自定义视图，添加四个按钮，然后 select 所有按钮并单击 StackView。使用 Stackview，您不必处理约束，只需将约束固定在 Stackview 上即可。现在关于下面按钮上的边界线。您可以为未selected 按钮隐藏所有按钮添加所有边框线，或者您只能为selected 按钮添加一个边框并根据按钮select 更改其x 位置使用动画或不使用动画的离子。

Answer 4

为此使用扩展 self.segmentController.customizeAppearance（对于：1）

调用 addBorder 方法并将您的 UISegmentedControl 作为参数传递

    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!
}

如何自定义 UISegmentedControl 以更改所选段的底部边框？

How to customize UISegmentedControl to change selected segment bottom border?

customization

border

uisegmentedcontrol

ios

swift