【问题标题】:Border bottom in UIView Swift 4UIView Swift 4中的边框底部
【发布时间】:2018-12-24 03:05:53
【问题描述】:

我有一个 UIView,我想在底部添加一个灰色边框,我该如何快速做到这一点,我是新手。

@IBOutlet weak var viewTopControl: UIView!

【问题讨论】:

    标签: swift uiview border


    【解决方案1】:

    如果你想通过编程来实现,你可以向 UIView 添加扩展,如下所示。

    extension UIView {
    
        enum ViewSide {
            case Left, Right, Top, Bottom
        }
    
        func addBorder(toSide side: ViewSide, withColor color: CGColor, andThickness thickness: CGFloat) {
    
            let border = CALayer()
            border.backgroundColor = color
    
            switch side {
            case .Left: border.frame = CGRect(x: frame.minX, y: frame.minY, width: thickness, height: frame.height); break
            case .Right: border.frame = CGRect(x: frame.maxX, y: frame.minY, width: thickness, height: frame.height); break
            case .Top: border.frame = CGRect(x: frame.minX, y: frame.minY, width: frame.width, height: thickness); break
            case .Bottom: border.frame = CGRect(x: frame.minX, y: frame.maxY, width: frame.width, height: thickness); break
            }
    
            layer.addSublayer(border)
        }
    }
    

    示例用法:

    viewTopControl.addBorder(toSide: .Bottom, withColor: UIColor.redColor().CGColor, andThickness: 1.0)
    

    【讨论】:

      【解决方案2】:

      这是为任何 UIView 子类创建边框的通用 Swift 扩展:

      extension UIView {
       func addTopBorderWithColor(color: UIColor, width: CGFloat) {
          let border = CALayer()
          border.backgroundColor = color.cgColor
          border.frame = CGRect(x: 0, y: 0, width: self.frame.size.width, height: width)
          self.layer.addSublayer(border)
      }
      
      func addRightBorderWithColor(color: UIColor, width: CGFloat) {
          let border = CALayer()
          border.backgroundColor = color.cgColor
          border.frame = CGRect(x: self.frame.size.width - width, y: 0, width: width, height: self.frame.size.height)
          self.layer.addSublayer(border)
      }
      
      func addBottomBorderWithColor(color: UIColor, width: CGFloat) {
          let border = CALayer()
          border.backgroundColor = color.cgColor
          border.frame = CGRect(x: 0, y: self.frame.size.height - width, width: self.frame.size.width, height: width)
          self.layer.addSublayer(border)
      }
      
      func addLeftBorderWithColor(color: UIColor, width: CGFloat) {
          let border = CALayer()
          border.backgroundColor = color.cgColor
          border.frame = CGRect(x: 0, y: 0, width: width, height: self.frame.size.height)
          self.layer.addSublayer(border)
          }
       }
      

      【讨论】:

        【解决方案3】:

        这里有另一个版本

        import UIKit
        
        extension UIView {
        
            // Example use: myView.addBorder(toSide: .Left, withColor: UIColor.redColor().CGColor, andThickness: 1.0)
        
            enum ViewSide {
                case left, right, top, bottom
            }
        
            func addBorder(toSide side: ViewSide, withColor color: CGColor, andThickness thickness: CGFloat) {
        
                let border = CALayer()
                border.backgroundColor = color
        
                switch side {
                case .left: border.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: thickness, height: self.frame.size.height)
                case .right: border.frame = CGRect(x: self.frame.size.width - thickness, y: self.frame.origin.y, width: thickness, height: self.frame.size.height)
                case .top: border.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: thickness)
                case .bottom: border.frame = CGRect(x: self.frame.origin.x, y: self.frame.size.height - thickness, width: self.frame.size.width, height: thickness)
                }
                self.layer.addSublayer(border)
            }
        }
        

        示例用法:

        view.addBorder(toSide: .bottom, withColor: UIColor.lightGray.cgColor, andThickness: 0.2)
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2022-01-24
          • 2018-08-25
          • 1970-01-01
          • 2015-09-15
          • 1970-01-01
          相关资源
          最近更新 更多