根据 JSON 文件中的内容文本调整带有 UILabel 的自定义单元格的大小

Posted

技术标签:

【中文标题】根据 JSON 文件中的内容文本调整带有 UILabel 的自定义单元格的大小【英文标题】:Resize Custom cell with a UILabel on it based on content text from JSON file 【发布时间】:2013-11-17 17:18:39 【问题描述】:

我正在将 JSON 字符串解析为自定义表格视图单元格。 如何调整标签的高度以适合内容文本并调整单元格的大小以适合其内容。

代码:

#import "DEMOSecondViewController.h"
#import "DEMONavigationController.h"
#import "PostsObject.h"
#import "RNBlurModalView.h"
#import "AFNetworking.h"

@interface DEMOSecondViewController ()

@end

@implementation DEMOSecondViewController
@synthesize tableView = _tableView, activityIndicatorView = _activityIndicatorView, movies = _movies;

- (void)viewDidLoad

    [super viewDidLoad];
    self.title = @"iCelebri.com";
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Menu"
                                                                             style:UIBarButtonItemStylePlain
                                                                            target:(DEMONavigationController *)self.navigationController
                                                                            action:@selector(showMenu)];

    self.tableView.separatorColor = [UIColor clearColor];

    // Setting Up Activity Indicator View
    self.activityIndicatorView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    self.activityIndicatorView.hidesWhenStopped = YES;
    self.activityIndicatorView.center = self.view.center;
    [self.view addSubview:self.activityIndicatorView];
    [self.activityIndicatorView startAnimating];
    self.tableView.separatorColor = [UIColor clearColor];

    // Initializing Data Source
    self.movies = [[NSArray alloc] init];

    [self makeConnection];



-(void)makeConnection 
    _url = [[NSURL alloc] initWithString:@"my-site.com/json.php?name=Name"];
    NSURLRequest *request = [[NSURLRequest alloc] initWithURL:_url];

    AFJSONRequestOperation *operation = [AFJSONRequestOperation JSONRequestOperationWithRequest:request success:^(NSURLRequest *request, NSHTTPURLResponse *response, id JSON) 
        self.movies = JSON;
        [self.activityIndicatorView stopAnimating];
        [self.tableView reloadData];

     failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error, id JSON) 
        NSLog(@"Request Failed with Error: %@, %@", error, error.userInfo);
    ];

    [operation start];


// Table View Data Source Methods
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 
    if (self.movies && self.movies.count) 
        return self.movies.count;
     else 
        return 0;
    


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

    return 124;


- (void)tableView:(UITableView *)tableView
  willDisplayCell:(UITableViewCell *)cell
forRowAtIndexPath:(NSIndexPath *)indexPath

    [cell setBackgroundColor:[UIColor clearColor]];


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
    static NSString *simpleTableIdentifier = @"PostsObject";

    PostsObject *cell = (PostsObject *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if (cell == nil)
    
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"PostsObject" owner:self options:nil];
        cell = [nib objectAtIndex:0];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background.png"]];

        self.tableView.backgroundView = imageView;
    

    NSDictionary *movie = [self.movies objectAtIndex:indexPath.row];
    cell.title.text = [movie objectForKey:@"message"];
    cell.published.text = [movie objectForKey:@"published"];

    return cell;



@end

所以我希望单元格调整为标题标签加上文本标签的大小 “消息”:[movie objectForKey:@"message"];

我该怎么做?

【问题讨论】:

Xcode - UILabel - auto-size label to fit text?的可能重复 使用此链接的帮助:***.com/questions/9827126/… 并在答案的代码中添加方法 heightForRow... 并根据标签高度返回高度 也可以借助这个:***.com/questions/1012361/… 【参考方案1】:

这是根据每个 indexPath 的文本长度调整单元格高度的完整代码:

.h 文件:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate> 
    IBOutlet UITableView *_tableView;
    UIActivityIndicatorView *_activityIndicatorView;
    NSArray *_movies;
    CGFloat cellTextWidth;
    CGFloat cellHeightExceptText;

