CS193p Lecture 7 - Views, Gestures

Views

如何繪製自定義圖像

 

Gestures

如何處理用戶手勢操做

 

Views

一、它是基本的構造塊，表明屏幕上一塊矩形區域，定義了一個座標空間，在此空間中能夠繪製，能夠添加觸控事件；

二、它是分層級的，能夠在視圖中嵌套視圖；

三、一個視圖只有一個父視圖，但能夠有多個子視圖，視圖就是一個個的矩形，能夠重疊；

四、UIWindow，全部視圖都展現在其中

iOS只有一個UIWindow（不像Mac application）

self.view.window

五、

添加子視圖

(void)addSubview:(UIView *)aView;

移除子視圖

(void)removeFromSuperview;

六、每一個UIViewController都有一個屬性

@property (nomatic, strong) UIView *view;

self.view是UIViewController的頂級UIView

 當View Controller建立時，這個view就被關聯起來了

如圖，這個名爲view的outlet就關聯到View

七、經常使用的初始化模版

- (void)setup{...}
- (void)awakeFromNib{ [self setup];}
- (void)initWithFrame:(CGRect)aRect{
    self = [super initWithFrame:aRect];
    [self setup];
    return self;
}

 － 初始化的操做在setup方法中定義；

 － 而後首先是要重寫指定初始化方法，在其中調用setup；

 － 其次，須要在awakeFromNib中也調用setup，緣由是當一個UIView從storyboard中釋放時，調用的是awakeFromNib；若是是經過alloc、init...來初始化的話，那麼調用的是指定初始化方法initWithFrame；aRect制定了在父視圖中的相對位置；

 

 CGFloat

　　浮點數，用來表示圖像大小、座標

CGPoint

　　CGFloat x, y;

CGSize

　　CGFloat width, height;

CGRect

　　CGPoint origin;　　CGSize size;

座標原點在左上角；

繪製的單位都是點，而不是像素點； 

（Retina屏每一個點＝2像素點，非Retina屏每一個點＝1像素點）

 

3個與location和size有關的屬性

(CGRect) frame：視圖在父視圖座標中的位置和大小；

(CGRect) bounds：視圖在視圖自己座標中的位置和大小；（位置就是原點（0，0））

(CGPoint) center：視圖在父視圖座標中的中心點；

注意：

frame和bounds的差異不單單是原點不同，當view旋轉時，要包容視圖的矩形變的比原視圖要大，全部frame能夠這樣理解：它是在你的父視圖座標系中包含你的一個矩形； 

 

Create view in XCode

先拖出一個通用視圖，而後到標示符檢察器（identity inspector），修改它的類；（與建立一個自定義ViewController相似）

Create view in code

alloc & initWithFrame: (CGRect  frame)

或者 alloc & init （等同於 frame 爲 CGRectZero，CGRectZero是原點、長、寬都爲0）

 

drawRect : is invoked automaticall, never call it directly!!

drawRect是由系統調用的，用戶不要自行調用；

When a view needs to be redrawn,use:
- (void)setNeedsDisplay;

 

一、Quartz庫：Core Graphics

不少C函數，都是以CG開頭，以context上下文做爲第一參數

二、UIBezierPath類

能夠繪製複雜形狀組成一個大大路徑，而後對其進行描邊（stroke）或者填充（fill）

 

Core Graphics的基本流程

1. Get a context to draw into

2. Create path

3. Set colors, fonts, textures, linewidths, linecaps, etc.

4. Stroke or fill above-created paths

UIBezierPath類封裝了上述所有過程

 

第一步：設置context上下文（至關於一張畫布）

若是使用UIBezierPath來繪製，則不須要獲取context，系統會自動獲取；

若不得已要用CG函數來繪製，獲取context的方法：

CGContextRef context = UIGraphicsGetCurrentContext();

舉個🌰

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, self.bounds.size.width, self.bounds.size.height);
CGContextRotateCTM(context, M_PI);

 

第二步：繪製好 path

UIBezierPath *path = [[UIBezierPath alloc] init];

[path moveToPoint:CGPointMake(75, 100)];

[path addLineToPoint:CGPointMake(160, 150)];

[path addLineToPoint:CGPointMake(10, 150)];

[path closePath];

 

第三步：設置path的屬性（包括填充fill和描邊stroke）

[[UIColor greenColor] setFill];

[[UIColor redColor] setStroke];

 

第四步：將path屬性賦予path

[path fill];

[path stroke];

 

注意到：只有執行完第四步，才真正繪製完成；若只到第二步，此時的path只是一條沒有粗細、顏色的路徑，因此頁面上海看不到；

 

Draw Text

NSAttributedString *text = ...;

[text drawAtPoint:(CGPoint)p];

 

Draw Image

UIImage *image = ...;

[image drawAtPoint:(CGPoint)p];

[image drawInRect:(CGRect)r];　　// 拉伸圖片以適應區域

[image drawAsPatternInRect:(CGRect)patRect];　　//平鋪圖片以充滿區域

 

UIGestureRecognizer

是全部手勢操做類的基類，沒法實例化，咱們用到的都是它的子類

一、Adding a gesture recognizer to a UIView;

二、A method to "handle" that gesture when it happens;

 

UIPanGestureRecognizer

translationInView:

velocityInView:

setTranslation:inView:

 

@property (readonly) UIGestureRecognizerState state;

Began、Changed、Ended: for continus gestures like a pan(拖動) or pinch(捏合)

Recognized:for discrete gestures like a tap(點擊) or swipe(滑動)

Failed、Canneled：手勢操做中來電話等 

 

UIPinchGestureRecognizer（捏合、縮放）

scale：表示縮放比例，初始值1.0

velocity：縮放速度

UIRotationGestureRecognizer（旋轉）

rotaton：表示旋轉角度

velocity：旋轉速度

UISwipeGestureRecognizer（滑動）

@property UISwipeGestureRecognizerDirection direction;

@property NSUInteger numberOfTouchesRequired;