iOS 悬浮按钮的实现
2016-03-23 本文已影响9340人
小兵快跑
项目中为了语音功能的更好体验，加了个悬浮按钮，网上找了好久，最终集成了一个悬浮按钮，效果还不错。
参考Demo
悬浮按钮.gif
自定义个UIButton
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
}
return self;
}
//触摸-清扫
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
MoveEnabled = NO;
[super touchesBegan:touches withEvent:event];
if (!MoveEnable) {
return;
}
UITouch *touch = [touches anyObject];
beginpoint = [touch locationInView:self];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
MoveEnabled = YES;//单击事件可用
if (!MoveEnable) {
return;
}
UITouch *touch = [touches anyObject];
CGPoint currentPosition = [touch locationInView:self];
//偏移量
float offsetX = currentPosition.x - beginpoint.x;
float offsetY = currentPosition.y - beginpoint.y;
//移动后的中心坐标
self.center = CGPointMake(self.center.x + offsetX, self.center.y + offsetY);
//x轴左右极限坐标
if (self.center.x > (self.superview.frame.size.width-self.frame.size.width/2)) {
CGFloat x = self.superview.frame.size.width-self.frame.size.width/2;
self.center = CGPointMake(x, self.center.y + offsetY);
}else if (self.center.x < self.frame.size.width/2){
CGFloat x = self.frame.size.width/2;
self.center = CGPointMake(x, self.center.y + offsetY);
}
//y轴上下极限坐标
if (self.center.y > (self.superview.frame.size.height-self.frame.size.height/2)) {
CGFloat x = self.center.x;
CGFloat y = self.superview.frame.size.height-self.frame.size.height/2;
self.center = CGPointMake(x, y);
}else if (self.center.y <= self.frame.size.height/2){
CGFloat x = self.center.x;
CGFloat y = self.frame.size.height/2;
self.center = CGPointMake(x, y);
}
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
if (!MoveEnable) {
return;
}
if (self.center.x >= self.superview.frame.size.width/2) {//向右侧移动
//偏移动画
[UIView beginAnimations:@"move" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationDelegate:self];
self.frame=CGRectMake(335.f,self.center.y-20, 40.f,40.f);
//提交UIView动画
[UIView commitAnimations];
}else{//向左侧移动
[UIView beginAnimations:@"move" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationDelegate:self];
self.frame=CGRectMake(0.f,self.center.y-20, 40.f,40.f);
//提交UIView动画
[UIView commitAnimations];
}
//不加此句话，UIButton将一直处于按下状态
[super touchesEnded: touches withEvent: event];
}
//外界因素取消touch事件，如进入电话
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
}
MyButton实现
#import "ViewController.h"
#import "MyButton.h"
@interface ViewController ()
{
UIView *tabBarView;
MyButton *myButton;
BOOL flag; //控制tabbar的显示与隐藏标志
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"bj_bg"]];
}
//做了修改 设置tab bar
- (void)addCustomElements
{
myButton = [MyButton buttonWithType:UIButtonTypeCustom];
myButton.MoveEnable = YES;
myButton.frame = CGRectMake(335, 300, 40, 40);
//TabBar上按键图标设置
[myButton setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"40.png"]] forState:UIControlStateNormal];
[myButton setTag:10];
flag = NO;//控制tabbar的显示与隐藏标志 NO为隐藏
[myButton addTarget:self action:@selector(tabbarbtn:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:myButton];
[self _initTabBar];
}
//初始化tabbar
-(void)_initTabBar
{
//tab bar view 始终居中显示
tabBarView = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width/2-100, self.view.frame.size.height/2-100, 200 , 200)] ;
//view 设置半透明 圆角样式
tabBarView.layer.cornerRadius = 10;//设置圆角的大小
tabBarView.layer.backgroundColor = [[UIColor blackColor] CGColor];
tabBarView.alpha = 0.8f;//设置透明
tabBarView.layer.masksToBounds = YES;
[self.view addSubview:tabBarView];
//循环设置tabbar上的button
// NSArray *imgNames = [[NSArray alloc]initWithObjects:@"download.png",@"block.png",@"bluetooth.png",@"file.png", nil];
NSArray *tabTitle = [[NSArray alloc]initWithObjects:@"download",@"block",@"bluetooth",@"file", nil];
for (int i=0; i<4; i++) {
CGRect rect;
rect.size.width = 60;
rect.size.height = 60;
switch (i) {
case 0:
rect.origin.x = 100-30;
rect.origin.y = 40-35;
break;
case 1:
rect.origin.x = 375/2-50;
rect.origin.y = 100-30;
break;
case 2:
rect.origin.x = 100-30;
rect.origin.y = 375/2-50;
break;
case 3:
rect.origin.x = 40-35;
rect.origin.y = 100-30;
break;
}
//设置每个tabView
UIView *tabView = [[UIView alloc]initWithFrame:rect];
[tabBarView addSubview:tabView];
//设置tabView的图标
UIButton *tabButton = [UIButton buttonWithType:UIButtonTypeCustom];
tabButton.frame = CGRectMake(15, 0, 30, 30);
[tabButton setBackgroundImage:[UIImage imageNamed:[tabTitle objectAtIndex:i]] forState:UIControlStateNormal];
[tabButton setTag:i];
[tabButton addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
[tabView addSubview:tabButton];
//设置标题
UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 35, 60, 15)];
titleLabel.font = [UIFont systemFontOfSize:12];
titleLabel.textAlignment = 1;
titleLabel.textColor = [UIColor whiteColor];
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.text = [tabTitle objectAtIndex:i];
[tabView addSubview:titleLabel];
}
[tabBarView setHidden:YES];
}
//显示 隐藏tabbar
- (void)tabbarbtn:(MyButton*)btn
{
//在移动的时候不触发点击事件
if (!btn.MoveEnabled) {
if(!flag){
tabBarView.hidden = NO;
flag = YES;
}else{
tabBarView.hidden = YES;
flag = NO;
}
}
}
- (void)buttonClicked:(id)sender
{
NSLog(@"%ld",[sender tag]);
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:YES];
[self addCustomElements];
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
}
