SlideShare una empresa de Scribd logo
1 de 54
Class 02
iOS 應⽤用軟體設計
課程⼤大綱
•   另⼀一種換圖的⽅方式

    •   QV003:多個按鈕,按下後顯⽰示不同的圖

•   學習⽂文字的顯⽰示 (UILabel)

    •   QV002:按鈕顯⽰示不同的⽂文字

•   Property & Synthesize

•   由 UILable 查詢資料的查閱⽅方法

    •   QV058:數種顯⽰示資料的練習

•   隨機亂數。資料運算

    •   QV057:九九乘法 CAI 練習
類似的寫法
(同⼀一個 UIImageView,更換圖⽚片內容)
Project QV003


設定多個按鈕,按鈕後
顯⽰示出不同的圖
學習將圖⽚片置於畫⾯面
ViewController.h



#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    IBOutlet UIImageView *imageView;
}

-(IBAction)btn1:(id)sender;
-(IBAction)btn2:(id)sender;
-(IBAction)btn3:(id)sender;

@end
ViewController.xib




               要完成:
               (1)物件的連接
               (2)事件與⽅方法的連接
ViewController.m
#import "ViewController.h"

@implementation ViewController


-(IBAction)btn1:(id)sender
{
    imageView.image = [UIImage imageNamed:@"pic1.png"];
}


-(IBAction)btn2:(id)sender
{
    imageView.image = [UIImage imageNamed:@"pic2.png"];
}


-(IBAction)btn3:(id)sender
{
    imageView.image = [UIImage imageNamed:@"pic3.png"];
}

@end
挑戰練習


• 如何⾃自訂圖⽚片按鈕 (UIButton)?
• 就這樣的功能,能開發出怎樣的 App?
學習⽂文字的顯⽰示
程式內容很簡單

   重點是學會

⾃自⼰己能夠找到更多的功能
範例:在畫⾯面上增加
  UILabel ⽂文字
Project QV002

基礎的練習
設定兩個 UIButton 及
⼀一個 UILabel
各別按鈕按下後改變
標籤的⽂文字
ViewController.h


#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    IBOutlet UILabel *myLabel;
}
@property (retain, nonatomic) UILabel *myLabel;

-(IBAction)tapA:(id)sender;
-(IBAction)tapB:(id)sender;

@end
ViewController.xib




                 要完成:
                 (1)物件的連接
                 (2)事件與⽅方法的連接
ViewController.m



#import "ViewController.h"

@implementation ViewController
@synthesize myLabel;


-(IBAction)tapA:(id)sender                   此處可改為
{
                                        myLabel.text = @"AAAA";
    [myLabel setText:@"AAAA"];
}


-(IBAction)tapB:(id)sender
{
    [myLabel setText:@"BBB"];
}

@end                                 思考問題:有需要使⽤用
                                  property及synthesize嗎?
Property, Synthesize
• 類別 (class)
 • 屬性 (property)
 • ⽅方法 (method)
• 物件 (實例,案例,Instance)
• 物件內屬性值的設定與取得
 (setter, getter)
提昇寫程式的能⼒力

• 書上介紹了什麼語法,就⽤用什麼
• 線上查詢 UILabel 的參考⽂文件
• 網路上查詢更多的資源

• 善於利⽤用開發⼯工具提供的 "暗⽰示"
練習 UILabel 的各種屬性
由 xib 介⾯面上可以設定的屬性
由『參考⼿手冊』上認識類別具有的屬性


             在關鍵字下
         按住 option 鍵及滑⿏鼠鍵
UILabel Class Reference (1/5)
UILabel Class Reference (2/5)
UILabel Class Reference (3/5)



                        基本屬性

                        ⼤大⼩小及調整

                        突出顯⽰示

                        影⼦子

                        ......
UILabel Class Reference (4/5)


                 可設定⽂文字內容和字型
UILabel Class Reference (5/5)

            可設定⽂文字顏⾊色和......
有寫跟沒寫差不多!
靠直覺寫幾乎都不易成功
       需要注意的是
