設定画面の作成【その5/全5】

ビデオで即ワカ 内容)設定画面の作成

1)ストーリボードにて、TableViewを選択し、プロパティのContentをStatic Cellsに変更

2)Table View Sectionを選択し、プロパティのRowsを1に変更

3)設定画面にON/OFFを設定できるSwitchを作ります。

4)作成したSwitchのOutletを用意しておきます。

5)作成したSwitchのActionを用意しておきます。

ビデオで即ワカ (音有り)

6)SettingViewController.mの中で、
今回は、#pragma mark – Table view data sourceから

  - (IBAction)swChange:(id)sender {の上までは使いません。

  コメントアウトか削除しておていください。

7)設定画面を開いた時設定値を設定用のSwitchに反映するコードを書きます。

SettingViewController.mのviewDidLoad内

コピペで即ウゴ

/設定画面を開いた時設定値を設定用のSwitchに反映

    NSUserDefaults *ud = [NSUserDefaults standardUserDefaults];//NSUserDefaults取得

    _swONOFF.on =[ud boolForKey:@"KEY_ONOFF"];

8)Switchを変更した時に設定値として保存するコードを書きます。

SettingViewController.mのswChangeを下記の様に変更します。

コピペで即ウゴ

//Switchを変更した時に設定値として保存する

- (IBAction)swChange:(id)sender {

    NSUserDefaults *ud = [NSUserDefaults standardUserDefaults];//NSUserDefaults取得

    [ud setBool:_swONOFF.on forKey:@"KEY_ONOFF"];

    [ud synchronize];

}

この様な感じで動きます。

ビデオで即ワカ (音有り)

TableViewは、奇麗に整列でき各設定のグルーピングができる為に見た目も良いです。

更に、設定値をあとから増やしていっても、スクロールをしてくれるので、拡張性も良いです。


設定画面の作成【その4/全5】

実際のアプリの動作の流れに沿ってコードを書いていきます。
ここからは、アプリケーション毎にアレンジしていく事になります。
例として、ON/OFFの設定値を1つ用意し、保存、画面反映、設定変更等の機能が動く様にします。

ビデオで即ワカ 内容)元画面(設定を呼び出す側の画面)の作成
1)ストーリボードにて、元画面にON/OFFを表示するLabelを作ります。
2)作成したLabelのOutletを用意しておきます。

ビデオで即ワカ (音有り)

3)設定値デフォルト準備、設定値の画面反映、設定画面から戻った時のコードを書きます。

(1)ViewController.mのviewDidLoad内へ

コピペで即ウゴ

    //設定値デフォルト準備

    NSUserDefaults *ud = [NSUserDefaults standardUserDefaults];//NSUserDefaults取得

    NSMutableDictionary *defaults = [NSMutableDictionary dictionary];//NSMutableDictionary取得

    //「KEY_ONOFF」(BOOL値) ON=YES OFF=NO(デフォルト)

    [defaults setObject:@"NO" forKey:@"KEY_ONOFF"];

    [ud registerDefaults:defaults];//設定値を保存

    //設定値の画面反映

    [self Setting];

(2)ViewController.mの@endの前に追加

コピペで即ウゴ

//設定値の画面反映

- (void)Setting{

    NSUserDefaults *ud = [NSUserDefaults standardUserDefaults];//NSUserDefaults取得

    if([ud boolForKey:@"KEY_ONOFF"]){//YES

        _lblONOFF.text = @”ON”;

    }else{//NO

        _lblONOFF.text = @”OFF”;

    }

}

(2)ViewController.mのfirstViewReturnActionForSegueを下記の様に

コピペで即ウゴ

//設定画面から戻った時

- (IBAction)firstViewReturnActionForSegue:(UIStoryboardSegue *)segue

{

    NSLog(@”設定画面から戻りました。”);

    //設定値の画面反映

    [self Setting];

}

 


設定画面の作成【その3/全5】

ビデオで即ワカ 内容)設定画面用のコードを書くところを準備します。
1)メニューから、File▷New▷Fileを選びます。
2)iOSを選択▷Objective-C classを選択し、Next
3)ClassをSettingViewController、Subclass of をUITableViewControllerにし、Next
4)保存場所を指定し、Create(通常は、プロジェクトのフォルダが表示されるのでそのままCreateでOK)
5)SettingViewController.hとSettingViewController.mが作成された事を確認
6)ストーリボードで、TableViewContorollerを選択し、ClassをSettingViewControllerに設定

ビデオで即ワカ (音有り)

設定画面のコードは、SettingViewController.mに書く事になります。

ここまでで、どのアプリケーションでも共通して使える、おおまかな構成ができました。

設定画面の作成【その2/全5】

ビデオで即ワカ 内容)設定画面から、元画面(設定を呼び出す側の画面)へ戻る部分を作ります。
1)TableViewContorollerのNavigation Bar Button Itemを配置します。
2)Exitを選択し、Presenting Seguesの○から、Bar Button Itemに接続し、actionを選択します。

ビデオで即ワカ (音有り)

ここまでで、元画面から設定画面へ切り替わり、設定画面から元画面へ戻り
firstViewReturnActionForSegueが呼び出される部分まで動作します。


設定画面の作成【その1/全5】

設定画面は出来るだけ、時間をかけず(アプリのメイン機能に開発時間をかけたい)
でも奇麗に作っておきたいですね。私の場合、この様な感じで作ってますので紹介します。

ビデオで即ワカ 内容)元画面(設定を呼び出す側の画面)▷設定画面を作ります。
1)ストーリーボードでNavigation Controllerを組み込み
2)元画面にボタン配置、選択状態でcontrolを押しながらNavigation Controllerと接続して、modalを選択
3)画面切り替わりのアニメーションを変えるには、Modal segue from Button…を選択して、プロパティTransitionを変える。
(ビデオの最後にコードのコピペまで入ってますが、この部分は4)のコードをコピペして下さい)

