2011-09-08 33 views
5

tôi đang phát triển một ứng dụng mà tôi muốn tạo hiệu ứng đổ bóng tương tự như được hiển thị trong hình ảnh bên dưới ở dưới cùng uitableviewcell.Làm thế nào để tạo hiệu ứng đổ bóng trong uitableviewcell?

enter image description here

Làm thế nào tôi có thể làm điều đó? Bất kỳ hướng dẫn hoặc mẫu mã? Tôi đã kiểm tra http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html, http://www.touchthatfruit.com/?tag=uitableview và một số loại khác. Nhưng chúng có bóng ở dưới cùng của uitableview với cùng chiều cao và cách thêm bóng ở biên giới bên của mỗi phần chứa ngày (không phải toàn bộ tableview) .Tôi có thể tạo bóng thả xuống ở bottom.but những gì về biên giới bên của tế bào uitableview cuối cùng của mỗi section.and một cách là tạo ra hình ảnh và thiết lập nó như là nền tảng của tableviewcell.But làm thế nào để thay đổi kích thước hình ảnh và nó sẽ trông thích hợp bởi vì mỗi phần có năng động số mục nhập. một phần chỉ có 1 mục nhập và một mục khác có thể chứa 15 mục nhập trở lên. (hình ảnh này dành cho toàn bộ phần chứa ngày) .i có thể có hình ảnh riêng biệt cho chỉ tableviewcell cuối cùng của từng phần. Đây là i know.but có cách tiếp cận nào tốt hơn hay làm theo cách lập trình?

Trả lời

0

Bạn có thể tham khảo các liên kết sau để hiệu ứng đổ bóng trong UITableView sẽ giúp bạn

try this

Một mảnh cơ bản của một cái nhìn là nó lớp mà là một CALayer. Bạn có thể truy cập nó thông qua thuộc tính lớp một cái nhìn:

myView.layer

Trong CALayers tài liệu có nhiều tính năng mà kiểm soát bóng. Bạn sẽ có thể thông báo cho lớp của thanh điều hướng để tạo bóng. Cùng với các lớp của bất kỳ nội dung nào khác mà bạn muốn tạo bóng.

myView.layer.shadowOffset 

myView.layer.shadowRadius 

Bạn sẽ cần phải chắc chắn để thêm khung QuartzCore để dự án của bạn để truy cập vào tài sản này

+0

Như tôi đã đề cập trong câu hỏi rằng điều này không giúp tôi – Bhoomi

+0

kiểm tra mã cập nhật của tôi –

+0

tôi biết tất cả những điều này. nhưng những gì tôi đang nói là với điều này tôi không thể đổ bóng theo hình ảnh hiển thị. – Bhoomi

0

sẽ từng bộ phận luôn có cùng kích thước? Nếu vậy tại sao bạn không phân lớp UITableViewCell để vẽ sổ ghi chép giống như mục có bóng đổ bao gồm?

Bạn cũng có thể thêm UIImageView trong suốt trên UITableView để nhận các góc tối.

EDIT:

Hiệu ứng này là một chút khéo léo, bạn sẽ muốn xem xét làm thế nào để sử dụng UIBezierPaths (http://developer.apple.com/library/IOS/#documentation/UIKit/ Tham khảo/UIBezierPath_class/Tham khảo/Reference.html).

Phần trên cùng có thể là hình ảnh (hiệu ứng đổ chuông và tab). Sau đó, bạn có thể vẽ phần còn lại của ô trong hàm drawRect. (Điều này hiệu quả hơn việc sử dụng các thuộc tính shadow trong lớp quan trọng trong UITableViewCell).

Bạn sẽ muốn ghi đè lớp UITableViewCell của mình và triển khai chức năng drawRect: tùy chỉnh.

Dưới đây là một số mã để giúp bạn bắt đầu:

// 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]; 
    } 

Mã này không phải là khá kéo và thả, Bạn vẫn cần thêm các dòng trắng, khắc phục một số kích cỡ, và tinh chỉnh ô cuối cùng và bóng tối để chỉ là đúng. Nhưng nó sẽ là đủ để giúp bạn bắt đầu.

Chúc mừng!

+0

ở đây mỗi phần kích thước là không giống nhau. Nó là khác nhau và năng động cũng có. – Bhoomi

+0

xem câu hỏi được cập nhật – Bhoomi

0

Hãy xem số answer của tôi cho một câu hỏi tương tự, câu hỏi này có thể là giải pháp khả thi cho vấn đề của bạn! Bằng cách thay đổi đường dẫn bóng, bạn sẽ có thể đạt được hiệu ứng đổ bóng mong muốn!

Các vấn đề liên quan