『資料型態』或『類別』或『列舉項⺫⽬目』......
可以由程式做的設定
•   text 改變⽂文字內容
•   font ⽂文字字型
•   color ⽂文字顏⾊色
•   textAlignment 對⿑齊⽅方式
•   enabled 有作⽤用或失效
•   .................
•   ⽂文字⼤大⼩小的調整
•   ⾼高亮突出 (highlightedTextColor, highlighted)
•   影⼦子 (shadowColor, shadowOffset)
試試看......


希望接下來出現的程式

是你⾃自⼰己打出來的
⽂文字的基本屬性
- (void)viewDidLoad
{
    [super viewDidLoad];

    myLabel.text = @"Hello";
    myLabel.font = [UIFont fontWithName:@"Arial" size:80.0];
    myLabel.textAlignment = UITextAlignmentCenter;
    myLabel.textColor = [UIColor yellowColor];
    myLabel.textColor = [UIColor colorWithRed:1.0 green:1.0 blue:0.0 alpha:0.8];
    myLabel.enabled = YES;
}
⽂文字的⾼高亮及影⼦子

- (IBAction) btnClick:(id)sender
{
    myLabel.highlightedTextColor = [UIColor redColor];
    myLabel.highlighted = YES;

    myLabel.shadowColor = [UIColor greenColor];
    myLabel.shadowOffset = CGSizeMake(5, 5);
}
網路上搜尋相關⽤用法
想想⼀一些⽐比較像 APP 的變化

• 顯⽰示不同的⽂文字 ......
• 顯⽰示按了幾次按鍵 ......
• 顯⽰示丟骰⼦子的點數 ......
• 顯⽰示現在的時間 ......
• ............(發揮想像⼒力)............
Project QV058


標籤物件 UILabel
⾃自由聯想練習
ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    IBOutlet UILabel *myLabel1;
    IBOutlet UILabel *myLabel2;
    IBOutlet UILabel *myLabel3;
    IBOutlet UILabel *myLabel4;
    IBOutlet UIImageView *ballImageView;

     int cnt;
}

-   (IBAction)   btn1Tap:(id)sender;
-   (IBAction)   btn2Tap:(id)sender;
-   (IBAction)   btn3Tap:(id)sender;
-   (IBAction)   btn4Tap:(id)sender;

@end
ViewController.xib
ViewController.m (1/4)




- (IBAction) btn1Tap:(id)sender
{
    myLabel1.text = @"Hello World!!!";
}
ViewController.m (2/4)




- (IBAction) btn2Tap:(id)sender
{
    cnt++;
    myLabel2.text = [NSString stringWithFormat:@"你點了 %d 次", cnt];
}


- (void)viewDidLoad
{
    [super viewDidLoad];

    cnt = 0;
}
ViewController.m (3/4)



- (IBAction) btn3Tap:(id)sender
{
    int num = 1 + arc4random() % 6;
    myLabel3.text = [NSString stringWithFormat:@"骰⼦子扔出 %d 點", num];


    NSString *imageString = [[NSString alloc]
                              initWithFormat:@"Circle%d.png", num];

    ballImageView.image = [UIImage imageNamed:imageString];
}
ViewController.m (4/4)
- (IBAction) btn4Tap:(id)sender
{

    // ⽅方法⼀一
    NSDate *now = [[NSDate alloc] init];

    NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
    [dateFormat setDateFormat:@"yyyy-MM-dd HH:mm"];

    NSString *nowString = [dateFormat stringFromDate:now];

                           注意:不能同時存在 (因為⽤用相同的名稱)

    // ⽅方法⼆二
    NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
    [dateFormat setDateFormat:@"yyyy-MM-dd HH:mm"];

    NSString *nowString = [dateFormat stringFromDate:[NSDate date]];


    // 顯⽰示⽇日期
    myLabel4.text = [NSString stringWithFormat:@"%@", nowString];
}
隨機亂數

• 產⽣生範圍在 0 到 2^32-1 ( 4294967295) 之
  間的整數亂數

