遥控手柄模拟

之前项目里遇到蓝牙项目，手机端控制机器人走动，于是乎设计了以下操作界面

蓝牙控制

<h5>分析图中的控件以及作用</h5>

1. 图中总共4张图片：底图、小圆点和左右2张圆盘图；
2. 拖动小圆点但只能在各自圆盘上，不能超出；
3. 左边小圆点设计8个方向，右边上下两个方向，不动代表停止。
   
   </br>
   <h5>原理</h5>
   想让设备动起来，必须给设备发指令（怎么发的不是这里讲的重点），而且方向不同发送的指令也不一样，这里跟硬件协商好往右发right，往左发left。左边圆盘8个方向，需要把圆盘分成8等分，右边简单一点，只有上下方向。
   
   </br>
   <h5>实现</h5>
   利用UIPanGestureRecognizer手势拖动小圆点。左边分8个方向，一个方向就是45度。如何获取一个点的角度？数学中是tan(y／x)，分洗个象限，这里也是利用此原理来做的。

- (NSString *)directionForX:(CGFloat)x Y:(CGFloat)y{
    CGFloat a = atan(y/x)*180.0/M_PI;
    /**
     *  第一象限
     */
    if (0 <= x && y <= 0) {
        if (a > -22.5) {
            return  @"right";
        }
        if (-67.5 <= a && a <= -22.5) {
            return  @"forwardright";
        }
        if (a < -67.5) {
            return  @"forward";
        }
    }
    /**
     *  第二象限
     */
    if (0 >= x && y <= 0) {
        if (a < 22.5) {
            return @"left";
        }
        if (22.5 <= a && a <= 67.5) {
            return @"forwardleft";
        }
        if (67.5 < a ) {
            return @"forward";
        }
    }
    /**
     *  第三象限
     */
    if (0 > x && y > 0) {
        if (a > -22.5) {
            return @"left";
        }
        if (- 22.5 >= a && a >= -67.5) {
            return @"backwardleft";
        }
        if (a < 67.5) {
            return @"backward";
        }

    }
    /**
     *  第四象限
     */
    if (0 <= x && y > 0) {
        if (a < 22.5) {
            return @"right";
        }
        if (22.5 <= a && a <= 67.5) {
            return @"backwardright";
        }
        if (a > 67.5) {
            return @"backward";
        }
    }
    return @"";
}

这样其他的就很简单了，把所有代码都贴出来了

</br>

- (void)viewDidLoad {
    [super viewDidLoad];
    radius = 75;
    left = _leftHandle.center;
    right = _rightHandle.center;
    rightRect = _rightBgImage.frame;
    UIPanGestureRecognizer *leftPan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(leftPanFrom:)];
    UIPanGestureRecognizer *rightPan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(rightPanFrom:)];
    [_rightHandle addGestureRecognizer:rightPan];
    [_leftHandle addGestureRecognizer:leftPan];
}

-(void)leftPanFrom:(UIPanGestureRecognizer*)recognizer{
    _leftHandle.image = [UIImage imageNamed:@"btn_pressed"];
    CGPoint translation = [recognizer translationInView:self.view];
    CGPoint center = recognizer.view.center;
    center.y += translation.y;
    center.x += translation.x;
    CGFloat x = center.x - left.x;
    CGFloat y = center.y - left.y;
    if (x*x + y*y >= radius*radius)
    {
        center.y -= translation.y;
        center.x -= translation.x;
    }
    NSLog(@"%@",[self directionForX:x Y:y]);
    recognizer.view.center = center;
    [recognizer setTranslation:CGPointZero inView:self.view];
    if (recognizer.state == UIGestureRecognizerStateEnded){

        [UIView animateWithDuration:0.08 animations:^{
            recognizer.view.center = left;
            _leftHandle.image = [UIImage imageNamed:@"btn_normal"];
        }];
    }
}

-(void)rightPanFrom:(UIPanGestureRecognizer*)recognizer{
    _rightHandle.image = [UIImage imageNamed:@"btn_pressed"];
    CGPoint translation = [recognizer translationInView:self.view];
    CGPoint center = recognizer.view.center;
    center.y += translation.y;
    if (center.y + 20 >= rightRect.size.height + rightRect.origin.y)
    {
        center.y = rightRect.size.height + rightRect.origin.y - 20;
    }
    if (center.y <= rightRect.origin.y + 20)
    {
        center.y = rightRect.origin.y + 20;
    }
    recognizer.view.center = center;
    CGFloat y = center.y - right.y;
    if (y < 0) {
        //要做的事
    }
    if (y > 0) {
        //要做的事
    }
    [recognizer setTranslation:CGPointZero inView:self.view];
    if (recognizer.state == UIGestureRecognizerStateEnded){
        //要做的事
        [UIView animateWithDuration:0.08 animations:^{
            recognizer.view.center = right;
            _rightHandle.image = [UIImage imageNamed:@"btn_normal"];
        }];
    }
}

</br>
<h4>最后注意事项</h4>

1. 界面适配不能用auto layout，因为用了之后界面的坐标就固定死了，所以我用了autoresizing，简单的界面效果一样的,当然直接用代码写UI也是一样的。

把use Auto Layout 去掉 这里进行适配

2.因为控制界面是用横屏做的，因为在横屏之后状态栏会自动隐藏起来，那怎么让它出现呢 ?

1.[application setStatusBarHidden:NO withAnimation:UIStatusBarAnimationNone]; 2.在info.plist加一个View controller-based status bar appearance 为NO.