読者です 読者をやめる 読者になる 読者になる

まゆたまガジェット開発逆引き辞典

電子工作やプログラミングのHowtoを逆引き形式で掲載しています。作りたいモノを決めて学んでいくスタイル。プログラマではないので、コードの汚さはお許しを

StoryboardでなんちゃってTabbarを作る

※この方法、UIButtonなどのアクション系つけると動作が怪しくなることが分かりました。消すべきかもですが、一応残しておきました。

通常Tabbarは黒のグラデーションになってますが、ここに画像を設置する方法はやや面倒ですが方法があります(日本語でググっても出てくる)。
しかし、Tabbarの高さを調整して画像の高さに合わせたりするのは激しくメンドクサイなーと思ってたら、こんな方法が。
カスタムSegueを使うことで、なんちゃってTabarを作ることができます。
これでメンドクサイカスタムTabbarの設定ともオサラバさ!
英語と一部コードが省略されているので、流れと一部のコードのみ日本語で書いてみました。あと、16.の後の※は私が追加したものです。
追加するコードは上記のページを参考にしてください。

1.SingleView Applicationで新規プロジェクトを作成
2.Tabbarでボタンにあたる画像ファイル(以下、タブボタン)とTabbarで背景にあたる画像(以下、タブ背景)を用意、ドラックして読み込ませる
3.UIImageでタブ背景を設置、UIButtonでタブボタンを設置(TypeはCustomで)。ここでデフォルトだけではなくSelectedにも画像を設定するとグッド。
4.Viewを追加、画面サイズ-タブ背景の大きさにする(なんちゃってTabbarを除いたサイズ)。分かりやすいように色を変えておきましょう
5.ViewControllerを追加、ViewControllerを選択してSizeをFreeFormにしておく
6.4.のサイズを確認しておく
7.追加したViewControllerの中にあるViewをクリック、サイズを6.の大きさに変更する
8.追加したViewControllerを選択して、Layoutの中の「Resize View From NIB」のチェックを外す。Viewの背景色を変えておくといいかも
9.追加したいViewの数だけ8.をコピペ。Viewの背景色を変えておくといいかも
10.タブボタンをcontrolを押しながらクリック、ボタンを押したらこの画面に変えたいと思うViewまでドラックして(Storyboardで画面移動を設定するときと同じように)、Customを選択する。ModalとかじゃなくてすべてCustomにする
11.新規ファイルを追加する。このときSubclassは「UIStoryboardSegue」にしておく
12.11.で追加したファイル.mに「#import "もともとあるView.h"」を追加して、上記サイトの「- (void) perform」以下のコードを書く
13.最初からあるViewControllerの.hを選択、以下のコードを追加する(名前はサイト先のものと同じにしてあります)

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
//以下2行を追加
@property (weak,nonatomic) IBOutlet UIView *placeholderView;
@property (weak,nonatomic) UIViewController *currentViewController;

@end

14.最初からあるViewControllerの.mを選択、以下のコードを追加する(名前はサイト先のものと同じにしてあります)

@implementation ViewController
//これを追加
@synthesize placeholderView,currentViewController;

15.Storyboardに戻って、最初からあるViewControllerをcontrolを押しながらクリックして追加したViewまでドラックする。そのときにplaceholderViewを選ぶ
16.Segue({}ってなってるやつ)をクリックして、Segue Classに11.で追加したファイルの名前を入れる。Segue ClassはすべてのSegueで同じ名前を入力。ついでにIdentifierにそれぞれ違う名前を入力する
※試してみたところ、この直後に4.で追加したViewをもともとあるViewの直下にもっていけば、5.6.7(Viewのサイズを変える)はやらなくてもOKみたいです。320*480のままでボタンも動くし大丈夫でした。
階層としてはこんな感じ。追加したViewの上にImageViewも載せました。

TaabrSample〜となっているファイルがタブ背景の画像、cosBG2〜となっているファイルが追加したViewに載せた画像です

17.ここでRunを押すと画面移動ができている(タブボタンの画像は変わらない)

18.Viewを追加して、タブ背景と同じサイズにする。そしてStoryboardの左のパーツが階層表示されているウィンドウの中にある追加したViewを探す。
それをいちばん下に持っていく。その後、タブボタンをすべて選択して追加したViewにドラックする。ボタンの位置を調整した後、追加Viewの背景をClearColorにする
19.最初からあるViewController.hに以下を追加する

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
//以下を追加
@property (weak,nonatomic) IBOutlet UIView *tabView;

20.最初からあるViewController.mに以下を追加する

@implementation ViewController
//tabViewを追加
@synthesize placeholderView,currentViewController,tabView;

//以下を追加、「Segueの名前を入力」にはStoryboardで設定したそれぞれのSegueの名前を入れる
-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if([segue.identifier isEqualToString:@"Segueの名前を入力"]
       || [segue.identifier isEqualToString:@"Segueの名前を入力"]
       || [segue.identifier isEqualToString:@"Segueの名前を入力"]){
        
        for (UIButton *btn in self.tabView.subviews) {
            [btn setSelected:NO];
        }
        UIButton *button = (UIButton *)sender;
        [button setSelected:YES];
    }
}

21.Storyboardに戻って、最初からあるViewControllerをcontrolを押しながらクリックして追加したViewまでドラックする。そのときにtabViewを選ぶ
22.おしまい!