斯坦福大学iOS公开课学习笔记（9）-AutoLayout

这一节课前边一小部分用来完成上一次的Demo，后边的部分主要用来讲AutoLayout，然后对之前的Atttibutor项目的代码进行了AutoLayout的处理。

多图预警！！！这节课中关于AutoLayout的部分截图会有点多。。

完成 Dropit

上一节课中的Dropit并没有完全完成，因为方块可以自由旋转，所以导致方块搭起来不稳，这个问题也会导致最后的爆炸方法没办法出发。所以这节课会对这部分功能进行一些优化。

除此之外，还会对方块增加一个吸附行为，以此来实现可以拖拽方块放置到我想要放置的位置上。

添加禁止旋转的属性

首先我们先对旋转进行一个控制，在之前的DropitBehavior中继续添加行为，添加一个UIDynamicItemBehavior并且同样的使用懒加载实现它。

1	@property (nonatomic, strong) UIDynamicItemBehavior *animationOptions;

- (UIDynamicItemBehavior *)animationOptions
{
    if(!_animationOptions)
    {
        _animationOptions = [[UIDynamicItemBehavior alloc] init];
        _animationOptions.allowsRotation = NO;  //设置禁止旋转
    }
    
    return _animationOptions;
}

这样就可以让方块不会到处旋转，而且还可以顺利的出发爆炸的方法。

添加吸附手势

添加吸附手势可以让我在方块掉落的过程中“抓住”它，并且可以控制他掉落到我想要落下的位置。

首先我们需要添加一个吸附行为UIAttachmentBehavior。然后我们需要知道哪一个方块是我正要进行操作的方块，所以我们需要在drop方法中获取正在掉落的方块。

1 2	@property (nonatomic, strong) UIAttachmentBehavior attachment; @property (nonatomic, strong) UIView droppingView;

- (void)drop
{
    CGRect frame;
    frame.origin = CGPointZero;
    frame.size = DROP_SIZE;
    
    int x = (arc4random()%(int)self.gameView.bounds.size.width) / DROP_SIZE.width;
    frame.origin.x = x * DROP_SIZE.width;
    
    UIView *dropView = [[UIView alloc] initWithFrame:frame];
    dropView.backgroundColor = [self randColor];
    [self.gameView addSubview:dropView];
    
    self.droppingView = dropView;//获取正在掉落的view
    
    [self.dropitBehavior addItem:dropView];
    
}

这样当我们进行操作的时候就会获取正在掉落的方块，如果同时有多个方块的时候我们会获取到最后一个方块。

接下来我需要拖动他，所以我需要实现一个拖动手势。

- (IBAction)pan:(UIPanGestureRecognizer *)sender
{
    //获取手指的位置
    CGPoint gesturePoint = [sender locationInView:self.gameView];
    
    if(sender.state == UIGestureRecognizerStateBegan)
    {
        [self attachDroppingViewToPoint:gesturePoint];
    }
    else if(sender.state == UIGestureRecognizerStateChanged)
    {
        self.attachment.anchorPoint = gesturePoint;
    }
    else if(sender.state == UIGestureRecognizerStateEnded)
    {
        [self.animator removeBehavior:self.attachment];        
    }
}
- (void)attachDroppingViewToPoint:(CGPoint)anchorPoint
{
    if(self.droppingView)
    {
        self.attachment  = [[UIAttachmentBehavior alloc] initWithItem:self.droppingView attachedToAnchor:anchorPoint];        
        self.droppingView = nil;
        [self.animator addBehavior:self.attachment];
    }
}

这样我们就实现了吸附的功能，并且可以使用拖拽手势来改变下落的位子。

接下来我们需要在我们的手指点击的位置和方块的位置之间添加一条线，让我们控制方块的动作更加明显。那么我们怎么来绘制这条线呢，我们需要添加一条UIBezierPath来绘制这个部分。所以我们新建一个view并且实现画线的功能。

@interface BezierView : UIView
@property (nonatomic ,strong) UIBezierPath  *path;
@end

#import "BezierView.h"
@implementation BezierView
- (void)setPath:(UIBezierPath *)path
{
    _path = path;
    [self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect
{
    [self.path stroke];
}
@end

然后让我们的gameView使用这个新建的view。

1	@property (weak, nonatomic) IBOutlet BezierView *gameView;

接下来我们在每次手指改变在屏幕上的位置的时候重绘这条连接线。

UIView *droppingView = self.droppingView;
__weak ViewController *weakSelf = self; //防止循环引用
self.attachment.action = ^{
    //创建连接线
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:weakSelf.attachment.anchorPoint];
    [path addLineToPoint:droppingView.center];
    weakSelf.gameView.path = path;
    
};

最后为了让线在我们松手的时候消失，我们在拖动的状态改为UIGestureRecognizerStateEnded的时候删除这条线。