अनुभागों के बाईं तरफ UITableView शीर्षलेख (स्पॉटलाइट की तरह)

Question

थोड़ी देर के लिए इसके लिए खोज कर रहे थे, और मुझे अभी भी ऐसा करने का कोई तरीका नहीं मिला है। मैं आईफोन की स्पॉटलाइट के सेक्शन हेडर को यूआईटीबल व्यू में पुन: पेश करना चाहता हूं।

"नियमित" तालिका दृश्य शीर्षलेख स्क्रॉल करते समय किसी अनुभाग के शीर्ष पर दिखाई देते हैं, जैसा कि हम सभी जानते हैं। लेकिन एक प्रकार का हेडर है जिसे मैंने कभी भी स्प्रिंगबोर्ड के स्पॉटलाइट पेज की तुलना में कहीं और नहीं देखा है: वहां, शीर्षलेख अनुभाग की पूरी ऊंचाई तक फैले हुए हैं और खंड के शीर्ष पर नहीं फंस गए हैं, लेकिन बाईं ओर।

यह कैसे हासिल किया जाता है?

Answer 1

अच्छा सवाल। मैंने थोड़ा प्रयोग किया। यह लगभग स्पॉटलाइट से दृश्य की तरह दिखता है। लेकिन इसमें एक आयात सुविधा की कमी है। निचले "छवि" ऊपरी छवि को शीर्ष पर धक्का नहीं देती है अगर वे टकराते हैं।

मुझे संदेह है कि निजी ढांचे के उपयोग के बिना एक अंतर्निहित समाधान है।

---

मैं यह लक्ष्य प्राप्त:

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

लेकिन मुझे नहीं पता कि मैं ओवरलैपिंग को कैसे ठीक कर सकता हूं।

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

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { 
    UIView *contentView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.bounds.size.width, 44)]; 
    contentView.backgroundColor = [UIColor lightGrayColor]; 

    UIImageView *imageView = [[[UIImageView alloc] initWithFrame:CGRectMake(5, 5, 34, 34)] autorelease]; 
    imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d", section]];; 

    [contentView addSubview:imageView]; 
    return [contentView autorelease]; 
} 

Answer 2

अच्छी खबर::

यहाँ कोड कि ऐसा बना दिया है देखें का जवाब How to achieve an advanced table view header

result http://i.minus.com/jyea3I5qbUdoQ.png

Answer 3

ठीक है, मैं करने के लिए कुछ इसी तरह किया है क्या संगीत एप्लिकेशन और सुर्खियों खोज कर देता है।

मैंने UITableView को उपclass नहीं किया है, मैंने बस इसके स्क्रॉलव्यूडस्क्रॉल विधि के माध्यम से अनुभागों को ट्रैक किया है, और तालिका दृश्य के बाईं ओर हेडर दृश्य जोड़े हैं (इसलिए आपको तालिका दृश्य को अपने दृश्य में दाईं ओर रखना होगा नियंत्रक का दृश्य, जो इसका मतलब है कि आप UITableViewController का उपयोग नहीं कर सकते हैं)।

इस विधि scrollViewDidScroll, viewDidLoad में बुलाया जाना चाहिए, और didRotateFromInterfaceOrientation में:

को ध्यान में रखना आप में हेडर के आकार के लिए छोड़ दिया बराबर में जगह बनाने के लिए करना होगा कि (यदि आप रोटेशन का समर्थन) आप जिस इंटरफेस अभिविन्यास का समर्थन करते हैं।

-(CGSize)headerSize 
{ 
return CGSizeMake(44.0f, 44.0f); 
} 

-(CGFloat)headerXOrigin 
{ 
return 10.0f; 
} 

:

@property (nonatomic, strong) NSMutableDictionary* headerViewsDictionary; 

इन तरीकों आकार और एक्स अक्ष हैडर विचारों के ऑफसेट वापसी:

-(void)updateHeadersLocation 
{ 
for (int sectionNumber = 0; sectionNumber != [self numberOfSectionsInTableView:self.tableView]; sectionNumber++) 
{ 
    // get the rect of the section from the tableview, and convert it to it's superview's coordinates 
    CGRect rect = [self.tableView convertRect:[self.tableView rectForSection:sectionNumber] toView:[self.tableView superview]]; 

    // get the intersection between the section's rect and the view's rect, this will help in knowing what portion of the section is showing 
    CGRect intersection = CGRectIntersection(rect, self.tableView.frame); 

    CGRect viewFrame = CGRectZero; // we will start off with zero 

    viewFrame.size = [self headerSize]; // let's set the size 

    viewFrame.origin.x = [self headerXOrigin]; 

    /* 

    three cases: 

    1. the section's origin is still showing -> header view will follow the origin 
    2. the section's origin isn't showing but some part of the section still shows -> header view will stick to the top 
    3. the part of the section that's showing is not sufficient for the view's height -> will move the header view up 

    */ 

    if (rect.origin.y >= self.tableView.frame.origin.y) 
    { 
     // case 1 
     viewFrame.origin.y = rect.origin.y; 
    } 
    else 
    { 
     if (intersection.size.height >= viewFrame.size.height) 
     { 
      // case 2 
      viewFrame.origin.y = self.tableView.frame.origin.y; 
     } 
     else 
     { 
      // case 3 
      viewFrame.origin.y = self.tableView.frame.origin.y + intersection.size.height - viewFrame.size.height; 
     } 
    } 

    UIView* view = [self.headerViewsDictionary objectForKey:[NSString stringWithFormat:@"%i", sectionNumber]]; 

    // check if the header view is needed 
    if (intersection.size.height == 0) 
    { 
     // not needed, remove it 
     if (view) 
     { 
      [view removeFromSuperview]; 
      [self.headerViewsDictionary removeObjectForKey:[NSString stringWithFormat:@"%i", sectionNumber]]; 
      view = nil; 
     } 
    } 
    else if(!view) 
    { 
     // needed, but not available, create it and add it as a subview 

     view = [self headerViewForSection:sectionNumber]; 

     if (!self.headerViewsDictionary && view) 
      self.headerViewsDictionary = [NSMutableDictionary dictionary]; 

     if (view) 
     { 
      [self.headerViewsDictionary setValue:view forKey:[NSString stringWithFormat:@"%i", sectionNumber]]; 

      [self.view addSubview:view]; 
     } 
    } 


    [view setFrame:viewFrame]; 
} 
} 

भी हम एक संपत्ति है कि विचारों कि दिखाई दे रहे हैं रखना होगा की घोषणा करने की जरूरत है

मैंने कोड बनाया है ताकि किसी भी शीर्षलेख दृश्य को जरूरी नहीं हटाया जा सके, इसलिए हमें एक ऐसी विधि की आवश्यकता है जो दृश्य को वापस लौटाए:

-(UIView*)headerViewForSection:(NSInteger)index 
{ 
UIImageView* view = [[UIImageView alloc] init]; 

if (index % 2) 
{ 
    [view setImage:[UIImage imageNamed:@"call"]]; 
} 
else 
{ 
    [view setImage:[UIImage imageNamed:@"mail"]]; 
} 

return view; 
} 

यहाँ

यह कैसा दिखेगा है:

यह लैंडस्केप में कैसी दिखेंगी, मैं contraints का इस्तेमाल किया है tableView

के बाईं में 44px देने के लिए उम्मीद है कि यह मदद करता है :)।