版本记录
| 版本号 | 时间 |
|---|---|
| V1.0 | 2017.06.25 |
前言
在app中到目前为止，我真没找过没有UITableView控件的app，可以说UITableView是app不可或缺的控件，在使用该控件的时候，不仅要知道数据源和代理方法及其他们的调用顺序，还需要知道的是如何自适应行高，只有自适应行高才会优化视觉。感兴趣的可以看看我写的其他小技巧
1. 实用小技巧（一）：UIScrollView中上下左右滚动方向的判断
2. 实用小技巧（二）：屏幕横竖屏的判断和相关逻辑
3.实用小技巧（三）：点击手势屏蔽子视图的响应
4.实用小技巧（四）：动态的增删标签视图
5.实用小技巧（五）：通过相册或者相机更改图标
6.实用小技巧（六）：打印ios里所有字体
一、只包含文字元素的cell
设计过程
先看一下文档组织结构。
文档组织结构
下面直接看代码。
1.JJTableViewVC.h
#import <UIKit/UIKit.h>
@interface JJTableViewVC : UIViewController
@end
2. JJTableViewVC.m
#import "JJTableViewVC.h"
#import "JJTableViewCell.h"
@interface JJTableViewVC () <UITableViewDelegate, UITableViewDataSource>
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) NSArray <NSString *> *dataListArr;
@end
@implementation JJTableViewVC
static NSString * const kJJTableViewCell = @"kJJTableViewCell";
#pragma mark - Override Base Function
- (void)viewDidLoad
{
[super viewDidLoad];
[self loadData];
[self setupUI];
}
#pragma mark - Object Private Function
- (void)setupUI
{
UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.frame];
tableView.delegate = self;
tableView.dataSource = self;
[tableView registerClass:[JJTableViewCell class] forCellReuseIdentifier:kJJTableViewCell];
tableView.estimatedRowHeight = 100.0;
tableView.rowHeight = UITableViewAutomaticDimension;
tableView.backgroundColor = [UIColor whiteColor];
tableView.tableFooterView = [[UIView alloc] init];
[self.view addSubview:tableView];
self.tableView = tableView;
}
- (void)loadData
{
self.dataListArr = @[
@"我是第一个数据，我是第一个数据",
@"我是第二个数据，我是第二个数据，我是第二个数据",
@"我是第三个数据，我是第三个数据，我是第三个数据，我是第三个数据，我是第三个数据",
@"我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据"
];
}
#pragma mark - UITableViewDelegate, UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 4;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
JJTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kJJTableViewCell];
cell.titleStr = self.dataListArr[indexPath.row];
return cell;
}
@end
3. JJTableViewCell.m
#import "JJTableViewCell.h"
#import "Masonry.h"
@interface JJTableViewCell ()
@property (nonatomic, strong) UILabel *titleLabel;
@end
@implementation JJTableViewCell
#pragma mark - Override Base Function
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
[self setupUI];
}
return self;
}
#pragma mark - Object Private Function
- (void)setupUI
{
//标题
UILabel *titleLabel = [[UILabel alloc] init];
titleLabel.textColor = [UIColor blueColor];
titleLabel.font = [UIFont systemFontOfSize:17.0];
titleLabel.numberOfLines = 0;
[self.contentView addSubview:titleLabel];
self.titleLabel = titleLabel;
}
- (void)layoutCellLayout
{
//标题
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.contentView).offset(15.0);
make.top.equalTo(self.contentView).offset(15.0);
make.bottom.equalTo(self.contentView).offset(-15.0);
make.right.equalTo(self.contentView).offset(-15.0);
}];
}
#pragma mark - Getter && Setter
- (void)setTitleStr:(NSString *)titleStr
{
_titleStr = titleStr;
self.titleLabel.text = titleStr;
[self layoutCellLayout];
}
@end
效果实现
下面看一下效果图，如下所示。
效果图
二、包含文字和图片的cell
设计过程
先看一下代码。
1. JJTableViewVC.m
#import "JJTableViewVC.h"
#import "JJTableViewCell.h"
@interface JJTableViewVC () <UITableViewDelegate, UITableViewDataSource>
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) NSArray <NSString *> *dataListArr;
@property (nonatomic, strong) NSArray <NSString *> *imageListArr;
@end
@implementation JJTableViewVC
static NSString * const kJJTableViewCell = @"kJJTableViewCell";
#pragma mark - Override Base Function
- (void)viewDidLoad
{
[super viewDidLoad];
[self loadData];
[self setupUI];
}
#pragma mark - Object Private Function
- (void)setupUI
{
UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.frame];
tableView.delegate = self;
tableView.dataSource = self;
[tableView registerClass:[JJTableViewCell class] forCellReuseIdentifier:kJJTableViewCell];
tableView.estimatedRowHeight = 100.0;
tableView.rowHeight = UITableViewAutomaticDimension;
tableView.backgroundColor = [UIColor whiteColor];
tableView.tableFooterView = [[UIView alloc] init];
[self.view addSubview:tableView];
self.tableView = tableView;
}
- (void)loadData
{
self.dataListArr = @[
@"我是第一个数据，我是第一个数据",
@"我是第二个数据",
@"我是第三个数据，我是第三个数据，我是第三个数据，我是第三个数据，我是第三个数据",
@"我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据,我是第四个数据，我是第四个数据，我是第四个数据，我是第四个数据"
];
self.imageListArr = @[@"1", @"2", @"3", @"4"];
}
#pragma mark - UITableViewDelegate, UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 4;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
JJTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kJJTableViewCell];
cell.titleStr = self.dataListArr[indexPath.row];
cell.imageNameStr = self.imageListArr[indexPath.row];
return cell;
}
@end
2. JJTableViewCell.m
#import "JJTableViewCell.h"
#import "Masonry.h"
@interface JJTableViewCell ()
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UIImageView *contentImageView;
@end
@implementation JJTableViewCell
#pragma mark - Override Base Function
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
[self setupUI];
}
return self;
}
#pragma mark - Object Private Function
- (void)setupUI
{
//图片
UIImageView *contentImageView = [[UIImageView alloc] init];
contentImageView.image = [UIImage imageNamed:@"1"];
[self.contentView addSubview:contentImageView];
self.contentImageView = contentImageView;
//标题
UILabel *titleLabel = [[UILabel alloc] init];
titleLabel.textColor = [UIColor blueColor];
titleLabel.font = [UIFont systemFontOfSize:17.0];
titleLabel.numberOfLines = 0;
[self.contentView addSubview:titleLabel];
self.titleLabel = titleLabel;
}
- (void)layoutUI
{
//图片计算后的告诉
CGFloat pictureWidth = self.contentImageView.image.size.width;
CGFloat pictureHeight = self.contentImageView.image.size.height;
CGFloat fixWidth = 100.0;
CGFloat imageHeight = pictureHeight / pictureWidth * fixWidth;
//title的高度计算
CGFloat titleWidth = self.bounds.size.width - 100 - 45.0;
CGFloat titleHeight = [self.titleLabel.text sizeWithFont:self.titleLabel.font constrainedToSize:CGSizeMake(titleWidth, MAXFLOAT)].height;
if (imageHeight > titleHeight) {
//图标
[self.contentImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.equalTo(self.contentView).offset(15.0);
make.width.equalTo(@100.0);
make.height.equalTo(@(imageHeight));
make.bottom.equalTo(self.contentView).offset(-15.0);
}];
//标题
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.contentImageView.mas_right).offset(15.0);
make.top.equalTo(self.contentImageView);
make.right.equalTo(self.contentView).offset(-15.0);
}];
}
else {
//图标
[self.contentImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.equalTo(self.contentView).offset(15.0);
make.width.equalTo(@100.0);
make.height.equalTo(@(imageHeight));
}];
//标题
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.contentImageView.mas_right).offset(15.0);
make.top.equalTo(self.contentImageView);
make.right.equalTo(self.contentView).offset(-15.0);
make.bottom.equalTo(self.contentView).offset(-15.0);
}];
}
}
#pragma mark - Getter && Setter
- (void)setTitleStr:(NSString *)titleStr
{
_titleStr = titleStr;
self.titleLabel.text = titleStr;
}
- (void)setImageNameStr:(NSString *)imageNameStr
{
_imageNameStr = imageNameStr;
self.contentImageView.image = [UIImage imageNamed:imageNameStr];
[self layoutUI];
}
@end
效果实现
下面看一下效果实现图，如下所示。
实现效果图
后记
未完，待续~~
伊万卡
