ハチマン | 八幡山と育児、ライフスタイル、ITの情報ブログ

「ファイナンス・経済ニュース」 アプリができるまで #4

「ファイナンス・経済ニュース」 アプリができるまで #4

こんにちは!クラウドナインアップスのショウです。
初めてのアプリ開発、前回はニュースが表示されタップすると画面が遷移しニュースの内容が詳しく表示されるところまで行いました。
今回はSegueControllerに戻る・進む・リロード( 更新 )ボタンを追加していきたいと思います。

アプリ作成

手順④戻る・進む・リロード(更新)
SegueControllerにToolbar(ツールバー)を追加し、そこに機能に対応したボタンを配置していきます。
ツールバーにはボタンの他に固定スペース・可変スペースが配置できます。
*Fixed Space Bar Button Item*
固定スペース
スクリーンショット 2015-02-24 14.32.33
*Flexible Space Bar Button Item*
可変スペース
スクリーンショット 2015-02-24 14.41.31
見た感じでは Navigation bar (ナビゲーションバー )と似ていますが、ナビゲーションバーとの違いは
・ナビゲーションバーにはデフォルトで前の画面に戻るボタンが配置されている。(ツールバーには配置されていない)
・ナビゲーションバーはタイトルが設定できるがツールバーはできない。
などが挙げられます。
ツールバーの設定では
*Style:Default,Black,black Translucentから指定
*Translucent:透過にするかを指定
*Bar Tint:ツールバーの色を指定
を指定できます。
スクリーンショット 2015-02-24 14.52.22
まずは、WebViewを少し小さくして Toolbarを入れる余白を作ります。
そしてToolbarを追加し、Toolbarの上辺とWebViewの下辺を合わせてください。
スクリーンショット 2015-02-24 13.53.59
ツールバーにはデフォルトでItemボタンが1つありますのでこれを戻るボタンにして、
「Bar Button Item」・「Fixed Space Bar Button Item」を2つずつ追加し、
Bar Button Itemをそれぞれ進むボタン・リロードボタンにします。
スクリーンショット 2015-02-24 16.11.51
戻る・進むボタンは「<」・「>」などわかりやすいものにしときましょう。
Fixed Space Bar Button Item は下図の赤枠で調整できます。
スクリーンショット 2015-02-26 10.30.46
リロードボタンは右端のボタンを選択したあと,
赤枠の「identifier」で変えることができます。
スクリーンショット 2015-02-26 10.38.38
「identifier」をクリックすると以下の画面が表示されますので「Refresh」を選択します。
スクリーンショット 2015-02-26 10.50.23
この時点ではまだボタンを押しても何も起こらないので機能を設定していきます。
ボタンを右クリックでWebViewにドラッグすると以下の画面が出てくるので、
スクリーンショット 2015-02-26 11.09.09
「戻る」->「goBack」
「進む」- >「goForward」
「リロード」->「reload」
をそれぞれ選んでください。
SegueController.h とひも付けし、コードを書いていきます。
「戻るボタン」を右クリックでSegueController.hにドラッグし、ひも付けしてください。
「進むボタン」・「リロードボタン」も同様におこなってください。
スクリーンショット 2015-02-26 11.39.37
スクリーンショット 2015-02-26 11.44.59
SegueController.m

 

シミュレーターで確認

①. 「戻るボタン」・「進むボタン」ともに灰色で押せない状態になっています。
iOS Simulator Screen Shot 2015.02.26 14.50.42
②. どこか適当なところをタップしてページ移動すると「戻るボタン」が
      押せるようになりました。
  iOS Simulator Screen Shot 2015.02.26 14.50.31
③. 「戻るボタン」を押すと前のページに戻り、進むボタンが押せるようになりました。
 iOS Simulator Screen Shot 2015.02.26 14.52.58

第4回まとめ

今回はSegueControllerにToolbar(ツールバー)を追加し、戻る・進む・リロード( 更新 )の機能をつけました。
ちなみに、、、
さっき紹介したBarButtonItemのidentifierには他にもこれだけの種類があります。
スクリーンショット 2015-03-02 4.05.30
スクリーンショット 2015-03-02 4.25.21
スクリーンショット 2015-03-02 4.06.17

詳しく知りたい方は、アプリ開発スクール「クラウドナインアップス」へお気軽にご相談ください。

スクリーンショット 2015-03-09 11.28.56

次回はGitHubを使ってお気に入り機能を付け加えたいと思います。
参考サイト:
#5へ続く〜

ハチマンブログは今なん位? 関東情報ブログランキング

コメントをどうぞ

*
*
* (公開されません)

世田谷区八幡山から育児ライフスタイルITに関する情報をブログでお届けします。
サイトマップ
Return Top