一直有这么一个想法,就是摆脱第三方库来开发程序,虽然很不现实,但想尝试做一点努力。这篇文章先实现比较常见的侧拉菜单功能。
一般侧拉菜单就是一个中心页和一个侧边页构成。通过添加手势移动中心页,展示出侧边页。
现在APP中常见的侧拉菜单大体可以分成两种类型的,一种是外国的APP(比如Steam,facebook)比较喜欢的分页式的侧拉菜单,就是用中心页覆盖住侧边页,然后移动中心页的时候就能展现出被中心页覆盖的侧边页;还有一种就是国内(比如知乎日报)比较喜欢的一体式侧拉菜单,侧边页放置在中心页的左边或者右边,拉动时就可展现另一页内容。下面两张图第一张是分页式,第二张是一体式。
这篇文章将主要介绍一体式侧拉菜单的写法。
先创建一个侧边页TogetherLeftView,最简单的继承于UIView的普通页面就行。在里面重写了初始化方法,改个颜色便于区分。
- (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.backgroundColor = [UIColor redColor]; } return self; }
然后就是中心页TogetherMainView,一般将手势写在这一页。先声明两个对象两个变量。还有宏定义侧边页的宽度
#define LEFTVIEWWIDTH 280 @interface TogetherMainView : UIView @property (nonatomic, assign) float centerX; @property (nonatomic, assign) float centerY; @property (nonatomic, strong) UIPanGestureRecognizer *panGestureRecognizer; @property (nonatomic, strong) UIButton *leftBtn;
其中UIPanGestureRecognizer是苹果公司给的基本手势抽象类中的拖动手势,View添加这个后就可以拖动了。想学习其他基本手势的可以看看苹果UIGestureRecognizer的文档,这里不做介绍。leftBtn是点击后可以隐藏(出现)菜单的按钮。
然后重写初始化方法。
- (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { CGRect screen = [[UIScreen mainScreen] bounds]; self.centerX = screen.size.width / 2; self.centerY = screen.size.height / 2; self.backgroundColor = [UIColor greenColor]; [self addSubview:self.leftBtn]; [self addGestureRecognizer:self.panGestureRecognizer]; } return self; }
这里的centerX和centerY是对屏幕初始中心位置的记录,我们一会还原位置要用到。然后先看手势部分,panGestureRecognizer的get方法如下
- (UIPanGestureRecognizer *)panGestureRecognizer { if (_panGestureRecognizer == nil) { _panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)]; } return _panGestureRecognizer; }
这里给拖动时添加了一个方法handlePan,关键点就在这个方法里
- (void)handlePan:(UIPanGestureRecognizer *)recognizer { CGPoint translation = [recognizer translationInView:self]; float x = self.center.x + translation.x; if (x < _centerX) { x = _centerX; } self.center = CGPointMake(x, _centerY); if (recognizer.state == UIGestureRecognizerStateEnded) { [UIView animateWithDuration:0.2 animations:^(void){ if (x > (self.centerX + LEFTVIEWWIDTH/2)) { self.center = CGPointMake(self.centerX + LEFTVIEWWIDTH, _centerY); }else{ self.center = CGPointMake(_centerX, _centerY); } }]; } [recognizer setTranslation:CGPointZero inView:self]; }
当我们在View界面中拖动时就会进入这个方法,我们先设一个CGPoint来获取每次得到的移动距离translation,然后 float x
就表示当前屏幕中心点的位置(原来的位置加上移动量)。
由于我写的是一个左侧的菜单,所以中心页应该是不能左移的,假如我们左移,就会造成 x < _centerX
,那样的话旧把x设成原来的中心点centerX就行了,这样就能阻止中心页左移。(如果想阻止右移把小于改成大于就行了。
然后就是在拖动效果结束(松开鼠标)时做一个判定,这里为了看起来平滑一点用了一个动画效果,如果拖动距离超过侧边页的一半旧显示出侧边页,否则还原。
最后还要将recognizer置位零。因为拖动时会多次执行这个方法,如果不置零可能出错。
这样最关键的部分就讲解完了,然后上按钮的动作代码,应该可以看的懂。
- (UIButton *)leftBtn { if (_leftBtn == nil) { _leftBtn = [[UIButton alloc] initWithFrame:CGRectMake(20, 20, 120, 40)]; [_leftBtn setTitle:@"点我弹出菜单" forState:UIControlStateNormal]; [_leftBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [_leftBtn addTarget:self action:@selector(leftViewAppear) forControlEvents:UIControlEventTouchUpInside]; } return _leftBtn; } - (void)leftViewAppear { [UIView animateWithDuration:0.2 animations:^(void){ if (self.center.x == self.centerX) { self.center = CGPointMake(self.centerX + LEFTVIEWWIDTH, self.centerY); }else if (self.center.x == self.centerX + LEFTVIEWWIDTH) { self.center = CGPointMake(self.centerX, self.centerY); } }]; }
接下来就是添加到ViewController里面了,两个页面对象都要声明
@property (nonatomic, strong) TogetherLeftView *leftView; @property (nonatomic, strong) TogetherMainView *mainView;
这里上一下代码,不做过多解释
- (void)viewDidLoad { [super viewDidLoad]; [self.view addSubview:self.mainView]; [self.mainView addSubview:self.leftView]; } - (TogetherMainView *)mainView { if (_mainView == nil) { _mainView = [[TogetherMainView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)]; } return _mainView; } - (TogetherLeftView *)leftView { if (_leftView == nil) { _leftView = [[TogetherLeftView alloc] initWithFrame:CGRectMake(-LEFTVIEWWIDTH, 0, LEFTVIEWWIDTH, [UIScreen mainScreen].bounds.size.height)]; } return _leftView; }
那么如何写一个分页式的侧拉菜单呢?其实主要的区别就是在ViewController中添加页面的时候用中心页将侧边页覆盖就行了,具体的代码可以去我的 github 下载来看。
我想将比较常用的功能都自己动手写一遍这样更能明白底层的原理,我觉得更适合新手的学习,直接用第三方库谁都会,但哪天有需求变动要求你改你却无从下手就很尴尬了。这个系列我也会坚持下去,同样如果笔者哪里有错的地方希望大家提出来我好改正。
Tagged with摆脱第三方库系列