您的当前位置:首页正文

六、iWatch常用控件基本用法之WKInterfaceTabl

来源:要发发知识网

本文将介绍WKInterfaceTable以及简单的用法,后续我用WKInterfaceTable用一个小案例,敬请期待。

一、简介

若想设置表格和展示相应数据,请实现如下几步骤

  1. 在storyboard中,自定义 一个或多个Table Row Controller(iphone叫 cell,后面都叫它cell)类型。
  2. 为每cell 用定义数据类管理它。
  3. 在运行时,告诉表格多少行cell 要展示。
  4. 用自定义数据类去配置每一个行cell内容。

注意

一定不能用代码实例化对象,而是将控件定义在storyboard中,然后从storyboard中拉线到controller中,如下面的格式。

@property (weak, nonatomic) IBOutlet WKInterfaceTable* myTable;

当实例化 interface controller时,WatchKit已经创建一个新的interface controller对象和为myTable初始化。你就可以 awakeWithContext:(id)context;方法中修改table;

二、定义cell

当在storyboard中增加表格,配质表格中的cell。 一个cell自定义自己的样式,表格只是初始化一行,你可以增加更多的行数。

在运行时,每一个cell 要配置如下内容
1.每一个cell要有Identifier, RowType用的是Identifier;
2.每一个cell 一定要有一个相关联的类,在运行时,表格会为你创建每一个cell实例。

为cell设置内容,在 library中拖控件到row’s group中,对所有cell,都是用group作为类控件,你也可以创建垂直和水平的 group,如果是那样的 group,增加控件去展示cell。下图Figure 1.展示如何cell中加控件。


Figure 1.png

Figure 1.

在运行时,每一个cell要管理它的内容,在代码中controller 作为cell 的代理和存储要设置的cell。Listing 1 展示自定义的cell MyRowController.

Listing 1

自定cell类
@interface MyRowController : NSObject
@property (weak, nonatomic) IBOutlet WKInterfaceLabel* itemLabel;
@property (weak, nonatomic) IBOutlet WKInterfaceImage* itemImage;
@end

三、在运行时设置表格的cell

用 setRowTypes:或者 setNumberOfRows:withRowType: 方法设置多少行。以上两个方法是表格中增加不同的cell。如果所有的cell类型相同,请用setNumberOfRows:withRowType:方法,如果你要设置多个cell,请用setRowTypes:方法,row type是用storyboard设置的identifier。当表格增加cell,WatchKit 在WatchKit extension中实例化,新增加的cell被存储在表格对象中,你可以得到cell 通过rowControllerAtIndex:方法,用此方法可以重新设置每一个cell。

Listing 2 展示 如何配置cell 在 interface controller里 todoListTable属性是自定的属性,继承自WKInterfaceTable。当得到数据源,可以通过setNumberOfRows:withRowType:来设置cell行数。如下事例中,设置cell中label和image。

Listing 2

Configuring the rows of a table
- (void)loadTodoItems { 
// 得到数据
NSArray* items = [self fetchTodoList]; 
// 设置表格行数
[self.todoListTable setNumberOfRows:items.count withRowType:@"MainRowType"]; 
NSInteger rowCount = self.todoListTable.numberOfRows;
 // 为每一个表格行的label和image 赋值。 
for (NSInteger i = 0; i < rowCount; i++) 
{ 
// 得到每一行cell
 MyRowController* row = [self.todoListTable rowControllerAtIndex:i];
 [row.itemImage setImage:items[i].image]; 
[row.itemLabel setText:items[i].title]; 
}}

当要想更新表格,请再次调用setRowTypes:或者 setNumberOfRows:withRowType:方法用新的数据源, 调用上面的方法强制表格抛弃旧的行和创建新的行。如果要插入行数而不是移除旧的行数,请用insertRowsAtIndexes:withRowType:方法。

四、点击cell响应事件

在storyboard中,在cell 和新storyBoard 中联线, 当用户点击cell,在屏幕上,会自动跳转到新控制器上。若要传递数据,请重写contextForSegueWithIdentifier:inTable:rowIndex:,将会返回数据给选中的行。或者,可以 table:didSelectRowAtIndex:方法,用上面的方法去展示不同的控制器或者其他相关的任务。

注意

Row controllers 包括的控制,如switches, sliders, 和 buttons ,一定要实现其action方法去实现交互控制,点击switches, sliders, and buttons不会触发table:didSelectRowAtIndex:方法。

五、常用方法

@interface WKInterfaceTable : WKInterfaceObject

//设置table行的类型,可以设置多个table 样式
- (void)setRowTypes:(NSArray<NSString*> *)rowTypes;                                         // row names. size of array is number of rows

//设置行数 table , rowType 是在storyBoard 中的 identifier
- (void)setNumberOfRows:(NSInteger)numberOfRows withRowType:(NSString *)rowType; // repeating row name

@property(nonatomic,readonly) NSInteger numberOfRows;

//得到cell,
- (nullable id)rowControllerAtIndex:(NSInteger)index;

//插入cell 
- (void)insertRowsAtIndexes:(NSIndexSet *)rows withRowType:(NSString *)rowType;

//移除cell
- (void)removeRowsAtIndexes:(NSIndexSet *)rows;

//滚动cell到那一行
- (void)scrollToRowAtIndex:(NSInteger)index;

//自动跳转到一个控制器中
- (void)performSegueForRow:(NSInteger)row WK_AVAILABLE_WATCHOS_ONLY(3.0);

@end

六、简单用法

自定义一个类OLICell,继承自NSObject,注意在OLICell导入#import <WatchKit/WatchKit.h>不然会报错。同时要修改storyboard 中class,如Figure 2.红色标记3处。

Figure 2..png
@interface InterfaceController()

@property (unsafe_unretained, nonatomic) IBOutlet WKInterfaceTable *table;

@end


@implementation InterfaceController

- (void)awakeWithContext:(id)context {
    [super awakeWithContext:context];
    //设置数据源
    NSArray *datas = @[@"中国",@"朝鲜",@"韩国",@"美国"];
    //设置行数
     [self.table setNumberOfRows:datas.count withRowType:@"cell"];
    // Configure interface objects here.
    
    for (int i = 0; i < datas.count; ++i)
    {
        OLICell *cell = [self.table rowControllerAtIndex:i];
        [cell.CountryLabel setText:datas[i]];
    };
    
}
@end

如下图Figure 3.是代码的效果。


Figure 3..png

over! 有不足的地方,请帮忙指正,感谢!!