@property (nonatomic, retain) UIFont *fontForCellText;
@property (nonatomic, retain) UITableView *tableView;
@property (nonatomic, retain) UIActivityIndicatorView *activityIndicatorView;
@property (nonatomic, retain) NSArray *movies;

@end

.m 文件:

#import "ViewController.h"
#import "AFNetworking.h"
#import "ParseFeedCell.h"

@interface ViewController ()

@end

@implementation ViewController
@synthesize tableView = _tableView, activityIndicatorView = _activityIndicatorView, movies = _movies;
@synthesize fontForCellText;

- (void)viewDidLoad

    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"ParseFeedCell" owner:self options:nil];
    ParseFeedCell *cell = [nib objectAtIndex:0];
    fontForCellText = cell.title.font;
    cellTextWidth = cell.title.frame.size.width;
    cellHeightExceptText = cell.frame.size.height - cell.title.frame.size.height;

    [self.navigationController setNavigationBarHidden:YES];

    self.tableView.separatorColor = [UIColor clearColor];

    // Setting Up Activity Indicator View
    self.activityIndicatorView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    self.activityIndicatorView.hidesWhenStopped = YES;
    self.activityIndicatorView.center = self.view.center;
    [self.view addSubview:self.activityIndicatorView];
    [self.activityIndicatorView startAnimating];
    self.tableView.separatorColor = [UIColor clearColor];

    // Initializing Data Source
    //self.movies = [[NSArray alloc] init];

    NSURL *url = [[NSURL alloc] initWithString:@"your-website.com/json_file?name=Name"];
    NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];

    AFJSONRequestOperation *operation = [AFJSONRequestOperation JSONRequestOperationWithRequest:request success:^(NSURLRequest *request, NSHTTPURLResponse *response, id JSON) 
        self.movies = [[NSArray alloc] initWithArray:JSON];
        [self.activityIndicatorView stopAnimating];
        [self.tableView reloadData];

     failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error, id JSON) 
        NSLog(@"Request Failed with Error: %@, %@", error, error.userInfo);
    ];

    [operation start];


// Table View Data Source Methods
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 
    if (self.movies && self.movies.count) 
        return self.movies.count;
     else 
        return 0;
    


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
    static NSString *simpleTableIdentifier = @"ParseFeedCell";

    ParseFeedCell *cell = (ParseFeedCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if (cell == nil)
    
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"ParseFeedCell" owner:self options:nil];
        cell = [nib objectAtIndex:0];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;

    

    NSDictionary *movie = [self.movies objectAtIndex:indexPath.row];
    NSString *strText = [movie objectForKey:@"message"];

    CGRect rect = cell.title.frame;
    rect.size.height = [self getHeightForText:strText];
    cell.title.frame = rect;
    cell.title.text = strText;
    cell.arrow.center = CGPointMake(cell.arrow.frame.origin.x, rect.origin.y + rect.size.height/2);
    cell.published.text = [movie objectForKey:@"published"];
    return cell;


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

    NSDictionary *movie = [self.movies objectAtIndex:indexPath.row];
    NSString *strText = [movie objectForKey:@"message"];

    CGFloat cellHeight = cellHeightExceptText + [self getHeightForText:strText];

    return cellHeight;


- (CGFloat)getHeightForText:(NSString *)strText

    CGSize constraintSize = CGSizeMake(cellTextWidth, MAXFLOAT);
    CGSize labelSize = [strText sizeWithFont:fontForCellText constrainedToSize:constraintSize lineBreakMode:NSLineBreakByWordWrapping];
    NSLog(@"labelSize.height = %f",labelSize.height);
    return labelSize.height;

确保您的自定义单元格“ParseFeedCell”的自动布局已关闭(未选中):

还将文本 UILabel 的 Lines 的数量更改为 999999,使其不限于行数。 我相信通过一些研究,您可以找到一种方法来了解文本的行数并以编程方式将这些行分配给 UILabel。

【讨论】:

