階梯式子視圖朱中華 2010 11 04 重新定位處理 interface Hello Controller

階梯式子視圖朱中華 2010/11/04

重新定位處理 @interface Hello. Controller : UIView. Controller @end @implementation Hello. Controller - (void)will. Rotate. To. Interface. Orientation: (UIInterface. Orientation)orientation duration: (NSTime. Interval)duration { CGRect apprect; apprect. origin = CGPoint. Make(0. 0 f, 0. 0 f); if ((orientation == UIInterface. Orientation. Landscape. Left) || (orientation == UIInterface. Orientation. Landscape. Right)) apprect. size = CGSize. Make(480. 0 f, 300. 0 f); else apprect. size = CGSize. Make(320. 0 f, 460. 0 f); // Iterate through the subviews and inset each item float offset = 32. 0 f; for (UIView *subview in [self. view subviews]) { CGRect frame = CGRect. Inset(apprect, offset); [subview set. Frame: frame]; offset += 32. 0 f; } }

Load View - (void)load. View { // Create the main view UIView *content. View = [[UIView alloc] init. With. Frame: [[UIScreen main. Screen] application. Frame]]; content. View. background. Color = [UIColor white. Color]; self. view = content. View; [content. View release]; // Get the view bounds as our starting point CGRect apprect = [content. View bounds]; // Add each inset subview UIView *subview = [[UIView alloc] init. With. Frame: CGRect. Inset(apprect, 32. 0 f)]; subview. background. Color = [UIColor light. Gray. Color]; [content. View add. Subview: subview]; [subview release]; subview = [[UIView alloc] init. With. Frame: CGRect. Inset(apprect, 64. 0 f)]; subview. background. Color = [UIColor dark. Gray. Color]; [content. View add. Subview: subview]; [subview release]; subview = [[UIView alloc] init. With. Frame: CGRect. Inset(apprect, 96. 0 f)]; subview. background. Color = [UIColor black. Color]; [content. View add. Subview: subview]; [subview release]; }

Sample. App. Delegate @interface Sample. App. Delegate : NSObject <UIApplication. Delegate> @end @implementation Sample. App. Delegate - (void)application. Did. Finish. Launching: (UIApplication *)application { UIWindow *window = [[UIWindow alloc] init. With. Frame: [[UIScreen main. Screen] bounds]]; Hello. Controller *hello = [[Hello. Controller alloc] init]; [window add. Subview: hello. view]; [window make. Key. And. Visible]; } @end

Main int main(int argc, char *argv[]) { NSAutorelease. Pool * pool = [[NSAutorelease. Pool alloc] init]; int ret. Val = UIApplication. Main(argc, argv, nil, @"Sample. App. Delegate"); [pool release]; return ret. Val; }

Overview 這個程式會在application area顯示出三個 Rectangle object，每個Rectangle向內縮 32點。跑完結果如下圖，畫出三個Rectangle的正是 i. Phone的程式 load. View

Overview (Cont. ) 程式先進入 main()的 UIApplication. Main，再由此跳入 Sample. App. Delegate Class內的 application. Did. Finish. Launching，再由其 [window add. Subview: hello. view]; 這一行; 跳入 Hello. Controller Class內的 load. View 及 should. Autorotate. To. Interface. Orientation，再回到 Sample. App. Delegate Class內的 application. Did. Finish. Launching，跳出 application. Did. Finish. Launching後就進入 i. Phone OS，並在i. Phone上出現本程式畫面，並一直loop等著user action。

UIView UIView是在畫面中的一塊矩形區域如同畫布般, 你可以在上面描繪東西, 也可放入或移除元件一個UIView底下可以擁有多個子UIView, 後加入的UIView會被放置在上層, 我們可以調整這些 UIView的上下層關係

UIView (Cont. ) UIView是以它所佔有的矩形區域的原點及尺寸大小來決定它的位置, 原點包括了X與Y座標, 尺寸包括了寬與高。我們可以透過Core Graphics Framework裡的幾個結構來定義這些數字畫面座標上的一點CGPoint: Struct CGPoint{ CGFloat x; CGFloat y; }

UIView (Cont. ) 定義畫面上的一塊區域大小CGSize: Struct CGSize{ CGFloat width; CGFloat height; }; 定義畫面上的一塊區域的位置與大小CGRect: Struct CGRect{ CGPoint origin; CGSize size; };

View (Cont. ) CGPoint. Make(x, y)用來產生CGPoint CGSize. Make(x, y)用來產生CGSize CGPoint point=CGPoint. Make(100. 0, 200. 0) CGSize size=CGSize. Make(40. 0, 50. 0) CGRect. Make(x, y, width, height) CGRect rect=CGRect. Make(0, 0, 320, 240);

set. Frame 使用絕對座標的方式來表達, 假設你要在View A 裡定位View B, 使用set. Frame是比較方便若View B為View A的subview, (0, 0)位置是View A的左上角座標, 則View B可為 CGRect *rect=CGRect. Make(200, 100, 200, 100); [view. B set. Frame: rect];

Set. Bounds: (CGRect *) rect 使用相對座標的方式來表達, 這種表達方式的原點是(0, 0), 其右下角的座標則與View的寬度及高度一樣。如果我們要固定原點, 並放大或縮小 View的區域, 那麼使用set. Bounds: 是很好的方式 [view. B set. Bound: CGRect. Make(0, 0, 100, 50) 不論使用set. Frame: 或set. Bounds: 只要原來的 CGRect被改變了, 這個View的區域大小也隨之改變你可透過[[UIScreen main. Screen] application. Frame]; 來取得應用程式所佔有的區域

set. Frame: (CGRect *) rect

CGRect. Inset() 這些子視圖並非屬於交互套疊的巢狀架構，而是全都源自於同一個親視圖，它們是以 CGRect. Inset((CGRect) rect, dx, dy)來進行縮排處理，把一個矩形範圍(使用CGRect結構)，以及兩個參數(水平和垂直)傳給它，而它就會傳回被嵌入的置中矩形範圍。在此，每個子視圖都是與它的親代或同代的框架區塊之間，以邊緣相隔 32個像素的方式內縮

CGPoint. Make() 在搭配視圖階層架構來處理時，你必用該視圖的親代座標系統來定義它的框架區塊我們利用CGPoint. Make(0. 0 f, 0. 0 f)，將應用程式框架區塊去安排主要視圖的位置，然後將它的原點重置為(0, 0) 。原點位置的重置處理，會讓螢幕的框架區塊更新成主要視圖的座標系統。這個重置動作會構成後續視圖的版面配置基礎

View

UIWindow 一個應用程式只能有一個UIWindow, 它構成了這個應用程式主畫面。而你可在主畫面裡加入或移除UIView, 這些UIView會被放到一個陣列裡面維護, 後加入的UIView被放在畫面的最上層加入一個subview 將本身上一層的UIView移除 -(void) add. Subview: (UIView *)view; -(void) remove. From. Superview; 交換兩個UIView的順序 -(void) exchange. Subview. Atindex: (int) index with. Subview. At. Index: (int) other. Index

-(void) draw. Rect: (CGRect) rect UIView雖然是一塊矩形區域，但我們可以在繼承UIView的class裡改寫draw. Rect: 來改變它的形狀，這方法是回呼函數(callback)，在UIView被重畫時自動被呼叫，我們可透卨 set. Needs. Display來更新畫面 [view set. Needs. Display];

Core. Graphics and Quartz 2 D UIKit offers very basic drawing functionality UIRect. Fill(CGRect rect); UIRect. Frame(CGRect rect); Core. Graphics: Drawing APIs CG is a C-based API, not Objective-C CG and Quartz 2 D drawing engine define simple but powerful graphics primitives Graphics context Transformations Paths Colors Fonts Painting operations

Graphics Contexts Draws to screen, bitmap buffer, printer, PDF, etc. Graphics context setup automatically before invoking draw. Rect: Defines current path, line width, transform, etc. Access the graphics context within draw. Rect: by calling(CGContext. Ref)UIGraphics. Get. Current. Contex t(void); Use CG calls to change settings Context only valid for current call to draw. Rect: Do not cache a CGContext!

CG Wrappers Some CG functionality wrapped by UIKit UIColor Convenience for common colors Easily set the fill and/or stroke colors when drawing UIColor *red. Color = [UIColor red. Color]; [red. Color set]; // drawing will be done in red UIFont Access system font Get font by name UIFont *font = [UIFont system. Font. Of. Size: 14. 0]; [my. Label set. Font: font];

Simple draw. Rect: example Draw a solid color and shape - (void)draw. Rect: (CGRect)rect { CGRect bounds = [self bounds]; [[UIColor gray. Color] set]; UIRect. Fill (bounds); CGRect square = CGRect. Make (10, 50, 100); [[UIColor red. Color] set]; UIRect. Fill (square); [[UIColor black. Color] set]; UIRect. Frame (square); }

Drawing More Complex Shapes Common steps for draw. Rect: are Get current graphics context Define a path Set a color Stroke or fill path Repeat, if necessary

Paths Core. Graphics paths define shapes Made up of lines, arcs, curves and rectangles Creation and drawing of paths are two distinct operations Define path first, then draw it

Drawing Triangular Example (void)draw. Rect: (CGRect)rect { CGContext. Ref context = UIGraphics. Get. Current. Context(); [[UIColor gray. Color] set]; UIRect. Fill ([self bounds]); CGContext. Begin. Path (context); CGContext. Move. To. Point (context, 75, 10); CGContext. Add. Line. To. Point (context, 10, 150); CGContext. Add. Line. To. Point (context, 160, 150); CGContext. Close. Path (context); [[UIColor red. Color] set. Fill]; [[UIColor black. Color] set. Stroke]; CGContext. Draw. Path (context, k. CGPath. Fill. Stroke); }

More Drawing Information UIView Class Reference CGContext Reference “Quartz 2 D Programming Guide” Lots of samples in the i. Phone Dev Center

重新定位處理你不能只對每個子視圖的高度和寬度進行切換處理而已, 因為在i. Phone上, 應用程式的水平和垂直外型是以不同比例來呈現。若以一個20像素高的狀態列, 直立視圖區域就是 320 X 460, 而在橫向視圖區域下, 則會是 480 X 300, 這樣的差異就不能夠只是單純把界面轉到新的方向而已, 因此我們要加入一些程式碼以識別出直立方位和橫向方位的情況對框架區塊進行調整處理要避免採用單純的狀態切換機制來進行重新定位處理, 因為會發生整個方位在沒有達到直立狀態的中間情況下, 就要直接從左側橫向切換到右。方向定位資訊只會跟怠測器和實際回饋情況有關, 而i. Phone也無法保證能夠完全抓到兩個方位之間的任何一個中途狀態。 UIKit提供UIView. Controller回呼函數會通知新的方向定位, 並明確指出接下來會呈現出哪個方位

重新定位處理 (Cont. ) @interface Hello. Controller : UIView. Controller @end @implementation Hello. Controller - (void)will. Rotate. To. Interface. Orientation: (UIInterface. Orientation)orientation duration: (NSTime. Interval)duration { CGRect apprect; apprect. origin = CGPoint. Make(0. 0 f, 0. 0 f); if ((orientation == UIInterface. Orientation. Landscape. Left) || (orientation == UIInterface. Orientation. Landscape. Right)) apprect. size = CGSize. Make(480. 0 f, 300. 0 f); else apprect. size = CGSize. Make(320. 0 f, 460. 0 f); // Iterate through the subviews and inset each item float offset = 32. 0 f; for (UIView *subview in [self. view subviews]) { CGRect frame = CGRect. Inset(apprect, offset); [subview set. Frame: frame]; offset += 32. 0 f; } }

重新定位處理 (Cont. )

Homework 2 Draw Squares Hand in: due 2010/11/11, 00: 00 chchu 777@gmail. com 以組別學號姓名為檔名來繳報告

Homework 2 (Cont. )

Homework 3 Draw Triangles Hand in: due 2010/11/11, 00: 00 chchu 777@gmail. com 以組別學號姓名為檔名來繳報告

Homework 3 (Cont. ) Draw Triangles

階梯式子視圖 朱中華 2010 11 04 重新定位處理 interface Hello Controller

階梯式子視圖朱中華 2010 11 04 重新定位處理 interface Hello Controller