2011-09-08 73 views
5

我正在開發一個應用程序,其中我想創建類似於下圖中所示的陰影效果在底部uitableviewcell。如何在uitableviewcell中創建陰影效果?

enter image description here

我該怎麼做?任何教程或示例代碼?我已經選擇了http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html, http://www.touchthatfruit.com/?tag=uitableview 和其他一些ones.but但他們在uitableview的底部有相同高度的陰影。以及如何在包含日期(而不是整個tableview)的每個部分的邊框處添加陰影。我可以創建底部的下拉陰影。但是每個部分的最後一個uitableview單元的邊框怎麼樣?一種方法是創建圖像並將其設置爲tableviewcell的背景。但是如何調整圖像的大小並使其看起來合適,因爲每個部分都具有動態一個部分只有1個條目,其他部分可能包含15個或更多的條目(這裏的圖像是包含日期的整個部分).i只能爲每個部分的最後一個tableviewcell提供單獨的圖像。這是我知道的但是有沒有更好的方法或以編程方式進行?

回答

0

您可以參考在UITableView中的以下鏈接陰影效果,這將有助於你

try this

視圖的一個基本部分是它的層,它是一個的CALayer。您可以通過視圖的layer屬性訪問:

myView.layer

在文檔CALayers有控制的影子幾個屬性。你應該能夠告訴導航欄的圖層投下陰影。隨着你想要投下陰影的任何其他內容層。

myView.layer.shadowOffset 

myView.layer.shadowRadius 

您將需要確保到QuartzCore框架添加到項目中訪問該屬性

+0

因爲我有問題,這不是幫助我 – Bhoomi

+0

檢查我的更新代碼 –

+0

我知道這一切的事情已經提到。但我所說的是,我無法按照所顯示的圖像來製作影子。 – Bhoomi

0

將每個部分始終是相同的大小?如果是這樣,爲什麼不用UITableViewCell子類來繪製包含陰影的項目?

你也可以在UITableView上添加一個透明的UIImageView來獲得黑暗的角落。

編輯:

這種效果是有點棘手,你會想看看如何使用UIBezierPaths(http://developer.apple.com/library/IOS/#documentation/UIKit/參考/ UIBezierPath_class /參考/的reference.html)。

頂部可以是一個圖像(環和標籤效果)。然後可以在drawRect函數中繪製其餘的單元格。 (這比在UITableViewCell中重要的層中使用陰影屬性更有效)。

你會想覆蓋你的UITableViewCell類並實現一個自定義的drawRect:函數。

下面是一些代碼,讓你開始:

// Only override drawRect: if you perform custom drawing. 
    // An empty implementation adversely affects performance during animation. 
    - (void)drawRect:(CGRect)rect 
    { 

     /* Draw top image here */ 

     //now draw the background of the cell. 
     UIBezierPath *path1 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 320, 50)]; 
     [[UIColor grayColor] set]; 
     [path1 fill]; 

     UIBezierPath *path2 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 52, 320, 50)]; 
     [[UIColor whiteColor] set]; 
     [path2 fill]; 

     UIBezierPath *path3 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 104, 320, 50)]; 
     [[UIColor grayColor] set]; 
     [path3 fill]; 

     UIBezierPath *path4 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 156, 320, 50)]; 
     [[UIColor whiteColor] set]; 
     [path4 fill]; 

     //and so on... 

     //Let's draw the shadow behind the last portion of the cell. 
     UIBezierPath *shadow = [UIBezierPath bezierPathWithRect:CGRectMake(0, 208, 320, 52)]; 
     [[UIColor darkGrayColor] set]; 
     [shadow fill]; 

     //Finally, here's the last cell with a curved bottom 
     UIBezierPath *path5 = [UIBezierPath bezierPath]; 
     [path5 moveToPoint:CGPointMake(0, 208)]; 
     [path5 addLineToPoint:CGPointMake(320, 208)]; 
     [path5 addLineToPoint:CGPointMake(320, 258)]; 
     [path5 addCurveToPoint:CGPointMake(0, 258) controlPoint1:CGPointMake(160, 254) controlPoint2:CGPointMake(160, 254)]; 
     [[UIColor grayColor] set]; 
     [path5 fill]; 
    } 

的代碼是不是很拖放,您仍然需要添加的白線,修正了一些尺寸,並調整最後一個單元格和陰影恰到好處。但它應該足以讓你開始。

乾杯!

+0

這裏每個部分的大小都不一樣,它也是不同的和動態的。 – Bhoomi

+0

查看更新的問題 – Bhoomi

0

看看我的answer到類似的問題,這可能是一個可能的解決方案,您的問題!通過改變陰影路徑,您應該能夠實現所需的陰影效果!