ios设置view的边框阴影

原创

mob64ca12d39d4a 2024-09-17 04:21:40 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d39d4a的原创作品，请联系作者获取转载授权，否则将追究法律责任

iOS 设置 View 的边框与阴影

在 iOS 开发中，为 UIView 添加边框和阴影不仅可以提高用户界面的美观性，还能帮助用户更好地识别和使用应用程序中的不同组件。本文将为你介绍如何实现这些效果，并详细阐述每一步的代码与步骤。

操作步骤流程

下面是实现 iOS 设置 view 边框阴影的流程：

步骤	描述
1	创建 UIView
2	设置边框属性
3	设置阴影属性
4	调整视图层级
5	运行和测试

每一步详细说明

1. 创建 UIView

首先，我们需要创建一个 UIView，作为我们设置边框和阴影的对象。

let myView = UIView()
// 设置视图的位置和大小
myView.frame = CGRect(x: 50, y: 50, width: 200, height: 100)
// 设置视图的背景颜色
myView.backgroundColor = UIColor.white
// 将视图添加到父视图中
self.view.addSubview(myView)

在这段代码中，我们创建了一个白色的 UIView，并将其添加到当前视图中。

2. 设置边框属性

接下来，我们将为 UIView 设置边框的颜色和宽度。边框的设置包括如下属性：

// 设置边框颜色
myView.layer.borderColor = UIColor.black.cgColor
// 设置边框宽度
myView.layer.borderWidth = 2.0

这里我们将边框颜色设置为黑色，宽度设置为 2 个点。

3. 设置阴影属性

为了使视图更具立体感，我们可以给 UIView 添加阴影效果。设置阴影涉及多个属性：

// 设置阴影颜色
myView.layer.shadowColor = UIColor.black.cgColor
// 设置阴影不透明度
myView.layer.shadowOpacity = 0.5
// 设置阴影偏移量
myView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
// 设置阴影半径
myView.layer.shadowRadius = 4.0

在这段代码中，我们设置了黑色的阴影，透明度为 0.5，偏移量为 (2, 2)，半径为 4.0，形成模糊的阴影效果。

4. 调整视图层级

为了确保阴影能够正常显示，我们需要确保裁剪视图的子视图的属性设置为 false：

// 允许阴影超出视图边界
myView.layer.masksToBounds = false

通过将 masksToBounds 设置为 false，允许阴影效果超出 UIView 的边界。

5. 运行和测试

最后步骤是将所有的代码放在 ViewController 的 viewDidLoad 方法中，并运行应用程序以查看结果。

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 创建 UIView
    let myView = UIView()
    myView.frame = CGRect(x: 50, y: 50, width: 200, height: 100)
    myView.backgroundColor = UIColor.white
    self.view.addSubview(myView)

    // 设置边框
    myView.layer.borderColor = UIColor.black.cgColor
    myView.layer.borderWidth = 2.0

    // 设置阴影
    myView.layer.shadowColor = UIColor.black.cgColor
    myView.layer.shadowOpacity = 0.5
    myView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
    myView.layer.shadowRadius = 4.0
    
    // 允许阴影超出视图边界
    myView.layer.masksToBounds = false
}

在这里，我们将所有的代码结合在一起，并在 viewDidLoad 方法中进行调用。

概念图

以下是视图及其属性之间关系的简略示意图：

erDiagram
    UIView {
        +borderColor
        +borderWidth
        +shadowColor
        +shadowOpacity
        +shadowOffset
        +shadowRadius
        +masksToBounds
    }
    UIView ||--o{ Border
    UIView ||--o{ Shadow