設定画面の作成【その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はまだ、動作しません。