iOS-学习笔记-UI-第十八天

回顾

0. 控制起对视图的布局方式

    覆盖控制起的viewWillLayoutSubviews或viewDidLayoutSubviews方法

1. UIView的自身布局方式

    覆盖UIView的layoutSubviews方法即可

2. Auto Resizing + Code

    注意:关闭Auto Layout

2. Auto Layout

    理念：为视图添加约束，由系统根据约束计算出frame    

    实现方式：

        方式一：在故事版中配置

        方式二：使用代码

    约束的原则：约束准确＋不能矛盾

今天：

1. 使用代码的方式添加约束

    1.1 约束的本质

        NSLayoutConstraint类型的对象

    1.2 方法一：万能公式法

        NSLayoutConstraint

            constraintWithItem:

            attribute:

            relatedBy:

            toItem:

            attribute:

            multiplier:

            constant:

        万能公式：

        view1.attr1<relation>view2.attr2*multiplier+constant

        例如：

            文字描述：按钮的左边缘离视图的左边缘20个点

            万能公式：

                button1.left = view.left*1+20;

            文字描述：按钮1的宽度是按钮2宽度的两倍

            万能公式：

                button1.width = button2.width*2+0;

            文字描述：按钮1的右边缘离视图的右边缘距离20个点

            万能公式：

                button1.right=view.right*1-20

            注意：约束要添加到视图所属的父视图之上

    1.3 VFL法（Visual Format Language）

        VFL是一种特殊语法格式的字符串，使用一些特定的符号来完成对约束的描述

        ｜        代表父视图的边缘

        H:|       代表父视图的左边缘

        V:|       代表父视图的上边缘

        []         代表一个子视图（或控件）

        ()         代表一个条件（== >= <=）==可以省略

        －        代表标准间距，8个点

        －xx-  代表间距由xx个点

    

    如：

        文字描述：由三个按钮，距离左边20个点，距离右边20个点，间距是10个点，且三个按钮等宽

        VFL：|-20-[button1]-10-[button2(button1)]-10-[button3(button1)]-20-|

        文字描述：button1距离视图的上边缘20个点

        VFL：V:|-20-[buttin1] 

        文字描述：button1宽度是100

        VFL：[button1(100)]

        文字描述：button1的高度是40

        VFL：V:[button1(40)]

        API: constraintsWithVisualFormat:

                                        options:

                                        metrics:

                                        views:

        第一个参数：指定VFL字符串

        第二个参数：对齐方式，如果没有对齐要求，可以传入0

        第三个参数：指定在VFL字符串中，出现的有关长度距离的名称的对照表

            如：{@"top":20,@"left":20}

        第四个参数：指定在VFL字符串中，出现的视图名与实际视图对象的对照表

            如：{@"b1":b1,@"b2":b2}

    NSDictionaryOfVariableBindings(b1,b2,b3...)函数生成由规律的，对照表，其中，key为对象引用的自负串形式，value为对象引用，使用于对象名与VFL字符串中的对象名一致的情况

2. 动画

    2.1 是什么？

        一般是值“帧动画”，帧：就是一张静态的图片，一般情况下，一秒24帧时，人眼就分辨不出来这是静态图像来，就有来连续的感觉，也就是动画。

        帧率：一秒钟播放的帧的数量（FPS frame per second）

    2.2 IOS中的动画

        UIImage

        NSTimer

        UIView类本身提供了动画的功能

        Core Animation 在底层实现动画

        UIKit Dynamic    

3. UIImage 动画

     最基本的动画，完成的原理：使用image 对象快速切换图片形成动画的效果，做小的动画可以使用

4. NSTimer

    4.1 计时器：定时向指定的对象发送消息

    

    4.2 如何使用计时器？

        NSTimer timer...

        NSTimer schedule....

        使用schedule开头的工厂方法创建计时器，并且创建结束后会被自动添加到事件循环中

        关闭定时器，可以通过timer的invalidate方法。

    4.3 匀速动画

        公式：当前值 ＝ 开始值＋当前的帧数＊（结束值－开始值）／（帧率＊动画时长）

        当前值可以是center transform frame alpha

        需求：点击启动按钮后，屏幕下方的飞机竖直向上移动，知道距离顶端50个点的位置，停止

    

    4.3 变速动画

        由快到慢，由慢到快，由慢到快再到慢

        公式 ＝ 上一次的值＋（目标值－上一次的值）＊渐进因子

        渐进因子可以根据实际情况进行调节，0.05

5. UIView动画：真正的动画，又专门的API

    5.1 是什么？

        是UIKit提供了专门制作动画的API，其实本质上是对Core Aninmation的封装，可以轻松的实现动画，不用像刚才那样经过计算才能得到动画。

    5.2 制作动画的步骤

        step1: 设置需要动画的视图的初始值属性

        step2: 给UIView类发消息，告诉UIView类需要什么样的动画（动画时长，动画的快慢，匀速动画，变速东环）

        step3: 将动画结束时的状态（属性值）写入到一个block中

    5.3 添加动画时的选项效果

        UIViewAnimationOptionCurveEaseInOut 默认，先慢再快再慢

        UIViewAnimationOptionCurveEaseIn 越来越快

        UIViewAnimationOptionCurveEaseOut 越来越慢

        UIViewAnimationOptionCurveLinear 匀速

        UIViewAnimationOptionRepeat 重复动画

        UIViewAnimationOptionAutoreverse 反向动画

作业:

1.飞机放到屏幕上,点哪里,飞哪里

2.做一个购物车的动画

在屏幕的饿上方有一个imageView图片,是一个商品,点击此商品时,商品会从上面掉下来,落入下面的购物车中,注意:商品掉下来时,屏幕上方的商品图片不会消失