![]()
芙蓉落盡天涵水,日暮滄波起!<藤藤蛇>
芙蓉落盡天涵水,日暮滄波起!<藤藤蛇>
效果圖:
簡單側滑抽屜效果封裝.gif
簡單的思路說明:
想要的效果就是, 向右滑動屏幕的時候 左側的視圖(綠色)會隨著拉動出現(xiàn), 同時會有一個透明度的改變! 實現(xiàn)思路大致就是要在最開始的界面(View)上添加平移手勢, 根據(jù)手勢滑動的偏移量來控制左側(綠色)視圖的位置, 同時改變在藍色上面一層的遮擋視圖(紅色)的透明度! 當綠色的菜單欄回去的時候隱藏遮擋的(紅色)視圖. 當綠色菜單在的時候, 點擊紅色視圖,同樣會收起綠色菜單!只需要在遮擋的紅色視圖上添加點擊手勢! 并執(zhí)行響應的操作即可.
上代碼:
定義的宏:
// 屏幕的寬 高
#define kSCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
#define kSCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
// 菜單寬度
#define MENU_WIDTH (kSCREEN_WIDTH * 1 / 3)
// 遮擋視圖的顏色
#define MASK_COLOR [UIColor redColor]
// 遮擋的最大透明度
#define MASK_MAX_ALPHA 0.5
定義的相關屬性
// 容納 側滑 的視圖控制器
@property (nonatomic, strong) UIViewController *containerVC;
// 滑動時候 遮蓋 在視圖控制器上的一層 View
@property (nonatomic, strong) UIView *maskView;
1: 初始化方法 這里用單例方法 一般 App 只有一個設置的側滑視圖
// 構造左側 整體的 View 整個工程只有一個 側滑 這里我用了 Xib 主要是容易添加一些想要的效果
+ (instancetype)shareSliderMenuView
{
static PP_SlideMenuView *slideMenuView = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
slideMenuView = [[NSBundle mainBundle] loadNibNamed:@"PP_SlideMenuView" owner:self options:nil].firstObject;
slideMenuView.frame = CGRectMake(- MENU_WIDTH, 0, MENU_WIDTH, kSCREEN_HEIGHT);
});
return slideMenuView;
}
2: 綁定控制器確定在哪里展示 主要是為了封裝
// 綁定控制器 并進行相關的設置
- (void)bindWithViewController:(UIViewController *)rootVc
{
__weak UIViewController *tempVc = rootVc;
self.containerVC = tempVc;// 設置為視圖的一個屬性方便在不同地方使用
self.isMenuViewHidden = YES;// 記錄開始狀態(tài)為 隱藏菜單視圖
// 創(chuàng)建遮擋的 View
self.maskView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
_maskView.backgroundColor = MASK_COLOR;
_maskView.hidden = YES; // 只有在滑動菜單出現(xiàn)時候才會 出現(xiàn) MaskView 遮擋
[_containerVC.view addSubview:_maskView]; // 遮擋的 加到 控制器 view 上
// 使用 KVO 監(jiān)控 菜單View 的位置變化 然后改變遮擋視圖的 透明度
[self addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];
// 給視圖控制器上的 View 添加平移 手勢 以及 遮擋的 MaskView 加點擊手勢
[self addOurGestureRecognizer];
}```
```code
#pragma mark ------>> 給視圖控制器上的 View 添加平移 手勢 以及 遮擋的 MaskView 加點擊手勢 <<------
- (void)addOurGestureRecognizer
{
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panContainViewAction:)]; // 右滑動時候 出來菜單
pan.delegate = self;
[_containerVC.view addGestureRecognizer:pan];
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapHiddenMenuAction:)]; // 要是菜單在 點擊 MaskView 隱藏菜單
[_maskView addGestureRecognizer:tap];
}
#pragma mark ------>> 滑動視圖控制器的 View 的時候觸發(fā)方法 <<------
- (void)panContainViewAction:(UIPanGestureRecognizer *)pan
{
// 偏移量
CGPoint offSet = [pan translationInView:_containerVC.view];
// 平移進行時候
if (pan.state == UIGestureRecognizerStateBegan || pan.state == UIGestureRecognizerStateChanged)
{
if (offSet.x > 0)//向右滑動
{
if (self.frame.origin.x == 0)
{
return;
}
CGFloat tempX = self.frame.origin.x + offSet.x;// 算出更新的 x
if (tempX <= 0 )
{// 小于 0 就隨著拖動移動就好
self.frame = CGRectMake(tempX, 0, MENU_WIDTH, kSCREEN_HEIGHT);
}else
{// 都出來之后 就讓它完全展示就好 別滑到太靠右地方
self.frame = CGRectMake(0, 0, MENU_WIDTH, kSCREEN_HEIGHT);
}
}else
{// 向左滑動
CGFloat tempX = self.frame.origin.x + offSet.x;// 算出更新的 x
self.frame = CGRectMake(tempX, 0, MENU_WIDTH, kSCREEN_HEIGHT);
}
}else
{// 在這里判斷要 顯示還是隱藏
if (self.frame.origin.x >= - MENU_WIDTH * 0.5)
{
[self inputOfSightMenuView];
}else
{
[self outOfSightMenuView];
}
}
// 清除偏移量
[pan setTranslation:(CGPointZero) inView:_containerVC.view];
//self.maskView.frame = CGRectMake(CGRectGetMaxX(self.frame), 0, kSCREEN_WIDTH, kSCREEN_HEIGHT);
}
// 點擊遮擋 收起菜單
- (void)tapHiddenMenuAction:(UITapGestureRecognizer *)tap
{
[self outOfSightMenuView];
}
#pragma mark ------>> MenuView 視圖 移出 或者 移進 視線 <<------
// 放到視線之外
- (void)outOfSightMenuView
{
[UIView animateWithDuration:0.2 animations:^{
self.frame = CGRectMake(- MENU_WIDTH, 0, MENU_WIDTH, kSCREEN_HEIGHT);
self.isMenuViewHidden = YES;
self.maskView.hidden = YES;
}];
}
// 放到視線之內
- (void)inputOfSightMenuView
{
[UIView animateWithDuration:0.2 animations:^{
self.frame = CGRectMake(0, 0, MENU_WIDTH, kSCREEN_HEIGHT);
} completion:^(BOOL finished) {
self.maskView.hidden = NO;
self.maskView.alpha = MASK_MAX_ALPHA;
}];
}
#pragma mark ------>> KVO 監(jiān)控 菜單View 的位置變化 <<------
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
if ([keyPath isEqualToString:@"frame"])
{
CGRect newFrame = [change[@"new"] CGRectValue];
CGFloat newFrameX = newFrame.origin.x;
// 判斷是否需要改變 遮擋的透明度
if (newFrameX != - MENU_WIDTH)
{
_maskView.hidden = NO;// 出現(xiàn)遮擋
// 改變遮擋的透明度
_maskView.alpha = (newFrameX + MENU_WIDTH) / MENU_WIDTH * MASK_MAX_ALPHA;
}else
{
_maskView.hidden = YES;
}
}
}
#pragma mark ------>> 手勢沖突時候 調用的手勢代理 <<------
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
if ([otherGestureRecognizer.view isKindOfClass:[UITableView class]]) {
return NO;
}
return YES;
}
最后 在控制器調用
PP_SlideMenuView *slidetView = [PP_SlideMenuView shareSliderMenuView];
[slidetView bindWithViewController:self];
[self.view addSubview:slidetView];
PS: 最近忙著寫點小項目,哪里寫錯了還請見諒!
