概括
iOS绝对布局也就是我们开发最初使用的UI布局了。
优点: 使用方式很简单,可以搭建任何布局,UI控件都是绝对的位置
缺点:对于复杂界面的流畅度不能保障
第一节 使用方式
1.创建一个宽44,高44 像素位于屏幕中心的UIButton
UIButton *btn = [[UIButton alloc] init];
btn.frame = CGRectMake(0, 0, 44, 44);
btn.backgroundColor = [UIColor cyanColor];
btn.center = self.view.center;
[self.view addSubview: btn];
//定义宏
第二节 使用实例
1.比例适配
对于绝对布局最头疼的就是适配问题,一下解决方案可以解决你大部分问题,但是iPhoneX、iPhone4、iPhone4s上有些地方需要你单独适配
型号 | 尺寸 | 比例 |
---|---|---|
iPhone4\4s | 320x480 | 0.666 |
iPhone5 | 320x568 | 0.563 |
iPhone6\7\8 | 375x667 | 0.562 |
iPhone6\7\8Plus | 414x736 | 0.5625 |
iPhoneX | 375x812 | 0.462 |
观察以及宽高比例你会发现,除了iPhoneX、iPhone4、iPhone4s比例不一样,其他机型比例是一样的,所以需要将他们单独在进行适配
#define KMainScreenWidth [UIScreen mainScreen].bounds.size.width
#define KMainScreenHeight [UIScreen mainScreen].bounds.size.height
#define kwidthScale (KMainScreenHeight==480?KMainScreenWidth/320.0: (KMainScreenHeight==812?KMainScreenWidth/414.0:KMainScreenWidth/375.0))
#define kHeightScale (KMainScreenHeight==480?KMainScreenHeight/480.0: (KMainScreenHeight==812?KMainScreenHeight/812.0:KMainScreenHeight/667.0))
全部代码
#import "ViewController.h"
#define KMainScreenWidth [UIScreen mainScreen].bounds.size.width
#define KMainScreenHeight [UIScreen mainScreen].bounds.size.height
#define kwidthScale (KMainScreenHeight==480?KMainScreenWidth/320.0: (KMainScreenHeight==812?KMainScreenWidth/414.0:KMainScreenWidth/375.0))
#define kHeightScale (KMainScreenHeight==480?KMainScreenHeight/480.0: (KMainScreenHeight==812?KMainScreenHeight/812.0:KMainScreenHeight/667.0))
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIButton *btn = [[UIButton alloc] init];
btn.frame = CGRectMake(60 * kwidthScale, 120 * kHeightScale, 200 * kwidthScale, 100 * kHeightScale);
btn.backgroundColor = [UIColor cyanColor];
[self.view addSubview: btn];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
2.UITableView的自定义高度
关于UItableView的复杂页面的自适应高度一直是一件较为头疼的事情,对于一些较为简单的页面,通过动态的计算cell高度,流畅度可以通过,但是对于较为复杂想让FPS达到60是较为复杂的,下面是自定义高度的一个第三方框架计算高度的使用:https://github.com/forkingdog/UITableView-FDTemplateLayoutCell
1.创建一个自定义Cell并创建自己需要的控件,创建configUI: imageName:数据赋值语句,代码如下
//TableViewCell.h
#import <UIKit/UIKit.h>
@interface TableViewCell : UITableViewCell
- (void)configUI:(NSString *)str imageName:(NSString *)imgName;
@end
//TableViewCell.m
#import "TableViewCell.h"
#import "Masonry.h"
#import <UIImageView+WebCache.h>
@interface TableViewCell()
@property (nonatomic, strong) UIImageView *imgV;
@property (nonatomic, strong) UILabel *titleLB;
@end
@implementation TableViewCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
UIImageView *imgV = [[UIImageView alloc] init];
imgV.image = [UIImage imageNamed:@"headImg"];
[self.contentView addSubview:imgV];
self.imgV = imgV;
UILabel *titleLb = [[UILabel alloc] init];
titleLb.numberOfLines = 0;
[self.contentView addSubview:titleLb];
self.titleLB = titleLb;
UIView *lineView = [[UIView alloc] init];
lineView.backgroundColor = [UIColor grayColor];
[self.contentView addSubview:lineView];
[imgV mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.equalTo(self.contentView).offset(10);
make.height.width.mas_equalTo(40);
}];
[titleLb mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(imgV.mas_top).offset(10);
make.left.equalTo(imgV.mas_right).offset(10);
make.right.equalTo(self.contentView.mas_right).offset(-10);
make.bottom.equalTo(self.contentView.mas_bottom).offset(-10);
}];
[lineView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.left.equalTo(self.contentView);
make.bottom.equalTo(self.contentView.mas_bottom).offset(-2);
make.height.mas_equalTo(1);
}];
}
return self;
}
- (void)configUI:(NSString *)str imageName:(NSString *)imgName{
[self.imgV sd_setImageWithURL:[NSURL URLWithString:imgName] placeholderImage:[UIImage imageNamed:@"headImg"] options:SDWebImageRefreshCached completed:nil];
self.titleLB.text = str;
}
- (void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
@end
2.在UIViewController.m内创建一个UITableView,并实现UITableViewDelegate, UITableViewDataSource代理
#import "TableViewController.h"
#import "TableViewCell.h"
#import <UITableView+FDTemplateLayoutCell.h>
@interface TableViewController ()
@property (nonatomic, strong) NSArray *strAry;
@property (nonatomic, strong) NSArray *imgAry;
@end
@implementation TableViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Uncomment the following line to preserve selection between presentations.
// self.clearsSelectionOnViewWillAppear = NO;
// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem;
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
self.tableView.fd_debugLogEnabled = YES;
[self.tableView registerClass:[TableViewCell class] forCellReuseIdentifier:@"cellIdentifier"];
self.strAry = @[
@"《白夜行》是日本作家东野圭吾创作的长篇小说,也是其代表作。该小说于1997年1月至1999年1月间连载于期刊,单行本1999年8月在日本发行。故事围绕着一对有着不同寻常情愫的小学生展开。1973年,大阪的一栋废弃建筑内发现了一具男尸,此后19年,嫌疑人之女雪穗与被害者之子桐原亮司走上截然不同的人生道路,一个跻身上流社会,一个却在底层游走,而他们身边的人,却接二连三地离奇死去,警察经过19年的艰苦追踪,终于使真相大白。",
];
self.imgAry = @[
@"http://img4.duitang.com/uploads/item/201411/12/20141112115936_zYyEc.jpeg",
];
}
#pragma mark - Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.strAry.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
TableViewCell *cell = (TableViewCell *)[tableView dequeueReusableCellWithIdentifier:@"cellIdentifier"];
[self configureCell:cell atIndexPath:indexPath];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return [tableView fd_heightForCellWithIdentifier:@"cellIdentifier" configuration:^(TableViewCell *cell) {
[self configureCell:cell atIndexPath:indexPath];
}];
}
- (void)configureCell:(TableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath {
//使用Masonry进行布局的话,这里要设置为NO
cell.fd_enforceFrameLayout = NO;
[cell configUI:self.strAry[indexPath.row] imageName:self.imgAry[indexPath.row]];
}
@end
点击下载demo
注意:
1.在ViewDidLoad内注册Cell,不注册的话程序会崩溃
报错截图:
2.tableView:heightForRowAtIndexPath:方法中返回高度,cell的ID一定要和注册cell的ID一致
3.如果确定上面没有问题,但是Cell高度还不是自适应,那就是自定义Cell文件的问题,确保控件添加在self.contentView上,以及控件底部的控制
以上的方法使用起来很方便,但是对于页面更复杂、样式丰富的页面还是有些会卡顿现象,这就需要我们探索更多、更好的方法,并根据不同的页面选择出最适合的方法。