廣告贊助

這一部份為單純使用Code寫一個顯示的畫面的HelloWorld共三篇,此為第一篇。  第二篇第三篇有關這個分類的說明

  

這段要示範的是一個使用 UILabel 設定顯示 “Hello World!" 並把它放到主畫面的過程,主要的目的是了解下面幾個動作

 

    1. iPhone 的畫面座標系統
    2. UILabel 的設定
    3. CGRect
    4. addSubview 方法的使用

首先簡單的說明一下 iPhone 3.5 吋機種的座標系統。原則上,它的座標設計是左角的位置為 0,0 左角的位置為 320,480。示意圖如下:

 
但它的單位並不是像素,因為不同機種有不同的實際解析度,所以這兩個位置浮點數來計算,程式會依機器的狀況來找到最合適的實際像素。另外,對於不同的機器如 4吋 iPhone 與 iPad ,座標位置也會不同,計算方法也不同,這將會另外再討論。因為不是像素,這些數字是用來計算比例用的,不是一點一點的

另外要談談 UILabel  它是放置一個文字標籤的容器,在它的很多屬性當中我們先談兩個,一個是 Frame,另一個是 text。text 很簡單,就是一個 NSString 字串,就是顯示的文字。Frame 則是指它位置大小,內容放的是一個 CGRect。

CGRect 不是一個類別,而是一個結構,內又有 origin 與 size。 origin 是一個 CGPoint 結構,內有 x,y 座標,而 size 是一個CGSize 結構,內容 width 與 height。 聽起來有點複雜,但實際上並沒有,我們先把文件中有關 CGRect,CGSize,CGPoint 的程式碼寫出來,就很容易了解了。

struct CGRect {
    CGPoint origin;
    CGSize size;
};

typedef struct CGRect CGRect;

 

struct CGPoint {
    CGFloat x;
    CGFloat y;
};

typedef struct CGPoint CGPoint;

struct CGPoint {
    CGFloat x;
    CGFloat y;
};

typedef struct CGPoint CGPoint;

我們就可以看的出,其實最後就是四個 CGFloat,而去文件去查 CGFloat,它就是 float。所以設定一個 CGRect 要四個 setter 完成,但這樣作還是有點麻煩。還好,iOS 的 SDK 中類似的結構,都有提供類似的 function 來完成這個工作,而 function 的名字通常就類似 CGRectMake....,這次的範例就要用 CGRectMake( x , y , width , height ) 這個 function 來產生一個 CGRect。

最後我們要談一下畫面的原理。我們在使用 SingleView Application 這個樣版時,我們實際是在操作一個 ViewController 而我們實際看到他的 View,View 是一個容器,讓我們可以加入很多的子項,如果子項設定的正確時,我們就會看到這個子項,而要加入就要在這個View Load到畫面時,使用 addSubview 方法。 所以我們要做的事情如下:

    1. 建立一個 Single View Application
    2. 開啟主要的 ViewController.m 檔
    3. 找到 LoadView 方法的段落並加入自定的程式碼
    4. 建立 UILabel ,設定它的 frame 與 text,並使用 addSubview 加入 self.view 中,要加的程式碼如下:

    UILabel *myLabel=[[UILabel alloc] init]; //建立一個空白的 UILabel 
    [myLabel setFrame:CGRectMake(0.0, 0.0, 320, 44)]; //設定 Label 在左上角起 width 320,height 44
    myLabel.text=@"   Hello World!"; // 設定文字為 Hello World!
    [self.view addSubview:myLabel]; // 加到 self.view 中

最後的結果就是下圖

文章標籤
創作者介紹

X Code Objective-C Swift 學習記錄 for iOS & macOS (OS X)

shenfive 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • 張宗荃
  • 為什麼都一模一樣打完了,還是顯示不出Hello World呢?
    一樣是灰屏~~~@@??
  • 顏宏益
  • 樓上 如果你不提供程式碼的話 我想沒有人知道你的問題是在哪裡噢

    話說這是非常基本的部分了 如果你都弄不出來的話 我想你是需要學習更基本的程式語言的部分
找更多相關文章與討論