SwiftによるiOSアプリ開発基本講座

タブバーを使うアプリのコーディング

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
タブバーに新しく追加したタブをカスタマイズして、名前やアイコン画像を設定する方法について説明します。
講師:
08:47

字幕

このレッスンではタブビューに新しく追加したタブをカスタマイズする方法を説明します。まずこちらの状態を確認しましょう。こちらでは現在3つ目のビューをタブバーに追加したところです。ですが画面右下のところを見るとタブバーのアイコンが設定されていないことがわかります。またタブバーの名前もItemとデフォルトのものになっていますのでこちらをFirst Secondに次いでThirdに変えたいと思います。それではこのタブの設定を行っていきましょう。まずはXcodeに新しい画像を3つ追加します。タブの画像にはこの3つの画像を使用します。third.png third@2x.pngそしてthird@3x.pngこの3つの画像です。これらのアイコン画像の大きさはこのようにプレビューで確認しますとthird.pngは25x25ピクセルthird@2x.pngは50x50ピクセルthird@3x.pngは75x75ピクセルになっています。ここでこのようにタブのアイコン画像を用意するときにはAppleの公式の文書であるこのApple Human Interface Guidelineの存在を忘れないようにしてください。 こちらのHuman Interface GuidelineのIcon and Image DesignのさらにIcon and Image Sizesと書かれているところを見るとここの一覧表のところにタブバーのアイコンはどのようなサイズにするべきかということが書かれています。ここでまず基本になる大きさは25x25ピクセルそしてさらに2倍の大きさは50x50ピクセルそして75x75ピクセルが3倍のものとなっていますのでこれらの仕様に準拠する必要があります。尚この情報に関しては最新のものを常に確認していただく必要がありますので必ずこの英語版のHuman InterfaceGuidelineを参照するようにしてください。日本語訳のものは非常に古い情報になっていることが多々あります。それではこのアイコン画像をXcodeに追加しましょう。Xcodeのimages.xcassetsというファイルを開きます。現在はここにfirstとsecondのアイコン画像が追加されていますのでここにさらにthirdのアイコン画像を追加します。左下にあるこの+ボタンを押してNew Image Setというメニューを選択します。 そしてこのイメージの名前をthirdと変えておきましょう。そしてこのthirdのイメージセットの中にthird.pngから@3xまでのこの3つのファイルを同時にドラッグ&ドロップで追加します。こうしてアイコン画像が用意できましたのでmain.storyboardの編集を行ってタブ項目の編集を行いましょう。タブ項目の編集はこの3つ目のビューと書かれているビューの一番下のところにこのitemと書かれたところがありますのでここをクリックしてそしてインスペクタ領域のこの右から3つ目のタブになります。Attribute Inspectorというところを開きます。そうするとここにこのTab Bar ItemそしてBar Itemというところに設定できる項目が表示されますのでここでTitleのところを編集してThirdそしてImageのところもですねこのボタンを押してFfirst second third3つ画像が並んでいますのでthirdを選択します。そうするとこのようにタブ項目に名前と画像が設定されたことがわかります。それでは実行して確認しておきましょう。実行ボタンを押します。するとシミュレータが起動しますのでこのようにFirst Secondに続いてThirdというタブの名前がしっかりと表示されたことがわかりますし、またこのタブの画像がアイコン画像に変更されたこともわかります。 尚イメージ画像はですねこのアイコン画像は元々白黒の画像がこのように用意されていますがそれに対してシミュレータ上ではこのように青い選択されているときには青いハイライトの画像になっていることが確認できます。そしてタブ項目の設定はこれで終わりなんですがちょっとこのXcodeのプロジェクトの校正を見ていただきますとFirstViewControllerとSecondViewControllerに対してはこのようにViewControllerのswiftのファイルが用意されているのに対して追加したThirdのビュー・コントローラに対してはまだこのswiftファイルが用意されていません。ですのでボタンを押したときなどのイベントを受け取ることが今できない状態ですので次はこのthirdのビュー・コントローラのためのswiftファイルを追加したいと思います。ではそれを追加するためにはこのSecondViewController.swiftを選択した状態で右クリックをしてください。あるいはCtrlキーを押しながらクリックしても同じことができます。するとこのようにメニューが表示されますのでここからNew Fileというのを選択しましょう。 そしてiOSのSourceというカテゴリの中からCocoa Touch Classというのを選択します。そしてNextボタンを押してこのSubclass ofと書かれているところにUIViewControllerを選択してください。ここにUIViewControllerが選択されていると上のこのクラスの名前のところに自動的にViewControllerという名前が補完されて表示されます。そしてこのクラスの名前をThirdThirdViewControllerと編集します。そしてLanguageのところもSwiftになっていることを確認した上でNextボタンを押します。そして後はこのCreateボタンを押せばファイルの作成が完了します。このようにしてThirdViewControllerが追加されました。ただし現在のところこのクラスとこのstoryboardの上のこの3つ目のこの新しく追加されているビュー・コントローラを結びつける情報が何もありませんのでこのThirdViewController.swiftがこの新しいビュー・コントローラに対応付けられる情報を何かしら用意してやらないといけません。 それはどういうふうにすればいいのかと言いますとこの3つ目のビュー・コントローラに対してインスペクタの領域から左側から1つ目 2つ目 3つ目ここにIdentity InspectorというインスペクタがありますのでここでこのCustom Classというのを使って先ほど作成したThirdViewControllerをクラスのところに選択してやります。こうするとこの3つ目のビューのビュー・コントローラとそしてこのクラスのThirdViewController.swiftというこの実装が結びつくようになりますので何かしらのイベントが起きたときにそのイベントをメソッドの形で受け取ることができるようになります。それでは実際にここにボタンを1つ追加して動作することを確認しておきましょう。ボタンを追加して横方向に表示する制約を1つ追加してさらに上方向の制約と横幅と高さの制約も追加します。そしてアシスタントエディタを使ってこのThirdViewControllerのところにドラッグ&ドロップで右クリックしながらのドラッグでこのアクションを1個追加したいと思います。ボタンが押されましたということでButtonPressedという名前でメソッドを追加します。 それではこのButtonPressedにprintlnで3つ目のボタンが押されたということでThird Button!!という文字列を表示するようにしましょう。それではアプリケーションを実行してみたいと思います。ビルドしてシミュレータの上で実行します。そしてThirdのタブを選択してこのボタンを押すと後ろの方にこのボタンが押されるたびにこのようにThird Button!!という文字列が表示されるようになったことがわかります。このレッスンではタブ項目のカスタマイズについて説明しました。

SwiftによるiOSアプリ開発基本講座

このコースではiPhoneやiPadのアプリを作ってみたい方に向けて、簡単なiOSアプリを作りながらSwiftを使ったXcodeでの開発手順をひとつずつ丁寧に解説していきます。各レッスンではiOSのフレームワークの機能を確認しながら、アウトレットやアクション、MVCモデルやDelegateといったアプリ開発に必要な知識を説明します。

5時間10分 (53 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年10月15日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。