• 無需設定亂數種⼦子
• 範圍為傳統 rand() 及 random() 的兩倍
• ⼀一般使⽤用 % (整數餘數) 取得所要的範圍
隨機亂數使⽤用
•   取得 0~8 之間的整數亂數
    int value = arc4random() % 9;


•   取得 1~6 之間的整數亂數
    int value = (arc4random() % 6) + 1;


•   取得 0~100 之間的浮點數亂數
    #define ARC4RANDOM_MAX 0x100000000
    (double) value = floorf(((double)arc4random() / ARC4RANDOM_MAX) * 100.0f);
範例:九九乘法 CAI
(試著先不要看程式,聽過解說後,⾃自⼰己寫看看)
Project QV057


九九乘法 CAI ⾃自助練習
標籤物件 UILabel
隨機亂數
ViewController.h




@interface ViewController : UIViewController
{
    IBOutlet UILabel *numLabel1, *numLabel2, *answerLabel;
    int num1, num2;
}

- (IBAction) ShowQuestion:(id)sender;
- (IBAction) ShowAnswer:(id)sender;

@end
ViewController.xib
ViewController.m (3/3)


- (IBAction) ShowQuestion:(id)sender
{
    num1 = 1 + arc4random() % 9;
    num2 = 1 + arc4random() % 9;

    numLabel1.text = [NSString stringWithFormat:@"%d", num1];
    numLabel2.text = [NSString stringWithFormat:@"%d", num2];

    answerLabel.hidden = YES;
}


- (IBAction) ShowAnswer:(id)sender
{
    int answer = num1 * num2;
    answerLabel.text = [NSString stringWithFormat:@"%d", answer];

    answerLabel.hidden = NO;
}
I os 02
- (IBAction) ShowQuestion:(id)sender
{
    *** 省略部份程式碼 ***
    answerLabel.hidden = YES;          增加畫⾯面上物件的
}
                                        顯⽰示及隱藏
- (IBAction) ShowAnswer:(id)sender
{
    *** 省略部份程式碼 ***
    answerLabel.hidden = NO;
}

- (void) initial
{
    *** 省略部份程式碼 ***
    num1 = 3;
    num2 = 7;
    answerLabel.hidden = YES;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
!
    [self initial];
}
⾃自我挑戰
擴充成為四則運算,但是......
 加法為⼆二位數的加法
 減法不得出現負數的答案
 乘法 (略)
 除法必須能夠整除
數字改⽤用圖⽚片顯⽰示 (注意答案的部份)
延伸學習


• 查詢學過的 UI 元件
 (UILabel, UIButton, UIImageView, UIAlert...)
 還有哪些屬性或⽅方法可以使⽤用
Apple 開發者網站
developer.apple.com
............

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

JavaScript 教程
JavaScript 教程JavaScript 教程
JavaScript 教程
 
面向对象的Js培训
面向对象的Js培训面向对象的Js培训
面向对象的Js培训
 
jQuery 選取器解析
jQuery 選取器解析jQuery 選取器解析
jQuery 選取器解析
 
C語言應用前置處理
C語言應用前置處理C語言應用前置處理
C語言應用前置處理
 
C語言列舉與聯合
C語言列舉與聯合C語言列舉與聯合
C語言列舉與聯合
 
Python分支作業
Python分支作業Python分支作業
Python分支作業
 
Vb簡介
Vb簡介Vb簡介
Vb簡介
 
C++11 smart pointers
C++11 smart pointersC++11 smart pointers
C++11 smart pointers
 
C語言標準輸出入函式
C語言標準輸出入函式C語言標準輸出入函式
C語言標準輸出入函式
 
Standford 2015 iOS讀書會 week2: 1. Applying MVC 2. More Swift and Foundation Fra...
Standford 2015 iOS讀書會 week2: 1. Applying MVC 2. More Swift and Foundation Fra...Standford 2015 iOS讀書會 week2: 1. Applying MVC 2. More Swift and Foundation Fra...
Standford 2015 iOS讀書會 week2: 1. Applying MVC 2. More Swift and Foundation Fra...
 
