有的时候,项目中会用到阴影的效果,增加立体感。我们可以让设计师给出切图,用图片填充。我们还可以使用几句代码来实现简单的阴影效果。
实现效果图展示一:
![img_9d60c0b88213434a4cee9b24f4bd1751.png](https://yqfile.alicdn.com/img_9d60c0b88213434a4cee9b24f4bd1751.png)
image.png
实现效果图展示一:
![img_aa156cfff2316b41c18d108e09b0a658.jpe](https://yqfile.alicdn.com/img_aa156cfff2316b41c18d108e09b0a658.jpeg)
11.png
关键代码:
firstView.layer.shadowColor = UIColor.purple.cgColor
firstView.layer.shadowOffset = CGSize(width: 0, height: 20)
firstView.layer.shadowRadius = 10
firstView.layer.shadowOpacity = 0.1
简单解释下:
shadowColor: 阴影颜色
shadowOffset:阴影的范围(自己试下看看效果就晓得了)
shadowRadius: 阴影的圆角
shadowOpacity:阴影的透明度
详细步骤:
- 在storyboard上搭建简单的UI
![img_5f119abed88f8e1e82d84e0721eecaaf.png](https://yqfile.alicdn.com/img_5f119abed88f8e1e82d84e0721eecaaf.png)
image.png
2.拖线关联
![img_86709977e684b3a1f4c8b4adc00649cd.png](https://yqfile.alicdn.com/img_86709977e684b3a1f4c8b4adc00649cd.png)
image.png
- 设置阴影以及圆角
//
// ViewController.swift
// TestShadow
//
// Created by iOS on 2018/9/14.
// Copyright © 2018年 weiman. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var firstView: UIView!
@IBOutlet weak var purpleView: UIView!
@IBOutlet weak var blueView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
setup()
}
private func setup() {
firstView.layer.shadowColor = UIColor.purple.cgColor
firstView.layer.shadowOffset = CGSize(width: 0, height: 20)
firstView.layer.shadowRadius = 10
firstView.layer.shadowOpacity = 0.1
purpleView.layer.cornerRadius = 10
purpleView.layer.masksToBounds = true
blueView.layer.cornerRadius = 10
blueView.layer.masksToBounds = true
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
注意:
把firstview的背景颜色设置成透明色,也就是clearColor,效果是
![img_4f20fb8f4363d357d7541dbeb2f73f21.png](https://yqfile.alicdn.com/img_4f20fb8f4363d357d7541dbeb2f73f21.png)
image.png
把firstview设置成白色,效果是
![img_fb012169993aa56b69f804ca019ed038.png](https://yqfile.alicdn.com/img_fb012169993aa56b69f804ca019ed038.png)
image.png