這篇是很基礎的教學

希望是可以讓一些,想入門卻又不知道從何學起的人。

不想去上一些貴桑桑的課程,先看一下這篇吧。

 

iOS 相對於Android 算是好寫很多了。

想寫iPhone的App先具備以下環境

1.Mac (你需要一台Mac,這邊建議有心的話一台Mac是真的有需要的)

2.iPhone,iPod,iPad (有一台就可以了,當然沒有也沒關係,一開始用模擬器也是很有成就感的)

3.iTunes帳號(主要為下載Xcode開發工具)

 

 首先開啟Mac 的App Store

 螢幕快照 2015-04-13 上午9.16.02.png    

會看到

螢幕快照 2015-04-13 上午9.19.16.png  

在右上角的搜尋欄打上Xcode

螢幕快照 2015-04-13 上午9.21.20.png  

搜尋到後點選安裝

螢幕快照 2015-04-13 上午9.23.02.png  

因為Xcode滿大的所以放著等他下載完成吧~

下載完後會在

螢幕快照 2015-04-13 上午9.25.39.png  

看到Xcode的圖示,點選下去就可以開始我們的Hello World摟~

螢幕快照 2015-04-13 上午9.27.37.png  

左邊三個icon

1.Get started with a playground

  開發iOS有兩種語言(Object-C/Swift) playground是Swift遊樂場?是可以快速開發,並且立即看到成效的。

2.Create a new Xcode project

  建立新的Project(我們選這個)

3.Check out an existing project

  這個選項是給已經有版本控管的專案用的

 

點選2.Create a new Xcode project 後我們會看到以下畫面

螢幕快照 2015-04-13 上午9.35.11.png  

選擇Single View Application(單一畫面應用程式,因為我們現在只需要做Hello World)

本篇使用Objective-C (因為Swift還沒那麼厲害...

螢幕快照 2015-04-13 上午9.37.31.png  

在iPhone/iPod/iPad 實機開發上面要注意的是 Bundle Identifier 這個要跟你iOS Developer 上面的要一致唷,不然會無法Run 實機。

按下Next會要選擇你專案存放的路徑

螢幕快照 2015-04-13 上午9.50.11.png  

按下Create

終於可以開始Hello World了

 

先看到左方的檔案區

螢幕快照 2015-04-13 上午9.53.47.png  

Objective-C程式語言的特色就是它一支程式會變成兩個檔案分別是.h與.m檔

我們程式主要都會在.m檔內開發,.h檔是header檔,主要是宣告一些public的參數,讓其他程式可以使用的,可以傳進來也可以丟出去的參數

然後再來看一下檔案區的程式

會看到(這裡只介紹目前需要用到的,不然講下去沒完沒了啊~)

AppDelegate       可以說是程式的最大的代理人,可以設定程式開啟,關閉需要做什麼事情的地方

ViewController    就是我們主要程式要寫的地方唷~

Main.storyboard  點他一下會看到以下畫面(畫面若不一樣,可以點選紅色框框的按鈕唷)

螢幕快照 2015-04-13 上午10.15.21.png  

這裡的View Controller Sence 就是對應到我們的ViewController 這隻程式唷。

 

接下來就要開始我們的Hello World唷

方法1.使用StoryBoard 故事版

我們在Main.storyboard右下角的搜尋框內輸入UILabel

螢幕快照 2015-04-13 上午10.18.52.png  

按住 Label 不放 拖曳到畫面ViewController上

螢幕快照 2015-04-13 上午10.20.37.png  

這時候可以點畫面上的Label兩下編輯文字改成Hello World。

螢幕快照 2015-04-13 上午10.24.01.png  

這時候點選箭頭

螢幕快照 2015-04-13 上午9.53.47.png

這邊使用iPhone 6的模擬器 ,若要更換可以點一下,會出現可以更換的模擬器

螢幕快照 2015-04-13 上午10.26.28.png  

這時候會出現

螢幕快照 2015-04-13 上午10.32.23.png  

螢幕快照 2015-04-13 上午10.33.03.png  

我們的Hello World 就完成了。

但應該會有以下問題

問題

1.為什麼他不在正中間?

    若想要他在正中間,點選下圖紅色框內

螢幕快照 2015-04-13 上午10.38.08.png  

  將最後兩項打勾

  1.Horizontal Conter in Container

  2.Vertical Center in Container

  分別為水平與垂直置中設定這時候在按下箭頭

  螢幕快照 2015-04-13 上午10.26.28.png

 

  就可以看到他是置中的了。

 

  螢幕快照 2015-04-13 上午10.42.00.png  

2.完全沒有程式?

  程式部分storyboard會自己產生,所以用storyboard可以少寫很多程式碼

  缺點是有些客製化或是動畫storyboard是做不到的唷。

  以前storyboard再針對iPhone 和 iPad 必須要分成2個storyboard 現在有下面這種方法就不再需要了

螢幕快照 2015-04-13 上午10.38.08.png

 

 

有人主張用storyboard那也就會有人主張全部程式coding

方法2.使用程式碼

點到ViewControll.m 這隻程式

看到

-(void)viewDidLoad

{

[superviewDidLoad];

}

再大括弧{內增加以下程式碼

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 200, 200, 40)];

這裡是初始化UILabel,並且設定他的框(Frame)(x座標, y座標, 寬, 長)

此處的(x,y)的(0,0)是在螢幕的左上角唷。

 

label.text = @"Hello World";

設定label內的文字為Hello World,

Objective-C 用 @"文字" 代表一個字串

也可以用 

[NSString stringWithFormat:@"Hello World"] 表示

 

最後加上

[self.view addSubview:label];

把label 加到主畫面上就可以了

 

這時按下箭頭

  螢幕快照 2015-04-13 上午10.26.28.png

 

就可以看到多了一個Hello World

螢幕快照 2015-04-13 上午10.58.28.png  

這邊方法2使用Coding方式就完成了唷。

 

還有

方法3.結合方法1與方法2

一般來說最常會使用這種方法吧。

這次一樣按照方法1拉一個UILabel 到畫面上,不要與1重疊唷

螢幕快照 2015-04-13 上午11.07.00.png  

接下來開啟ViewController.h檔案

@end前增加以下程式碼

@property (nonatomic,weak) IBOutlet UILabel *label3;

 

在開啟ViewController.m檔案

@implementation ViewController

 
下方增加
 
@synthesize label3;
 
再到
- (void)viewDidLoad {
增加
label3.text = @"Hello World";
}
 
最後最後~在開啟Main.storyboard 點選 如下圖
 
左上黃色的Viewcontroller 按右鍵,看到label3 旁邊的圈圈 將它拉到你剛剛新增的UILabel上面
 
這個步驟叫做關聯,若沒有關聯的話你剛剛的ViewController 並不知道他要對應到Storyboard的哪個元件上面唷。
 
螢幕快照 2015-04-13 上午11.18.38.png  
 

這時再次按下箭頭

  螢幕快照 2015-04-13 上午10.26.28.png

 

會發現

 

螢幕快照 2015-04-13 上午11.24.49.png  

變成He... 了去storyboard改變一下寬度,將它拉長一點,就會顯示正常了唷。

 

沒想到一篇Hello World會打這麼久啊~

 

我的方法沒有一定對,也不是最好,但至少都是我在用的方法。

arrow
arrow
    創作者介紹
    創作者 Mr.Lin 的頭像
    Mr.Lin

    Mr.Lin

    Mr.Lin 發表在 痞客邦 留言(0) 人氣()