jQuery源码学习
jQuery源码学习jQuery源码学习
jQuery源码学习
 
Python 迴圈作業
Python 迴圈作業Python 迴圈作業
Python 迴圈作業
 
07 View Controllers
07 View Controllers07 View Controllers
07 View Controllers
 
小谈Javascript设计模式
小谈Javascript设计模式小谈Javascript设计模式
小谈Javascript设计模式
 
Ch10
Ch10Ch10
Ch10
 
Python元組,字典,集合
Python元組,字典,集合Python元組,字典,集合
Python元組,字典,集合
 
C語言陣列與字串
C語言陣列與字串C語言陣列與字串
C語言陣列與字串
 
Javascript之昨是今非
Javascript之昨是今非Javascript之昨是今非
Javascript之昨是今非
 
Python基本資料運算
Python基本資料運算Python基本資料運算
Python基本資料運算
 
Keep your code clean
Keep your code cleanKeep your code clean
Keep your code clean
 

Destacado (11)

I os 06
I os 06I os 06
I os 06
 
I os 14
I os 14I os 14
I os 14
 
I os 07
I os 07I os 07
I os 07
 
I os 03
I os 03I os 03
I os 03
 
I os 15
I os 15I os 15
I os 15
 
課程規畫
課程規畫課程規畫
課程規畫
 
I os 16
I os 16I os 16
I os 16
 
I os 11
I os 11I os 11
I os 11
 
I os 04
I os 04I os 04
I os 04
 
I os 10
I os 10I os 10
I os 10
 
I os 13
I os 13I os 13
I os 13
 

Similar a I os 02

02 Objective-C
02 Objective-C02 Objective-C
02 Objective-CTom Fan
 
09 UITableView and UITableViewController
09 UITableView and UITableViewController09 UITableView and UITableViewController
09 UITableView and UITableViewControllerTom Fan
 
2016輕鬆開發自有網路地圖工作坊 進階班 0701
2016輕鬆開發自有網路地圖工作坊 進階班 07012016輕鬆開發自有網路地圖工作坊 進階班 0701
2016輕鬆開發自有網路地圖工作坊 進階班 0701family
 
各種酷炫圖表繪製技術 Silverlight Toolkit 與 MS Chart 控制項大探索
各種酷炫圖表繪製技術 Silverlight Toolkit 與 MS Chart 控制項大探索各種酷炫圖表繪製技術 Silverlight Toolkit 與 MS Chart 控制項大探索
各種酷炫圖表繪製技術 Silverlight Toolkit 與 MS Chart 控制項大探索Chui-Wen Chiu
 
11 UINavigationController
11 UINavigationController11 UINavigationController
11 UINavigationControllerTom Fan
 
Script with engine
Script with engineScript with engine
Script with engineWebrebuild
 
Backbone.js and MVW 101
Backbone.js and MVW 101Backbone.js and MVW 101
Backbone.js and MVW 101Jollen Chen
 
掌星 移动互联网开发笔记-Vol001
掌星 移动互联网开发笔记-Vol001掌星 移动互联网开发笔记-Vol001
掌星 移动互联网开发笔记-Vol001rainx1982
 
Android 智慧型手機程式設計
Android 智慧型手機程式設計Android 智慧型手機程式設計
Android 智慧型手機程式設計Kyle Lin
 
Free Marker中文文档
Free Marker中文文档Free Marker中文文档
Free Marker中文文档yiditushe
 
怎樣在 Flutter app 中使用 Google Maps
怎樣在 Flutter app 中使用 Google Maps怎樣在 Flutter app 中使用 Google Maps
怎樣在 Flutter app 中使用 Google MapsWeizhong Yang
 
KISSY for starter
KISSY for starterKISSY for starter
KISSY for starteryiming he
 
Backbone js and requirejs
Backbone js and requirejsBackbone js and requirejs
Backbone js and requirejsChi-wen Sun
 
Unity遊戲程式設計 - 應用Sprite物件
Unity遊戲程式設計 - 應用Sprite物件Unity遊戲程式設計 - 應用Sprite物件
Unity遊戲程式設計 - 應用Sprite物件吳錫修 (ShyiShiou Wu)
 
