iOSカスタムUITTabBarとレイアウト

整理した文章iOSプロジェクト基本フレーム構築では、TabBarItemの画像属性と文字属性をカスタマイズする方法を詳しく説明した。しかし、多くの場合、私たちはTabBarItemの写真と文字の属性を修正する必要があります。また、TabBarItemの位置をカスタマイズする必要があります。このように、システムが持っているTabBarのスタイルはプロジェクトのニーズを満たすことができません。例えば、新浪微博アプリの底のtabのitemは自分の持っているTabBarItemでは実現できません。一番真ん中の【＋】マイクロブログはtabを切り替えるためのものではなく、現在のページで編集発表ページをカバーし、発表が完了したり、キャンセルしたりした後、また前のページに戻ってきます。真ん中にTabBarの空間を空けて、この「+」リリースボタンを配置します。　　　　　


私達のプロジェクトは“百思不姐”アプリを書く機能モジュールを真似て学習してアップするので、そのTabBarのスタイルは微博のスタイルとほぼ似ています。（図の右の図のように）、真ん中のTabボタンも帖機能です。直接現在のページで編集発表ページをカバーして、発表が完了したかそれともキャンセルした後にまた前のページに戻ります。切り替えはしていません。
ソリューション
新浪微博と私達のプロジェクトの中のこのような状況に対して、二つの解決の考えがあります。
5つのTabBarItemを定義して、TabBarにTabBarItemなどのサイズのリリースボタンを追加して、真ん中にクリックします。このように大きさが等しいので、最新のボタンは真ん中のTabBarItemを完全にカバーしています。真ん中のTabBarItemの応答イベントも遮断されます。 layoutSubview 方法は、4つのTabBarItemのレイアウトとサイズを変更し、中間を空にして、カスタマイズした「リリース」ボタンを追加して、イベントをクリックすれば、コントロールのシナリオをカバーすることができます。
この案の考えは上ですでに述べました。つまり、まず一つの位置を占めて、一つのボタンでその上に覆います。主な欠点は位置とコントローラを申請して、位置を占めるのがもったいないことです。また、このようなコントロールの大きさが均一な場合にも適用されます。私たちが必要としている各TabBarItemの規格とサイズが違ったら、このような方案を使うことができません。
いくつかの点について説明するべきです。
UITabBarItemのすべての文字属性を設定することは、前の記事iOSプロジェクト――基本フレーム構築ですでに述べられていますが、ここでは「リリース」ボタンの初期化は一例モードを使用して作成すべきです。私たちのプロジェクトには「リリース」ボタンが一つしかないので、一例モードがより合理的であり、ここでは怠惰負荷方式で単一モードの作成が行われます。 view Willapear: に【リリース】ボタンを追加します。 [self.tabbar addSubview:self.publishButton; 。なぜですか？ view Willapear: に【投稿】ボタンを追加します。 view DidLoad に追加しますか？根本的な原因はTabBarItemがTabBarにロードしたのは view DidLoad 後に実行されたのは、第2部分で検証された点であり、 前の文章で私達はtabracontrollerはコントローラを作る時にviewdidLoadをロードすると言いました。ですから、「リリース」ボタンを追加すると、view DidLoadに「リリース」ボタンがTabBarに最初に追加されます。そうすると、「リリース」ボタンはTabBarItemに上書きされます。

#import "XMGTabBarController.h"

@interface XMGTabBarController ()
/**         */
@property (nonatomic, strong) UIButton *publishButton;

@end

@implementation XMGTabBarController

#pragma mark -    
- (void)viewDidLoad {
 [super viewDidLoad];
 
 /****     UITabBarItem      ****/
 UITabBarItem *item = [UITabBarItem appearance];
 //           
 NSMutableDictionary *normalAttrs = [NSMutableDictionary dictionary];
 normalAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:14];
 normalAttrs[NSForegroundColorAttributeName] = [UIColor grayColor];
 [item setTitleTextAttributes:normalAttrs forState:UIControlStateNormal];
 //           
 NSMutableDictionary *selectedAttrs = [NSMutableDictionary dictionary];
 selectedAttrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
 [item setTitleTextAttributes:normalAttrs forState:UIControlStateSelected];
 
 /****        ****/
 [self setupOneChildViewController:[[UITableViewController alloc] init] title:@"  " image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];
 [self setupOneChildViewController:[[UITableViewController alloc] init] title:@"  " image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];
 
 //            
 [self setupOneChildViewController:[[UIViewController alloc] init] title:nil image:nil selectedImage:nil];
 
 [self setupOneChildViewController:[[UIViewController alloc] init] title:@"  " image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];
 [self setupOneChildViewController:[[UITableViewController alloc] init] title:@" " image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];
}

/**
 *      viewWillAppear:         ?
 *  viewWillAppear:        , tabBar       5 UITabBarButton
 *           : [    ]    UITabBarButton  
 */
