swiftUI 设置Circle的stroke动画 swiftui autolayout

补充：iPhone6s plus 尺寸：5.5inch   分辨率：1920x1080

        iPhone6s  尺寸：4.7inch  分辨率：1334x750

Autolayout是一种“自动布局”技术，专门用来布局UI界面，能很好的解决屏幕适配的问题。Autolayout的两个核心概念，参照和约束。

在storyboard中处理约束的几个常用面板：

  

  

ViewControllerScene右边如果出现则说明约束没有问题了，只需要update frames就好了，如果是则说明约束有问题，可能是缺乏必要的约束，也可能是有两个约束冲突了。

除了可以在storyboard中添加约束，也可以在代码中给控件添加约束，但是。。。感觉好麻烦啊

主要就是通过NSLayoutConstraint类创建具体的约束对象，并将约束对象添加到相应的view上。

添加约束对象方法：

- (void)addConstraint:(NSLayoutConstraint *)constraint //添加单个约束

- (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraint //添加多个约束
- (void)addConstraint:(NSLayoutConstraint *)constraint //添加单个约束

- (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraint //添加多个约束

代码实现Autolayout的注意这几点，要先禁止autoresizing功能，设置view的下面属性为NO，view.translatesAutoresizingMaskIntoConstraints = NO;

添加约束之前，一定要保证相关控件都已经在各自的父控件上，不用再给view设置frame。

一个NSLayoutConstraint对象就代表一个约束，创建约束的方法：

NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c];
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c];

view1 ：要约束的控件

attr1 ：约束的类型（做怎样的约束）

relation ：与参照控件之间的关系

view2 ：参照的控件

attr2 ：约束的类型（做怎样的约束）

multiplier ：乘数

c ：常量

添加约束的规则

1、对于两个同层级view之间的约束关系，添加到它们的父view上。

2、对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上。

3、对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上。

---------------------------------------------

另外苹果官方为了简化Autolayout的编码还推出了另一种语言，vfl（visual format language可视化格式语言）

H:[cancelButton(50)]-10-[acceptButton(50)]  表示   canelButton宽50，acceptButton宽50，它们之间间距10

V:[redView][yellowView(==redView)]  表示  竖直方向上，先有一个redView，其下方紧接一个高度等于redView高度的yellowView

使用VFL来创建约束数组

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

format ：VFL语句

opts ：约束类型

metrics ：VFL语句中用到的具体数值

views ：VFL语句中用到的控件

创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义 NSDictionaryOfVariableBindings(...)

// 间距
NSNumber *margin = @20;
    
// 这条vfl就是水平方向上，blueView左边距父控件最左边距20，redView距父控件最右边距20，blueView和redView中间距离20
NSString *vfl = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|";
NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];
[self.view addConstraints:constraints];
// 间距
NSNumber *margin = @20;
    
// 这条vfl就是水平方向上，blueView左边距父控件最左边距20，redView距父控件最右边距20，blueView和redView中间距离20
NSString *vfl = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|";
NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];
[self.view addConstraints:constraints];