美文网首页
十二、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