iOS体验性优化之RTL适配右滑返回的实现
简述
所谓rtl方向布局就是right to left direction。也就是界面中的元素总是按从右往左的方向进行排列布局,大部分国家的书写以及排列习惯都是从左往右,是ltr方向布局,而对于一些阿拉伯国家,文字的书写以及展示的顺序都是从右往左方向的。
ios的导航支持左滑手势返回上一个界面,这是果粉普遍喜欢的一个特性,ios7之后的app适配大多会保留这一特性,慢慢的大多用户已经有了这种操作习惯,对于iphone的无虚拟键,这种操作也能增加比较友好的用户体验。
在公司新项目之前,没有考虑过多语言rtl的适配方案,开始做的时候ui方面基本实现用一套布局代码支持rtl的两种布局方向。但是真正拿在手里把玩体验时才真切的感受到没有侧滑返回的rtl有多么的不爽。几经查找并没有找到可参考的合适方案,可能国内做多语言适配的技术圈本身就小,适配rtl的就显得更加的稀有了。
希望能帮助到有需要的人,或者有更好的思路可以联系共同探讨。
思路
查不到可参考的资料,只能自己想一想比较合适的方式,恰好在实现一个首页列表跳转详情页时候,解决特殊的转场动画,突然就有了灵感。可能应该有更好的实现方式,现将我的方式展现给大家。
解决方案
1、关键词: uipercentdriveninteractivetransition finishinteractivetransition cancelinteractivetransition
2、关键方法:updateinteractivetransition:
3、实现方式:暂时以文字代码描述,具体可参考之前共享的rtl解决方案,里面有相关源码,末尾处会贴出路径。
具体实现
1、处理navigation代理
使用runtime方式或者基类方式,viewdidappea每次设置nav的代理为自己,viewdiddisappear清空代理(yoins新版中使用rtl框架中的分类)
- (void)rtl_viewwillappear:(bool)animated { [self rtl_viewwillappear:animated]; self.navigationcontroller.delegate = self; } - (void)rtl_viewwilldisappear:(bool)animated { [self rtl_viewwilldisappear:animated]; if (self.navigationcontroller.delegate == self) { self.navigationcontroller.delegate = nil; } }
2、右滑手势添加
基类初始化时,rtl环境下添加右滑手势,关闭左滑手势,实现最基本的右滑返回。
navigation 中实现
- (void)rtl_viewwillappear:(bool)animate { // self.view.backgroundcolor = [uicolor whitecolor]; // // do any additional setup after loading the view. if (![[rtlmanager appearance]rtl]) { self.interactivepopgesturerecognizer.delegate = self; } self.interactivepopgesturerecognizer.enabled = ![[rtlmanager appearance]rtl]; [self rtl_viewwillappear:animate]; }
3、实现手势交互(重点)
基类vc中 增加一个基础属性,保存临时转场上下文
@property (strong ,nonatomic)uipercentdriveninteractivetransition *transitoncontext;
在vc右滑动作触发事件中,处理转场动画进度
- (void)handlepangesture:(uiscreenedgepangesturerecognizer *)pan { // nslog(@"_____%zd-----%zd",self.navigationcontroller.childviewcontrollers.count,self.navigationcontroller.viewcontrollers.count); // nslog(@"----%@",nsstringfromcgpoint([pan translationinview:self.view])); cgfloat progress = abs([pan translationinview:self.view].x) / (self.view.bounds.size.width * 1.0); progress = min(1.0, max(0.0, progress)); if (pan.state == uigesturerecognizerstatebegan) { // 创建过渡对象,弹出viewcontroller self.transitoncontext = [[uipercentdriveninteractivetransition alloc] init]; [self.navigationcontroller popviewcontrolleranimated:yes]; }else if (pan.state == uigesturerecognizerstatechanged) { // 更新 interactive transition 的进度 [self.transitoncontext updateinteractivetransition:progress]; }else if (pan.state == uigesturerecognizerstateended || pan.state == uigesturerecognizerstatecancelled) { // 完成或者取消过渡 if (progress > 0.5) { [self.transitoncontext finishinteractivetransition]; } else { [self.transitoncontext cancelinteractivetransition]; } self.transitoncontext = nil; } } - (id<uiviewcontrollerinteractivetransitioning>)navigationcontroller:(uinavigationcontroller *)navigationcontroller interactioncontrollerforanimationcontroller:(id<uiviewcontrolleranimatedtransitioning>)animationcontroller{ if (self.transitoncontext) { return self.transitoncontext; } else { return nil; } }
最后就是实现自定的各种转场动画了,可以简单模仿系统的滑动切换转场,具体处理在下面vc实现的方法中,返回一个处理转场的实例即可
- (id<uiviewcontrolleranimatedtransitioning>)navigationcontroller:(uinavigationcontroller *)navigationcontroller animationcontrollerforoperation:(uinavigationcontrolleroperation)operation fromviewcontroller:(uiviewcontroller *)fromvc toviewcontroller:(uiviewcontroller *)tovc
4、贴一个简单的动画处理类
@implementation rtlpushanimation
- (nstimeinterval)transitionduration:(id<uiviewcontrollercontexttransitioning>)transitioncontext { return 0.5; } - (void)animatetransition:(id<uiviewcontrollercontexttransitioning>)transitioncontext { uiviewcontroller *fromvc = [transitioncontext viewcontrollerforkey:uitransitioncontextfromviewcontrollerkey]; uiviewcontroller *tovc = [transitioncontext viewcontrollerforkey:uitransitioncontexttoviewcontrollerkey]; uiview *container = transitioncontext.containerview; uiview *tmpv = [fromvc.view snapshotviewafterscreenupdates:yes]; [container addsubview:tovc.view]; tovc.view.transform = cgaffinetransformmaketranslation(-tovc.view.bounds.size.width, 0); [container addsubview:tmpv]; [uiview animatewithduration:[self transitionduration:transitioncontext] animations:^{ tmpv.transform = cgaffinetransformmaketranslation(tovc.view.bounds.size.width, 0); tovc.view.transform = cgaffinetransformidentity; } completion:^(bool finished) { [tmpv removefromsuperview]; [transitioncontext completetransition:yes]; }]; } @end @implementation rtlpopanimation - (nstimeinterval)transitionduration:(id<uiviewcontrollercontexttransitioning>)transitioncontext { return 0.5; } - (void)animatetransition:(id<uiviewcontrollercontexttransitioning>)transitioncontext { uiviewcontroller *fromvc = [transitioncontext viewcontrollerforkey:uitransitioncontextfromviewcontrollerkey]; uiviewcontroller *tovc = [transitioncontext viewcontrollerforkey:uitransitioncontexttoviewcontrollerkey]; uiview *container = transitioncontext.containerview; uiview *tmpv = [fromvc.view snapshotviewafterscreenupdates:yes]; [container addsubview:tovc.view]; tovc.view.transform = cgaffinetransformmaketranslation(tovc.view.bounds.size.width, 0); [container addsubview:tmpv]; [uiview animatewithduration:[self transitionduration:transitioncontext] animations:^{ tmpv.transform = cgaffinetransformmaketranslation(-tovc.view.bounds.size.width, 0); tovc.view.transform = cgaffinetransformidentity; } completion:^(bool finished) { [tmpv removefromsuperview]; tovc.view.transform = cgaffinetransformidentity; [transitioncontext completetransition:!transitioncontext.transitionwascancelled]; }]; } @end
end
大家或许有更好的处理方案,可以一切探讨下。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。