iOSカスタムナビゲーションバーノート

6515 ワード

一、UInavigationBarの構造


ナビゲーションバーはほとんどのページで発生する問題で、一般的に2つの処理方法:1.非表示にする2.ツールバーの

1.ナビゲーションバーの追加

TestViewController * mainVC = [[TestViewController alloc] init];
UINavigationController * nav = [[UINavigationController alloc] initWithRootViewController:mainVC];
    self.window.rootViewController = nav;

2.ナビゲーションバーを非表示にする


のTestViewController.mファイルでは、次のコードを使用します.
- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.navigationController setNavigationBarHidden:YES];
    //self.navigationController.navigationBar.hidden = YES;
}

説明:属性直接設定で成功したのは、navigationBarはreadonlyですが、hiddenはデフォルト(readwrite)です.最初のメッセージを送信することで設定することをお勧めします.

3.ナビゲーションバーの背景色を変更する


システムが持参したナビゲーションバーはすでにユーザーの審美需要を満たすことができないため、開発中のナビゲーションバーは多かれ少なかれカスタマイズされた.背景色やフォント色を変更しただけでも.
  • 方式一:エージェントによる
  • の設定
    [[UINavigationBar appearance] setBarTintColor:[UIColor redColor]];
    

    効果図
    説明:すべてのナビゲーションバーの背景色を変更できるのはなぜですか?
  • UINavigationBarが送信したメッセージappearanceを表示します.UIAppearanceプロトコルです.公式サイトによると、UIAppearanceは外観プロトコル(装飾モード)である.外観を変更するには、このプロトコルを実装する必要があるため、UInavigationBarの内部では、このプロトコルが実装されていることは間違いありません.
  • ヘッダファイルUIAppearanceプロトコルを表示するには4つの方法がありますが、公式サイトのドキュメントによるとiOS 9以降は2つの方法が廃棄されています.したがって、以下の2つのみが利用可能であり、いずれもクラスのオブジェクトを返すため、このような外観変更メッセージを送信することができる.例:setBarTintColor.実はここでオブジェクトを手に入れたら任意に修正できます.
  • + (instancetype)appearance;
    + (instancetype)appearanceForTraitCollection:(UITraitCollection *)trait
    
  • 方式2、直接属性設定、またはメッセージ送信により
  • を設定.
    のTestViewController.mファイルでは、次のコードを使用します.
    - (void)viewDidLoad {
        [super viewDidLoad];
        //  
        self.navigationController.navigationBar.backgroundColor = [UIColor redColor];
        //  
        [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav.png"] forBarMetrics:UIBarMetricsDefault];
    }
    

    説明:
  • の下のコードはなぜ効果がないのか、実は構造図を見てみれば分かります.
  • self.navigationController.navigationBar.backgroundColor = [UIColor redColor];
    

    UInavgationBar構造図
    そうですね.このように修正されたのはnavigationBarの背景色ですが、navigationBarにはUIViewやUIImageView、UILabelなどのコントロールが追加され、navigationBarをカバーしています.
  • では、どのように修正しますか?
  • [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"yao_1"] forBarMetrics:UIBarMetricsDefault];
    

    バックグラウンドマップを追加することで、デフォルトのモードを使用します.注意:ここではステータスバーの背景色も変化するという問題が発生しますが、これはnavigationBarで追加したコントロールが境界まで自動的に延長されるためです.ナビゲーションバーの背景色を変更するだけでは、navigationBarにコントロールを追加する必要はありません.navigationBarに無駄なコントロールが山積みになっているので、我慢できません.
    //  
    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"yao_1"] forBarMetrics:UIBarMetricsCompact];
    //  navigationBar 
    self.navigationController.navigationBar.backgroundColor = [UIColor redColor];
    

    このようにnavigationBarの背景色を修正してこそ、気持ちがいいし、木がある.navigationBarの背景色を修正するだけなので.効果図:
    UInavgationBar効果図
    どうしてこうなるの
    [[UINavigationBar appearance] setBarTintColor:[UIColor redColor]];
    

    どうしてこんなことになったの?
    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"yao_1"] forBarMetrics:UIBarMetricsDefault];
    

    UInavigationBarとUInavigationController、UIdiewControllerの関係
    1.ナビゲーションバークラス名:UINAVIgationBarは、ナビゲーションコントローラ(UINAVIgationController)の下にある属性で、一般的にビューコントローラ(TestView Controller)にナビゲーションバーを追加します.つまり、ナビゲーションコントローラ(UINAVIgationController)のルートビューコントローラとして追加します.
    2.TestViewControllerクラスはUIViewControllerクラスからカスタムに継承されているため、このビューコントローラでナビゲーションコントローラを直接操作できる理由.一方、UIViewControllerクラスには、UInavgationControllerクラスの属性を宣言するカテゴリがあります.最初のステップでは、このプロパティを上のナビゲーションコントローラのオブジェクトに設定します.
    UIcontroller分類
    3.UInavigationBar対照図は以下の通り.
    UInavigationBar対照図
    UInavgationBarの構造図の説明:
  • 図の対照関係から分かるように、UInavigationBarには、UInavigationBarBackgroundコントロール(境界まで延長され、ナビゲーションバーが上書きされている)、もう1つのUInavigationBarBackIndicatorView(実際にはその青い戻りボタンであり、pushが入ってきてからViewControlローラが表示される)
  • が含まれている.
  • U i n a v igationBarBackgroundコントロールには、UIBackdropView(UIBackdropEffectViewはシャドウビューを識別)、UIImageView
  • が含まれています.
    まとめ:
    U i n a v i g a t i o n BarBackIndicatorView(戻るボタンは左側の一部のみを占めており、pushの新しいビューコントローラの場合に表示されます.そのため、一番上に表示されるのはUIImageViewです).だから、これこそコードを通じて
    self.navigationController.navigationBar.backgroundColor = [UIColor redColor];
    

    背景色を修正して、いつも隠されている根本的な原因.解決策は、UIImageViewコントロールを削除するか、UIImageViewに希望する背景色の画像を設定します.

    二、UInavigationBarのカスタマイズ


    1.カスタム


    一般的なカスタマイズは、左側、右側、中間ビューの3つに分けられます.
  • カスタム左ボタン
  • - (void)viewDidLoad {
        [super viewDidLoad];
        //  
        UIButton * leftBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        leftBtn.frame = CGRectMake(0, 7, 83, 30);
        leftBtn.backgroundColor = [UIColor orangeColor];
        [leftBtn addTarget:self action:@selector(onTap) forControlEvents:UIControlEventTouchUpInside];
        UIBarButtonItem * leftItem = [[UIBarButtonItem alloc] initWithCustomView:leftBtn];
        self.navigationItem.leftBarButtonItem = leftItem;
    }
    
    //  
    - (void)onTap {
        NSLog(@" ");
    }
    
  • カスタム右ボタン
  • 左側のボタンをカスタマイズする方法と同様に、次のような違いがあります.
    self.navigationItem.rightBarButtonItem = rightItem;
    
  • カスタムミドルビュー
  • UIView * centerView = [[UIView alloc] initWithFrame:CGRectMake(0, 7, 110, 30)];
    centerView.backgroundColor = [UIColor greenColor];
    self.navigationItem.titleView = centerView;
    

    2.構造分析


    カスタムコードから見ると、カスタムはnavigationItemの中のものを修正しています.ヘッダファイルを見ると、TestViewControllerがnavigationItemを操作できるのは、上のUInavigationControllerと同じです.
    UInavigationBarクラスには、navigationItemおよびその他の関連コンテンツを格納するitemsセットがあります.UInavigationItemクラスにはleftBarButtonItems,right BarButtonItemsなどの集合が格納される.また、leftBarButtonItem、right BarButtonItemコントロールもあり、これらのコントロールを作成および表示するかどうかは、セットが空であるかどうかによって決まります.
    したがって、コンテンツを設定しないと、デフォルトのセットが空になり、すべてのコントロールが表示されません.

    3.手書きコードテクニック


    ナビゲーションバーのカスタマイズでは、ほとんどのappが左側が「戻る」、右側が「地図」、「スキャンコード」などのボタンで、真ん中にタイトルが表示されるほか、セグメントボタンをカスタマイズしたり、メニューを選択したりすることがあります.これらのカスタムボタンとビューでは、サイズはいずれも画像サイズとナビゲーションバーの幅の高さに基づいて感覚的に設定されています(要するに、私は以前はそうでした>.今日iOS 7のレイアウトをテストするためにSBを使用しましたが、コントロールをドラッグするとシステムが与えたサイズに適応することがわかりました.その後、コントロールをバインドしてこれらのコントロールのサイズを取得しました.iPhone 4 sとiPhone 6をテストし、取得した左側と右側のボタンサイズ:frame={0,7,83,30}、中間のビューサイズ:frame={0,7110,30}. これにより、後でナビゲーションバーボタンに特別な要求がなく、このサイズで設定できます.