如何为UIView添加椭圆形及仅底部椭圆形样式并添加阴影

Hey there! Let's walk through how to solve these two UIView styling scenarios—full oval shape with shadow, and bottom-only oval curve with shadow. I'll share Swift code snippets (the go-to for iOS development these days) and break down the key parts so you understand why each step matters.

Getting a full oval shape is straightforward, but we need to be careful with shadows so they don't get clipped. Here's how to do it:

// First, create your view (adjust frame or use Auto Layout as needed)
let ovalView = UIView(frame: CGRect(x: 50, y: 100, width: 200, height: 120))
ovalView.backgroundColor = .white

// Set oval corner radius: use half the shorter side (here we assume height is shorter)
ovalView.layer.cornerRadius = ovalView.bounds.height / 2
// Critical: Don't enable masksToBounds—this would clip the shadow
ovalView.layer.masksToBounds = false

// Add shadow properties
ovalView.layer.shadowColor = UIColor.black.cgColor
ovalView.layer.shadowOpacity = 0.3 // Adjust for shadow darkness
ovalView.layer.shadowOffset = CGSize(width: 0, height: 2) // Shift shadow down slightly
ovalView.layer.shadowRadius = 4 // Soften the shadow edges

// Optional but recommended: Update values if your view resizes (e.g., with Auto Layout)
override func layoutSubviews() {
    super.layoutSubviews()
    ovalView.layer.cornerRadius = ovalView.bounds.height / 2
    // Setting shadowPath improves performance by avoiding real-time shadow calculations
    ovalView.layer.shadowPath = UIBezierPath(roundedRect: ovalView.bounds, cornerRadius: ovalView.layer.cornerRadius).cgPath
}

Key Notes: #

• Corner Radius Logic: An oval needs the corner radius to be half the length of the view's shorter side. If your view is wider than tall, use width / 2 instead.
• Masks To Bounds: Keep this false! If you set it to true, any content outside the view's bounds (like the shadow) gets cut off.
• Shadow Path: Defining this explicitly tells the system exactly where to draw the shadow, which boosts performance—especially if your view animates or resizes often.

This one is trickier because we only want the bottom corners to curve into an oval shape. We'll use a shape mask to achieve the custom corner radius, then match the shadow to that shape.

// Create your target view
let bottomOvalView = UIView(frame: CGRect(x: 50, y: 250, width: 200, height: 120))
bottomOvalView.backgroundColor = .white
bottomOvalView.layer.masksToBounds = false // Again, don't clip the shadow

// Step 1: Create a mask for bottom-only oval curve
let cornerRadius = bottomOvalView.bounds.height / 2
let customPath = UIBezierPath(roundedRect: bottomOvalView.bounds,
                              byRoundingCorners: [.bottomLeft, .bottomRight],
                              cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))

let maskLayer = CAShapeLayer()
maskLayer.path = customPath.cgPath
bottomOvalView.layer.mask = maskLayer

// Step 2: Add shadow that matches the custom shape
bottomOvalView.layer.shadowColor = UIColor.black.cgColor
bottomOvalView.layer.shadowOpacity = 0.3
bottomOvalView.layer.shadowOffset = CGSize(width: 0, height: 2)
bottomOvalView.layer.shadowRadius = 4
// Shadow path must match the mask path to avoid a rectangular shadow
bottomOvalView.layer.shadowPath = customPath.cgPath

// Update paths if the view resizes
override func layoutSubviews() {
    super.layoutSubviews()
    let cornerRadius = bottomOvalView.bounds.height / 2
    let updatedPath = UIBezierPath(roundedRect: bottomOvalView.bounds,
                                   byRoundingCorners: [.bottomLeft, .bottomRight],
                                   cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
    maskLayer.path = updatedPath.cgPath
    bottomOvalView.layer.shadowPath = updatedPath.cgPath
}

Key Notes: #

• Shape Mask: We use CAShapeLayer as a mask to only show the part of the view that fits our custom path. This lets us set different corner radii for specific corners.
• Matching Shadow Path: If we don't set shadowPath to match the mask, the shadow will still be a rectangle—definitely not what we want! By linking the shadow path to our custom curve, the shadow follows the bottom oval shape perfectly.
• Auto Layout Handling: Just like the first example, we need to update the paths in layoutSubviews to account for any size changes from Auto Layout.

内容的提问来源于stack exchange，提问作者NitinLandge