UITabBarItem画像を下に移動しますか?


98

通常、の各タブにUITabBarは、小さな画像とタブに名前を付けるタイトルがあります。画像は、タブの上部に向かって配置/中央揃えされ、下部のタイトルに対応します。私の質問です:画像だけでタイトルがないtabBarが必要な場合、画像を下に移動してタブの中央に配置する方法はありますか?

現在使用しています(以下を参照):

[tabBarItem setFinishedSelectedImage:tabSelected withFinishedUnselectedImage:tabUnselected];

しかし、タイトルのない大きな画像を使用することを好むでしょう。現時点で画像を約70pixels @ 2xより大きくするUITabBarと、下部に多くの未使用のスペースが残り、上部から縁取られ始めます。

回答:


178

調整してみてくださいtabBarItemさんimageInsetsとnilにコントローラのタイトルを設定する(アイコン画像を移動するための)(タイトルが表示されないようにします)。このようなもの-initまたは-viewDidLoadメソッドをビューコントローラに入れます:

Objective-C

self.tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
self.title = nil;

迅速

self.tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
self.title = nil

UITabBarItemプロパティUIBarItemを持つサブクラスですUIEdgeInsets imageInsets。見栄えがよくなるまで、インセットを少し遊んでください(タブバーアイコンの画像によって異なります)。


3
@Lukas:しかし、これは画像を縮小します。
Sourabh Bhardwaj 2014

1
@Sourabhは私のためにそれらを縮小しません
TigerCoding

7
完全なピクセルにする必要がある場合、実際のインセット値は5.5fです。
ユーザー

1
@ rr1g0バッジをカスタム位置に移動することはできません。バッジのカスタム位置またはカスタムバッジの外観が必要な場合は、自分で実装する必要があります
Lukas Kukacka

1
@Sourabh画像を縮小しないようにするには、底を負の値でオフセットする必要があります。
Rmalmoe

150

ストーリーボードでもできます。tabbaritemを選択し、サイズインスペクターに移動して、適切なインセットを割り当てます。

ここに画像の説明を入力してください

* Xcode、バージョン7.3.1(7D1014)でデモ


すてきできれい!
ケン

すべての回答の中で最高のもの...ありがとう@Neil Galiaskarov
Venkatesh Chejarla 2018年

49

のサブクラスを作成しUITabBarController、その中にviewDidLoad

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.viewControllers enumerateObjectsUsingBlock:^(UIViewController *vc, NSUInteger idx, BOOL *stop) {
        vc.tabBarItem.title = nil;
        vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0);
    }];
}

スウィフト3:

for vc in self.viewControllers! {
    vc.tabBarItem.title = nil
    vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}

これは私のために働いた。それだけで、迅速にメソッドenumerateObjectsUsingBlockは使用できなくなりました
Junchao Gu

サブクラス化せず、代わりにこれをAppDelegateに追加してください
Laszlo

1
このスニペットを配置することAppDelegateも機能しますが、それをサブクラス化するより明らかに優れているわけではありません。ただし、独自の設定を行うことができます:)
ブライアン

10

Xamarinを使用している場合、これは機能します。

screen.TabBarItem.ImageInsets = new UIEdgeInsets(5, 0, -5, 0);
screen.TabBarItem.Title = "";

10

これは私のために働いた

スウィフト4

let array = tabBarController?.customizableViewControllers
for controller in array! {
    controller.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}

2

SWIFT 3.0

画像のインセットを設定し、上、左、下、右に設定できます。

self.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: 0, right: 0)

2

iOS 11の場合、ImageInsetsの設定とは別に、TraitCollectionメソッドをオーバーライドする必要があります。サブクラス化されたUITabBarControllerクラスにメソッドを追加してください

public override UITraitCollection TraitCollection {
 get {
  return UITraitCollection.FromHorizontalSizeClass(horizontalSizeClass: UIUserInterfaceSizeClass.Compact);
 }
}

iPadとiOS 11のタブバー項目の画像位置に関連する問題を解決するのに役立つ良いヒントです。しかし、ビューコントローラーレベルで特性コレクションをオーバーライドするのは厳しすぎるため、UITabBarクラスをサブクラス化してtraitCollectionプロパティをオーバーライドすることをお勧めします。そこ。また、水平クラスのみの特性コレクションを返すと、他の特性コレクションプロパティが削除されます。return UITraitCollection(traitsFrom: [ super.traitCollection, UITraitCollection(horizontalSizeClass: .compact)])私のためにトリックをしました。
エマニュエルパリ

1

スウィフト4.2UIEdgeInsetsMake廃止予定され、代わりに我々は使用する必要がありUIEdgeInsets

let array = tabBarController?.customizableViewControllers
    for controller in array! {
        controller.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: -5, right: 0)
    }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.