澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2020-05-01 12:57 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

简单实现侧滑功能,layout动画初体验

话异常少说,先来个效用图:

封锁动漫的篇章要比猜想的悠悠惠临,最大的缘由是从未有过找到我感到的十足好的卡通来说学节制动漫—— 当然了,那并不是因为约束动漫太难。相反,因为节制动漫实在太轻便了,反而未有丰硕多的总结动漫素材让自家接收。上面那个动漫取自于爱人公司的app,作者仿做了二个,作为前些天的demo,具体效果如下:

威尼斯官网 1sideView.gif

自律动漫

侧滑那几个职能大家应该很熟谙吧,只要您用QQ,那么自然就能够接触到侧滑了,作者明天根本是讲达成侧滑的思路,当然也写了个简易的demo,不过有过多细节小编并从未去处理,关键在于思路,好了,上边初步上课思路了:1.很招摇过市我们得以见到点击导航栏侧边开关最上层的视图是往右移动的,並且一最早上边的浅绿视图是盖在石黄视图上方的,这里能够见见来 他们之间是有层级关系的,也便是杏红视图是盖在青灰视图上方的,2.询问了这贰个关系,大家再跟着说第二点,那就是怎么让雪青视图往左侧移动同临时间收缩呢,变越来越浅紫视图的frame恐怕是transform不就能够了吗

关于限定

摸底了下面的这两点,还会有少数很要紧,那正是深紫视图还会有藏蓝视图是增添在哪里的吗?刚最初本身的思路是一贯增添在keyWindow上边,那样确实是能够的,但是借使是增加在keywindow上会现身一个难点,那正是UIApplication那个代理对象具备那一个View了,那就违反了准星了,代理就只干代理的事才对,所从前边小编的思路就改为了将那个油红的view增加在根调节器的View上边,这里根本,从图上就算看出了有导航栏,但是大家那边的根调节器却并非UINavgationController,而是三个常备的UIViewController,具体你能够经过看自身的demo,讲罢了樱桃红视图小编认为还应该有须要说一下深淡蓝视图,暗黄视图的View很显眼是有导航栏的,聪明的您料定想到了,对的,作者是将三个导航调控器的View增多在了那些紫象牙白的view上面,那样就能够有导航栏了,这里有好几早晚要小心的,那正是以此导航调节器必得是根调整器的子调节器;说了如此多预计如故有好五人某个蒙,那作者要么把档次给比划一下吗:UIWindow-->RootViewController.View-->greenView-->navigationController.View

威尼斯官网,在这里一小节作者会轻巧的牵线一下束缚的用法,如若你已经在接受storyboard进行开采了,那么能够跳过这一节。借使现行反革命有像这种类型两个须求,你须求将小说显示在分界面包车型地铁中级地点,大概是左右空30pt、上方间隔20pt,效果图如下:

深入显出的讲正是:跟调节器的view上先是增加了卡其灰的View 然后再新建了一个导航调控器,将导航调节器的View增加到根调节器的View上,具体的本身以为依旧用代码来讲相比实在:

必要分界面

//// ViewController.m// YJYYSideViewController//// Created by 遇见远洋 on 16/9/1.// Copyright © 2016年 遇见远洋. All rights reserved.//#import "ViewController.h"#import "YJYYSideView.h"#import "YJYYNavViewController.h"#import "YJYYViewController.h"#define topValue 64#define leftMenuW 150@interface ViewController ()<YJYYLeftMenuDelegate>@end@implementation ViewController- viewDidLoad { [super viewDidLoad]; YJYYNavViewController * navController = [[YJYYNavViewController alloc]initWithRootViewController:[[YJYYViewController alloc]init]]; [self addChildViewController:navController]; self.view.backgroundColor = [UIColor greenColor]; //添加左右两侧栏 YJYYSideView * sideView = [[YJYYSideView alloc]initWithFrame:CGRectMake(0, topValue, leftMenuW, self.view.bounds.size.height - topValue * 2)]; sideView.delegate = self; [self.view addSubview:sideView]; [self.view addSubview:navController.view];}#pragma mark - HMLeftMenuDelegate- leftMenu:(YJYYSideView *)menu didSelectedButtonFromIndex:(NSInteger)fromIndex toIndex:(NSInteger)toIndex{ NSLog(@"点击了FromIndex %ld-----toIndex %ld",fromIndex,toIndex);}@end

