AppleWatch开发入门五——菜单控件的使用

AppleWatch开发入门五——菜单控件的使用

一、简介

        菜单也是WatchOS中一个重要的交互方式,限于Watch的屏幕尺寸,若将所有用户交互控件都紧密的排列进展示的UI中,那样难免会使用户操作困难,也会影响界面布局的简洁美观。因此,WatchOS的菜单机制是一层覆盖在屏幕上的交互界面,有如下的特点:

1、菜单是内置于InterfaceController中的,不需显式处理,只需对齐菜单项进行添加设置。

2、菜单最多可以容乃四个选项按钮。

3、通过重按可以呼出和隐藏菜单。

二、创建菜单的两种方式

1、通过storyBoard创建

        在storyBoard中,我们可以将一个菜单控件拖入到interfaceController中:

在Menu中可以添加一些item,每个item都可以设置图片和文字:

图片的设置分为,自定义和系统两种,我们可以使用自己的图片作为菜单的图片,也可以使用系统为我们提供的一些图片,系统的图片参数是一个枚举,值如下:

public enum WKMenuItemIcon : Int {
    
    case Accept // checkmark
    case Add // '+'
    case Block // circle w/ slash
    case Decline // 'x'
    case Info // 'i'
    case Maybe // '?'
    case More // '...'
    case Mute // speaker w/ slash
    case Pause // pause button
    case Play // play button
    case Repeat // looping arrows
    case Resume // circular arrow
    case Share // share icon
    case Shuffle // swapped arrows
    case Speaker // speaker icon
    case Trash // trash icon
}

这些枚举中提供了一些我们常用的功能图标。

菜单按钮的触发方法,我们可以通过拖拽Action的方式来添加,在Xcode7的模拟器中,我们使用command+shift+2可以切换到重按模式,模拟器效果如下:

2、通过代码来添加菜单选项

        前面提到过,菜单是内含于InterfaceController中的一个控件,在Interface中我们可以调用一些方法来添加菜单按钮,相关方法如下:

    //添加一个菜单按钮,图片自定义
    public func addMenuItemWithImage(image: UIImage, title: String, action: Selector)
    public func addMenuItemWithImageNamed(imageName: String, title: String, action: Selector)
    //添加一个系统图片的按钮
    public func addMenuItemWithItemIcon(itemIcon: WKMenuItemIcon, title: String, action: Selector)
    //清除所有按钮
    public func clearAllMenuItems()

示例代码如下:

override func awakeWithContext(context: AnyObject?) {
        super.awakeWithContext(context)
      
        self.addMenuItemWithItemIcon(WKMenuItemIcon.Share, title: "分享", action:Selector("share"))
        self.addMenuItemWithItemIcon(WKMenuItemIcon.Decline, title: "取消", action: Selector("cancle"))
        self.addMenuItemWithItemIcon(WKMenuItemIcon.Add, title: "添加", action:Selector("add"))
    }

    func share(){
        print("分享")
    }
    func add(){
        print("add")
    }
    func cancle(){
        
    }

专注技术,热爱生活,交流技术,也做朋友。 ——珲少 QQ群:203317592

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CRPER折腾记

Angular 2 + 折腾记 :(10) 初步了解动画,以及一步一步写个动画效果

ng2.x动画相关的api是并入@angular/core这个核心模块的,在angular4之后开始独立

8220
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(六)响应式布局

1、固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。

14220
来自专栏前端知识分享

第58天:简单焦点轮播图

9530
来自专栏大数据钻研

css print

最近做表单打印,遂整理了一些打印相关的内容。 说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数...

32230
来自专栏陈满iOS

程序员修养·Markdown语法学习手册

使用 *,+,- 表示无序列表(这三个的效果都是一样),注意符号与后续文本要空格。

12410
来自专栏互联网杂技

40个重要的HTML 5面试问题及答案

目录 介绍 SGML、HTML、XML和XHTML之间的关系? 什么是HTML 5? 如果我不输入<!DOCTYPE HTML>,HTML 5能工作吗? 哪些浏...

624130
来自专栏青玉伏案

iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

  在公司做项目一直使用Storyboard,虽然有时会遇到团队合作的Storyboard冲突问题,但是对于Storyboard开发效率之高还是比较划算的。在之...

22280
来自专栏姬小光

小鸡君の前端小姜汤【第015期】- 绝对定位

前面我们学过了“表格布局”(回复 007 或 7)的简单栗子,如果大家用心尝试的话,应该已经可以做出一些粗糙的页面了。

8410
来自专栏web编程技术分享

js弹窗小例子

33980
来自专栏守候书阁

css写作建议和性能优化小结

还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于cs...

10820

扫码关注云+社区

领取腾讯云代金券