如何在iOS中添加类似卡片的阴影效果

Question

我希望在我的iOS应用程序中，给类似于卡片的阴影效果，就像图片中所示。

我需要这种效果应用到UITableViewCell上，但是图片对我来说行不通，还需要在单元格之间保留阴影效果的间隙。

- Tarun Seera

---

可能是 iOS 中 ImageView 的阴影效果的重复问题。 - Ronak Chaniyara

这是iOS应用程序中的圣杯 :D - Petar

@Tarun - 你是如何实现“卡片样式”表格视图单元的？ - Ríomhaire

我已在UITableViewCell中使用了UIView，并将我的内容放置在其上，因此您可以根据卡片设计调整此容器视图，您还可以在其子视图后面使用UIImageView。 - Tarun Seera

请查看以下教程： https://www.youtube.com/watch?v=ZEuoaTF1bok - Sourabh Sharma

Answer 1

在您的表视图单元格内使用容器视图，将标记分配为99。 使单元格高度略大于卡片（容器视图）。

并给您的卡片视图添加阴影效果。

UIView* shadowView = [cell viewWithTag:99];
shadowView.backgroundColor=[UIColor colorWithRed:228.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:0.5];
[shadowView.layer setCornerRadius:5.0f];
[shadowView.layer setBorderColor:[UIColor lightGrayColor].CGColor];
[shadowView.layer setBorderWidth:0.2f];
[shadowView.layer setShadowColor:[UIColor colorWithRed:225.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:1.0].CGColor];
[shadowView.layer setShadowOpacity:1.0];
[shadowView.layer setShadowRadius:5.0];
[shadowView.layer setShadowOffset:CGSizeMake(5.0f, 5.0f)];

- Hasnain

---

如果标签为99的视图不存在，你的答案是什么？请解释你的答案。 - Luca D'Alberti

如果您不想使用标签，可以创建自定义单元格并使用属性或使用IBOutlets，可能需要定义自定义UITableViewCell。 - Tarun Seera

Answer 2

关于Swift 3.0的临时解决方案：

extension UIView {

    func setCardView(){
        layer.cornerRadius = 5.0
        layer.borderColor  =  UIColor.clear.cgColor
        layer.borderWidth = 5.0
        layer.shadowOpacity = 0.5
        layer.shadowColor =  UIColor.lightGray.cgColor
        layer.shadowRadius = 5.0
        layer.shadowOffset = CGSize(width:5, height: 5)
        layer.masksToBounds = true
    }
}

使用方法：

在 cellForRowAt indexPath 中使用：

var cell = UITableViewCell()

cell.contentView.setCardView()

- Alvin George

---

为什么需要传递视图参数？不能将其引用到自身吗？ - 4bottiglie

这可以用于任何UIView。如果是为了self，我们不需要使用扩展。只需按原样使用代码或self.view.setCardView(view: self.view)。 - Alvin George

Answer 3

也许有人需要Swift版本。

func setCardView(view : UIView){

        view.layer.masksToBounds = false
        view.layer.shadowOffset = CGSizeMake(0, 0);
        view.layer.cornerRadius = 1; 
        view.layer.shadowRadius = 1;
        view.layer.shadowOpacity = 0.5;

    }

- yusufonderd

Answer 4

您可以使用以下代码为文本添加阴影效果...

UIView *viewTemp= (UIView *)view;
viewTemp.layer.shadowColor = [UIColor darkGrayColor].CGColor;
viewTemp.layer.shadowOffset = CGSizeMake(0, 2);
viewTemp.layer.shadowOpacity = 0.8;
viewTemp.layer.shadowRadius = 3;
viewTemp.layer.masksToBounds = NO;

- Mahendra

Answer 5

    extension UIView {


          func addShadow(){
            self.layer.cornerRadius = 20.0
            self.layer.shadowColor = UIColor.gray.cgColor
            self.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
            self.layer.shadowRadius = 12.0
            self.layer.shadowOpacity = 0.7

         }  
}

- sumit kumar