「UIToolbar」カテゴリーアーカイブ

UIToolbar

UIToolBar内のボタン間隔調整

コメントする
LINEで送る
このエントリーをはてなブックマークに追加

UIToolBar内のボタン間隔の調整は、UIBarButtonSystemItemFlexibleSpace と UIBarButtonSystemItemFixedSpace を使って行う。前者は伸び縮みするスペーサーで、後者は幅に固定値を指定するスペーサーだ。

UIBarButtonSystemItemFlexibleSpace
柔軟に伸び縮みするスペーサー

UIBarButtonSystemItemFixedSpace
固定幅のスペーサー

利用方法はソースコードをご覧下さい。

//NavigationBarと同じ44ピクセルで作成
UIToolbar * toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
[self.view addSubview:toolBar];

UIBarButtonItem * button1 = [[UIBarButtonItem alloc] initWithTitle:@"ボタン1" style:UIBarButtonItemStyleBordered target:self action:@selector(action1)];
UIBarButtonItem * button2 = [[UIBarButtonItem alloc] initWithTitle:@"ボタン2" style:UIBarButtonItemStyleBordered target:self action:@selector(action2)];
UIBarButtonItem * button3 = [[UIBarButtonItem alloc] initWithTitle:@"ボタン3" style:UIBarButtonItemStyleBordered target:self action:@selector(action3)];

//伸び縮みするスペーサ
UIBarButtonItem * flexibleSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];

//固定幅のスペーサ
UIBarButtonItem * fixedSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
fixedSpace.width = -5;//負の値を指定すると間隔が詰まります

//toolBarに作成したボタンを設置します
toolBar.items = [NSArray arrayWithObjects:button1, flexibleSpace, button2, fixedSpace, button3, nil];
UIButton, UINavigationController, UIScrollView, UIToolbar, UIView

クラスごとのtintColor実装バージョン

コメントする
LINEで送る
このエントリーをはてなブックマークに追加

iOS5.0以降では、tintColorを利用できるクラスが増えました。iOS4系以前との互換性を保つためには、新規導入されたtintColorを使わないか、tintColorが実装されていない場合の代替処理を記述しておく必要があるので注意が必要です。

iOS 5.0以降