01 A Simple iOS Application
01 A Simple iOS Application01 A Simple iOS Application
01 A Simple iOS ApplicationTom Fan
 
16 CoreData
16 CoreData16 CoreData
16 CoreDataTom Fan
 

Similar a I os 02 (20)

I os 01
I os 01I os 01
I os 01
 
02 Objective-C
02 Objective-C02 Objective-C
02 Objective-C
 
09 UITableView and UITableViewController
09 UITableView and UITableViewController09 UITableView and UITableViewController
09 UITableView and UITableViewController
 
2016輕鬆開發自有網路地圖工作坊 進階班 0701
2016輕鬆開發自有網路地圖工作坊 進階班 07012016輕鬆開發自有網路地圖工作坊 進階班 0701
2016輕鬆開發自有網路地圖工作坊 進階班 0701
 
Javascript
JavascriptJavascript
Javascript
 
各種酷炫圖表繪製技術 Silverlight Toolkit 與 MS Chart 控制項大探索
各種酷炫圖表繪製技術 Silverlight Toolkit 與 MS Chart 控制項大探索各種酷炫圖表繪製技術 Silverlight Toolkit 與 MS Chart 控制項大探索
各種酷炫圖表繪製技術 Silverlight Toolkit 與 MS Chart 控制項大探索
 
11 UINavigationController
11 UINavigationController11 UINavigationController
11 UINavigationController
 
Script with engine
Script with engineScript with engine
Script with engine
 
Backbone.js and MVW 101
Backbone.js and MVW 101Backbone.js and MVW 101
Backbone.js and MVW 101
 
掌星 移动互联网开发笔记-Vol001
掌星 移动互联网开发笔记-Vol001掌星 移动互联网开发笔记-Vol001
掌星 移动互联网开发笔记-Vol001
 
005
005005
005
 
Android 智慧型手機程式設計
Android 智慧型手機程式設計Android 智慧型手機程式設計
Android 智慧型手機程式設計
 
Free Marker中文文档
Free Marker中文文档Free Marker中文文档
Free Marker中文文档
 
怎樣在 Flutter app 中使用 Google Maps
怎樣在 Flutter app 中使用 Google Maps怎樣在 Flutter app 中使用 Google Maps
怎樣在 Flutter app 中使用 Google Maps
 
KISSY for starter
KISSY for starterKISSY for starter
KISSY for starter
 
Backbone js and requirejs
Backbone js and requirejsBackbone js and requirejs
Backbone js and requirejs
 
UIKit-Swift
UIKit-SwiftUIKit-Swift
UIKit-Swift
 
Unity遊戲程式設計 - 應用Sprite物件
Unity遊戲程式設計 - 應用Sprite物件Unity遊戲程式設計 - 應用Sprite物件
Unity遊戲程式設計 - 應用Sprite物件
 
01 A Simple iOS Application
01 A Simple iOS Application01 A Simple iOS Application
01 A Simple iOS Application
 
16 CoreData
16 CoreData16 CoreData
16 CoreData
 

Más de 信嘉 陳

Más de 信嘉 陳 (12)

Processing 06
Processing 06Processing 06
Processing 06
 
Processing 05
Processing 05Processing 05
Processing 05
 
Processing 04
Processing 04Processing 04
Processing 04
 
Processing 03
Processing 03Processing 03
Processing 03
 
Processing 02
Processing 02Processing 02
Processing 02
 
Processing 01
Processing 01Processing 01
Processing 01
 
Processing 09
Processing 09Processing 09
Processing 09
 
Processing 08
Processing 08Processing 08
Processing 08
 
Processing 07
Processing 07Processing 07
Processing 07
 
Google 街景
Google 街景Google 街景
Google 街景
 
社群網站 Facebook
社群網站 Facebook社群網站 Facebook
社群網站 Facebook
 
網路搜尋
網路搜尋網路搜尋
網路搜尋
 

I os 02