//// YJYYSideView.m// YJYYSideViewController//// Created by 遇见远洋 on 16/9/1.// Copyright © 2016年 遇见远洋. All rights reserved.//#import "YJYYSideView.h"@interface YJYYSideView ()@property (copy,nonatomic)NSArray * titles;/**<标题数组*/@property (copy,nonatomic)NSMutableArray * btnsArray;/**<按钮数组*/@end@implementation- (instancetype)initWithFrame:frame { if (self = [super initWithFrame:frame]) { self.backgroundColor = [UIColor cyanColor]; [self addLeftButtons]; } return self;}- addLeftButtons { for (int i = 0 ; i < 5; i  ) { UIButton * btn = [UIButton new]; [btn setTitle:self.titles[i] forState:UIControlStateNormal]; [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; btn.backgroundColor = [UIColor greenColor]; btn.tag = i; [self addSubview:btn]; [self.btnsArray addObject:btn]; }}- layoutSubviews { [super layoutSubviews]; [self.btnsArray enumerateObjectsUsingBlock:^(UIButton * btn, NSUInteger idx, BOOL * _Nonnull stop) { CGFloat height = self.bounds.size.height / 5.0; btn.frame = CGRectMake(0, idx * height, self.bounds.size.width, height); }];}- (NSMutableArray *)btnsArray { if (!_btnsArray) { _btnsArray = [NSMutableArray array]; } return _btnsArray;}- (NSArray *)titles { if  { _titles = @[@"刚哥",@"佳哥",@"老司机",@"超哥",@"轩哥"]; } return _titles;}@end

//// YJYYViewController.m// YJYYSideViewController//// Created by 遇见远洋 on 16/9/1.// Copyright © 2016年 遇见远洋. All rights reserved.//#import "YJYYViewController.h"#define topValue 64#define leftValue 150@interface YJYYViewController ()@end@implementation YJYYViewController- viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor blueColor]; [self setupNavigationTools]; [self addGesture];}/*** 设置导航栏左右按钮*/- setupNavigationTools { // 返回按钮 UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom]; [backButton setImage:[UIImage imageNamed:@"debunk_arrow_back_img"] forState:UIControlStateNormal]; [backButton sizeToFit]; [backButton addTarget:self action:@selector(backbarbuttonDidClickEvent:) forControlEvents:UIControlEventTouchUpInside]; UIBarButtonItem *backBarButton = [[UIBarButtonItem alloc] initWithCustomView:backButton]; self.navigationItem.leftBarButtonItem = backBarButton; self.title = @"导航"; self.navigationController.navigationBar.tintColor = [UIColor whiteColor];}- addGesture { UITapGestureRecognizer * tapGes = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector]; UIPanGestureRecognizer * panGes = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector]; [self.view addGestureRecognizer:tapGes]; [self.view addGestureRecognizer:panGes];}- tap:(UITapGestureRecognizer *)tapGes { [UIView animateWithDuration:0.25 animations:^{ self.navigationController.view.transform = CGAffineTransformIdentity; } completion:^(BOOL finished) { }];}- pan:(UIPanGestureRecognizer *)panGes { [self backbarbuttonDidClickEvent:nil];}/** 返回操作 */- backbarbuttonDidClickEvent:(UIButton *)sender { [UIView animateWithDuration:0.25 animations:^{ // 缩放比例 CGFloat navH = [UIScreen mainScreen].bounds.size.height - 2 * topValue; CGFloat scale = navH / [UIScreen mainScreen].bounds.size.height; // 菜单左边的间距 CGFloat leftMenuMargin = [UIScreen mainScreen].bounds.size.width * (1 - scale) * 0.5; CGFloat translateX = leftValue - leftMenuMargin; CGFloat topMargin = [UIScreen mainScreen].bounds.size.height * (1 - scale) * 0.5; CGFloat translateY = topValue - topMargin; // 缩放 CGAffineTransform scaleForm = CGAffineTransformMakeScale(scale, scale); // 平移 CGAffineTransform translateForm = CGAffineTransformTranslate(scaleForm, translateX / scale, translateY / scale); self.navigationController.view.transform = translateForm; }];}@end

你满心无所谓的想以此职责多不难啊,于是挥洒的写下了如此一段代码:

总括就这个文件,其实也轻松,但是中间还会有为数不菲细节要求通盘,作者就不做了,上边给个demo,首假使讲个思路 这么些demo有吗难点能够留言:

self.textView = [[UITextView alloc] initWithFrame: CGRectMake(30, 20, self.view.bounds.size.width - 60, 0)];

self.textView.text = ..........

