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

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

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


一、简介


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


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


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


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


二、创建菜单的两种方式


1、通过storyBoard创建


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


image.png


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


image.png


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


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可以切换到重按模式,模拟器效果如下:


image.png


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(){

     

   }

目录
相关文章
|
5月前
|
索引
pyqt5界面化开发---抽屉布局界面的开发
pyqt5界面化开发---抽屉布局界面的开发
|
7月前
|
开发框架 前端开发 JavaScript
在Winform界面中使用自定义控件,丰富界面的效果处理
在Winform界面中使用自定义控件,丰富界面的效果处理
|
7月前
|
存储 设计模式 开发框架
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(7) -- 图标列表展示和选择处理
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(7) -- 图标列表展示和选择处理
|
7月前
|
前端开发 C# 容器
WPF/C#:实现导航功能
WPF/C#:实现导航功能
171 0
|
C# C++
C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换。 wpf实现的话,我的办法是用一个tabcontrol,修改tabcontrol的样式模板,首先将控件的TabStripPlacement设置为left使tabcontrol的item header部分靠左内容靠右,然后用一个Expander将TabPanel包住实现可折叠菜单效果,最后就是把用到的控件样式修改一下即可。
5134 0
|
UED Windows Android开发
[UWP]浅谈按钮设计
原文:[UWP]浅谈按钮设计 一时兴起想谈谈UWP按钮的设计。 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素。好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI。而且按钮通常不会影响布局,小小的按钮无论怎么改也不会对性能有多大影响,所以不少注重细节的设计师最为热衷修改按钮。
1535 0
|
C#
WPF中的菜单模板
原文:WPF中的菜单模板 资源字典代码如下: ...
1240 0
|
数据安全/隐私保护