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

大家或许有更好的处理方案,可以一切探讨下。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • IOS开发笔记之禁用手势滑动返回功能的示例

    在ios7以后,苹果推出了手势滑动返回功能,也就是从屏幕左侧向右滑动可依返回上一个界面.这项功能在大多数情况下方便了用户的使用,但是有时候,我们并不需要手势返回功能,比如某个页面加入了左右滑动翻页功能,用户在使用的时候很容易就返回到上一级界面了. 禁用滑动返回手势需要在改界面的ViewController中添加如下代码: - (void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; // 禁用返回手势 if ([se

  • iOS app 右滑返回操作的两种方法

    前提条件,存在A和B两个页面,A是主界面,A push 到 B 方法一:如果B页面的返回按钮要用自定义的按钮(在iOS7中,如果使用了UINavigationController,那么系统自带的附加了一个从屏幕左边缘开始滑动可以实现pop的手势.但是,如果自定义了navigationItem的leftBarButtonItem,那么这个手势就会失效.) 在A界面: - (void)viewDidAppear:(BOOL)animated { self.navigationController.i

  • IOS开发向右滑动返回前一个页面功能(demo)

    在ios7中,苹果的原生态应用几乎都能够通过向右滑动来返回到前一个页面,这样可以避免用户在单手操作时用大拇指去点击那个遥远的返回键(iphone5的这种返回被吐糟为反人类设计).然而现在android的手机市场上几乎很难找到小于4寸屏的手机了,几乎所有的应用都是通过点击左上角的返回来退到上一个页面,如果单手拿一个大屏手机,我是觉得会发疯.为此花了点时间写了个向右滑动返回的demo. 效果如下图: 此图为点击第一个Activity跳转到第二个Activity后,向右滑动再返回到第一个Activit

  • iOS体验性优化之RTL适配右滑返回的实现

    简述 所谓RTL方向布局就是right to left direction.也就是界面中的元素总是按从右往左的方向进行排列布局,大部分国家的书写以及排列习惯都是从左往右,是LTR方向布局,而对于一些阿拉伯国家,文字的书写以及展示的顺序都是从右往左方向的. iOS的导航支持左滑手势返回上一个界面,这是果粉普遍喜欢的一个特性,iOS7之后的APP适配大多会保留这一特性,慢慢的大多用户已经有了这种操作习惯,对于iPhone的无虚拟键,这种操作也能增加比较友好的用户体验. 在公司新项目之前,没有考虑过多

  • iOS禁用右滑返回的两种方法

    本文实例为大家分享了iOS禁用右滑返回的具体代码,供大家参考,具体内容如下 方式一: 前提:如果使用的自定义UINavigationController基类,请不要在此基类里写相关的手势操作方法. 代码如下: -(void)viewDidAppear:(BOOL)animated{ if ([self.navigationController respondsToSelector:@selector(interactivePopGestureRecognizer)]) { self.naviga

  • iOS开发之导航栏各种右滑返回失效的解决方法汇总

    前言 众所周知iOS 的几乎全部页面都是需要右滑返回的,否则用户体验会大打折扣,但是在开发过程中经常会碰到某些页面右滑返回失效的情况,下面记录一下各种情况下右滑返回失效的解决方法. 下面话不多说了,来随着小编一起学习学习吧 自定义返回按钮时失效 当你重写 self.navigationItem.leftBarButtonItem 之后,自带的返回按钮就会被覆盖,右滑返回就会失效,解决办法只要加入下面这句代码即可. - (void)viewDidLoad { [super viewDidLoad]

  • Android实现类似IOS右滑返回的效果(原因分析及解决办法)

    使用类库SwipeBackLayout https://github.com/Issacw0ng/SwipeBackLayout 出现的问题: 1. 主Activity返回时黑屏或者返回只是看到桌面背景而没有看到上一个Activity界面 原因: 使用滑动返回需要在Activity的额主题中声明android:windowIsTranslucent=true,而该属性是设置Activity为是否为透明主题,当主Activity采用透明主题时,由于是app Activity栈中的第一个,所以滑动返

  • Android 实现右滑返回功能

    前言 右滑返回这个功能好像在iOS上蛮实用的,因为它的返回键在左上角,右手握持手机就得穿越整个屏幕去按它,不过对于大屏Android手机也是蛮实用的,右下角的返回键随着屏占比的增大按起来的难度也不小,就算有mBack这样的交互,多一个右滑返回也是极好的是吧? 上代码 SwipBackDemo 上效果图 SlidingPaneLayout 这个东西是Support V4中早就存在的,同样是侧滑,远没有侧滑菜单android.support.v4.widget.DrawerLayout被熟知,这玩意

  • Android右滑返回上一个界面的实现方法

    Android右滑返回上一个界面的实现方法 public class BaseActivity extends Activity implements OnTouchListener { public ProgressDialog progressDialog; public String states; public RequestQueue mQueue; /** 触摸时按下的点 **/ PointF downP = new PointF(); /** 触摸时当前的点 **/ PointF

  • Android中SwipeBack实现右滑返回效果

    现在有很多App支持右滑返回,比如知乎,效果比较赞. 于是自己对Activity和Fragment进行了继承,派生出SwipeBackActivity和SwipeBackFragment,用于对这种效果的实现,也就是只要继承这两个类就可以了. 效果如下 Activity Fragment Frgament的效果实现比Activity稍微简单,因为Activity要考虑到dectorView. 支持滑动的控件SwipeLayout,核心思路就是把原有的控件添加到支持滑动的控件中,SwipeLayo

  • Android仿微信右滑返回功能的实例代码

    先上效果图,如下: 先分析一下功能的主要技术点,右滑即手势判断,当滑到一直距离时才执行返回,并且手指按下的位置是在屏幕的最左边(这个也是有一定范围的),  这些可以实现onTouchEvent来实现. 接着就是返回时,有滑动效果,很显然这个是Acitivty切换动画实现的.好啦,分析完了就开干.下面上代码: @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()){ case Mot

  • android 右滑返回的示例代码

    类似于微信的右滑返回,在BaseActivity里利用dispatchTouchEvent()拦截右滑动作,利用setTranslationX()实现动画,在DecorView里添加View作为滑动时的左侧阴影. 渐进步骤: 设置activity背景透明 重写finish()等方法设置activity的跳转动画 重写dispatchTouchEvent()拦截 所需要 右滑动作 重写onTouchEvent()给根布局设置偏移量 添加滑动时上层activity的左侧阴影 滑动时关联下层activ

随机推荐