简体   繁体   中英

How can I achieve this rounded View in Swift

How can I achieve the look of this white rounded View, where all the information is displayed?
I was thinking about a rounded white UIImageView but then the bottom would be rounded too...

模板

Add this if you are using storyboard:

@IBDesignable open class ShadowView: UIView {

 func setupValues(){
    self.layer.cornerRadius = self.cornerRadius
    self.layer.shadowColor = self.shadowColor.cgColor
    self.layer.shadowOffset = self.shadowOffset
    self.layer.shadowRadius = self.shadowRadius
    self.layer.shadowOpacity = self.shadowOpacity
    self.layer.borderWidth = self.borderWidth
    self.layer.borderColor = self.borderColor.cgColor
    
}

open override func prepareForInterfaceBuilder() {
    self.setupValues()
    
}

open override func awakeFromNib() {
    self.setupValues()
}

@IBInspectable var cornerRadius: CGFloat = 10
@IBInspectable public var borderWidth: CGFloat = 0.0
@IBInspectable public var borderColor: UIColor = UIColor.color(red: 0, green: 0, blue: 0, alpha: 1.0){
    didSet {
        self.setupValues()
    }
}
@IBInspectable public var shadowColor: UIColor = UIColor.color(red: 0, green: 0, blue: 0, alpha: 1.0) {
    didSet {
        self.setupValues()
    }
}
@IBInspectable public var shadowOffset: CGSize = CGSize(width: 0, height: 4)
@IBInspectable public var shadowRadius: CGFloat = 20.0
@IBInspectable public var shadowOpacity: Float = 0.1

}

Based on the link provided by claude31 you could do something like this:

    private let containerView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        
        view.clipsToBounds = true
        view.layer.cornerRadius = 28
        view.layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMinYCorner]//Define the corners you want to round here.
        
        view.backgroundColor = .systemBlue
        return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    private func configureUI() {
        view.addSubview(containerView)
        
        NSLayoutConstraint.activate([
            containerView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            containerView.topAnchor.constraint(equalTo: view.topAnchor, constant: 270)
        ])
    }

The result would look something like this:
在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM