iWatch常用控件基本用法之是用来滚动和选择的 ,项目中可能由文本和图片或者两个都包含,用户先点击选择器,然后滚动 crown,然后再点击我们要选择的内容,一个控制器可以有多个选择器,每一个选择器有自己的内容。
一、简介
选择器有多种展示的样式
-
列表 展示一个竖直的列表,列表每行都有自己的文字和可以选择的图片。如果列表中有图片,图片将在文字的后面。列表的多个行可能在一个屏幕上,转动crow来展示每一个列表
-
从上向下展示 展示选择器的内容是从下向展示,每次展示内容都是图片,转动crown旧的图片消失,新的图片出现。
-
图片帧动画 展示动画以帧动画的形式,每行展现的内容中有上一个内容和现在的内容,转动crown来切换动画。
当用户设置新的值,WatchKit调用列表的行为方法去报告新的值,如下是选择器用户交互的方法:
Code Listing 1
- (IBAction)pickerAction:(NSInteger)index;
在界面控制器中,用上面的方法得到选择器的新值,可以修改该方法的名字,当从storyboard中设置控件,在代码中设置交互事件。通过setItems:
方法给选择器设置数据源。
不要用代码进行初始化代码,而是在storyboard中设置控件,并拖线到控制器中,如code Listing 2所示。
Code Listing 2
@property (weak, nonatomic) IBOutlet WKInterfacePicker* myPicker;
在初始化控制器的时候,WatchKit已经创建好选择器实例,可以通过代码修改选择器特。
二、WKInterfacePicker方法和属性
@interface WKInterfacePicker : WKInterfaceObject
//聚焦 用于多个选择器或者选择器放在多可滚动的视图中
- (void)focus;
//当滚动Crown时,将失去聚焦
- (void)resignFocus;
// 根据下标拿到选择器那个item
- (void)setSelectedItemIndex:(NSInteger)itemIndex;
//设置选择器的内容
- (void)setItems:(nullable NSArray<WKPickerItem *> *)items;
//设置选择器与一个或多个interface对象支持帧动画,滚动crown去调节展示帧动画
- (void)setCoordinatedAnimations:(nullable NSArray<WKInterfaceObject<WKImageAnimatable> *> *)coordinatedAnimations;
//设置选择器能否聚焦。
- (void)setEnabled:(BOOL)enabled;
@end
三、WKPickerItem方法和属性
@interface WKPickerItem : NSObject <NSSecureCoding>
// 在选择器中展示 标题
@property (nonatomic, copy, nullable) NSString *title;
//当聚焦时,出现的标题
@property (nonatomic, copy, nullable) NSString *caption;
//设置辅助图片 在选择器列表中,图片大小是:13×13pt
@property (nonatomic, copy, nullable) WKImage *accessoryImage;
//给选择器选择的自定义图片,用自定义图片来代替 “title + accessory image ”更加灵或者展示叠放或者连续风格。
//图片将被放大和居中以适应选择器内容。
@property (nonatomic, copy, nullable) WKImage *contentImage;
@end
四、选择器 list 类型
A. 效果图如下
PickerList.gif
B. Storyboard 设置如下图,Storyboard 中只有设置Focus style 设置成outline with caption, WKPickerItem 设置caption 才会有效果。
pickList1.pngC. 代码如下
#import "InterfaceController.h"
@interface InterfaceController()
@property (unsafe_unretained, nonatomic) IBOutlet WKInterfacePicker *picker;
@end
@implementation InterfaceController
- (void)awakeWithContext:(id)context {
[super awakeWithContext:context];
}
- (void)willActivate {
// This method is called when watch view controller is about to be visible to user
[super willActivate];
//1.设置数组
NSMutableArray<WKPickerItem *> *mArr = [NSMutableArray array];
//2.设置WKPickerItem
WKPickerItem *item1 = [[WKPickerItem alloc] init];
item1.title = @"1";
item1.caption = @"1-caption";
[mArr addObject:item1];
WKPickerItem *item2 = [[WKPickerItem alloc] init];
item2.title = @"2";
item2.caption = @"2- caption";
[mArr addObject:item2];
WKPickerItem *item3 = [[WKPickerItem alloc] init];
item3.title = @"3";
item3.caption = @"3- caption";
[mArr addObject:item3];
//3.设置选择器的内容
[self.picker setItems:mArr];
[self.picker setSelectedItemIndex:0];
// Configure interface objects here.
}
- (void)didDeactivate {
// This method is called when watch view controller is no longer visible
[super didDeactivate];
}
- (IBAction)pickerClick:(NSInteger)value
{
NSLog(@"选择器停止时,会走此方法");
}
@end
五、选择器 stack 类型
A. 效果图如下
PickerStack.gifB. Storyboard 设置如下图
pickStack1.pngC. 代码如下
@interface InterfaceController()
@property (unsafe_unretained, nonatomic) IBOutlet WKInterfacePicker *pickStack;
@end
@implementation InterfaceController
- (void)awakeWithContext:(id)context {
[super awakeWithContext:context];
//1.定义数组
NSMutableArray <WKPickerItem*> *mArr = [NSMutableArray array];
//2.给数组中添加 item
for (int i = 1; i < 8; ++i)
{
NSString *imageName = [NSString stringWithFormat:@"picker%zd",i];
WKPickerItem *item = [[WKPickerItem alloc] init];
//设置选择器图
item.contentImage = [WKImage imageWithImageName:imageName];
[mArr addObject:item];
}
//3.设置选择器的数据源方法
[_pickStack setItems:mArr];
}
#pragma mark - 按钮点击事件
- (IBAction)pickStackClick:(NSInteger)value
{
NSLog(@"滚动视图到达此处时,会调用此方法");
}
@end
over, 有待进一步完善!!
网友评论