Question

我一直在寻找通过在内容周围添加某种阴影来修饰UIScrollView，当视图大于内容时可见。 Safari使用页面周围的灰色渐变来做到这一点（捏合使网页更小并平移以查看边缘的渐变）

关于类似主题的讨论很多，但他们似乎都在讨论UITableView的解决方案（内容之上和之下的渐变），而不是UIScrollView，它需要围绕所有四个边缘的渐变。

我最初使用了一种图层效果（见下文），但这明显影响了性能和平底锅效果。变焦变得有弹性，特别是Retina显示，所以我删除它。

ChartView *chartView = [[ChartView alloc] initWithChild:child type:type];
// Give it a nice shadow -- Unfortunately this kills performance, especially on Retina phones
aChartView.layer.masksToBounds = NO;
aChartView.layer.shadowOffset = CGSizeMake(10, 12);
aChartView.layer.shadowRadius = 20;
aChartView.layer.shadowOpacity = 0.6;
// Create the scroll view (root view)
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:frame];
scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;   // Allow automatic resizing in orientation changes
scrollView.backgroundColor = [UIColor lightGrayColor];
scrollView.delegate = self;
[scrollView addSubview:chartView];

我尝试了对UIScrollView进行子类化并覆盖drawRect并且能够绘制背景，但它只被调用一次，所以当内容移动/调整大小时我无法调整背景。

Safari不使用阴影，而是某种渐变（顺便说一句，如果你仔细看的话，在角落看起来略微不完美），这可能会提供更好的性能。谁知道他们是怎么做到的？

修改

这个问题现在已经解决了，我已经把我的实现（UIScrollView的子类，它为它添加了Safari风格的渐变阴影）放在GitHub上，供那些正在寻找相同内容的读者使用：https://github.com/Clafou/ShadowedScrollView

Answer 1

我认为你的角落是问题是正确的。我知道使用layer.cornerRadius会杀死性能，我会认为shadowRadius也可能会这样做。

可能更好的选择是做Safari看起来的样子，即在所有四个方面添加CAGradientLayer。使用Safari，他们在视图后面开始渐变，这样角落仍然会被遮挡，但它有副作用，使它们看起来有点奇怪。但是，这可能是图形密集程度最低的方式。

查找CAGradientLayer的示例非常简单。默认值为垂直渐变。要使其成为水平渐变，只需设置起点和终点：

gradient.startPoint = CGPointMake(0, 0.5);
gradient.endPoint = CGPointMake(1.0, 0.5);

Answer 2

对性能问题有一个更简单的答案 - 只需设置一个与视图轮廓相匹配的阴影路径：

    aChartView.layer.shadowPath = [UIBezierPath bezierPathWithRect:aChartView.bounds].CGPath;

UIScrollView周围的Safari风格渐变阴影

2 个答案: