विभिन्न आयामों में छवियों के साथ UITableViewCell

Question

मैं विभिन्न आयामों में छवियों वाले कोशिकाओं के लिए अपने पुन: प्रयोज्यसेल का उपयोग करने का प्रयास कर रहा हूं। छवियों को 220x150 ब्लैक बॉक्स के अंदर रखा गया है जिसमें स्केलिंग UIViewContentModeScaleAspectFit है।

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    static NSString *CellIdentifier = @"NewsTableViewCell"; 

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 
    if (cell == nil) { 
     cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; 
    } 

    NewsItem *item = [self.fetchedResultsController objectAtIndexPath:indexPath]; 

    NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:item.imageUrl]]; 
    [cell.imageView setImage:[[UIImage alloc] initWithData:data]]; 
    [cell.imageView setBackgroundColor:[UIColor blackColor]]; 
    [cell.imageView setContentMode:UIViewContentModeScaleAspectFit]; 

    CGRect imageViewFrame = cell.imageView.frame; 
    imageViewFrame.size.width = 220; 
    imageViewFrame.size.height = 150 
    [cell.imageView setFrame:imageViewFrame]; 

    [cell.textLabel setText:item.title]; 

    return cell; 
} 

उपर्युक्त कोड नीचे दिए गए लेआउट में परिणाम देता है और तालिका दृश्य में स्क्रॉल करते समय छवियां कभी-कभी बदलती रहती हैं। छवियों

इस असंरचित लेआउट के बजाय

, मैं चाहते हैं इस तरह गठबंधन किया जाना:

क्या मैं इस ReusableCell के साथ कुछ गलत कर रहा हूँ?

EDIT1:

मैं एक imageView बना सकते हैं और cell.contentView करने के लिए एक superview के रूप में इस imageView जोड़ने की कोशिश कर रहा हूँ।

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    static NSString *CellIdentifier = @"NewsTableViewCell"; 

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 
    if (cell == nil) { 
     cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; 
    } 

    NewsItem *item = [self.fetchedResultsController objectAtIndexPath:indexPath]; 

    UIImage *placeholderImage = [UIImage imageNamed:@"ImagePlaceholderThumb"]; //220x150 

    UIImageView *imageView = [[UIImageView alloc] initWithImage:placeholderImage]; 

    NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:item.imageUrl]]; 
    [imageView setImage:[[UIImage alloc] initWithData:data]]; 
    [imageView setBackgroundColor:[UIColor blackColor]]; 
    [imageView setContentMode:UIViewContentModeScaleAspectFit]; 

    CGRect imageViewFrame = imageView.frame; 
    imageViewFrame.size.width = placeholderImage.size.width; 
    imageViewFrame.size.height = placeholderImage.size.height; 
    [imageView setFrame:imageViewFrame]; 

    [cell.contentView addSubview:imageView]; 

    [cell.textLabel setText:item.title]; 

    return cell; 
} 

निम्नलिखित में से ऊपर कोड परिणाम:

यह छवियों में से कुछ की तरह है दो कोशिकाओं में दिखाई दे रहे हैं। ऐसा लगता है कि वे imageViewFrame में सेट किए गए आकार को नहीं रख रहे हैं। तुम जानते हो क्यों?

Answer 1

एक त्वरित फ़िक्स सामग्री मोड UIViewContentModeScaleAspectFill का उपयोग करेगा। पूरी छवि दृश्य सीमाओं को भरने के लिए छवियों को एक या दोनों आयामों में फैलाया जाएगा।

आपको यह अधिकार करने के लिए वास्तव में UITableViewCell उपclassing की आवश्यकता है।

Thre एक आलसी समाधान एक नया UIImageView जोड़ने और एक स्पेसर का उपयोग कर, के रूप में केलर उसके जवाब में तुमसे कहा था (अपने जवाब को स्वीकार करने के लिए स्वतंत्र महसूस, यह सिर्फ लापता कोड है)।