ビデオで即ワカ (音有り)

4)ViewController.mの@endの直ぐ上に以下を追加します。(設定画面が閉じた時にこれが呼ばれる様にします。)

コピペで即ウゴ

- (IBAction)firstViewReturnActionForSegue:(UIStoryboardSegue *)segue

{

    NSLog(@”設定画面から戻りました。”);

}

ここまでで、元画面から、設定画面への切り替わりが動作する。

ここでは、4のfirstViewReturnActionForSegueはまだ、動作しません。

アニメーション

アニメーションの例として、UIImageViewでやってみます。

1)ストーリボードで、この様な感じでOutletを用意します。
20130708085741eab

2)ViewController.mはこんな感じで書きます。

UIImageViewとなってる所は、アニメーションにしたい対象のクラス(UIViewとか)に変えればよいです。

コピペで即ウゴ

    // アニメーション ブロック スタート

    [UIImageView beginAnimations:nil context:NULL];//アニメーション内容の指定開始

    [UIImageView setAnimationDuration:3.0];//アニメーション時間(秒)

    //■■■ここから実際にアニメーションしたい内容を書きます。

    //透明▷不透明

    _imgV.alpha = 0.0;//初期 透明

    _imgV.alpha = 1.0;//最終 不透明

    //拡大

    _imgV.transform = CGAffineTransformMakeScale(0.0,0.0);//初期 拡大

    _imgV.transform = CGAffineTransformMakeScale(1.0,1.0);//最終 拡大

    //■■■ここまで実際にアニメーションしたい内容を書きます。

    [UIImageView commitAnimations];                  //アニメーション実行

    // アニメーション ブロック エンド

3)これを動かすとこんな感じです。

201307080857422a7

 

iPhone内のファイルをMacに転送

この状態からスタート

ビデオで即ワカ (音有り)

OrganizerでDownloadすると、iPhone▷Macへ*******.xcappdataというファイルで保存される

転送されたファイル*******.xcappdataはFinderで選択し、パッケージの内容を表示で開ける。

転送後は、Macで自由に確認、編集できますので、ファイルへの書込み状態チェックや、繰り返しテストする時のバックアップとして使えます。

また、逆も可能で、OrganizerでUploadを選択し、Macの*******.xcappdataファイルを選択すると、MacのファイルをiPhoneへ転送できますので、効率的なデバックができる様になります。

iPhone内ファイルの確認

デバック時に、iPhone内のファイル確認に使えます。

Organizer起動▷実機のApplicationsを選択▷アプリを選択▷ファイル一覧表示

ビデオで即ワカ (音有り)

 

アラートビュー(メッセージ表示とボタン選択)その2

アラートビュー(メッセージ表示とボタン選択)その1の続きです。

 

 

ボタンの数を1個の場合、アラートビューの準備はこの様に感じになります。

20130628103328851

コピペで即ウゴ

    UIAlertView *al = [[UIAlertView alloc] initWithTitle:@”タイトル message:@”メッセージ delegate:self cancelButtonTitle:nil otherButtonTitles:@”OK”, nil];

ボタンの数を2個の場合、アラートビューの準備はこの様に感じになります。

201306281033268d0

コピペで即ウゴ

    UIAlertView *al = [[UIAlertView alloc] initWithTitle:@”タイトル message:@”メッセージ delegate:self cancelButtonTitle:nil otherButtonTitles:@”はい,@”いいえ, nil];

メッセージを複数行にする場合、アラートビューの準備はこの様に感じになります。
2013062810444506e

改行したいところへ \n を入れて下さい。

コピペで即ウゴ

    UIAlertView *al = [[UIAlertViewalloc] initWithTitle:@”タイトル message:@”1行目\n2行目\n3行目 delegate:selfcancelButtonTitle:nilotherButtonTitles:@”OK”, nil];

 


 

アラートビュー(メッセージ表示とボタン選択)その1

アラートビューとはこれです。

201306281007365b5

1)まずアラートビューを準備します。

アラートビューを表示させたいタイミングのところに貼付けて下さい。

上の画像のアラートビューを作るにはこの様に設定します。

ボタンはキャンセルボタンも含め5個まではいけます。それ以上が画面が崩れるみたい。。。

コピペで即ウゴ

    //アラートビューの準備

    UIAlertView *al = [[UIAlertView alloc] initWithTitle:@”タイトル message:@”メッセージ delegate:self cancelButtonTitle:@”キャンセル otherButtonTitles:@”ボタン1,@”ボタン2,@”ボタン3,@”ボタン4, nil];

    al.tag = 1;//アラートビューが複数ある場合、ここでそれぞれに違う番号を指定します。

    [al show];//アラートビューを表示

2)アラートビューで押した番号に応じて処理をする部分を準備します。

ViewController.mの一番下 @end の上にコピペで即ウゴです。

コピペで即ウゴ

//アラートビューでボタン押した後の処理

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex

{

    if(alertView.tag == 1){//アラートビューが複数ある場合、この番号で処理を分けます。

        switch (buttonIndex) {

            case 0:

                NSLog(@”キャンセルを押しました);

                break;

            case 1:

                NSLog(@”ボタン1を押しました);

                break;

            case 2:

                NSLog(@”ボタン2を押しました);

                break;

            case 3:

                NSLog(@”ボタン3を押しました);

                break;

            case 4:

                NSLog(@”ボタン4を押しました);

                break;

            default:

                NSLog(@”その他);

                break;

        }

    }

}