[self.textView sizeToFit];

下一场运营你的代码,ok,效果不错。但请等等,按住command 左右方向键,你的分界面变成了那般:

混淆视听的分界面

您快捷就意识到难题所在。好的,你收到了显示器转向的通知UIApplicationWillChangeStatusBarOrientationNotification,然后在回调里面重新修正了文件的宽度:

- (void)notifyToAdjustTextView: (NSNotification *)notification

{

``switch ([UIDevice currentDevice].orientation) {

``case UIDeviceOrientationLandscapeLeft:

``case UIDeviceOrientationLandscapeRight:

``CGRect frame = self.textView.frame;

``frame.size.width = self.view.bounds.size.height - 60;

``self.textView.frame = frame;

``[self.textView sizeToFit];

``//more

``......

``}

}

本次再也运营你的代码,不管你怎么转车,文本都稳稳的呈现在主旨,你成功了!可是如此工作多少太拉杂了 —— 你做了如此多的劳作只是为着减轻一个搭架子难点。因而,那就提起到了大家几天前的核心:节制

在您新建的类型中总会存在二个Main.storyboard,让大家开辟那个文件,在xcode为大家成立好的调控器里面一贯抬高文本:

好玩的事板使用

点击选中textView,xcode为咱们提供了世间的多少个按键来给大家的控件增添节制。笔者在此给控件增加了间隔上方20pt、左右间距边缘30pt的羁绊,达成后点击Add 3 Constraints约束固然加上完结了:

充足封锁

几日前运维你的花色,尝试显示屏转向,无论怎么着文本总是间距上方20pt,左右离开30pt。使用约束让我们的做事进一层的简易不是吧?

抱有的动漫都以将一种类的计量展示开来的进度,节制动漫也不例外,那么约束是怎么总括的呢?以地点的根基限制demo为例,在大家为文本控件增添了自律之后,逸事板上的textView多了有个别直线,每一条直线代表七个束缚。双击那一个限定我们得以安装越多东西。

封锁的相关值

以那一个节制为例,全数的限定总计都依据那样的精打细算:TextView.Left = 1 * superView.Left 30

父视图的left坐标点地点延续基于0pt的职位实行计算的,因而与父视图的束缚总计总是以constant的值为结果。因而改良constant的深浅仁同一视复绘制分界面能够生出动画。

有关autolayout使用的更加的多教学能够看那篇文章。

动漫解析

在动工在此以前解析代码的兑现进程可以让我们对动漫片的贯彻有更清楚的刺探。能够见到,动漫组建在tableView的滚动条件上,那么监听tableView的轮转偏移是卡通完成的着力部分。(ps:为啥是kvo并不是一贯代理回调呢?当大家不能够保障工程中tableView的代理和卡通达成方是不是为同样对象时,使用kvo是最稳妥的抉择)

遵照顾客滑动的时候,我们得以总计出上边那多少个卡通效果:

导航栏标题淡出颜色渐变

导航栏标题上移

高粱红的背景层上移并隐瞒

倒计时音讯和文件消息上移展现在导航栏中

总结这一个消息小编写了部分必要使用的宏定义:

#define OBSERVERKEY @"contentOffset"            ///<    监听属性

#define MAXMOVE 64.0                            ///<    滚动最大值

#define TITLEMAXMOVE 16.0                       ///<    导航文本位移最大值

#define TOPANDBOTTOMCONSTANT 9                  ///<    红色背景上下间距约束值

正文的卡通能够分类为视觉差动漫,通过动用差别视图的层系在视图移位造成视觉动漫效果,因而大家能够先将动漫片中发生了视觉位移的视图的层系写出来,那样会支援咱们越来越好的落到实处动漫。

在动漫进度中,木色的背景层上移之后就不再彰显,因而青色的背景图层断定坐落于导航栏的水泥灰视图下方。而倒计时和文件消息上移之后依旧展现,能够不得不承认这么些视图处在导航栏视图上边。因而得以摄取那样一个档次:文本音信和倒计时间调节件 -> 导航栏 -> 深红背景。其他方面倘若在动漫中而且活动这一个文件音讯和倒计时间调节件,代码量明确超级多,所以大家得以把那些控件全体当作三个透明的UIView的子视图,然后简短的运动这么些UIView即可了。上面笔者放上一张官方文档中苹果对此导航栏调控器的视图档次图:

导航栏调整器档期的顺序图

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:简单实现侧滑功能,layout动画初体验

关键词: 澳门威利斯人 日记本 简单 功能 xib