版本記錄
| 版本號 | 時(shí)間 |
|---|---|
| V1.0 | 2017.06.25 |
前言
在app中到目前為止，我真沒找過沒有UITableView控件的app，可以說UITableView是app不可或缺的控件，在使用該控件的時(shí)候酷宵，不僅要知道數(shù)據(jù)源和代理方法及其他們的調(diào)用順序，還需要知道的是如何自適應(yīng)行高躬窜，只有自適應(yīng)行高才會(huì)優(yōu)化視覺浇垦。感興趣的可以看看我寫的其他小技巧
1. 實(shí)用小技巧（一）：UIScrollView中上下左右滾動(dòng)方向的判斷
2. 實(shí)用小技巧（二）：屏幕橫豎屏的判斷和相關(guān)邏輯
3.實(shí)用小技巧（三）：點(diǎn)擊手勢屏蔽子視圖的響應(yīng)
4.實(shí)用小技巧（四）：動(dòng)態(tài)的增刪標(biāo)簽視圖
5.實(shí)用小技巧（五）：通過相冊或者相機(jī)更改圖標(biāo)
6.實(shí)用小技巧（六）：打印ios里所有字體
一、只包含文字元素的cell
設(shè)計(jì)過程
先看一下文檔組織結(jié)構(gòu)荣挨。
文檔組織結(jié)構(gòu)
下面直接看代碼男韧。
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 = @[
@"我是第一個(gè)數(shù)據(jù)，我是第一個(gè)數(shù)據(jù)",
@"我是第二個(gè)數(shù)據(jù)垦沉，我是第二個(gè)數(shù)據(jù)煌抒，我是第二個(gè)數(shù)據(jù)",
@"我是第三個(gè)數(shù)據(jù)，我是第三個(gè)數(shù)據(jù)厕倍，我是第三個(gè)數(shù)據(jù)寡壮，我是第三個(gè)數(shù)據(jù)，我是第三個(gè)數(shù)據(jù)",
@"我是第四個(gè)數(shù)據(jù)，我是第四個(gè)數(shù)據(jù)况既，我是第四個(gè)數(shù)據(jù)这溅，我是第四個(gè)數(shù)據(jù)，我是第四個(gè)數(shù)據(jù)棒仍，我是第四個(gè)數(shù)據(jù)悲靴，我是第四個(gè)數(shù)據(jù)，我是第四個(gè)數(shù)據(jù)莫其，我是第四個(gè)數(shù)據(jù)癞尚，我是第四個(gè)數(shù)據(jù)"
];
}
#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
{
//標(biāo)題
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
{
//標(biāo)題
[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
效果實(shí)現(xiàn)
下面看一下效果圖，如下所示乱陡。
效果圖
二浇揩、包含文字和圖片的cell
設(shè)計(jì)過程
先看一下代碼。
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 = @[
@"我是第一個(gè)數(shù)據(jù)憨颠，我是第一個(gè)數(shù)據(jù)",
@"我是第二個(gè)數(shù)據(jù)",
@"我是第三個(gè)數(shù)據(jù)胳徽，我是第三個(gè)數(shù)據(jù)，我是第三個(gè)數(shù)據(jù)爽彤，我是第三個(gè)數(shù)據(jù)养盗，我是第三個(gè)數(shù)據(jù)",
@"我是第四個(gè)數(shù)據(jù)，我是第四個(gè)數(shù)據(jù)适篙，我是第四個(gè)數(shù)據(jù)往核，我是第四個(gè)數(shù)據(jù)，我是第四個(gè)數(shù)據(jù)匙瘪，我是第四個(gè)數(shù)據(jù)铆铆，我是第四個(gè)數(shù)據(jù)蝶缀，我是第四個(gè)數(shù)據(jù)丹喻，我是第四個(gè)數(shù)據(jù)，我是第四個(gè)數(shù)據(jù),我是第四個(gè)數(shù)據(jù)翁都，我是第四個(gè)數(shù)據(jù)碍论，我是第四個(gè)數(shù)據(jù)，我是第四個(gè)數(shù)據(jù)"
];
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;
//標(biāo)題
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
{
//圖片計(jì)算后的告訴
CGFloat pictureWidth = self.contentImageView.image.size.width;
CGFloat pictureHeight = self.contentImageView.image.size.height;
CGFloat fixWidth = 100.0;
CGFloat imageHeight = pictureHeight / pictureWidth * fixWidth;
//title的高度計(jì)算
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) {
//圖標(biāo)
[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);
}];
//標(biāo)題
[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 {
//圖標(biāo)
[self.contentImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.equalTo(self.contentView).offset(15.0);
make.width.equalTo(@100.0);
make.height.equalTo(@(imageHeight));
}];
//標(biāo)題
[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
效果實(shí)現(xiàn)
下面看一下效果實(shí)現(xiàn)圖柄慰，如下所示鳍悠。
實(shí)現(xiàn)效果圖
后記
未完，待續(xù)~~
伊萬卡
