如何使用2标签制作自定义UITableViewCell,如果标签文本为空,另一个填充空间?

时间:2016-05-26 19:48:44

标签: ios xcode uitableview

示例:

textLabel和descriptionLabel中的文本不为空 enter image description here

文字说明标签为空

enter image description here

可能会出现Autolayout,或者有必要覆盖某些方法。

2 个答案:

答案 0 :(得分:1)

如果是自定义标签,这里的简单修复就是只使用一个标签并添加1或2行属性文本。我只是把一个项目放在一起,它运作正常。我已经提供了比您需要更多的解释(您已经知道如何子类化表视图单元格,但对于可能需要它的人,我添加了很多细节)。 基本上是:

  1. 子类UITableViewCell并添加单个标签。设置自动布局,使标签在单元格中垂直对齐,并设置左右边距。你可能不得不搞乱自动布局来添加填充到顶部或底部,但我会将摔跤与自动布局留给你lol

  2. 创建1或2个NSMutableAttributedStrings。如果您只有一个字符串,它将在一行的标签中居中,并在文本周围自动布局。如果您有两行,只需添加一个返回字符。

  3. 注意:此代码假定您始终至少拥有标题,副标题是可选的。

    这是我使用的tableViewController.m代码

    #import "MyTableViewController.h"
    #import "CustomCell.h"
    
    @implementation MyTableViewController
    
    - (void)viewDidLoad 
    {
        [super viewDidLoad];
    
        //1. Register custom nib
        [self.tableView registerNib:[UINib nibWithNibName:[CustomCell nibName] bundle:nil] forCellReuseIdentifier:[CustomCell resuseIdentifier]];
    
        //2. Set a suggested height for auto-layout
        self.tableView.estimatedRowHeight = 45;
    }
    
    #pragma mark - UITableView datasource
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 
    { 
        return 1; 
    }
    
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 
    { 
        return 2; 
    }
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
        //1. Create an instance of the custom cell
        CustomCell *cell = (CustomCell*)[self.tableView dequeueReusableCellWithIdentifier:[CustomCell resuseIdentifier] forIndexPath:indexPath];
    
        //2. Setting some filler text (this would come from your data object)
        if (indexPath.row == 0) {
        cell.title = @"A cell with only title text";
        } else {
        cell.title = @"First we have the title";
        cell.subTitle = @"And here is the subtitle";
        }
    
        return cell;
    }
    

    这是自定义UITableViewCell的.h和.m。请记住将故事板中的原型单元子类化为此类。

    //  CustomCell.h
    
    #import <UIKit/UIKit.h>
    
    @interface CustomCell : UITableViewCell
    
    + (NSString *)nibName;
    + (NSString *)resuseIdentifier;
    
    @property (strong, nonatomic) NSString *title;
    @property (strong, nonatomic) NSString *subTitle;
    
    @end
    

    最后是CustomCell.m。这很长,所以你必须滚动浏览。对于那个很抱歉。

    //  CustomCell.m
    #import "CustomCell.h"
    
    //1. Created a typeDef to identify which label we are dealing with
    typedef NS_ENUM(NSInteger, CustomLabelType) {
        CustomLabelTypeTitle = 0,
        CustomLabelTypeSubtitle,
    };
    
    
    @interface CustomCell()
    
    //IBOutlet to custom .xib file of UITableViewCell file
    @property (weak, nonatomic) IBOutlet UILabel *customLabel;
    
    @end
    
    @implementation CustomCell
    
    + (NSString *)nibName
    {
        return @"CustomCell";
    }
    
    + (NSString *)resuseIdentifier
    {
        return @"CustomCellReuseIdentifier";
    }
    
    - (void)setTitle:(NSString *)title
    {
        _title = title;
    }
    
    - (void)setSubTitle:(NSString *)subTitle
    {
        _subTitle = subTitle;
    }
    
    - (void)setSelected:(BOOL)selected animated:(BOOL)animated 
    {
        [super setSelected:selected animated:animated];
    
        //1. Add a line return after the title if we have a subtitle
        if (self.subTitle) {
        self.title = [NSString stringWithFormat:@"%@%@",self.title, @"\n"];
    
        //2. Set the title to allow for 2 lines of text
        self.customLabel.numberOfLines = 2;
        }
    
    
        NSMutableAttributedString *attTitle;
        NSMutableAttributedString *attSubTitle;
    
        //3. Set the title
        if (self.title)
        attTitle = [self _mutableStringWithText:self.title type:CustomLabelTypeTitle];
    
        //4. If we have a subtitle, append it to the title attributed string
        if (self.title && self.subTitle) {
        attSubTitle = [self _mutableStringWithText:self.subTitle type:CustomLabelTypeSubtitle];
        [attTitle appendAttributedString:attSubTitle];
        }
    
        //5. Set your label
        [self.customLabel setAttributedText:attTitle];
    
    }
    
    - (NSMutableAttributedString *)_mutableStringWithText:(NSString *)labelText type:(CustomLabelType)labelType
    {
        //1. Create attributes for title vs subtitle
        UIFont *labelFont = [UIFont systemFontOfSize: (labelType == CustomLabelTypeTitle) ? 16 : 12];
        UIColor *textColor = (labelType == CustomLabelTypeTitle) ? [UIColor blackColor] : [UIColor grayColor];
    
        //2. Create the paragraph style you want, including line spacing
        NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
        [paragraphStyle setLineSpacing:6.5];
        paragraphStyle.alignment = NSTextAlignmentLeft;
    
        //3. Create your attributes dictionary
        NSDictionary *paragraphAttributes = @{NSParagraphStyleAttributeName: paragraphStyle, NSFontAttributeName: labelFont, NSForegroundColorAttributeName:textColor};
    
        //4. Create and return your string
        NSMutableAttributedString *mutableString = [[NSMutableAttributedString alloc] initWithString:labelText attributes:paragraphAttributes];
    
        return mutableString;   
    }
    
    
    @end
    

    Screenshot

