web-dev-qa-db-ja.com

Swift 3を使用してUIViewにシャドウを追加します

previous Swift 3 UIViewに次のように影を追加していました：

//toolbar is an UIToolbar (UIView)
toolbar.layer.masksToBounds = false
toolbar.layer.shadowOffset = CGSize(width: -1, height: 1)
toolbar.layer.shadowRadius = 1
toolbar.layer.shadowOpacity = 0.5

しかし、上記のコードはSwift 3では機能せず、影の代わりにビュー全体の色がい灰色に変わります

Swift 3にシャドウを追加する方法は誰でも知っていますか？

iosswift3
54
remy boys

コードスニペット：

extension UIView {

  // OUTPUT 1
  func dropShadow(scale: Bool = true) {
    layer.masksToBounds = false
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOpacity = 0.5
    layer.shadowOffset = CGSize(width: -1, height: 1)
    layer.shadowRadius = 1

    layer.shadowPath = UIBezierPath(rect: bounds).cgPath
    layer.shouldRasterize = true
    layer.rasterizationScale = scale ? UIScreen.main.scale : 1
  }

  // OUTPUT 2
  func dropShadow(color: UIColor, opacity: Float = 0.5, offSet: CGSize, radius: CGFloat = 1, scale: Bool = true) {
    layer.masksToBounds = false
    layer.shadowColor = color.cgColor
    layer.shadowOpacity = opacity
    layer.shadowOffset = offSet
    layer.shadowRadius = radius

    layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
    layer.shouldRasterize = true
    layer.rasterizationScale = scale ? UIScreen.main.scale : 1
  }
}

NOTE：anyパラメーターをその関数に渡さない場合、scale引数デフォルトでtrueになります。関数のパラメーターの種類の後に値をパラメーターに割り当てることにより、関数のパラメーターのデフォルト値を定義できます。デフォルト値が定義されている場合、関数を呼び出すときにそのパラメーターを省略できます。

出力1：

shadowView.dropShadow()

enter image description here

出力2：

shadowView.dropShadow(color: .red, opacity: 1, offSet: CGSize(width: -1, height: 1), radius: 3, scale: true)

enter image description here

layer.shouldRasterize = trueは影を静的にし、UIViewの初期状態の影を引き起こします。したがって、UITableViewCell内のビューのような動的レイアウトではlayer.shouldRasterize = trueを使用しないことをお勧めします。

166
aashish tamsya

IView Extension Swift 4を使用したシャドウ

選択した回答にもう1行追加したいと思います！レイヤーをラスタライズする場合、Retinaディスプレイの場合は2.0に設定する必要があります。そうしないと、そのビューのラベルテキストまたは画像がぼやけてしまいます。したがって、rasterizationScaleも追加する必要があります。

  extension UIView {

    func dropShadow() {
        self.layer.masksToBounds = false
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOpacity = 0.5
        self.layer.shadowOffset = CGSize(width: -1, height: 1)
        self.layer.shadowRadius = 1
        self.layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
        self.layer.shouldRasterize = true
        self.layer.rasterizationScale = UIScreen.main.scale

    }
}
40
Vinu David Jose

非常にシンプルで数行のコード：

let viewShadow = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
viewShadow.center = self.view.center
viewShadow.backgroundColor = UIColor.yellow
viewShadow.layer.shadowColor = UIColor.red.cgColor
viewShadow.layer.shadowOpacity = 1
viewShadow.layer.shadowOffset = CGSize.zero
viewShadow.layer.shadowRadius = 5
self.view.addSubview(viewShadow)

のように見える ： - enter image description here

32
Mr.Javed Multani

これは私（Swift 3および4）で動作します

yourView.layer.shadowColor = UIColor.gray.cgColor
yourView.layer.shadowOpacity = 0.3
yourView.layer.shadowOffset = CGSize.zero
yourView.layer.shadowRadius = 6
15
Chhaileng

受け入れられた答え は素晴らしく、正常に機能しますが、offSet: CGSizeをoffsetX: CGFloatとoffsetY: CGFloatに分割するように変更しました。

extension UIView {
  func dropShadow(offsetX: CGFloat, offsetY: CGFloat, color: UIColor, opacity: Float, radius: CGFloat, scale: Bool = true) {
    layer.masksToBounds = false
    layer.shadowOffset = CGSize(width: offsetX, height: offsetY)
    layer.shadowColor = color.cgColor
    layer.shadowOpacity = opacity
    layer.shadowRadius = radius
    layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
    layer.shouldRasterize = true
    layer.rasterizationScale = scale ? UIScreen.main.scale : 1
  }
}
4
budidino

UIViewの非常に使いやすい拡張機能で、ストーリーボードから直接編集できます。 Swift 4+

