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

转载 2016年06月01日 10:46:11

前言

一直有这么一个想法,就是摆脱第三方库来开发程序,虽然很不现实,但想尝试做一点努力。这篇文章先实现比较常见的侧拉菜单功能。

侧拉菜单基本结构

一般侧拉菜单就是一个中心页和一个侧边页构成。通过添加手势移动中心页,展示出侧边页。

现在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下载来看。

总结

我想将比较常用的功能都自己动手写一遍这样更能明白底层的原理,我觉得更适合新手的学习,直接用第三方库谁都会,但哪天有需求变动要求你改你却无从下手就很尴尬了。这个系列我也会坚持下去,同样如果笔者哪里有错的地方希望大家提出来我好改正。

自己写一个第三方分享库(一)

自己写一个第三方分享库(一)前言最近想做分享时,总是遇到需要更新最新包的问题,并且还需要导入真机和模拟器二个包,非常麻烦,所以一直在思考如何自己做一个分享库,要想做第三方的分享库,首要问题是需要知道A...
  • tuyaloveios
  • tuyaloveios
  • 2015年07月14日 22:42
  • 1424

教你自己写Android第三方库

其实Android studio的出现很大程度上方便了我们Android开发人员,今天我们说说怎么构建我们自己的库。 依次按File->New Moudle->android Library就好了,这...
  • xiangzhihong8
  • xiangzhihong8
  • 2016年08月18日 10:45
  • 1832

Android SlidingMenu 开源项目实现侧拉菜单(一)

转自:http://blog.csdn.net/top_code/article/details/17354023 SlidingMenu简介 SlidingMenu的是一种比较新的设置界面或配置...
  • rankun1
  • rankun1
  • 2016年06月26日 18:43
  • 545

原创:分享封装好的面向JAVA的memcached客户端操作类

书接上文:理论加实践,谈谈我对memcached的学习感悟! 接近两周的时间,终于将面向JAVA的memcached客户端操作类封装写完。 现将当前的成果共享上来,希望有经验的朋友能指点一二。 ...
  • ywb201314
  • ywb201314
  • 2016年05月05日 11:08
  • 470

Android开源侧拉菜单SlidingMenu Demo 配置与学习

前言在Trinea的开源项目博文里 https://github.com/Trinea/android-open-project#%E4%B8%89menu 推荐了很多menu开源库。 首先给出...
  • zhoubin1992
  • zhoubin1992
  • 2015年07月20日 20:37
  • 2077

使用DrawerLayout实现侧拉菜单

侧拉菜单在android应用中非常常见,它的实现方式太多了,今天我们就说说使用Google提供的DrawerLayout来实现侧拉菜单效果,先来看张效果图:DrawerLayout的实现其实非常简单,...
  • u012702547
  • u012702547
  • 2015年11月01日 23:00
  • 8874

自己写一个异常类my_own_exception来感知一下异常机制

在本文中, 我自己来写一个异常类my_own_exception, 主要为了感知一下C++异常机制, 看代码: #include using namespace std; class my_own...
  • stpeace
  • stpeace
  • 2015年03月25日 22:31
  • 3573

Android自定义侧拉菜单-做一个为自己定制的侧拉控件

Android自定义侧拉菜单-做一个为自己定制的侧拉控件最近在项目开发上有一个侧拉菜单的需求,之前想到的会是android官方提供的DrawerLayout,DrawerLayout 为android...
  • qq_26791635
  • qq_26791635
  • 2017年04月02日 14:49
  • 633

如何自己写一个ArrayList、LinkedList和HashSet集合?

通过对jdk集合类的源码分析,我们可以自己实现一个与ArrayList、LinkedList和HashSet集合类似的集合类来强化自己对各种集合底层原理...
  • lvjun2015
  • lvjun2015
  • 2015年06月28日 17:00
  • 994

自己动手模仿 springmvc 写一个 mvc框架

spring的知识那么多,看源码也不知从何看起,那应该怎么学呢?我觉得,完整的自己动手去实现一个,是最好的方式。 bfmvc模仿springmvc的轻量级web框架,适合学习和搭建小型web项目使用,...
  • qq_31655965
  • qq_31655965
  • 2017年05月27日 10:23
  • 2193
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:摆脱第三方库系列(一)- 自己写一个侧拉菜单
举报原因:
原因补充:

(最多只允许输入30个字)