美文网首页
iWatch开发 | iWatch页面转场的3种方式 学会导航,

iWatch开发 | iWatch页面转场的3种方式 学会导航,

作者: BinaryBang | 来源:发表于2020-03-17 20:26 被阅读0次

    一个应用是由很多个页面构建起来的,每个页面负责单一的功能,共同组成了整个app.
    页面之间的组合,有以下4种基本结构:

    • 1 模态结构
      模态结构,用于在界面上显示一个与本界面内容无关的内容.比如在商品信息浏览页面,点击购买时,如果没有登录,就会模态地展示登录页面.

    • 2 树形结构
      一个页面陈述了若干个主题,然后用若干个子页面分别陈述这些主题.这就是树形结构.

      比如本文配套的Demo,为了说明iWatch页面的跳转3种方式,首先用一个RootController展示了3个入口;每个入口点击后,将展示对应的自内容.

    • 3 平铺结构

      多个页面之间显示的是并列关系而不是包含关系的内容.多个页面共同组成了多屏区域的内容.

      比如天气应用,把每个关注的城市的天气信息单独放在一个页面.那么这些页面之间,就构成了兄弟关系.通过左右滑动,来切换显示不同的城市的天气信息.

    • 4 标签结构
      标签结构,也是多个页面之间显示的是并列关系而不是包含关系的内容.但是把多个页面,在空间上重叠到了一个页面,只有一屛的内容.通过点击下方的标签按钮来显示不同的内容.

    在iWatch界面中,由于内容空间有限,所以没有标签结构的页面.

    每种结构的页面之间,有着对应的转场方式:
    模态结构的页面,用Present方式转场;
    树形结构的页面,用Push方式转场;
    平铺结构的页面,用Reload方式转场;

    下面,我们分别介绍这3种转场方式.

    1 Present

    present的效果如下:

    转场效果:自下而上弹出
    是否有默认的返回按钮:有
    适合结构:模态结构
    代码实现:

    /*
    name:在Storyboard中,目标控制器的名字;
    context:需要传递给控制器的参数,该参数在控制器的- (void)awakeWithContext:(id)context方法中能获取到.
    */
    - (void)presentControllerWithName:(NSString *)name context:(nullable id)context;
    

    手动返回的方式:

    - (void)dismissController;
    

    2 Push

    push的效果如下:

    image

    转场效果:源控制器从左至右退出,显示目标控制器;
    是否有默认的返回按钮:有
    适合结构:树形结构
    代码实现:

    /*
    name:在Storyboard中,目标控制器的名字;
    context:需要传递给控制器的参数,该参数在控制器的- (void)awakeWithContext:(id)context方法中能获取到.
    */
    - (void)pushControllerWithName:(NSString *)name context:(nullable id)context;
    

    手动返回的方式:

    - (void)popController;
    

    3 Reload

    Reload的效果如下:

    转场效果:直接显示
    是否有默认的返回按钮:无
    适合结构:平铺结构
    代码实现:

    /*
    names:在Storyboard中,目标控制器的名字,可以指定多个,然后用平铺的方式展现.
    context:需要传递给控制器的参数的数组,与控制器名称一一对应.
    orientation:目标控制器平铺的方式,水平还是竖直的.
    pageIndex:跳转过去之后,首先显示的控制器的序号.
    */
    WKInterfaceController的类方法:
    + (void)reloadRootPageControllersWithNames:(NSArray<NSString*> *)names contexts:(nullable NSArray *)contexts orientation:(WKPageOrientation)orientation pageIndex:(NSInteger)pageIndex;
    

    手动返回的方式:
    首先用一个变量存储上一次源控制器的名字,然后用该方法重新跳转过去.

    注意:

    • 该方法没有返回按钮,对于不需要提供返回操作的跳转,非常适合用此方案.

    5 总结

    本文介绍了iWatch的3种页面转场方式,每个转场方式被设计出来,是为了适用于不同结构的页面之间的过渡.

    Present和Push中自带的返回按钮,是隐藏不掉的,如果不需要系统提供的返回按钮,那就只能使用Reload的方式来过渡了.

    项目源代码放到百度网盘上了:

    链接:https://pan.baidu.com/s/19DeagLAGN1mpx-c_pJb7vQ
    密码:48e7

    精彩推荐

    iOS | iWatch开发 没有转圈的数据请求 是没有灵魂的
    MySql | 存储过程(基础) 老板要我一天统计的数据,我3分钟做完了
    iOS | app签名 图解苹果app签名流程,深入分析 表弟:我也看懂了!
    密码学 | 数字签名 让情敌送情书,网友:心太大了...

    相关文章

      网友评论

          本文标题:iWatch开发 | iWatch页面转场的3种方式 学会导航,

          本文链接:https://www.haomeiwen.com/subject/jlyxyhtx.html