Just a Computer Graphics Studio & My Life

[iOS] WatchKit 與 UIKit

Apple Watch即將上市,對iOS開發者而言,無疑是個一定要了解的全新裝置,特別是在使用者體驗上,如何設計適合小螢幕的界面。這種改變從電腦轉移到手機已經歷過一次,如今要從手機移轉到手錶,螢幕可是越變越小呢~

手機上所呈現的界面是透過UIKit framework,而手錶所呈現的界面則是透過WatchKit framework,這兩者有相似的地方,也有許多不一樣的地方

WatchKit 與 UIKit

基本上,WatchKit是UIKit的簡化版,之後Apple應該會根據需求新增修改些property或method。一般而言,手錶的功用是瀏覽重於互動,所以framework少有互動的設計。

WatchKit的元件

WKInterfaceObject繼承於NSObject。WKInterfaceImage繼承於WKInterfaceObject、WKInterfaceLabel繼承於WKInterfaceObject,其餘依此類推,都是繼承於WKInterfaceObject。

其property與method也很陽春,只有一些基本的設定。

  • WKInterfaceObject

#import <Foundation/Foundation.h>
#import <CoreGraphics/CoreGraphics.h>
#import <WatchKit/WKDefines.h>

WK_CLASS_AVAILABLE_IOS(8_2)
@interface WKInterfaceObject : NSObject

- (instancetype)init NS_UNAVAILABLE;

- (void)setHidden:(BOOL)hidden;
- (void)setAlpha:(CGFloat)alpha;

- (void)setWidth:(CGFloat)width;   // setting to 0 means use natural size. ignored for table
- (void)setHeight:(CGFloat)height;

@property(nonatomic,readonly,copy) NSString *interfaceProperty;   // same as controller's property name

@end

@interface WKInterfaceObject (WKAccessibility)

- (void)setAccessibilityLabel:(NSString *)accessibilityLabel;
- (void)setAccessibilityHint:(NSString *)accessibilityHint;
- (void)setAccessibilityValue:(NSString *)accessibilityValue;

@end
  • WKInterfaceImage

#import <Foundation/Foundation.h>
#import <WatchKit/WKDefines.h>
#import <WatchKit/WKInterfaceObject.h>

@class UIImage;

WK_CLASS_AVAILABLE_IOS(8_2)
@interface WKInterfaceImage : WKInterfaceObject

- (void)setImage:(UIImage *)image;
- (void)setImageData:(NSData *)imageData;
- (void)setImageNamed:(NSString *)imageName;

- (void)startAnimating;	      // play all images repeatedly using duration specified in interface description
- (void)startAnimatingWithImagesInRange:(NSRange)imageRange duration:(NSTimeInterval)duration repeatCount:(NSInteger)repeatCount; // play subset of images for a certain number of times. 0 means repeat until stop
- (void)stopAnimating;

@end

我們很驚訝地發現,居然沒有frame這個特性!也就是我們無法設定其座標(但可設定長與高),也無法使用Auto Layout。實際上,WatchKit界面元件只能在格子中透過邊界相對位置來放置。

還有許多特性需要好好了解,因為本來就不該把手錶當作手機來設計,而簡化自然有其好處!持續去研究吧~

參考:WatchKit – NSHipster。

Advertisements

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: