Mac初心者のiPhoneアプリ開発記7 設定画面を作る

1

今回はツール系アプリなら装備しておきたい、いわゆる設定画面を作ります。今後アプリ開発を続けるなら、ここを避けて通ることは出来ないでしょう。

私が最初に作るアプリはiPhone Screenshot MakerのiOS版にしようと考えていますが、基本機能であるカメラロールから画像を選びUIImageで合成後に保存。この流れでテストは成功しました。

さて次は設定画面。よく見る普通の設定画面って一体どうやって作ればよいの? ここから長い道のりとなりました。

 

ストーリーボード

この連載では今まであまりストーリーボードには触れてこなかったが、設定画面の作り方をググると、その重要性がわかってくる。例えばドットインストールのiOSレッスンでは、ほぼストーリーボードのみを扱っている。ちなみにドットインストールは全部見ても1時間くらいなのでサクッと見ておく。選択式のアドベンチャーゲームならストーリーボードだけで開発できそう。

2

そんなわけで画面遷移はストリートボードのNavigation Contorollerでできそうと分かる。では肝心の設定画面はどう作る?自力でボタンやラベルを配置するのだろうか?

iOSプログラミング入門 (全24回) - プログラミングならドットインストール

 

設定画面はTable View Controllerで

3

結論的に多くのアプリで採用されている設定画面のUIはTable View Controllerだと分かる。Table View Controllerを使えば、項目を動的に増やすことができて、スクロール処理も自動でやってくれる。これがしたかった。早速ストーリーボードとテーブルビューに挑もう。

 

これから勉強する人へ

ストーリーボードで画面を追加するまではGUIで簡単だが、例えば、変数を画面間で受け渡ししたいなど、ちょっとした事でグンと難易度が上がるので挑戦しよう。ソースファイルには最初から、ある程度ひな形が記述された状態なので、必要に応じて削除したり追加する形のプログラミングスタイル。例えばセルの数は、最初から用意されたnumberOfRowsInSectionメソッド内に設定するなど。

 

今回大変お世話になったページ

Storyboardから始めるiPhoneアプリ開発 設定画面の作り方(1)〜概要〜

ProgrammingLife.jp: Storyboardでテーブルビューのセルをカスタマイズする (iOS)

この2つのページに沿って学習すれば理解できる。素晴らしい。

 

Static Cellsでテーブルビューを楽に設計できる

iOS5から導入されたUITableViewのStatic Cellsを使えば楽に設計できる事も分かった。それまでは動的にソースからセルを作る必要があったが、今はストーリーボードからGUIで楽に作れますよという機能。 最初はこれで設計しましたが、後々、自由にセルを作りたくなりそうだったので、Static Cellsを使うのは止めました。 Static Cellsについて参考になったページ。

Static Cells で楽々UITableViewプログラミング - 職業プログラマの休日出勤

 

今回ハマったポイント

UINavigationBarのtitleの変更方法
ngi_ConfigDetailTitle.title = str_ConfigDetailTitle;
↓
ngi_ConfigDetailTitle.topItem.title = str_ConfigDetailTitle;
XcodeやiOSのバージョンにより教材と異なった点

・View Controller の Identifier → Storyboard ID

[self presentModalViewController:VC animated:YES];
↓
[self presentViewController:VC animated:YES completion: nil];
[self dismissModalViewControllerAnimated:YES];
↓
[self dismissViewControllerAnimated:YES completion:NULL];

 

注目ポイント

NSUserDefaults

画面間でのデータの受け渡し方法全般。NSUserDefaultsの存在を知る。非常に大事

とても参考になったサイト!→画面間でのデータの受け渡しに付いて: 永遠ログ

項目選択画面へ遷移する時のエフェクトを変更
VC.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
UIModalTransitionStyleCoverVerticalデフォルト。下から上にスライド。
UIModalTransitionStyleCrossDissolveフェードアウト、フェードイン。
UIModalTransitionStyleFlipHorizontal水平方向に画面が回転。

 

まとめ

今回、なぜかストーリーボードで紐付けができなくなったり、didSelectRowAtIndexPathが効かなくなったりして数時間悩んだが、プロジェクトを作りなおすとあっさり直った。私のミスの可能性もありますが、どうも動作がおかしい時などは試す価値があります。

 

この連載の一覧

  1. Mac初心者のiPhoneアプリ開発記

    この記事は先日購入したMacBook Air(略してMBA)でiPhoneアプリ...

  2. Mac初心者のiPhoneアプリ開発記2 Xcodeの闇の中で

    iPhoneアプリ開発するぞ!と意気込んでMBAを購入したのは1年前。でもAnd...

  3. Mac初心者のiPhoneアプリ開発記3 Objective-Cの壁

    手探りで進めているiPhoneアプリ開発記。前回は@ITの記事を参考に、Xcod...

  4. Mac初心者のiPhoneアプリ開発記4 Objective-Cの復讐

    前回から10日もたってしまい、ほとんど忘れてる状態からの再開です。今回も引き続き...

  5. Mac初心者のiPhoneアプリ開発記5 因縁のTwitterビューア

    今回は難しくて挫折していた「iOS 4のSDKで、Twitterを使ったiPho...

  6. Mac初心者のiPhoneアプリ開発記6 画像処理はじめました

    前回から随分時間が経ってしまいました。iPhoneアプリ市場は激戦なので、果たし...

  7. Mac初心者のiPhoneアプリ開発記7 設定画面を作る

    今回はツール系アプリなら装備しておきたい、いわゆる設定画面を作ります。今後アプリ...

  8. iOSの進化とフラットデザイン

    iKuracさんが作成したiOSの比較画像。先日発表されたiOS7のデザインの路...

  9. Mac初心者のiPhoneアプリ開発記8 設定画面を動的に作る

    前回は設定画面を作るためにストーリーボードやTableViewの仕組みを勉強しま...

  10. Mac初心者のiPhoneアプリ開発記9 アプリ申請までの道

    ようやく!初のiPhoneアプリ申請までたどり着きました。名前は『Screens...

  11. Mac初心者のiPhoneアプリ開発記 リリース後の反応

    実は先日8/9に『Screenshot Maker Pro』がリリースしました。...

  12. 大人センスなiPhone壁紙『A new world』

    NYで活躍中のドイツ人デザイナーTobias van Schneiderさんの作...

  13. ReynoldsさんのiPhone壁紙

    渋い色調のポリゴン地形がお洒落。Timothy J. Reynoldsさんの作品...

  14. シンプルの美学アンソニーさんのiPhone壁紙

    Anthony Zinonosさんの壁紙。青と黒、シンプルに色分けされた海上にオ...

  15. iPhoneアプリ開発記 iOS7対応で必要だったこと

    公開中のiPhoneアプリ『Screenshot Maker Pro』をiOS7...

  16. Cocos2d-xでiPhone&Androidアプリ開発記1

    そろそろ次のアプリ開発と日々考えていたんですが、私は個人開発なので今後は小粒なゲ...

  17. Cocos2d-xでiPhone&Androidアプリ開発記2 バージョン3.x系挫折

    『ドラゴンクエストモンスターズ スーパーライト』がCocos2d-xで開発とのこ...

  18. Cocos2d-xでiPhone&Androidアプリ開発記3 初心者TIPS

    今回で3回目のCocos2d-x連載。自作アプリを製作中ですが7割ほど完成してき...

  19. Cocos2d-xでiPhone&Androidアプリ開発記4 AdMobメディエーションでAdMob+iAd iOS編

    Cocos2dxで広告を表示するにはiOSとAndroid別々に設定が必要です。...

  20. Cocos2d-xでiPhone&Androidアプリ開発記5 AdMob Android編

    iOSに続きAndroidにAdmodを導入します。とりあえずAdModだけ表示...

  21. Cocos2d-xでiPhone&Androidアプリ開発記6 Android対応

    Androidアプリ開発経験は全くない状態で始めたCocos2dx。ここまでの開...

  22. Cocos2d-xでiPhone&Androidアプリ開発記7 ローカライズとアイコン組み込み

    ようやく初めてのcocos2dxアプリが完成しました! アルファベットを組み合わ...

  23. Cocos2d-xでiPhone&Androidアプリ開発記8 開発の流れとアプリ申請

    Cocos2d-xで初めてのアプリを公開しました。AndroidとiPhone両...

  24. Cocos2d-xでiPhone&Androidアプリ開発記9 SQLiteの注意点

    Cocos2d-xからSQLiteを使うには、iOSとAndroidそれぞれにラ...

  25. Cocos2d-xでiPhone&Androidアプリ開発記10 アプリ高速化

    Cocos2d-xで2本目をリリースしました。前回の英語パズルの続編『英単語ギズ...

  26. Cocos2d-xでiPhone&Androidアプリ開発記11 Androidのデバッグ

    Cocos2d-xによるアプリの新作をほぼ作り終えました。開発はXCode主体で...

  27. iOS/Androidアプリ『英単語RPG ワード・オブ・ザ・リング』

    iPhone/Androidアプリ『英単語RPG ワード・オブ・ザ・リング』を公...

  28. 人にも読めるQRコード

    人にも読めるQRコード『Human Readable Quick Respons...

  29. Xcode7にiOS 8 Simulatorがインストールできない

    Xcode 7.0.1に、iOS 8.1 Simulatorをインストールしよう...

 

 

 

広告