答案 1 :(得分:1)

好的,回答1.1版。这次我们这样做:

  1. 添加你的top titleLabel:在自动布局中为superview设置一个垂直约束。转到尺寸检查器并将常量更改为-15(将其向上滑动)。将另一个约束设置为视图顶部,以便填充任何内容。将该约束的优先级设置为900.

  2. 现在控制从tltleLabel的垂直约束拖动到.m文件的界面,以创建约束的出口。

  3. Vertical constraint in top label

    1. 添加您的底部副标题标签:使用乘数1.5(或任何您需要使其看起来正常)的超级视图设置垂直约束。不要添加任何与顶部标签显示关系的约束。

    2. 在您的代码中,如果您有副标题,那么只需填写标签就可以了。如果您没有副标题,则将副标题设置为隐藏,并将titleLabel垂直约束的常量值更改为0,使其居中。证明完毕

    3. 这里是CustomCell类的新代码。应该是第一次这样做。比我做的第一个解决方案容易100%(我在咖啡上跳了起来)。希望这对你有用。

      //  CustomCell.m
      
      #import "CustomCell.h"
      
      @interface CustomCell()
      
      //IBOutlet to custom .xib file of UITableViewCell file
      @property (weak, nonatomic) IBOutlet UILabel *titleLabel;
      @property (weak, nonatomic) IBOutlet UILabel *subtitleLabel;
      
      //This is the new outlet to the contraint.
      @property (weak, nonatomic) IBOutlet NSLayoutConstraint *titleLabelVerticalConstraint;
      
      @end
      
      @implementation CustomCell
      
      + (NSString *)nibName
      {
          return @"CustomCell";
      }
      
      + (NSString *)resuseIdentifier
      {
          return @"CustomCellReuseIdentifier";
      }
      
      - (void)setTitle:(NSString *)title
      {
          _title = title;
          self.titleLabel.text = self.title;
      }
      
      - (void)setSubTitle:(NSString *)subTitle
      {
          _subTitle = subTitle;
          self.subtitleLabel.text = self.subTitle;
      }
      
      - (void)setSelected:(BOOL)selected animated:(BOOL)animated {
          [super setSelected:selected animated:animated];
      
          //1. If no subtitle, override current constraint
          if (!self.subTitle) {
              self.subtitleLabel.hidden = YES;
              self.titleLabelVerticalConstraint.constant = 0;
          }
      }
      @end
      

      enter image description here