美文网首页
十二、iWatch常用控件基本用法之WKInterfacePic

十二、iWatch常用控件基本用法之WKInterfacePic

作者: Dosun | 来源:发表于2017-03-14 16:51 被阅读75次

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.png

C. 代码如下

#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.gif

B. Storyboard 设置如下图

pickStack1.png

C. 代码如下

@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, 有待进一步完善!!

相关文章

网友评论

      本文标题:十二、iWatch常用控件基本用法之WKInterfacePic

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