摆脱第三方库系列（一）- 自己写一个侧拉菜单

   <h2>前言</h2>    <p>一直有这么一个想法，就是摆脱第三方库来开发程序，虽然很不现实，但想尝试做一点努力。这篇文章先实现比较常见的侧拉菜单功能。</p>    <h2>侧拉菜单基本结构</h2>    <p>一般侧拉菜单就是一个中心页和一个侧边页构成。通过添加手势移动中心页，展示出侧边页。</p>    <p>现在APP中常见的侧拉菜单大体可以分成两种类型的，一种是外国的APP（比如Steam，非死book）比较喜欢的分页式的侧拉菜单，就是用中心页覆盖住侧边页，然后移动中心页的时候就能展现出被中心页覆盖的侧边页；还有一种就是国内（比如知乎日报）比较喜欢的一体式侧拉菜单，侧边页放置在中心页的左边或者右边，拉动时就可展现另一页内容。下面两张图第一张是分页式，第二张是一体式。</p>    <p><img alt="摆脱第三方库系列（一）- 自己写一个侧拉菜单" src="https://simg.open-open.com/show/dd33fdb3066c15b18e3c5748fd244d05.gif"></p>    <p><img alt="摆脱第三方库系列（一）- 自己写一个侧拉菜单" src="https://simg.open-open.com/show/04e932d37167a993994b21c424cc9634.gif"></p>    <h2>实现侧拉菜单</h2>    <p>这篇文章将主要介绍一体式侧拉菜单的写法。</p>    <p>先创建一个侧边页TogetherLeftView，最简单的继承于UIView的普通页面就行。在里面重写了初始化方法，改个颜色便于区分。</p>    <pre>  <code class="language-objectivec">- (instancetype)initWithFrame:(CGRect)frame  {   self = [super initWithFrame:frame];       if (self) {       self.backgroundColor = [UIColor redColor];   }   return self;  }  </code></pre>    <p>然后就是中心页TogetherMainView，一般将手势写在这一页。先声明两个对象两个变量。还有宏定义侧边页的宽度</p>    <pre>  <code class="language-objectivec">#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;  </code></pre>    <p>其中UIPanGestureRecognizer是苹果公司给的基本手势抽象类中的拖动手势，View添加这个后就可以拖动了。想学习其他基本手势的可以看看苹果UIGestureRecognizer的文档，这里不做介绍。leftBtn是点击后可以隐藏（出现）菜单的按钮。</p>    <p>然后重写初始化方法。</p>    <pre>  <code class="language-objectivec">- (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;  }  </code></pre>    <p>这里的centerX和centerY是对屏幕初始中心位置的记录，我们一会还原位置要用到。然后先看手势部分，panGestureRecognizer的get方法如下</p>    <pre>  <code class="language-objectivec">- (UIPanGestureRecognizer *)panGestureRecognizer  {      if (_panGestureRecognizer == nil) {          _panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];      }      return _panGestureRecognizer;  }  </code></pre>    <p>这里给拖动时添加了一个方法handlePan，关键点就在这个方法里</p>    <pre>  <code class="language-objectivec">- (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];  }  </code></pre>    <p>当我们在View界面中拖动时就会进入这个方法，我们先设一个CGPoint来获取每次得到的移动距离translation，然后<code>float x</code>就表示当前屏幕中心点的位置（原来的位置加上移动量）。</p>    <p>由于我写的是一个左侧的菜单，所以中心页应该是不能左移的，假如我们左移，就会造成<code>x < _centerX</code>，那样的话旧把x设成原来的中心点centerX就行了，这样就能阻止中心页左移。（如果想阻止右移把小于改成大于就行了。</p>    <p>然后就是在拖动效果结束（松开鼠标）时做一个判定，这里为了看起来平滑一点用了一个动画效果，如果拖动距离超过侧边页的一半旧显示出侧边页，否则还原。</p>    <p>最后还要将recognizer置位零。因为拖动时会多次执行这个方法，如果不置零可能出错。</p>    <p>这样最关键的部分就讲解完了，然后上按钮的动作代码，应该可以看的懂。</p>    <pre>  <code class="language-objectivec">- (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);          }      }];    }  </code></pre>    <p>接下来就是添加到ViewController里面了，两个页面对象都要声明</p>    <pre>  <code class="language-objectivec">@property (nonatomic, strong) TogetherLeftView *leftView;  @property (nonatomic, strong) TogetherMainView *mainView;  </code></pre>    <p>这里上一下代码，不做过多解释</p>    <pre>  <code class="language-objectivec">- (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;  }  </code></pre>    <p>那么如何写一个分页式的侧拉菜单呢？其实主要的区别就是在ViewController中添加页面的时候用中心页将侧边页覆盖就行了，具体的代码可以去我的<a href="/misc/goto?guid=4959671987955491785">github</a>下载来看。</p>    <h2>总结</h2>    <p>我想将比较常用的功能都自己动手写一遍这样更能明白底层的原理，我觉得更适合新手的学习，直接用第三方库谁都会，但哪天有需求变动要求你改你却无从下手就很尴尬了。这个系列我也会坚持下去，同样如果笔者哪里有错的地方希望大家提出来我好改正。</p>    <p>来源：http://cbsfly.github.io/ios/slipview</p>