UITableView कस्टम हेडर (FoodSpotting एप्लिकेशन की तरह)

Question

किसी कैसे इस एप्लिकेशन (FoodSpotting), अपने कस्टम अनुभाग शीर्ष लेख बनाता समझा सकते हैं? इसमें एक पारदर्शी काला पृष्ठभूमि, उपयोगकर्ता की छवि, और कुछ अच्छा पाठ है (सर्वर से कोई संदेह नहीं है)। मेरे 2 बड़े प्रश्न यहां हैं:

1. ऐप को अनुभाग शीर्षलेख पर अच्छा काला पारदर्शी कैसे मिलता है? 2. वे हेडर से जुड़े छोटे त्रिकोण तीर को कैसे प्राप्त करते हैं?

मैं सेक्शन हेडर के लिए कस्टम व्यू का उपयोग करने के आधार पर सब कुछ और अधिक समझ सकता हूं।

Answer 1

Section header is a UIView किसी अन्य की तरह। यदि आप चाहें तो इंटरफ़ेस बिल्डर का उपयोग करके, इसे जटिल, जटिल, या जैसा कि आप चाहें उतना ही सुंदर बना सकते हैं। आपके टेबल प्रतिनिधि का tableView:viewForheaderInSection इसे वापस करने के लिए ज़िम्मेदार है, जैसा कि यह अन्य सेल पंक्तियों के लिए है।

छोटे त्रिकोण के रूप में: हाँ, इसने हमें थोड़ी देर के लिए फेंक दिया (हम अपने ऐप में कुछ ऐसा चाहते थे) जब तक कि हमने पाया कि आप पंक्ति के साथ दृश्य को ओवरलैप कर सकते हैं, इसकी ऊंचाई के बारे में "झूठ बोलकर": यानी tableView:heightForHeaderInSection: रिटर्न वास्तव में यह मूल्य थोड़ा कम है। "सही" तरीका नहीं हो सकता है, लेकिन हमारे लिए बहुत अच्छी तरह से काम किया। इस तरह:

तो शीर्षक है वास्तव में एक आदर्श आयत, ज्यादातर को देखने के माध्यम से निचले भाग में, एक छोटे त्रिकोण "देखना" बाहर के साथ:

बताएँ आईओएस कि हेडर 80px उच्च है, इस तरह:

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

और यह 80px पर "भोजन" पंक्ति को आकर्षित करना शुरू कर देगा। चूंकि शीर्षलेख शीर्ष पर हैं, और चूंकि तीर को छोड़कर अधिकांश शीर्षलेख नीचे पारदर्शी है, इसलिए आपको यह प्रभाव प्राप्त करना चाहिए।

Answer 2

मैंने वांछित परिणाम को एक अलग तरीके से हासिल किया। tableView:viewForheaderInSection: का उपयोग कर (जो मेरे लिए काम नहीं करता है) के बजाय, मैं एक छवि का मानना ​​है कि शीर्ष लेख को देखने के एक subview के रूप तीर छवि रखती है जोड़ा, और फ्रेम सेट सिर्फ शीर्षक के नीचे होने के लिए:

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

यदि आप बारीकी से देखते हैं, तो Foodspotting.app में दो फाइलें हैं (निम्नलिखित-कैप्शनबबल-dark.png और follow-captionbubble-dark@2x.png) जो प्रश्न में ऊपर दिखाए गए तीर की तरह दिखती हैं। तो मुझे लगता है कि उन्होंने एक समान तकनीक का उपयोग किया होगा। फूडस्पॉटिंग टीम के लिए कुडोस।