iOS UI基础学习 Note_daySeven

断更了那么多天,期间去兼职搬砖了几天,与友人聚了一段时间还有就是看了一部电视剧 晃眼22天,期间学了屏幕适配(Autoresizing和Autolayout)的做法还有UITableView 今天开始就继续记录和分享学习过程吧,刚好今天没课可以整理一下知识点

屏幕适配

首先从苹果的屏幕适配的历史开始讲起吧,从苹果的1-4s 所有iPhone都是3.5 inch 所以以前设置控件的位置直接在frame中写固定值,但当iPhone 5出现时,屏幕的尺寸发生了改变,这个时候developer在开发的过程中就必须考虑app 在iPhone 5以及以前iPhone上的显示效果,因为写固定值是不可取的了,因此有了Autoresizing和Autolayout 但在Xcode 5(还是6?)以前 苹果对Autolayout的使用非常不友好,因为Autoresizing成了香饽饽,但在iPhone6出现的时候,屏幕尺寸再次发生了改变,而且Autolayout使用也开始顺手时,人们就开始摒弃了Autoresizing,而且Autoresizing有一个致命的缺点,它只能做控件与父控件的约束,无法做同级控件之间的约束

因为将来也很少用了,这里就直接跳过Autoresizing讲Autolayout

Autolayout

通过一个demo来讲解Autolayout应该怎么使用


以上是两个UIView在模拟器中的横竖屏中的表现,两个控件之间的距离,控件与View下,左,右之间的距离无论在横竖屏中均保持一致,控件的宽度随着横屏也随之增加
在看在其他版本iPhone中的表现,Xcode提供一个视图,可以看到该控件在其他版本iPhone的预览图而不用打开的模拟器,在Xcode中使用option+command+return键可以调出 然后如下图的选择

就会出现预览图 如图

可以看到控件在各个版本的iPhone中的表现,还可以查看横竖屏情况,毕竟模拟器打开不算快,将所有版本的模拟器都试个遍,效率会非常的低.
那么如何用Autolayout呢,其实非常简单,只需要给控件添加位置和尺寸约束即可,选中一个控件,然后选择storyboard右下角的Add New Constraints,如图所示

其中Constrain to margins选项需要取消,因为勾选的话,添加的约束的参照物会是storyboard里面的辅助线,该辅助线离屏幕边框有20像素的距离.添加自己想要的约束后看看是否有重复约束,如果出现重复约会提示错误,如图

点击红点

删除重复的约束条件即可,如果出现黄色的标志,那么可能是因为控件当前的位置或尺寸与约束不符,这个时候更新一下frame就好了,比如下图所示

这个时候选Editor->update frames 即可 效果如下图

当然Autolayout的可能不可能这么少,这里继续介绍Autoresizing办不到的事情,就是设置同级控件之间的约束
选择两个控件,点击右下角的Add New Alignment Constraints,如下图

功能非常强大,可以设置左右对齐,甚至顶部对齐底部对齐,X,Y中心点对齐,还可以设置两个控件之间的垂直距离和水平距离,所有选项都有,文字描述和icon能够说明每个选项的用途.
当然肯定不可能只有这样一种途径,你还可以选中一个控件,按住control键,拖一条线连接另一个控件,会出现一个弹窗,如下图

同样有着Add New Alignment Constraints的一些功能

所以有了Autolayout,就可以解决控件在不同尺寸屏幕的iPhone上的显示问题了,以上只是用storyboard来实现Autolayout功能.同样Autolayout也可以用代码来实现,但官方给的方法太过于繁琐,写起来也比较恶心,这里就不再讲述,但可以使用第三方框架Marsonry,可以使用非常优雅的代码来实现
接下来通过第一个demo用代码来实现

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
//创建红色的UIView
    UIView *blueView = [[UIView alloc]init];
    blueView.backgroundColor = [UIColor blueColor];
/*
创建蓝色的UIView,用代码实现Autolayout需要关闭Autoresizing功能,但使用Marsonry框架时,框架内已经将Autoresizing屏蔽
*/
    [self.view addSubview:redView];
    [self.view addSubview:blueView];

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//创建红色UIView的约束
        make.bottom.mas_equalTo(self.view.mas_bottom).offset(-30);
//底部等于父控件底部减去30,意味着有30的距离
        make.left.mas_equalTo(self.view).offset(30);
        make.height.mas_equalTo(@50);
//高度等于50 因为mas_equalTo是一个id类型的对象 因此需要将数值转换成对象
        make.right.mas_equalTo(blueView.mas_left).offset(-30);
//右边等于蓝色控件左边减去30
    }];

    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(redView.mas_height);
        make.width.mas_equalTo(redView.mas_width);
        make.right.mas_equalTo(self.view).offset(-30);
        make.top.mas_equalTo(redView.mas_top);
    }];
}


@end

当然,约束条件也是一个对象,如果需要在代码中更新约束条件,可以把约束条件通过按住control键拖一根线到ViewController.m中创建一个对象,然后在代码中进行更改,当然还可以实现动画.如图所示


在特定的条件下修改约束的条件,然后通过强制刷新来起到动画的效果,例如

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [UIView animateWithDuration:2.f animations:^{
        [self.view layoutIfNeeded];
    }];
}

点击屏幕就会强制刷新View,在2秒钟的时间里面

今天就写到这里吧,洗洗睡,明天满课的情况下还要更新UITableView心累