以下の3つのクラスではiOS5.0以降でtintColorを設定できます。

  • UIBarButtonItem
  • UIButton
  • UITabBar

    iOS2.0以降

    以下の4つのクラスではiOS2.0以降でtintColorを設定できます。

  • UINavigationBar
  • UISearchBar
  • UISegmentedControl
  • UIToolbar
    • UIButton, UINavigationController, UIToolbar

    tintColor

    コメントする
    LINEで送る
    このエントリーをはてなブックマークに追加

    iOS5から、UIViewのサブクラスの幾つかでtintColor属性が使えるようになった。UINavigationBarや、UIToolBarで使えるようになっているのは間違いないが、それ以外のどのクラスで使えるのか調査してみた。

    1. ヘッダーを調査

    公式ドキュメントでtintColorという文字列を検索する方法がわからなかったので、headerファイルを調査した。tintColorが含まれているproperty行は以下の7つあった。おそらくこの7つのクラス（とそのサブクラス）で使えるのだろう。7つものクラスで独立して定義されているのは違和感を感じるが（プロトコルとかを使うべき？）、得られたクラスのリストは妥当そうだ。

    macbookpro:Headers mac$ pwd
    /Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS5.0.sdk/System/Library/Frameworks/UIKit.framework/Headers
    macbookpro:Headers mac$ grep tintColor * | grep @property
    UIBarButtonItem.h:@property(nonatomic,retain) UIColor *tintColor __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_5_0) UI_APPEARANCE_SELECTOR;
    UIButton.h:@property(nonatomic,retain)   UIColor     *tintColor __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_5_0); // default is nil. only valid for some button types
    UINavigationBar.h:@property(nonatomic,retain) UIColor *tintColor UI_APPEARANCE_SELECTOR;
    UISearchBar.h:@property(nonatomic,retain) UIColor                *tintColor;             // default is nil
    UISegmentedControl.h:@property(nonatomic,retain) UIColor *tintColor UI_APPEARANCE_SELECTOR;
    UITabBar.h:@property(nonatomic,retain) UIColor *tintColor __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_5_0) UI_APPEARANCE_SELECTOR;
    UIToolbar.h:@property(nonatomic,retain) UIColor   *tintColor  UI_APPEARANCE_SELECTOR;

    この結果から、tintColor属性を持つクラスは以下の7つだとわかる。

    • UIBarButtonItem
    • UIButton
    • UINavigationBar
    • UISearchBar
    • UISegmentedControl
    • UITabBar
    • UIToolbar

    2. 使ってみた

    想定通りの動作をしている。

    • UINavigationBar + UIBarButtonItem
      UIViewController * vc = [[UIViewController alloc] init];
      vc.title = @"Title";
      UINavigationController * nc = [[UINavigationController alloc] initWithRootViewController:vc];
      nc.navigationBar.tintColor = [UIColor redColor];
      UIBarButtonItem * bbi1 = [[UIBarButtonItem alloc] initWithTitle:@"info" style:UIBarButtonItemStylePlain target:nil action:nil];
      UIBarButtonItem * bbi2 = [[UIBarButtonItem alloc] initWithTitle:@"info" style:UIBarButtonItemStylePlain target:nil action:nil];
      bbi2.tintColor = [UIColor grayColor];
      vc.navigationItem.rightBarButtonItems = [NSArray arrayWithObjects:bbi1, bbi2, nil];

    • UIToolbar + UIBarButtonItem
      UIViewController * vc = [[UIViewController alloc] init];
      UIToolbar * tb = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
      [vc.view addSubview:tb];
      tb.tintColor = [UIColor orangeColor];
         
      UIBarButtonItem * bbColored = [[UIBarButtonItem alloc] initWithTitle:@"UIBarButtonItem" style:UIBarButtonItemStyleBordered target:nil action:nil];
      bbColored.tintColor = [UIColor grayColor];
         
      UIBarButtonItem * bbNotColored = [[UIBarButtonItem alloc] initWithTitle:@"UIBarButtonItem" style:UIBarButtonItemStyleBordered target:nil action:nil];
      tb.items = [NSArray arrayWithObjects:bbColored, bbNotColored, nil];

    まとめ

    iOS5から導入されたtintColorを使うことで、手軽に標準コンポーネントの表示色を変更できることを確認できた。

    UIToolbar

    UIToolbarの色を変更

    コメントする
    LINEで送る
    このエントリーをはてなブックマークに追加

    tintColorを変更すると、任意の色に変更できます。この機能はiOS5.0以降で利用できます。

    UIToolbar * toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0.0f,0.0f, 320.0f, 50.0f)];
    toolbar.tintColor = [UIColor purpleColor];

    スクリーンショット

    ボタンの色までうまく変更できています。

    UIToolbar

    Flexible Bar Button ItemとFixed Bar Button Itemの生成

    コメントする
    LINEで送る
    このエントリーをはてなブックマークに追加

    Flexible Bar Button ItemとFixed Bar Button Itemは、以下のように生成します。これらのUIBarButtonItemを使うことでUIToolbar内のボタンの表示位置を調整できます。

    UIBarButtonItem *fixed = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];

    UIBarButtonItem *flexible = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];

    以下のように使います。

    UIToolbar * toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0.0f,0.0f, 320.0f, 50.0f)];
    toolbar.items = [NSArray arrayWithObjects:
     [[UIBarButtonItem alloc] initWithTitle:@"Button1" style:UIBarButtonItemStyleBordered target:nil action:nil],
     [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil],
     [[UIBarButtonItem alloc] initWithTitle:@"Button2" style:UIBarButtonItemStyleBordered target:nil action:nil],
     [[UIBarButtonItem alloc] initWithTitle:@"Button3" style:UIBarButtonItemStyleBordered target:nil action:nil],
     nil];

    スクリーンショット

    button1とbutton2の間に”Flexible Bar Button Item”が入っています。