之前項(xiàng)目里遇到藍(lán)牙項(xiàng)目脆淹，手機(jī)端控制機(jī)器人走動，于是乎設(shè)計(jì)了以下操作界面
藍(lán)牙控制
<h5>分析圖中的控件以及作用</h5>
- 圖中總共4張圖片：底圖讹弯、小圓點(diǎn)和左右2張圓盤圖月幌；
- 拖動小圓點(diǎn)但只能在各自圓盤上，不能超出西轩；
- 左邊小圓點(diǎn)設(shè)計(jì)8個方向员舵，右邊上下兩個方向，不動代表停止藕畔。
</br>
<h5>原理</h5>
想讓設(shè)備動起來马僻，必須給設(shè)備發(fā)指令（怎么發(fā)的不是這里講的重點(diǎn)），而且方向不同發(fā)送的指令也不一樣注服，這里跟硬件協(xié)商好往右發(fā)right韭邓，往左發(fā)left措近。左邊圓盤8個方向，需要把圓盤分成8等分女淑，右邊簡單一點(diǎn)瞭郑，只有上下方向。
</br>
<h5>實(shí)現(xiàn)</h5>
利用UIPanGestureRecognizer手勢拖動小圓點(diǎn)鸭你。左邊分8個方向屈张，一個方向就是45度。如何獲取一個點(diǎn)的角度袱巨？數(shù)學(xué)中是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>最后注意事項(xiàng)</h4>
- 界面適配不能用auto layout，因?yàn)橛昧酥蠼缑娴淖鴺?biāo)就固定死了俺夕，所以我用了autoresizing裳凸，簡單的界面效果一樣的,當(dāng)然直接用代碼寫UI也是一樣的。
把use Auto Layout 去掉
這里進(jìn)行適配
2.因?yàn)榭刂平缑媸怯脵M屏做的劝贸，因?yàn)樵跈M屏之后狀態(tài)欄會自動隱藏起來姨谷，那怎么讓它出現(xiàn)呢 ?
1.[application setStatusBarHidden:NO withAnimation:UIStatusBarAnimationNone]; 2.在info.plist加一個View controller-based status bar appearance 為NO.
