iOS - Training (6) - UI

與Android相同，iOS一切view的源頭為UIView。

設定 -----
開啓storyboard視窗後，開啓右邊的inspector視窗，可以針對view作設定：

• 基本大小色彩等初始化設定
• 與superview作等比例大小自動切換設定
• 本體等比例大小自動切換設定
• 自動大小切換時的重心座標設定

-----
繪圖 -----
原則：

1. 定義路徑（想要繪畫的view）。線寬、位移、旋轉。
2. 設定顏色
3. 填色
4. 回到1.或結束

Example_畫方格：

• New一個繼承UIView的物件，並重寫drawRect（與 Android的onDraw相同）

-(void) drawRect:(CGRect)rect {     CGRect myRect = CGRectMake(10, 10, 60, 80); //定義路徑     [[UIColor cyanColor] set]; //設定填滿顏色     UIRectFile(myRect); //填滿     [[UIColor blackColor] set]; //設定框架顏色     UIRectFrame(myRect); //畫框 }

Example_幾何圖：

• 在storyboard中，拉入一個UIView和Button
• 將Button action "Touch Up Inside"與自行定義的方法moveObject作連結

-(IBAction)moveObject:(id)sender {    CGPoint originalCenter = targetView.center;    originalCenter = CGPointMake(originalCenter.x + 100, originalCenter.y);    [UIView beginAnimations:@"Test move" context:NULL];    [UIView setAnimationDuration:0.5];    [UIView setAnimationDelegate:self];    [UIView setAnimationDidStopSelector:@selector(animStopped:)];    targetView.center = originalCenter;    [UIView commitAnimations]; }

＊另外寫法 (iOS 4)

-(IBAction)moveObject:(id)sender {    CGPoint originalCenter = targetView.center;    originalCenter = CGPointMake(originalCenter.x + 100, originalCenter.y);    [UIView animateWithDuration:0.5 animations:      ^(void){          targetView.center = originalCenter;      }completion:^(BOOL finished){          NSLog(@"Stop animation");      }]; }

若要繪製更多變的圖形除了可以使用CGContext，另外還有CGPath：

• CGContext系列物件：使用上較為簡單。
• CGPath系列物件：會將繪製的圖存成CGMutablePathRef，以便再利用而不需重新定義路徑、顏色、上色等。

若要讓view重新再繪製，如同Android並不是直接呼叫onDraw而是藉由invalidate()來重繪，在iOS中呼叫setNeedsDisplay達到重繪的動作。

-----
插圖 -----
插圖的方法與Android中的ImageView相同，iOS同樣有個UIImageView物件

可以在storyboard或程式碼中設定：

• 在storyboard中拉進Image view並在右方的Inspector視窗中設定圖片來源

(graph)

• 程式碼設定

UIImage* myImage = [UIImage imageName:@"testimage.png"]; //指定圖片路徑     UIImageView* myImageView = [[UIImageView alloc] initWithImage:myImage];     myImageView.frame = CGRectMake(0, 0, 240, 240);     [window addSubview:myImageView];

-----
介面方向 -----
Device各方向常數：

• UIInterfaceOrientationPortrait：實體按鈕在下
• UIInterfaceOrientationUpsideDown：實體按鈕在上
• UIInterfaceOrientationLandscapeLeft：實體按鈕在左
• UIInterfaceOrientationLandscapeRight：實體按鈕在右

決定Device翻轉的方向

// interfaceOrientation參數為Device目前的方向 // 當return值為true時，改變畫面方向 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {     // Return YES for supported orientations     return YES; //當Device翻轉時即翻轉方向     //return (UIInterfaceOrientationPortrait == interfaceOrientation)); //判斷Device是不是呈垂直狀態，是的話切換畫面，讓畫面固定在直放的狀態     //return (UIInterfaceOrientationIsLandscape(interfaceOrientation); //使用UIInterfaceOrienttionIsLandscape方法來判斷目前是不是橫放的狀態，是的話切換畫面，讓畫面固定在橫放的狀態 }

-----

資料出處《Object-C與iOS開發入門》