UITabBarControllerのタブ項目に長過ぎるタイトルを設定した場合の対応

| コメント(0) | トラックバック(0)
UITabBarControllerのタブは、ページ数に応じてレイアウトが等分されるという非常に良く作られたUIです。
ただタイトルが長かった場合については考えられていないようで、下図の様になってしまいます。

長いタイトルを設定します:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];

    // Override point for customization after application launch.

    self.window.backgroundColor = [UIColor whiteColor];

    [self.window makeKeyAndVisible];

NSMutableArray* viewList = [NSMutableArray arrayWithCapacity:3];

for (NSInteger i = 0; i < 3; i++) {

UIViewController* viewController = [[[UIViewController alloc] init] autorelease];

viewController.title = @"クラムボンはかぷかぷわらったよ。";

[viewList addObject:viewController];

}

UITabBarController* tabBarController = [[[UITabBarController alloc] init] autorelease];

tabBarController.viewControllers = viewList;

self.window.rootViewController = tabBarController;

    return YES;

}


実行すると:
2013-02-26 12.59.28.png
タイトルが隣のタブと重なってしまいました。

タイトルをユーザの入力に任せる場合など、少し使い辛い仕様ですね。
今回はタイトルが長過ぎた場合(タブの幅を超える場合)に溢れない様にする為の方法をご紹介します。

先ほどのコードにタイトルラベルの幅を調整する為の処理を追加します。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];

    // Override point for customization after application launch.

    self.window.backgroundColor = [UIColor whiteColor];

    [self.window makeKeyAndVisible];

NSMutableArray* viewList = [NSMutableArray arrayWithCapacity:3];

for (NSInteger i = 0; i < 3; i++) {

UIViewController* viewController = [[[UIViewController alloc] init] autorelease];

viewController.title = @"クラムボンはかぷかぷわらったよ。";

[viewList addObject:viewController];

}

UITabBarController* tabBarController = [[[UITabBarController alloc] init] autorelease];

tabBarController.viewControllers = viewList;

self.window.rootViewController = tabBarController;

// ーーーー ここから追加 ーーーー

NSArray* subviews = tabBarController.tabBar.subviews;

for (UIView* view in subviews) {

if ([view isKindOfClass:NSClassFromString(@"UITabBarButton")]) {

for (id item in view.subviews) {

if ([item isKindOfClass:NSClassFromString(@"UITabBarButtonLabel")]) {

CGRect frame = [[item valueForKey:@"frame"] CGRectValue];

if (view.frame.size.width < frame.size.width) {

NSLog(@"ラベルサイズを調整 %f -> %f", frame.size.width, view.frame.size.width);

frame.size.width = view.frame.size.width;

[item setValue:[NSValue valueWithCGRect:frame] forKey:@"frame"];

}

}

}

}

}

// ーーーー ここまで追加 ーーーー

    return YES;

}


各タブ項目の部品にアクセスし、該当するアイテム(UITabBarButtonLabel)の幅を調整しています。
このコードを追加した状態で実行すると、次の様になりました。
2013-02-26 13.09.59.png
タブ項目の幅が変わるタイミングとしては、
 ・タブを追加した時
 ・タブを削除した時
 ・画面を回転した時
が考えられます。
すべてのケースで上記のコードを呼び出す事により、タブ項目から溢れないタイトルを実装する事ができます。
また、タブのタイトルが動的に変わる場合もタイトルが溢れる可能性がありますので、忘れず処理を行ないましょう。

トラックバック(0)

トラックバックURL: http://www.ict-fractal.com/MovableType/mt/mt-tb.cgi/64

コメントする

Twitterボタン
Twitterブログパーツ