tableView:cellForRowAtIndexPath: के निकालें:

... 
cell.textLabel.text = [NSString stringWithFormat:@"Cell #%i", indexPath.row]; 
cell.imageView.image = [UIImage imageNamed:@"spacer.png"]; /* spacer is 64 x 44 */ 
/* image view width should be ~ 64 px, otherwise it will overlap the text */ 
UIImageView *iv = [[UIImageView alloc] initWithFrame:(CGRect){.size={64, tableView.rowHeight}}]; 
switch (indexPath.row) { 
    case 0: 
     iv.image = [UIImage imageNamed:@"waterfall.png"]; 
     break; 
    /* etc... */ 
} 
if (indexPath.row < 3) { 
    /* add black bg to cell w/ images */ 
    iv.backgroundColor = [UIColor blackColor]; 
} 
iv.contentMode = UIViewContentModeScaleAspectFit; 
[cell.contentView addSubview:iv]; 
... 

तालिका इस तरह दिखेगा:

आप मौजूदा सेल छवि को ध्यान में रखते प्लेसहोल्डर (ऊपर spacer.png) सेट करना होगा। यह टेक्स्ट लेबल को दाईं ओर धक्का देगा।

आप पहलू का उपयोग कर सकते भरने और पृष्ठभूमि का रंग थोड़ा निकालें: क्योंकि छवि सीमा outsite तैयार की है

iv.contentMode = UIViewContentModeScaleAspectFill; 

तालिका गलत दिखेगा:

बस सीमा के क्लिप बेहतर परिणाम प्राप्त करने के लिए:

iv.clipsToBounds = YES; 

Answer 2

प्रत्येक सेल के लिए UIImageView सबव्यूव बनाएं और इसे सामग्री देखें। प्रत्येक UIImageView में एक स्थिर फ्रेम वाला एक चित्र होता है लेकिन विकल्प UIViewContentModeScaleAspectFit के साथ होता है। फिर बस UIImageView का पृष्ठभूमि रंग काला पर सेट करें।

मैंने अभी इस काम की पुष्टि की है, लेकिन आपको यह सुनिश्चित करने के लिए प्लेसहोल्डर स्पेसर छवि भी बनाने की आवश्यकता है कि टेक्स्ट लेबल रास्ते से बाहर निकल जाए। बस इसे अपनी छवि के समान आयाम बनाएं (पत्र मुक्केबाजी के साथ)।

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    static NSString *CellIdentifier = @"Cell"; 

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 
    if (cell == nil) { 
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; 

    //spacer 
    cell.imageView.image = [UIImage imageNamed:@"placeholder"]; 

    //imageview 
    UIImageView *thumbnail = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 44)]; 
    thumbnail.tag = kThumbTag; 
    thumbnail.backgroundColor = [UIColor blackColor]; 
    thumbnail.contentMode = UIViewContentModeScaleAspectFit; 
    [cell.contentView addSubview:thumbnail]; 
    } 

    // Configure the cell... 

    cell.textLabel.text = [NSString stringWithFormat:@"Cell %d", indexPath.row]; 

    cell.imageView.frame = CGRectMake(0, 0, 80, 44); 

    UIImageView *thumb = (UIImageView*)[cell.contentView viewWithTag:kThumbTag]; 
    if (indexPath.row == 0) { 
    [thumb setImage:[UIImage imageNamed:@"image1.png"]]; 
    } else { 
    [thumb setImage:[UIImage imageNamed:@"image2.png"]]; 
    } 

    return cell; 
} 

जाहिर है, इस उदाहरण छवियों (मैं तुम्हें किसी URL से उन्हें लोड कर रहे थे एहसास नहीं था) लोड हो रहा है आलसी नहीं है। इसके लिए, मैं EGOImageView या इस तरह के कुछ के साथ एक उपclass का उपयोग करेंगे।