@IBDesignable extension UIView {
    @IBInspectable var shadowColor: UIColor?{
        set {
            guard let uiColor = newValue else { return }
            layer.shadowColor = uiColor.cgColor
        }
        get{
            guard let color = layer.shadowColor else { return nil }
            return UIColor(cgColor: color)
        }
    }

    @IBInspectable var shadowOpacity: Float{
        set {
            layer.shadowOpacity = newValue
        }
        get{
            return layer.shadowOpacity
        }
    }

    @IBInspectable var shadowOffset: CGSize{
        set {
            layer.shadowOffset = newValue
        }
        get{
            return layer.shadowOffset
        }
    }

    @IBInspectable var shadowRadius: CGFloat{
        set {
            layer.shadowRadius = newValue
        }
        get{
            return layer.shadowRadius
        }
    }
}
3
Mihai HG

丸い影が必要な場合。 Swift 4.2に対応

extension UIView {

        func dropShadow() {

            var shadowLayer: CAShapeLayer!
            let cornerRadius: CGFloat = 16.0
            let fillColor: UIColor = .white

            if shadowLayer == nil {
                shadowLayer = CAShapeLayer()

                shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
                shadowLayer.fillColor = fillColor.cgColor

                shadowLayer.shadowColor = UIColor.black.cgColor
                shadowLayer.shadowPath = shadowLayer.path
                shadowLayer.shadowOffset = CGSize(width: -2.0, height: 2.0)
                shadowLayer.shadowOpacity = 0.8
                shadowLayer.shadowRadius = 2

                layer.insertSublayer(shadowLayer, at: 0)
            }
        }
    }

Swift 4は影付きのUIViewを丸めました

2
Anton Sokolov

これを試してください

func applyShadowOnView(_ view: UIView) {
    view.layer.cornerRadius = 8
    view.layer.shadowColor = UIColor.darkGray.cgColor
    view.layer.shadowOpacity = 1
    view.layer.shadowOffset = .zero
    view.layer.shadowRadius = 5
}
2
Hariom tyagi
loginView.layer.shadowOpacity = 1.0
1
Hitesh Chauhan

Swift 5この関数を呼び出してビューを渡すだけです

public func setViewSettingWithBgShade(view: UIView)
{
    view.layer.cornerRadius = 8
    view.layer.borderWidth = 1
    view.layer.borderColor = AppTextFieldBorderColor.cgColor

    //MARK:- Shade a view
    view.layer.shadowOpacity = 0.5
    view.layer.shadowOffset = CGSize(width: 1.0, height: 1.0)
    view.layer.shadowRadius = 3.0
    view.layer.shadowColor = UIColor.black.cgColor
    view.layer.masksToBounds = false
}
0
Shakeel Ahmed

これを試してください、それは私のために働いています。

extension UIView {


func dropShadow() {

    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 2, height: 3)
    layer.masksToBounds = false

    layer.shadowOpacity = 0.3
    layer.shadowRadius = 3
    //layer.shadowPath = UIBezierPath(rect: bounds).cgPath
    layer.rasterizationScale = UIScreen.main.scale
    layer.shouldRasterize = true
}}
0
Merry

ビューのIBInspectableプロパティとして使用する場合は、この拡張機能を追加できます

import UIKit

extension UIView {

    private static var _addShadow:Bool = false

    @IBInspectable var addShadow:Bool {
        get {
            return UIView._addShadow
        }
        set(newValue) {
            if(newValue == true){
                layer.masksToBounds = false
                layer.shadowColor = UIColor.black.cgColor
                layer.shadowOpacity = 0.075
                layer.shadowOffset = CGSize(width: 0, height: -3)
                layer.shadowRadius = 1

                layer.shadowPath = UIBezierPath(rect: bounds).cgPath
                layer.shouldRasterize = true
                layer.rasterizationScale =  UIScreen.main.scale
            }
        }
    }

}
0
Svetoslav Bramchev

以下の方法でもドロップシャドウを適用できます

    cell.view1.layer.masksToBounds = false
    cell.view1.layer.shadowColor = UIColor.lightGray.cgColor
    cell.view1.backgroundColor = UIColor.white
    cell.view1.layer.shadowOffset = CGSize(width: 1.0, height: 1.0)
    cell.view1.layer.shadowOpacity = 0.5

結果は次のようになります。 http://prntscr.com/nhhv2s

0
Anita

スイフト4

toolbar.layer.shadowColor = UIColor.hex(hexColor: "#000000", withAlpha: 1.0).cgColor
toolbar.layer.shadowOffset = CGSize.zero
toolbar.layer.shadowRadius = 1
toolbar.layer.shadowOpacity = 1
toolbar.layer.shouldRasterize = true
toolbar.layer.masksToBounds = false
0
Teja Kumar Bethina