美文网首页
iOS UITableView结合Masonry布局,实现cel

iOS UITableView结合Masonry布局,实现cel

作者: 邓布利多教授 | 来源:发表于2019-07-31 13:38 被阅读0次

    先来一个效果图看看

    效果图.gif
    • 首先要感谢标哥的这个工具,很好用。另外,用到了Masonry,用pod导入,不会的可以看这里

    • 接下来,开始表演,其实都是简单的代码布局,没有亮点,也许对一些小白有用,大神勿喷。代码里必要的一些注释我已经写上了,这里不再重复了!

    1、创建自定义Cell

    • .h文件
    #import <UIKit/UIKit.h>
    
    NS_ASSUME_NONNULL_BEGIN
    
    @interface TableViewCell : UITableViewCell
    
    -(void)array:(NSArray *)array Index:(NSInteger)index;
    
    @end
    
    NS_ASSUME_NONNULL_END
    
    • .m文件
    #import "TableViewCell.h"
    #import <Masonry.h>
    #import "UITableViewCell+HYBMasonryAutoCellHeight.h"
    
    @interface TableViewCell ()
    
    @property(nonatomic, strong)UILabel *lContent;
    
    @end
    
    @implementation TableViewCell
    
    -(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
        
        self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
        if (self) {
            
            UIImageView *ivUser = [UIImageView new];
            ivUser.backgroundColor = [UIColor lightGrayColor];
            [self addSubview:ivUser];
            
            [ivUser mas_makeConstraints:^(MASConstraintMaker *make) {
                
                make.left.top.mas_equalTo(20);
                make.size.mas_equalTo(CGSizeMake(40, 40));
                
            }];
            
            UILabel *lName = [UILabel new];
            lName.text = @"用户名";
            lName.textColor = [UIColor redColor];
            lName.textAlignment = NSTextAlignmentLeft;
            lName.font = [UIFont systemFontOfSize:14];
            [self addSubview:lName];
    
            [lName mas_makeConstraints:^(MASConstraintMaker *make) {
    
                make.left.mas_equalTo(ivUser.mas_right).offset(10);
                make.top.mas_equalTo(ivUser.mas_top);
                make.height.mas_equalTo(ivUser.mas_height);
    
            }];
    
            _lContent = [UILabel new];
            _lContent.textColor = [UIColor blackColor];
            _lContent.font = [UIFont systemFontOfSize:14];
            _lContent.numberOfLines = 0;
            _lContent.backgroundColor = [UIColor groupTableViewBackgroundColor];
            [self addSubview:_lContent];
    
            [_lContent mas_makeConstraints:^(MASConstraintMaker *make) {
    
                make.left.mas_equalTo(ivUser.mas_left);
                make.top.mas_equalTo(ivUser.mas_bottom).offset(20);
                make.right.mas_equalTo(-20);
                
            }];
            
            //必须设置最后一个视图的最大宽度
            _lContent.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width - 40;
            
            //下面两句必须要写
            self.hyb_lastViewInCell = _lContent;//最后一个视图
            self.hyb_bottomOffsetToCell = 20;//最后一个视图距离底边距,默认为0
            
        }
        return self;
        
    }
    
    - (void)setSelected:(BOOL)selected animated:(BOOL)animated {
        [super setSelected:selected animated:animated];
    }
    
    #pragma mark - cell个数
    -(void)array:(NSArray *)array Index:(NSInteger)index{
        _lContent.text = array[index];
    }
    
    @end
    

    实际项目中#import <Masonry.h>#import "UITableViewCell+HYBMasonryAutoCellHeight.h"这两个头文件是应该放到pch文件里的,我这里是练手玩的,没整那么正规。

    2、创建UITableView

    • 其实也很简单
    #import "TableViewController.h"
    #import <Masonry.h>
    #import "TableViewCell.h"
    #import "UITableViewCell+HYBMasonryAutoCellHeight.h"
    
    @interface TableViewController ()<UITableViewDelegate,UITableViewDataSource>
    
    @property(nonatomic, strong)UITableView *tvList;
    
    @end
    
    @implementation TableViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
        
        self.view.backgroundColor = [UIColor whiteColor];
        
        [self.view addSubview:self.tableView];
        
        [_tvList mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.mas_equalTo(self.view);
        }];
        
    }
    
    -(UITableView *)tableView{
        
        if (!_tvList) {
            
            _tvList = [UITableView new];
            _tvList.delegate = self;
            _tvList.dataSource = self;
            
        }
        
        return _tvList;
        
    }
    
    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
        return [self arrayDataSource].count;
    }
    
    -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
        
        return [TableViewCell hyb_heightForTableView:tableView config:^(UITableViewCell *sourceCell) {
            
            TableViewCell *regCell = (TableViewCell *)sourceCell;
            // 配置数据
            [regCell array:[self arrayDataSource] Index:indexPath.row];
            
        } cache:^NSDictionary *{
            
            return @{kHYBCacheUniqueKey: [NSString stringWithFormat:@"%ld",indexPath.row],
                     kHYBCacheStateKey : @"",
                     // 如果设置为YES,若有缓存,则更新缓存,否则直接计算并缓存s
                     // 主要是对社交这种有动态评论等不同状态,高度也会不同的情况的处理
                     kHYBRecalculateForStateKey : @(NO) // 标识不用重新更新
                     };
            
        }];
        
    }
    
    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        
        NSString *ident = @"Cell";
        TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ident];
        if (!cell) {
            cell = [[TableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ident];
        }
        
        cell.backgroundColor = [UIColor whiteColor];
        
        [cell array:[self arrayDataSource] Index:indexPath.row];
        
        cell.selectionStyle = UITableViewCellSeparatorStyleNone;
        return cell;
        
    }
    
    #pragma mark - 数据源
    -(NSArray *)arrayDataSource{
        return @[@"啊啊啊啊啊",
                 @"不不不不不不不不不不",
                 @"错错错错错错错错",
                 @"哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒",
                 @"嗯嗯",
                 @"发发发发发发发发发发发发发发发",
                 @"嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎",
                 @"哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
                 @"意一一一一一一一一一一一一一一",
                 @"叽叽叽叽",
                 @"快快快快快快快",
                 @"拉卡的很健康拉丝机点开链接拉时间的考虑阿萨德了科技咔咔寿209e8wqeqpwoielaksdjad",
                 @"e8wqeqpwoielaksdjadasdad asd asdqweq xsad奥术大师多😁阿斯兰的空间",
                 @"哭😭哭😭哭😭哭😭哭😭哭😭哭😭哭😭哭😭哭😭",
                 @"what`s problem with you",
                 @"you are fucking kidding me!!"];
    }
    
    @end
    
    • 上面的全部代码,复制粘贴就能直接看效果了,记得要先pod一下Masonry,不然你懂得!

    后面我还会更新一篇带有类似朋友圈的评论框的布局,其实也纯碎是为了记录,方便以后使用,不当做教程,也没资格当做教程。如果能对一些朋友有帮助,那就最好了,帮助不到的也没关系,自动忽略就行,谢谢大家!

    3、全剧终

    相关文章

      网友评论

          本文标题:iOS UITableView结合Masonry布局,实现cel

          本文链接:https://www.haomeiwen.com/subject/nlyzrctx.html