- (void)viewWillAppear:(BOOL)animated
{
 [super viewWillAppear:animated];
 
 /****          ****/
 [self.tabBar addSubview:self.publishButton];
}
#pragma mark -    
/**      */
- (UIButton *)publishButton
{
 if (!_publishButton) {
 _publishButton = [UIButton buttonWithType:UIButtonTypeCustom];
 _publishButton.backgroundColor = XMGRandomColor;
 [_publishButton setImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
 [_publishButton setImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateHighlighted];
 _publishButton.frame = CGRectMake(0, 0, self.tabBar.frame.size.width / 5, self.tabBar.frame.size.height);
 _publishButton.center = CGPointMake(self.tabBar.frame.size.width * 0.5, self.tabBar.frame.size.height * 0.5);
 [_publishButton addTarget:self action:@selector(publishClick) forControlEvents:UIControlEventTouchUpInside];
 }
 return _publishButton;
}
#pragma mark -   
/**
 *       
 */
- (void)publishClick
{
 XMGLogFunc
 XMGTestViewController *test = [[XMGTestViewController alloc] init];
 [self presentViewController:test animated:YES completion:nil];
}
@end

 2カスタムTabBar
TabBarをカスタマイズして、TabBarの各サブコントロールの属性と配置を完全に私たちのニーズに合わせて配置してもいいです。

@interface XMGTabBarController ()
@end

@implementation XMGTabBarController
#pragma mark -    
- (void)viewDidLoad {
 [super viewDidLoad];
 
 /****     UITabBarItem      ****/
 //  
 
 /****        ****/
 [self setupOneChildViewController:[[UITableViewController alloc] init] title:@"  " image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];
 [self setupOneChildViewController:[[UITableViewController alloc] init] title:@"  " image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];
 [self setupOneChildViewController:[[UIViewController alloc] init] title:@"  " image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];
 [self setupOneChildViewController:[[UITableViewController alloc] init] title:@" " image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];
 
 /****   TabBar ****/
 [self setValue:[[XMGTabBar alloc] init] forKeyPath:@"tabBar"];
}
@end

下のコードはTabBarをカスタマイズしました。mファイルの主な内容は主に書き直します。 layoutSubview この方法では、4つのボタンのサイズとレイアウトを調整し、真ん中に「リリース」ボタンを追加します。同じように、いくつかの注意点があります。
【投稿】ボタンの初期化は上記と同じです。単例モードで初期化するべきです。具体的には展開しません。書き換える layoutSubview メソッドの場合は、先に親のタイプを呼び出すべきです。 [super layout Subview; ，このように、まずTabBarItemをレイアウトし、その後、このレイアウトに基づいてレイアウト調整を行うことができる。親の配置方法を呼び出した文は後ろに置いてはいけません。この方法はTabBarItemをレイアウトする以外にも多くの他の構成があります。通過する self.subview 現在のサブコントロールを取得するには、まず印刷して現在のサブコントロールの種類と数を知ることができます。その後、適切なフィルタリングを行います。私たちは基本的にここでKVCの方法を使って、現在のTabBarを変更します。 [self setValue:[[XMGTbar alloc]init]forKeyPath:@「tabBar」 ，属性とメンバー変数の取得方法については、runtime属性とメンバー変数を取得します。を参照してください。

#import "XMGTabBar.h"

@interface XMGTabBar()
/**         */
@property (nonatomic, weak) UIButton *publishButton;
@end

@implementation XMGTabBar

#pragma mark -    
/**      */
- (UIButton *)publishButton
{
 if (!_publishButton) {
 UIButton *publishButton = [UIButton buttonWithType:UIButtonTypeCustom];
 publishButton.backgroundColor = XMGRandomColor;
 [publishButton setImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
 [publishButton setImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateHighlighted];
 [publishButton addTarget:self action:@selector(publishClick) forControlEvents:UIControlEventTouchUpInside];
 [self addSubview:publishButton];
 _publishButton = publishButton;
 }
 return _publishButton;
}

#pragma mark -    
/**
 *      
 */
- (void)layoutSubviews
{
 [super layoutSubviews];
 
 /****     UITabBarButton frame ****/
 //      
 CGFloat buttonW = self.frame.size.width / 5;
 CGFloat buttonH = self.frame.size.height;
 CGFloat buttonY = 0;
 //     
 int buttonIndex = 0;
 
 for (UIView *subview in self.subviews) {
 //     UITabBarButton
// if (![@"UITabBarButton" isEqualToString:NSStringFromClass(subview.class)]) continue;
 if (subview.class != NSClassFromString(@"UITabBarButton")) continue;
 
 //   frame
 CGFloat buttonX = buttonIndex * buttonW;
 if (buttonIndex >= 2) { //    2 UITabBarButton
 buttonX += buttonW;
 }
 subview.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);
 
 //     
 buttonIndex++;
 }
 
 /****           frame ****/
 self.publishButton.frame = CGRectMake(0, 0, buttonW, buttonH);
 self.publishButton.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);
}

#pragma mark -   
- (void)publishClick
{
 XMGLogFunc
}
@end

現在1に記載されているTabBarロードTabBarItemを検証するためには view DidLoad その後、私達はTabBarをカスタマイズする時にブレークポイント調整を行います。 view DidLoad方法は、カスタムTabBarを実行します。 layoutSubview 方法。
3赤点ヒントを追加します
今、多くのアプリのTabBarItemは新しいニュースがある時、右上に赤いヒントがあります。ある時は具体的な数の注意があります。私達がよく使うQQ、微信、微博、頭条などのような機能があります。このヒントはiOSの中の学名はbadgeといいます。iOSのTabBarItemにはこの属性とコントロールが備わっています。自分のニーズに合わせて設定できます。下図はiOS 11のプロファイルです。ヒントの数、色をカスタマイズできます。ヒントの文字の属性は異なる状態で設定できます。

iOS 10の前ではbadgeの提示色は設定できないと言われていますが、必要ならばカスタムTabBarItemを行って、カスタマイズしたbadgeを設定するしかないです。本文はこの点について詳しく説明しません。必要な仲間がいれば、自分で助けを求めてください。