IOS：如何在 4 側（頂部、右側、底部和左側）為 UIView 制作陰影

Question

我正在使用下面的代碼為我的ImageView制作陰影

UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:self.avatarImageView.bounds];
self.avatarImageView.layer.masksToBounds = NO;
self.avatarImageView.layer.shadowColor = [UIColor blackColor].CGColor;
self.avatarImageView.layer.shadowOffset = CGSizeMake(5.0f, 5.0f);
self.avatarImageView.layer.shadowOpacity = 0.8f;
self.avatarImageView.layer.shadowPath = shadowPath.CGPath;

它會像這張圖片一樣在右側和底部投下陰影。

現在我想讓我的ImageView在頂部和左側也有一個陰影。 我應該在代碼中更改什么？ 是否可以僅通過代碼中的配置使視圖在頂部、右側、底部、左側包含陰影，或者我需要為陰影創建其他布局視圖？ 任何幫助將不勝感激。

這是我想要實現的目標

更新
感謝@Dipen Panchasara 提供了一個簡單的解決方案。 關注@Dipen Panchasara（陰影顏色為黑色）我會有這樣的陰影圖像

Answer 1

只有以下代碼才能滿足您的要求，您無需為陰影路徑創建UIBezierPath 。

// *** Set masks bounds to NO to display shadow visible ***
self.avatarImageView.layer.masksToBounds = NO;
// *** Set light gray color as shown in sample ***
self.avatarImageView.layer.shadowColor = [UIColor lightGrayColor].CGColor;
// *** *** Use following to add Shadow top, left ***
self.avatarImageView.layer.shadowOffset = CGSizeMake(-5.0f, -5.0f);

// *** Use following to add Shadow bottom, right ***
//self.avatarImageView.layer.shadowOffset = CGSizeMake(5.0f, 5.0f);

// *** Use following to add Shadow top, left, bottom, right ***
// avatarImageView.layer.shadowOffset = CGSizeZero;
// avatarImageView.layer.shadowRadius = 5.0f;

// *** Set shadowOpacity to full (1) ***
self.avatarImageView.layer.shadowOpacity = 1.0f;

Answer 2

像這樣：

float shadowSize = 10.0f;
UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:CGRectMake(self.avatarImageView.frame.origin.x - shadowSize / 2,
                                                                       self.avatarImageView.frame.origin.y - shadowSize / 2,
                                                                       self.avatarImageView.frame.size.width + shadowSize,
                                                                       self.avatarImageView.frame.size.height + shadowSize)];
self.avatarImageView.layer.masksToBounds = NO;
self.avatarImageView.layer.shadowColor = [UIColor blackColor].CGColor;
self.avatarImageView.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
self.avatarImageView.layer.shadowOpacity = 0.8f;
self.avatarImageView.layer.shadowPath = shadowPath.CGPath;

斯威夫特 3版本：

    let shadowSize : CGFloat = 5.0
    let shadowPath = UIBezierPath(rect: CGRect(x: -shadowSize / 2,
                                               y: -shadowSize / 2,
                                               width: self.avatarImageView.frame.size.width + shadowSize,
                                               height: self.avatarImageView.frame.size.height + shadowSize))
    self.avatarImageView.layer.masksToBounds = false
    self.avatarImageView.layer.shadowColor = UIColor.black.cgColor
    self.avatarImageView.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
    self.avatarImageView.layer.shadowOpacity = 0.5
    self.avatarImageView.layer.shadowPath = shadowPath.cgPath

Answer 3

swift 3 的代碼更少：

    view.layer.shadowColor = UIColor.black.cgColor
    view.layer.shadowOpacity = 0.7
    view.layer.shadowOffset = CGSize.zero
    view.layer.shadowRadius = 4
    view.layer.shadowPath = UIBezierPath(rect: planView.bounds).cgPath

Answer 4

同一視圖上有圓角陰影的最佳解決方案，無需執行 clipsToBounds 或 maskToBounds

func addShadow(cornerRadius: CGFloat, maskedCorners: CACornerMask, color: UIColor, offset: CGSize, opacity: Float, shadowRadius: CGFloat) {
        self.layer.cornerRadius = cornerRadius
        self.layer.maskedCorners = maskedCorners
        self.layer.shadowColor = color.cgColor
        self.layer.shadowOffset = offset
        self.layer.shadowOpacity = opacity
        self.layer.shadowRadius = shadowRadius
    }

Answer 5

對於 UIView 和添加陰影，請記住為 UIView 設置背景顏色。

如果背景顏色是 clearColor，則不會出現陰影。

Answer 6

不使用 UIBezierPath，CGSize.zero 是這里的關鍵

yourView.layer.masksToBounds = false
yourView?.layer.shadowColor = UIColor.red.cgColor
yourView?.layer.shadowOffset =  CGSize.zero
yourView?.layer.shadowOpacity = 0.5
yourView?.layer.shadowRadius = 4

Answer 7

//如果你以前試過這個，你就知道會發生什么。 角會變圓，但陰影會丟失。 如果將masksToBounds 設置為false，則會出現陰影，但不會使角變圓。 //獲取帶有圓角半徑的陰影為具有清晰顏色的容器視圖添加超級視圖並為超級視圖應用陰影，為容器視圖應用圓角半徑。 試試吧。

   //view to apply shadow and corner radius
    containerView.layer.cornerRadius = 3
    containerView.clipsToBounds = true
    //superview of container View for to apply shadow 
    shadowView.layer.shadowOpacity = 0.1
    shadowView.layer.shadowRadius = 2.0
    shadowView.layer.masksToBounds = false
    shadowView.layer.shadowOffset = CGSize.zero

    shadowView.layer.shadowColor = UIColor.Black.cgColor

    shadowView.layer.shadowPath = UIBezierPath(roundedRect:containerView.bounds, cornerRadius: containerView.layer.cornerRadius).cgPath
    shadowView.layer.shouldRasterize = true

Answer 8

如果你仍然沒有得到正確的陰影，問題可能是你添加代碼的地方。 當您使用 UIBezierPath 時，您應該在viewDidLayoutSubviews 中調用它。 如果你調用 ViewDidLoad，你可能會得到錯誤的結果，因為視圖布局過程可能未完成。

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    //Shadow code here
}

Answer 9

CGRectInset(self.avatarImageView.bounds, -10.0, -10.0)

Answer 10

**in swift 4**

  yourView.clipsToBounds = true
    yourView.layer.cornerRadius = 20
    yourView.layer.shadowPath = UIBezierPath(roundedRect: self.yourView.bounds,
                     cornerRadius: self.DeletConversation.layer.cornerRadius).cgPath
    yourView.layer.shadowColor = UIColor(hexString: "color")?.cgColor
    DeletConversation.layer.shadowOpacity = 1
    DeletConversation.layer.shadowOffset = CGSize(width: 0, height: 1.0)
    DeletConversation.layer.shadowRadius = 1
    DeletConversation.layer.masksToBounds = false

Answer 11

這里有一個非常詳細的解釋： https : //www.hackingwithswift.com/example-code/uikit/how-to-add-a-shadow-to-a-uiview 。

如果有人在集合視圖中沒有頂部陰影，那么這可能會有所幫助：

我知道這對某些人來說可能很明顯，但是如果您有一個帶有標題和單元格的 CollectionView，請確保標題和單元格之間有空間，否則，單元格的頂部陰影將被標題擋住。

要添加空間，只需使用 insetsForSectionAt 部分。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 5, left: 0, bottom: 5, right: 0)

}