Ios中可拖動的浮動選單實現
阿新 • • 發佈：2019-01-30
實現一個可拖動的浮動選單，效果如下：
這個設定圖示是可以全屏拖動的，點選一下，可以出現一排設定按鈕，可以用來進行功能的開關切換。
廢話不多說了，上程式碼：
很簡單的標頭檔案，就兩個變數，一個初始化函式。// // DragMenuView.h // // Created by Scott on 15-7-27. // Copyright (c) 2015年 yshen. All rights reserved. // #import <UIKit/UIKit.h> @interface DragMenuView : UIView { UIButton *m_selectBtn; UIView *m_contentView; } -(id)initDragMenuView; @end
m_selectBtn是一個按鈕控制元件，這個控制元件用來顯示上圖中那個螺絲刀和扳手的圖片，它可以被任意拖動，只要點選它，就可以開啟其他設定按鈕。
m_contentView
initDragMenuView這個函式是這個類唯一的一個自有函式，它用來建立這個浮動選單，並初始化浮動選單。
下面是實現檔案：
// // DragMenuView.m // // // Created by Scott on 15-7-27. // Copyright (c) 2015年 yshen. All rights reserved. // #import <QuartzCore/QuartzCore.h> #import "DragMenuView.h" #define MAX_WIDTH 48 #define MAX_HEIGHT 48 #define SPLIT_SPACE 5 #define SETTING_COUNT 1 @implementation DragMenuView @synthesize bRotation; - (id)initDragMenuView { CGRect mainRect = [[UIScreen mainScreen] bounds]; self = [super initWithFrame:CGRectMake(mainRect.size.width - MAX_WIDTH, /*mainRect.size.height / 2 - MAX_HEIGHT / 2*/50, MAX_WIDTH, MAX_HEIGHT)]; if (self) { // Initialization code self.backgroundColor = [UIColor clearColor]; m_selectBtn = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, MAX_WIDTH, MAX_HEIGHT)]; [m_selectBtn setBackgroundImage:[UIImage imageNamed:@"select.png"] forState:UIControlStateNormal]; [m_selectBtn addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside]; [self insertSubview:m_selectBtn atIndex:9500]; m_contentView = [[UIView alloc] initWithFrame:CGRectMake(MAX_WIDTH + SPLIT_SPACE, 0, MAX_WIDTH * SETTING_COUNT, MAX_HEIGHT)]; m_contentView.userInteractionEnabled = YES; m_contentView.hidden = YES; //m_contentView.backgroundColor = [UIColor grayColor]; UIButton *setting = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, MAX_WIDTH, MAX_HEIGHT)]; [setting setEnabled:NO]; [setting setSelected:NO]; [setting setBackgroundImage:[UIImage imageNamed:@"mic.png"] forState:UIControlStateNormal]; [setting addTarget:self action:@selector(clickVoice:) forControlEvents:UIControlEventTouchUpInside]; [m_contentView addSubview:setting]; /* setting = [[UIButton alloc] initWithFrame:CGRectMake(MAX_HEIGHT, 0, MAX_HEIGHT, MAX_HEIGHT)]; [setting setBackgroundImage:[UIImage imageNamed:@"mic.png"] forState:UIControlStateNormal]; [setting addTarget:self action:@selector(clickAudio:) forControlEvents:UIControlEventTouchUpInside]; [m_contentView addSubview:setting]; setting = [[UIButton alloc] initWithFrame:CGRectMake(MAX_HEIGHT * 2, 0, MAX_HEIGHT, MAX_HEIGHT)]; [setting setBackgroundImage:[UIImage imageNamed:@"mic.png"] forState:UIControlStateNormal]; [setting addTarget:self action:@selector(clickAudio:) forControlEvents:UIControlEventTouchUpInside]; [m_contentView addSubview:setting]; setting = [[UIButton alloc] initWithFrame:CGRectMake(MAX_HEIGHT * 3, 0, MAX_HEIGHT, MAX_HEIGHT)]; [setting setBackgroundImage:[UIImage imageNamed:@"mic.png"] forState:UIControlStateNormal]; [setting addTarget:self action:@selector(clickAudio:) forControlEvents:UIControlEventTouchUpInside]; [m_contentView addSubview:setting]; */ [self insertSubview:m_contentView belowSubview:m_selectBtn]; } return self; } -(void)layoutMenuView:(BOOL)bShow { // 使用者點選設定按鈕時，需要彈出或者隱藏設定功能檢視。這個檢視的顯示因為有邊界問題，所以需要一些演算法調整顯示位置 CGRect mainRect = [[UIScreen mainScreen] bounds]; CGRect viewRect = [self frame]; int x = 0, y = viewRect.origin.y, w = 0, h = MAX_HEIGHT; if (bShow) // 顯示 { w = (MAX_WIDTH * (SETTING_COUNT + 1) + SPLIT_SPACE); if ((viewRect.origin.x + w) > mainRect.size.width) //右邊可顯示區域不夠顯示，需要切換到左邊來顯示 { x = viewRect.origin.x - w + MAX_WIDTH; self.frame = CGRectMake(x, y, w, h); m_contentView.frame = CGRectMake(0, 0, MAX_WIDTH * SETTING_COUNT, MAX_HEIGHT); m_selectBtn.frame = CGRectMake(MAX_WIDTH * SETTING_COUNT + SPLIT_SPACE, 0, MAX_WIDTH, MAX_HEIGHT); } else // 右邊顯示區域夠了，則直接在右邊顯示 { x = viewRect.origin.x; self.frame = CGRectMake(x, y, w, h); m_selectBtn.frame = CGRectMake(0, 0, MAX_WIDTH, MAX_HEIGHT); m_contentView.frame = CGRectMake(MAX_WIDTH + SPLIT_SPACE, 0, MAX_WIDTH * SETTING_COUNT, MAX_HEIGHT); } } else //隱藏 { w = MAX_WIDTH; CGRect btnRect = m_selectBtn.frame; if (btnRect.origin.x == 0) //如果是直接右邊顯示的，則調整寬度即可隱藏復原 { x = viewRect.origin.x; self.frame = CGRectMake(x, y, w, h); } else // 如果是因為可顯示區域不夠，而調整到左邊來顯示的話，則需要調整X座標和寬度。另外還需要重新調整子檢視的位置。 { x = viewRect.origin.x + (MAX_WIDTH * SETTING_COUNT + SPLIT_SPACE); self.frame = CGRectMake(x, y, w, h); m_selectBtn.frame = CGRectMake(0, 0, MAX_WIDTH, MAX_HEIGHT); } } } -(void)click:(id)sender { // 設定按鈕的響應動作，根據當前位置和邊界情況來顯示設定檢視 m_contentView.hidden = !m_contentView.hidden; [self layoutMenuView:!(m_contentView.hidden)]; } -(void)clickVoice:(id)sender { // 設定檢視中，功能按鈕的響應函式 UIButton *btn = (UIButton*)sender; [btn setSelected:![btn isSelected]]; [btn setAlpha:([btn isSelected]) ? 0.5f : 1.0f]; // 為了區分點選和未點選狀態 // do somthing...... } @end
實現程式碼也就那麼一點點，都是很簡單的程式碼。
然後在ViewController中加上變數，並建立這個浮動選單：
手勢識別函式：DragMenuView *m_dragMenu; // // whether support floating menu // add by yshen on 2015-7-27 // m_dragMenu = [[DragMenuView alloc]initDragMenuView]; UIPanGestureRecognizer *gesture = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(viewDidDragged:)]; [gesture setMaximumNumberOfTouches:1]; [gesture setMinimumNumberOfTouches:1]; [m_dragMenu addGestureRecognizer:gesture]; [self.view insertSubview:m_dragMenu atIndex:9999]; m_dragMenu.hidden = NO;
-(void)viewDidDragged:(UIPanGestureRecognizer*)gesture {
if (gesture.state == UIGestureRecognizerStateChanged || gesture.state == UIGestureRecognizerStateEnded)
{
CGPoint offset = [gesture translationInView:self.view];
int x = m_dragMenu.center.x + offset.x;
int y = m_dragMenu.center.y + offset.y;
[m_dragMenu setCenter:CGPointMake(x, y)];
[gesture setTranslation:CGPointMake(0, 0) inView:self.view];
}
}[self.view bringSubviewToFront:m_dragMenu];