如何像 iOS app store in swift 4 一样应用卡片视图角半径和阴影

Question

我想在我的集合视图单元格中应用“cornerRadius”和卡片视图“shadow”，例如 iOS appstore今天查看。

Answer 1

只需向单元格添加一个子视图并操作它的层属性。根据您的喜好调整值。以下代码应该会给出与它在 App Store 中的外观类似的结果：

    // The subview inside the collection view cell
    myView.layer.cornerRadius = 20.0
    myView.layer.shadowColor = UIColor.gray.cgColor
    myView.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
    myView.layer.shadowRadius = 12.0
    myView.layer.shadowOpacity = 0.7

Answer 2

要添加到@oyvindhauge 的出色答案中——确保 myView 内的子视图 none 延伸到边缘。例如，我的卡片视图包含一个填充卡片的 table 视图——因此也有必要设置 tableView.layer.cornerRadius = 20.0。这适用于填充卡片的任何子视图。

Answer 3

创建一个名为 "CardView" 的新 UIView 子类，如下所示：

import Foundation
import UIKit

@IBDesignable
class CardView: UIView {

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.shadowRadius = newValue
            layer.masksToBounds = false
        }
    }

    @IBInspectable var shadowOpacity: Float {
        get {
            return layer.shadowOpacity
        }
        set {
            layer.shadowOpacity = newValue
            layer.shadowColor = UIColor.darkGray.cgColor
        }
    }

    @IBInspectable var shadowOffset: CGSize {
        get {
            return layer.shadowOffset
        }
        set {
            layer.shadowOffset = newValue
            layer.shadowColor = UIColor.black.cgColor
            layer.masksToBounds = false
        }
    }

}

然后只需将 "CardView" 设置为自定义 Class，以便您从 XCode Interface Builder 中查看。它简单且易于配置！

Answer 4

- SwiftUI

struct SimpleRedView: View {
    var body: some View {
        Rectangle()
            .foregroundColor(.red)
            .frame(width: 340, height: 500, alignment: .center)
    }
}

struct ContentView: View {
    var body: some View {
        SimpleRedView()
        .cornerRadius(28)
        .shadow(radius: 16, y: 16)
    }
}

SimpleRedView() 仅用于占位符，您可以将其替换为您喜欢的任何类型的 View。

如何像 iOS app store in swift 4 一样应用卡片视图角半径和阴影

How to Apply card view cornerRadius & shadow like iOS appstore in swift 4

xcode

app-store

swift3

ios11

- SwiftUI