2012年10月28日 星期日

[ iOS ] 計時器(Timer)及進度列視圖(Progress Views)簡易教學

1.建立專案,資訊如下:
Product Name:progressView
Company Identifier: tw.edu.nkut
Class Prefix: DLI
Device Family: iPhone
取消/設定下列選項
取消:Use Storyboards
設定:Use Automatic Reference counting
取消:Include Unit Tests
2.打開DLIViewController.xib,在UI上放上UIActivityIndicationView及UIProgressView兩個物件,並建立Referencing Outlets,分別命名為activityProgress及progressBar。




3.建立程式
4.執行結果


2012年10月20日 星期六

Objective C 教學資源分享

學APPs基礎功很重要,對於想設計iPhone APPs記得要熟讀Objective C,可參考下列教材。

Objective-C 教材

[ iOS ] 切換畫面簡易教學

1. 建立一個switch專案

2.新增檔案
 3.選擇Objective C class,按下Next鍵。
4. 將類別名稱調整為DLIView2Controller,Subclass of 選擇UIViewController,勾選with XIB for user interface選項,按下Next鍵。
 5.選擇Create鍵。
 6.點選DLIViewController.xib,放上Button,並建立switch事件程序。
 7.輸入程式
DLIViewController.m程式列表如下:

#import "DLIViewController.h"
#import "DLIView2Controller.h"

@interface DLIViewController ()

@end

@implementation DLIViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)switch:(id)sender {
    DLIView2Controller *controller = [[DLIView2Controller alloc] initWithNibName:nil bundle:nil];
    [self presentViewController:controller animated:YES completion:NULL];
}
@end



8.執行結果

9.點選DLIView2Controller.xib增加一個按鈕,建立一個back事件程序。
10.輸入程式

//
//  DLIView2Controller.m
//  switch
//
//  Created by Lin Cheng-Min on 12/10/20.
//  Copyright (c) 2012 Lin Cheng-Min. All rights reserved.
//

#import "DLIView2Controller.h"
#import "DLIViewController.h"

@interface DLIView2Controller ()

@end

@implementation DLIView2Controller

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)back:(id)sender {
    DLIViewController *controller = [[DLIViewController alloc] initWithNibName:nil bundle:nil];
    [self presentViewController:controller animated:YES completion:NULL];
}
@end
11.執行結果




2012年10月16日 星期二

[ iOS ] 分段控制(Segmented Control)鈕多段控制教學


 1.選擇show the Attributes Inspector視窗來設定Segmented Control,在下圖中Segments可以來設定幾段,選擇Sengment,然後利用Title來設定內容。




2.撰寫valueChanged事件程序。

 3.程式僅一行

    [result setText:[[NSNumber numberWithInt:segmentControl.selectedSegmentIndex+1] stringValue]];

詳細使用說明可以參考 好用的NSNumber 的文章。
4.執行結果



2012年10月15日 星期一

[ iOS ] 分段控制(Segmented Control)鈕簡易教學

1.建立專案,規劃一個Segmented Control及Label兩個UI物件,並建立Outlet連結。


2.輸入程式


以下為DLIViewControl.h的程式列表;
#import

@interface DLIViewController : UIViewController
@property (strong, nonatomic) IBOutlet UILabel *result;
@property (strong, nonatomic) IBOutlet UISegmentedControl *segmentControl;
- (IBAction)valueChanged:(id)sender;

@end


以下為DLIViewControl.m的程式列表;

#import "DLIViewController.h"

@interface DLIViewController ()

@end

@implementation DLIViewController
@synthesize result;
@synthesize segmentControl;
- (void)viewDidLoad
{
    [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)valueChanged:(id)sender {
    switch (segmentControl.selectedSegmentIndex) {
        case 0:
            [result setText: @"First"];
            break;
        case 1:
            [result setText: @"Second"];
        default:
            break;
    }
}
@end

3.執行結果




2012年10月14日 星期日

[ iOS ] PickerView 簡易教學

1.建立專案(請參考HelloWorld教學),放置PickerView及Label。
2.建立屬性及參考接口(Referencing Outlet),在Referencing Outlet中New Referencing Outlet接口按下mouse拖移至DLIViewController.h,會新增下列程式如下;
@property (strong, nonatomic) IBOutlet UILabel *result;

3.對pickerView重覆步驟2,另外也在Outlets中將datasource及delegate兩個接口拖移至File's Owner。

4.輸入程式

5.DLIControllerView.h程式如下;
#import

@interface DLIViewController : UIViewController<UIPickerViewDataSource,UIPickerViewDelegate>{
    NSArray *array;
}
@property (strong, nonatomic) IBOutlet UIPickerView *picker;
@property (strong, nonatomic) IBOutlet UILabel *result;

@end
6.DLIControllerView.m程式如下;
#import "DLIViewController.h"

@interface DLIViewController ()

@end

@implementation DLIViewController
@synthesize picker;
@synthesize result;
- (void)viewDidLoad
{
    [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
    array = [[NSArray alloc] initWithObjects:@"1",@"2",@"3", nil];
}
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    result.text = [array objectAtIndex:row];
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 1;
}

-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    return [array objectAtIndex:row];
}
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    return 3;
}
@end

6.執行結果




2012年10月10日 星期三

[ iOS] WebView 簡易教學

1.建立webTest專案,打開DLIViewController.xib,設計UI,從Object Library中挑選WebView放到UI介面上,打開Assistant Editor,建立UI物件和屬性間的關係。
 2.打開DLIViewController.m,輸入程式,請參閱圖片中的程式片斷。
3.按下執行檔。
延伸閱讀:
統一資源定位符(URL,英語 Uniform / Universal Resource Locator 的縮寫)

2012年10月7日 星期日

[ iOS ] ImageView 圖片切換簡易教學

1.首先準備2張圖片當成本次創作的素材。
(學生到 1009Design學習情形)

(學生到交大參展)
2.有關建立專案,請參考前2篇文章。


[ iPhone ] 按鈕(Button)程式設計


專案設定如下;
Product Name:Photo
Company Identifier: tw.edu.nkut
Class Prefix: DLI
Device Family: iPhone
取消/設定下列選項
取消:Use Storyboards
設定:Use Automatic Reference counting
取消:Include Unit Tests

3.設計UI,從Object Library中,拖移 ImageView及Button兩個物件。


利用拖移技巧來設定 IBOutlet及IBAction。
@property (weak, nonatomic) IBOutlet UIImageView *imgView;
- (IBAction)btnAction:(id)sender;
 4.把準備好的圖片放到專案中,並將phone1.jpg設定給Image View。


 5.打開DLIViewController.h,輸入Boolean b;宣告變數b為布林值,只有真(true)和(false)兩種狀能真,其目的是為了記錄圖片切換的狀態值。
6.打開DLIViewControoler.m,輸入 @synthesize imgView;其中@synthesize是為了讓程式能直接操控imgView屬性值。接著在viewDidLoad事件程序中,設定b變數的初始值。viewDidLoad事件程序是指當View被載入時,將會被執行。
範例如下;

- (void)viewDidLoad
{
    [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
    b = false;
}
接著在(IBAction)btnAction:(id)sender事件程序中輸入
    UIImage *image;
    if(b)
        image = [UIImage imageNamed:@"phone2.jpg"];
    else
        image = [UIImage imageNamed:@"phone1.jpg"];
    b = !b;
    imgView.image = image;
上方程式先定義一個UIImage變數,名稱為image,然後利用if來判斷b變數值。