iOS的绝对布局(二)

2018-03-12  本文已影响21人  _feiyu_2100

概括
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,不注册的话程序会崩溃

TableViewController.h
报错截图:
报错截图

2.tableView:heightForRowAtIndexPath:方法中返回高度,cell的ID一定要和注册cell的ID一致


[图片上传中...(TableViewController.h)]

3.如果确定上面没有问题,但是Cell高度还不是自适应,那就是自定义Cell文件的问题,确保控件添加在self.contentView上,以及控件底部的控制

TableViewCell.m

以上的方法使用起来很方便,但是对于页面更复杂、样式丰富的页面还是有些会卡顿现象,这就需要我们探索更多、更好的方法,并根据不同的页面选择出最适合的方法。

上一篇下一篇

猜你喜欢

热点阅读