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

回答

相關問題