Safari风格渐变阴影UIScrollView

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

在类似主题上有很多讨论，但它们似乎都讨论了UITableView（渐变高于和低于内容），而不是UIScrollView，它需要围绕所有四条边进行渐变。

我最初使用了图层效果（请参见下文），但是这种明显受到影响的性能和pan变焦变得尤为明显，因此我将其删除。

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

来源

2011-03-24 Clafou

我认为你是对的，角落是问题。我知道使用layer.cornerRadius真的会杀死性能，我会假设shadowRadius可能也会。

可能更好的选择是做它看起来像Safari所做的，它是在所有四面添加CAGradientLayer。随着Safari浏览器，他们开始在视图后面的渐变，使角落仍然阴影，但它有副作用，使他们看起来有点奇怪。但是，这可能是图形密集度最低的方法。

寻找CAGradientLayer的示例非常简单。默认值是一个垂直渐变。为了使水平梯度，只需设置开始和结束点：

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

来源

2011-11-06 07:24:11

太棒了！我已经开始尝试CAGradientLayers的所有四个方面，从完全透明到不透明，事实上，通过正确的渐变组合，角落看起来足够满意地混合，并具有与在Safari的角落中看到的类似的不完美性。覆盖layoutSubviews允许在用户移动/缩放视图时重新定位它们，因此不需要重写drawRect。我仍然有一些实现细节需要完成，但您已经找到了解决方案，非常感谢！ – Clafou 2011-11-16 23:49:14

让一切都变得正确（特别是当UIScrollView在缩放手势以跳动结束时执行动画缩放时动画阴影），但我现在已经钉住了！ :)谢谢 – Clafou 2011-11-24 01:08:19

在https://github.com/Clafou/ShadowedScrollView – Clafou 2011-11-25 22:46:12

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

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

来源

2013-03-21 05:19:27 Gabriel

公开发布谢谢，我不知道这个属性，它听起来很棒！ – Clafou 2013-03-21 12:55:15

没问题。一段时间后，我遇到了这个性能问题，并设置了阴影路径，就像魔术一样。我的猜测是，如果没有阴影路径集，每次绘制视图时都必须动态“追踪”视图的轮廓以确定阴影路径，从而导致巨大的性能下降。 – Gabriel 2013-05-01 14:03:22

Safari风格渐变阴影UIScrollView

回答

相关问题