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

こんにちは！クラウドナインアップスのショウです。

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

前回のブログはこちら →「ファイナンス・経済ニュース」アプリができるまで　＃３

今回作成したアプリ

「ファイナンス・経済ニュース – 最新情報を素早くキャッチ」

アプリ作成

手順④戻る・進む・リロード（更新）

SegueControllerにToolbar(ツールバー)を追加し、そこに機能に対応したボタンを配置していきます。

ツールバーにはボタンの他に固定スペース・可変スペースが配置できます。

＊Fixed Space Bar Button Item＊

固定スペース

＊Flexible Space Bar Button Item＊

可変スペース

見た感じでは Navigation bar (ナビゲーションバー )と似ていますが、ナビゲーションバーとの違いは

・ナビゲーションバーにはデフォルトで前の画面に戻るボタンが配置されている。（ツールバーには配置されていない）

・ナビゲーションバーはタイトルが設定できるがツールバーはできない。

などが挙げられます。

ツールバーの設定では

＊Style：Default,Black,black Translucentから指定

＊Translucent：透過にするかを指定

＊Bar Tint：ツールバーの色を指定

を指定できます。

まずは、WebViewを少し小さくして Toolbarを入れる余白を作ります。

そしてToolbarを追加し、Toolbarの上辺とWebViewの下辺を合わせてください。

ツールバーにはデフォルトでItemボタンが1つありますのでこれを戻るボタンにして、

「Bar Button Item」・「Fixed Space Bar Button Item」を２つずつ追加し、

Bar Button Itemをそれぞれ進むボタン・リロードボタンにします。

戻る・進むボタンは「<」・「>」などわかりやすいものにしときましょう。

Fixed Space Bar Button Item は下図の赤枠で調整できます。

リロードボタンは右端のボタンを選択したあと,

赤枠の「identifier」で変えることができます。

「identifier」をクリックすると以下の画面が表示されますので「Refresh」を選択します。

この時点ではまだボタンを押しても何も起こらないので機能を設定していきます。

ボタンを右クリックでWebViewにドラッグすると以下の画面が出てくるので、

「戻る」->「goBack」

「進む」- >「goForward」

「リロード」->「reload」

をそれぞれ選んでください。

SegueController.h とひも付けし、コードを書いていきます。

「戻るボタン」を右クリックでSegueController.hにドラッグし、ひも付けしてください。

「進むボタン」・「リロードボタン」も同様におこなってください。

SegueController.m

- (void)viewDidLoad {
    [super viewDidLoad];
   
//WebViewのデリゲートを指定する
    self.webView.delegate = self;  //忘れないこと
//起動時は戻る・進むボタンを無効化
    self.returnButton.enabled = NO;   //<-追加
    self.forwardButton.enabled = NO;  //<-追加
   
     [self configureView];
}
//  ウェブサイトが正常（200）に読み込まれた際に呼び出されるwebView のデリゲートメソッド
-(void)webViewDidFinishLoad:(UIWebView *)webView {
   NSLog(@"%s",__func__);
    //戻る・進むボタンはウェブビューで利用できる場合に有効となる。
    self.returnButton.enabled = self.webView.canGoBack;      //<-追加
     self.forwardButton.enabled = self.webView.canGoForward;  //<-追加

}