Tiêu đề tùy chỉnh UITableView (như ứng dụng FoodSpotting)

Question

Ai đó có thể giải thích cách ứng dụng này (FoodSpotting), tạo tiêu đề phần tùy chỉnh của họ? Nó có một nền màu đen mờ, hình ảnh của người sử dụng, và một số văn bản đẹp (tải lên từ một máy chủ không có nghi ngờ). 2 câu hỏi lớn của tôi ở đây là:

1. Làm cách nào để ứng dụng có được độ mờ đen đẹp trên tiêu đề phần? 2. Làm cách nào để có được mũi tên hình tam giác nhỏ gắn vào tiêu đề?

Tôi có thể tìm ra mọi thứ khác dựa trên việc sử dụng chế độ xem tùy chỉnh cho tiêu đề phần.

Answer 1

Section header is a UIView giống như bất kỳ hình thức nào khác. Bạn có thể tạo nó đẹp, phức tạp hoặc phức tạp như bạn muốn, bằng cách sử dụng Interface Builder nếu bạn muốn, vv. Bảng đại biểu của bạn là tableView:viewForheaderInSection có trách nhiệm trả lại nó, giống như đối với các hàng ô khác.

Đối với hình tam giác nhỏ: vâng, điều này đã ném chúng tôi một chút (chúng tôi muốn một cái gì đó tương tự trong ứng dụng của chúng tôi) cho đến khi chúng tôi phát hiện ra rằng bạn có thể chồng chéo chế độ xem bằng hàng "nằm" về chiều cao của nó: tức là tableView:heightForHeaderInSection: một giá trị nhỏ hơn nó thực sự là. Có thể không phải là "đúng" cách, nhưng làm việc rất độc đáo đối với chúng tôi. Như thế này:

Vì vậy, các tiêu đề là thực sự là một hình chữ nhật hoàn hảo, chủ yếu là nhìn xuyên thấu ở phía dưới, với một hình tam giác nhỏ "nhìn trộm" ra:

Nói với iOS mà tiêu đề cao 80px, như sau:

- (CGFloat) tableView:(UITableView *) tableView 
    heightForHeaderInSection:(NSInteger) section { 
    return 80; 
    } 

và nó sẽ bắt đầu vẽ hàng "thực phẩm" ở 80px. Vì tiêu đề nằm ở trên cùng và vì hầu hết phần đầu tiêu đề đều trong suốt trừ mũi tên, bạn sẽ nhận được hiệu ứng này.

Answer 2

Tôi đã đạt được kết quả mong muốn theo một cách khác. Thay vì sử dụng tableView:viewForheaderInSection: (mà không làm việc cho tôi), tôi đã thêm một cái nhìn hình ảnh chứa hình ảnh mũi tên như là một subview của cái nhìn tiêu đề, và thiết lập các khung được ngay dưới tiêu đề:

// Inside HeaderView.m 

UIImageView *arrowImageView = [[UIImageView alloc] initWithImage:self.arrowImage]; 
arrowImageView.frame = CGRectMake(arrowX, frame.size.height, self.arrowImage.size.width, self.arrowImage.size.height); 
[self addSubview:arrowImageView]; 
[arrowImageView release]; 

Nếu bạn quan sát kỹ, có hai tệp (sau-captionbubble-dark.png và sau-captionbubble-dark@2x.png) trong Foodspotting.app trông giống như mũi tên được hiển thị ở trên trong câu hỏi. Vì vậy, tôi đoán họ có thể đã sử dụng một kỹ thuật tương tự. Kudos cho nhóm Foodspotting.