完美!这解决了我的问题。你真的很好。谢谢!【参考方案2】:

将此用于动态大小的单元格:

首先定义以下内容:

#define FONT_SIZE 13.0f 
#define CELL_CONTENT_WIDTH 290.0f 
#define CELL_CONTENT_MARGIN 19.0f 

    实现以下辅助方法;

     -(CGSize)frameForText:(NSString*)text sizeWithFont:(UIFont*)font constrainedToSize:(CGSize)size  
    
    NSMutableParagraphStyle * paragraphStyle = [[NSMutableParagraphStyle defaultParagraphStyle] mutableCopy];
    paragraphStyle.lineBreakMode = NSLineBreakByCharWrapping;
    
    NSDictionary * attributes = @NSFontAttributeName:font,
                                  NSParagraphStyleAttributeName:paragraphStyle
                                  ;
    
    
    CGRect textRect = [text boundingRectWithSize:size
                                         options:NSStringDrawingUsesLineFragmentOrigin
                                      attributes:attributes
                                         context:nil];
    
    
    // This contains both height and width, but we really care about height.
    return textRect.size;
    
    

    在你的 UITableViewDelegate Height 方法中:

    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
    
    
    NSDictionary *movie = [self.movies objectAtIndex:indexPath.row];
    
            NSString *text = [movie objectForKey:@"message"];        
    
            CGSize constraint = CGSizeMake(CELL_CONTENT_WIDTH - (CELL_CONTENT_MARGIN * 2), 20000.0f);
    
            CGSize size = [self frameForText:text sizeWithFont:[UIFont systemFontOfSize:FONT_SIZE] constrainedToSize:constraint];
    
            CGFloat height = MAX(size.height, 14.0f);
    
            return height + CELL_CONTENT_MARGIN;
    
    
    
    

    在你的 UITableViews cellForRowAtIndexPath 中设置框架和文本:

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
    static NSString *simpleTableIdentifier = @"PostsObject";
    
    PostsObject *cell = (PostsObject *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if (cell == nil)
    
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"PostsObject" owner:self options:nil];
        cell = [nib objectAtIndex:0];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background.png"]];
    
        self.tableView.backgroundView = imageView;
    
    
    NSDictionary *movie = [self.movies objectAtIndex:indexPath.row];
    
    NSString *text = [movie objectForKey:@"message"];
    
    
        CGSize constraint = CGSizeMake(CELL_CONTENT_WIDTH - (CELL_CONTENT_MARGIN * 2), 20000.0f);
    
    
        CGSize size = [self frameForText:text sizeWithFont:[UIFont systemFontOfSize:FONT_SIZE] constrainedToSize:constraint];
    
        cell.txtLabel.text = text;
        cell.txtLabel.frame = CGRectMake(CELL_CONTENT_MARGIN, CELL_CONTENT_MARGIN, CELL_CONTENT_WIDTH - (CELL_CONTENT_MARGIN * 2), MAX(size.height, 14.0f));
    
    cell.published.text = [movie objectForKey:@"published"];
    
    return cell;
    
    

【讨论】:

【参考方案3】:

如果您希望单元格根据 JSON 的内容调整大小,您必须更改以下方法:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

    return 124;

您将每个单元格的高度设置为 124 像素。你应该做的是:

    获取使用 指定的约束。 重置包含字符串的标签框架 为单元格返回正确的大小 tableView:heightForRowAtIndexPath:

希望对您有所帮助! 干杯

【讨论】:

你能帮我看看代码吗?我无法解决它...@ubiAle

以上是关于根据 JSON 文件中的内容文本调整带有 UILabel 的自定义单元格的大小的主要内容,如果未能解决你的问题,请参考以下文章

如何根据应用程序小部件中文本视图中的小部件大小调整文本大小?

根据所选列中的文本调整行高

jQuery 调整文本框大小以适应内容

编写带有调整文本的脚本

自动调整大小不适用于 xib 文件中的视图内容

如何根据内容调整 UITextView 的大小?