iOS开发无第三方控件的援助达到的效果侧边栏
最近的研究iOS程序侧边栏。渐渐的发现iOS该方案还开始采取风侧边栏格该,QQ,今日头条,Path(Path运营商最早的侧边栏app该,效果说成是Path效果),所以就研究了下。
然后发现Git Hub上有非常多側边栏的控件,这些控件效果也都挺玄的。可是我想找到不用第三方控件自己实现側边栏呢?后来參照这篇blog,然后自己搞了下,算搞清楚了。以下具体介绍一下吧。
1.
首先我们须要在storyboard里面新建3个view controlle,这里也能够是navigation controller。可是我还是习惯直接用view controller就能够了,跳转都自己来实现。
2.
接下来须要新建3个类,
ContainerViewController是一个容器类的VC。作用是放置MainVC和SideVC,就好比TabbarViewController一样。它仅仅是一个容器,真正调整页面的是在其它VC中。
3.
先不用管这3个ViewController怎样实现。我们转到storyboard中。分别把设置3个ViewController的identifier。像这个样子
ContainerViewController能够不设置storyboard,可是mainVC和sideVC一定要设置好storyboard ID,然后你还能够自己编辑一下Main VC和sideVC。这样能够更清晰地看到側边栏的效果。
终于的StoryBoard是这种:
最上面是ContainerViewController。接下来从右到左各自是MainViewController和SideViewController。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTE1NjAxMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
4.
好了,接下来我们就開始coding把。我这里想要做的效果是滑屏或者点击mainVC左上角的button都能够打开側边栏,然后当側边栏显示的时候,滑屏或者点击右側的mainVC。都能隐藏側边栏。
我们一步一步来分析代码吧:
事实上主要是ContainerViewController
ContainerViewController.h
// 这个相当于是容器的VC,里面存放主界面和側边栏 #import <UIKit/UIKit.h>
#import "MainViewController.h"
#import "SideViewController.h" @interface ContainerViewController : UIViewController<UIGestureRecognizerDelegate>{} @property(nonatomic, strong) MainViewController *centerController;
@property(nonatomic, strong) SideViewController *leftController; - (void)showSideView;
- (void)hideSideView; @end
我们import了mainVC和sideVC,然后定义了两个property和两个method
ContainerViewController.m
// #import "ContainerViewController.h" @interface ContainerViewController () @end @implementation ContainerViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil]; _centerController = (MainViewController *)[storyboard instantiateViewControllerWithIdentifier:@"MainViewController"];
_centerController.fatherViewController = self; _leftController = (SideViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"]; [self.view addSubview:_centerController.view];
[_centerController.view setTag:1];
[_centerController.view setFrame:self.view.bounds]; [self.view addSubview:_leftController.view];
[_leftController.view setTag:2];
[_leftController.view setFrame:self.view.bounds]; [self.view bringSubviewToFront:_centerController.view]; //add swipe gesture
UISwipeGestureRecognizer *swipeGestureRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
[swipeGestureRight setDirection:UISwipeGestureRecognizerDirectionRight];
[_centerController.view addGestureRecognizer:swipeGestureRight]; UISwipeGestureRecognizer *swipeGestureLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
[swipeGestureLeft setDirection:UISwipeGestureRecognizerDirectionLeft];
[_centerController.view addGestureRecognizer:swipeGestureLeft];
} -(void) swipeGesture:(UISwipeGestureRecognizer *)swipeGestureRecognizer { CALayer *layer = [_centerController.view layer];
layer.shadowColor = [UIColor blackColor].CGColor;
layer.shadowOffset = CGSizeMake(1, 1);
layer.shadowOpacity = 1;
layer.shadowRadius = 20.0;
if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionRight) {
[self showSideView];
}
if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionLeft) {
[self hideSideView];
}
} // 显示側边栏。单独写成一个函数,供mainVC点击头像时调用
- (void)showSideView{
[_leftController.view setHidden:NO]; [UIView beginAnimations:nil context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == -200) {
[_centerController.view setFrame:CGRectMake(_centerController.view.frame.origin.x+200, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
} [UIView commitAnimations];
} - (void)hideSideView{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
if ( _centerController.view.frame.origin.x == 200) {
[_centerController.view setFrame:CGRectMake(_centerController.view.frame.origin.x-200, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
}
[UIView commitAnimations];
// 最后调用防止出现白底
[_leftController.view setHidden:YES];
} - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} /*
#pragma mark - Navigation // In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/ @end
在viewDidload方法里面,我们从storyboard中获取到两个ViewController,注意我的sideviewcontroller起的名字是LeftViewController,也就是在storyboard ID里面要写成这个名字。
然后加入进去了滑屏手势,各自是向左滑和向右滑
接下里在滑屏的代理里面定义了滑屏的动作。这里为什么要把显示/隐藏sideview单独做成两个method呢?由于一会我们要实如今mainVC里面点击头像的时候可以调用ContainerVC里的这两个函数!
接下来看看MainVC怎样实现吧
MainViewController.h
#import <UIKit/UIKit.h> @class ContainerViewController; @interface MainViewController : UIViewController - (IBAction)showSideView:(id)sender;
@property (nonatomic, strong) ContainerViewController* fatherViewController; @end
注意这里用@class来引入ContainerVC,不在头文件中面#import是为了防止循环引用。
然后我们定义一个property。fatherViewController,它是一个ContainerViewController的实例。
showSideView的IBAction是头像那个button的点击动作。
MainViewController.m
#import "MainViewController.h"
#import "ContainerViewController.h" @interface MainViewController () @end @implementation MainViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
} - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} /*
#pragma mark - Navigation // In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/ - (IBAction)showSideView:(id)sender {
[self.fatherViewController showSideView];
} - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
[self.fatherViewController hideSideView];
}
@end
这样在mainViewController的点击头像button的动作就能调用fatherViewController,也就是ContainerViewController里面的showSideView动作了。
touchesBegan是当点击mainViewController的时候。隐藏側边栏的。
以为SideViewController都是在storyboard里面拖入控件完毕的。所以不须要写什么代码。
当然,这里不过左側的側边栏,想要看两側的側边栏方法。查阅这里。
版权声明:本文博客原创文章,博客,未经同意,不得转载。
iOS开发无第三方控件的援助达到的效果侧边栏的更多相关文章
- IOS开发中设置控件内容对齐方式时容易混淆的几个属性
IOS开发中四个容易混淆的属性: 1. textAligment : 文字的水平方向的对齐方式 1> 取值 NSTextAlignmentLeft = 0, // 左对齐 NST ...
- iOS 开发 ZFUI framework控件,使布局更简单
来自:http://www.jianshu.com/p/bcf86b170d9c 前言 为什么会写这个?因为在iOS开发中,界面的布局一直没有Android布局有那么多的方法和优势,我个人开发都是纯代 ...
- iOS开发基础-UITableView控件简单介绍
UITableView 继承自 UIScrollView ,用于实现表格数据展示,支持垂直滚动. UITableView 需要一个数据源来显示数据,并向数据源查询一共有多少行数据以及每一行显示什么 ...
- IOS开发自定义CheckBox控件
IOS本身没有系统的CheckBox组件,但是实际开发中会经常用到,所以专门写了一个CheckBox控件,直接上代码 效果图: UICheckBoxButton.h文件如下: #import #imp ...
- ios开发中button控件的属性及常见问题
最为最基本的控件,我们必须对button的每个常用属性都熟练应用: 1,使用之前,必须对按钮进行定义,为乐规范,在@interface ViewController (){}中进行定义,先定义后使用. ...
- iOS开发中UIDatePicker控件的使用方法简介
iOS上的选择时间日期的控件是这样的,左边是时间和日期混合,右边是单纯的日期模式. 您可以选择自己需要的模式,Time, Date,Date and Time , Count Down Timer四 ...
- IOS开发--自定义segment控件,方便自定义样式
系统的segment控件太封闭,想换个颜色加个背景太难了,忍不住自己写一个,以备不时之需 这个控件给出了很多自定义属性的设置,用起来还是比较方便的,需要注意的 itemWidth如果不设置,则会按照控 ...
- IOS开发之按钮控件Button详解
reference:http://mxcvns.lofter.com/post/1d23b1a3_685d59d 首先是继承问题,UIButton继承于UIControl,而UIControl继承于U ...
- ios开发之--系统控件显示中文
虽然一直知道X-code肯定提供有语言本地化的设置地方,但是一直也做个记录,有些时候的汉化,还是需要使用代码去控制,键盘的右下角.navagiton的return使用代码修改,调用系统相机时,也是出现 ...
随机推荐
- Oracle基础(五)pl/sql进阶(分页过程)
编写分页过程 通过pl/sql实现分页过程,再该过程中由简单到难一步步深入,目的在于通过该案例熟悉pl/sql的各种存储过程,包,游标.怎样在java中调用等内容的学习. 1.无返回值 ...
- quick-cocos2d-x游戏开发【7】——scheduler 定时器
定时器用的地方还是比較多的,游戏中的逻辑推断非常多都是採用每帧运行.quick对于schedule的封装在scheduler这个lua文件里.假设是第一次接触quick的话,可能依照官方的api来写一 ...
- UML用例图总结(转)
用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. [用途]:帮助开发团队以一种可视化的方式理解系统的功能需求. 用例图所包含的元素如下: 1. ...
- hdu 4464 水
http://acm.hdu.edu.cn/showproblem.php?pid=4464 现场赛总会有水题,这就是最水的一道,预计也就是能当高校的上机题,保研用,呵呵~~~ #include &l ...
- 关于扩展IP地址空间的几个方案的探讨
摘 要:在IP地址紧缺的背景下,IPv6.NAPT.SuIP几种解决方案应运而生.分析.比较几种方案后,可知SuIP是最佳方案. 关键词:IPv6:NAPT:SuIP:IP地址空间扩展 The In ...
- [改变自己wordpress.2]至wordpress再加上简单的debug sql调试.
或者说,同事. 需要帮助她打印出来sql 调试输出到页面sql 在这里,我们使用插件或一个的方式来启动配置文件wordpress的debug 在插件文件夹 wordpress/wp-content/p ...
- Java乔晓松-android中调用系统拍照功能并显示拍照的图片
android中调用系统拍照功能并显示拍照的图片 如果你是拍照完,利用onActivityResult获取data数据,把data数据转换成Bitmap数据,这样获取到的图片,是拍照的照片的缩略图 代 ...
- 第三届蓝桥杯C++本科B组决赛解题报告(更新中)
<1>星期几 9 package JiaNan; import java.util.Calendar; import java.util.GregorianCalendar; public ...
- uva-11234 Expressions
Arithmetic expressions are usually written with the operators in between the two operands (which is ...
- Google jsAPI托管你的js库
来看一段JS: <script type="text/javascript" src="http://www.google.com/jsapi">& ...