單獨(dú)給圖片、按鈕設(shè)置圓角或者陰影效果比較簡(jiǎn)單，但是如果這兩個(gè)同時(shí)設(shè)置、最后再設(shè)置上背景圖片，就會(huì)發(fā)現(xiàn)不是圓角沒(méi)了，就是陰影沒(méi)了。。。

先說(shuō)一下ImageView吧，開(kāi)始的時(shí)候因?yàn)槲覜](méi)有拿到UI切圖，所以先給它設(shè)置了一個(gè)背景顏色，然后設(shè)置了圓角和陰影。

let cardView = UIImageView()
cardView.backgroundColor = UIColor.blue
// 設(shè)置圓角
cardView.layer.cornerRadius = 10
cardView.layer.masksToBounds = true
// 設(shè)置陰影
cardView.layer.shadowColor = UIColor.gray.cgColor
cardView.layer.shadowOpacity = 0.8
cardView.layer.shadowOffset = CGSize(width: 0, height: 4)
view.addSubview(cardView)

// 設(shè)置約束
cardView.snp.makeConstraints { (make) in
    make.top.equalToSuperview().offset(100)
    make.centerX.equalToSuperview()
    make.size.equalTo(CGSize(width: 300, height: 150))
}

結(jié)果發(fā)現(xiàn)圓角有了，陰影卻并沒(méi)有出來(lái)。。。

image.png

于是發(fā)現(xiàn)，是因?yàn)閘ayer的masksToBounds設(shè)置成true導(dǎo)致把它范圍之外的部分給裁剪掉了，所以陰影也被干掉了，于是我把masksToBounds的設(shè)置去掉了（默認(rèn)為false）

cardView.layer.masksToBounds = false

結(jié)果發(fā)現(xiàn)圓角和陰影就都有了

image.png

然而事情并沒(méi)有結(jié)束，因?yàn)楫?dāng)UI切圖出來(lái)之后，我設(shè)置了一張圖片，結(jié)果發(fā)現(xiàn)圓角又沒(méi)有了。。。

image.png

于是又一番查閱發(fā)現(xiàn)了一個(gè)解決辦法：

在這個(gè)imageView的下邊添加一個(gè)底部視圖，位置約束跟imageView相同，用來(lái)專門(mén)設(shè)置陰影效果，然后把imageView添加到底部視圖上，最后給imageView設(shè)置圓角（這次要把masksToBounds設(shè)置成true）

// 卡片底部視圖
let cardBgView = UIView()
// 設(shè)置陰影
cardBgView.layer.shadowColor = UIColor.gray.cgColor
cardBgView.layer.shadowOpacity = 0.6
cardBgView.layer.shadowOffset = CGSize(width: 0, height: 4)
view.addSubview(cardBgView)

// 卡片
let cardView = UIImageView()
cardView.image = #imageLiteral(resourceName: "ren")
// 設(shè)置圓角
cardView.layer.cornerRadius = 10
cardView.layer.masksToBounds = true
cardBgView.addSubview(cardView)

// 設(shè)置約束
cardBgView.snp.makeConstraints { (make) in
    make.top.equalToSuperview().offset(100)
    make.centerX.equalToSuperview()
    make.size.equalTo(CGSize(width: 300, height: 150))
}
cardView.snp.makeConstraints { (make) in
    make.edges.equalToSuperview()
}

圓角和陰影終于出來(lái)了：

image.png

image.png

按鈕Button

同理，按鈕也是一樣的情況，如果只給按鈕設(shè)置了backgroundColor，并不會(huì)有按壓效果，如果要有按壓效果，就要給button設(shè)置BackgroundImage及相應(yīng)的UIControlState
但是設(shè)置之后，效果就如同imageView上述情況一樣了，同樣解決方法也用以上方法就能搞定。

除了以上這個(gè)方法添加view之外，好像也可以添加layer來(lái)實(shí)現(xiàn)，但是因?yàn)閘ayer無(wú)法設(shè)置約束，還要到viewDidLayoutSubviews方法中設(shè)置frame，所以就放棄了。

如果老鐵們還有其他更簡(jiǎn)便的方法，歡迎交流指教~