碼上歡樂
相關內容    簡體    繁體

【iOS開發-22】navigationBar導航條和navigationItem設置：基本搞定導航條上的文字和按鈕以及各種跳轉

本文轉載自   查看原文   2016-04-06 11:00   5131    OC

http://blog.csdn.net/weisubao/article/details/39646739?utm_source=tuicool&utm_medium=referral

 

（1）navigationBar導航條可以看做是self.navigationController導航控制器的一個屬性，可以直接用點來表示self.navigationController.navigationBar，當然navigationBar自己還有很多屬性，比如樣式barStyle、背景backgroundColor、frame屬性（可以獲取寬高這些信息），還可以用setBackgroundImage方法設置背景圖片，當然圖片多了可以使用clipsToBounds剪裁。

 

（2）但，navigationBar是否隱藏和顯示這個需要它爸也就是self.navigationController來控制，有直接.navigationBarHidden設置為YES/NO，也可以用方法setNavigationBarHidden，都能實現效果。

 

（3）另一個重要的知識是對navigationItem的設置，這個屬性和navigationController是平級的，所以直接可以用self.navigationItem使用。當然可用的有設置導航條標題的方法setTitle，當然你也可以直接把文字換成一個視圖，即所謂的標題視圖放在導航條的中間，用得方法是setTitleView，很多游戲的導航條中間貌似是一個圖片，可以用這個。

 

（4）最重要的可能是給navigationItem設置左右兩邊的按鈕，一般默認的在左邊有“返回”，在右邊的有“攝像頭”（如微信朋友圈）。步驟就是創建一個UIBarButtonItem對象，然后直接把這個對象賦值給self.navigationItem.leftBarButtonItem或者右邊的。當然也可以一次創建很多個UIBarButtonItem組成一個數組，然后把這個數組賦值給self.navigationItem.leftBarButtonItems，注意后面這個和前面這個相比，多了一個“s”，有很多個。也要注意一下有多個按鈕時的排列順序。

 

（5）我們創建的這些導航條按鈕有很多種形式，有的是由文字的，有的時圖片，有的時系統自帶的如攝像頭或者Reply這些icon，有的完全是自己定義的視圖。我們當然也可以利用自己創建的導航條按鈕來覆蓋原來導航控制器產生的默認的按鈕，如“<Back”。

 

同樣，需要創建兩個視圖控制器（ViewController根視圖控制器，SecondViewController子視圖控制器），然后放在導航控制器棧中。並且在AppDelegate.m中進行把導航控制器賦值給self.window.rootViewController。

在ViewController.m中：

 

[objc]  view plain  copy
 
  1. #import "ViewController.h"  
  2. #import "SecondViewController.h"  
  3.   
  4. @interface ViewController ()  
  5.   
  6. @end  
  7.   
  8. @implementation ViewController  
  9.   
  10. - (void)viewDidLoad {  
  11.     //創建一個按鈕，點擊后進入子視圖控制器，相當於進入子頁面  
  12.     UIButton *btn1=[UIButton buttonWithType:UIButtonTypeRoundedRect];  
  13.     btn1.frame=CGRectMake(38, 100, 300, 30);  
  14.     [btn1 setTitle:@"jump to secondviewcontroller" forState:UIControlStateNormal];  
  15.     btn1.backgroundColor=[UIColor whiteColor];  
  16.     self.view.backgroundColor=[UIColor redColor];  
  17.     [btn1 addTarget:self action:@selector(jumpTo) forControlEvents:UIControlEventTouchUpInside];  
  18.     [self.view addSubview:btn1];  
  19.     //設置導航條樣式  
  20.     //默認的時白色半透明（有點灰的感覺），UIBarStyleBlack,UIBarStyleBlackTranslucent,UIBarStyleBlackOpaque都是黑色半透明，其實它們有的時不透明有的時透明有的時半透明，但不知為何無效果  
  21.     self.navigationController.navigationBar.barStyle=UIBarStyleDefault;  
  22.     //設置導航條背景顏色，也是半透明玻璃狀的顏色效果  
  23.     self.navigationController.navigationBar.backgroundColor=[UIColor orangeColor];  
  24.     //可以用self.navigationController.navigationBar.frame.size獲得高寬，還有self.navigationController.navigationBar.frame.origin獲得x和y  
  25.     //高44，寬375，如果是Retina屏幕，那么寬和高@2x即可分別是750和88  
  26.     //x是0很明顯，y是20，其中上面20就是留給狀態欄的高度  
  27.     NSLog(@"%f",self.navigationController.navigationBar.frame.origin.y);  
  28.       
  29.     //隱藏導航條，由此點擊進入其他視圖時導航條也會被隱藏，默認是NO  
  30.     //以下一個直接給navigationBarHidden賦值，一個調用方法，都是一樣的，下面一個多了一個動畫選項而已  
  31.     self.navigationController.navigationBarHidden=NO;  
  32.     [self.navigationController setNavigationBarHidden:NO animated:YES];  
  33.     //給導航條增加背景圖片，其中forBarMetrics有點類似於按鈕的for state狀態，即什么狀態下顯示  
  34.     //UIBarMetricsDefault-豎屏橫屏都有，橫屏導航條變寬，則自動repeat圖片  
  35.     //UIBarMetricsCompact-豎屏沒有，橫屏有，相當於之前老iOS版本里地UIBarMetricsLandscapePhone  
  36.     //UIBarMetricsCompactPrompt和UIBarMetricsDefaultPrompt暫時不知道用處，官方解釋是Applicable only in bars with the prompt property, such as UINavigationBar and UISearchBar，以后遇到時再細說  
  37.     [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"big2.png"] forBarMetrics:UIBarMetricsDefault];  
  38.     //如果圖片太大會向上擴展侵占狀態欄的位置，在狀態欄下方顯示  
  39.     //clipsToBounds就是把多余的圖片裁剪掉  
  40.     self.navigationController.navigationBar.clipsToBounds=YES;  
  41.       
  42.     //設置導航標題  
  43.     [self.navigationItem setTitle:@"主頁"];  
  44.       
  45.     //設置導航標題視圖，就是這一塊可以加載任意一種視圖  
  46.     //視圖的x和y無效，視圖上下左右居中顯示在標題的位置  
  47.     UIView *textView1=[[UIView alloc]initWithFrame:CGRectMake(10, 10, 50, 30)];  
  48.     textView1.backgroundColor=[UIColor whiteColor];  
  49.     [self.navigationItem setTitleView:textView1];  
  50.       
  51.     //設置導航條的左右按鈕  
  52.     //先實例化創建一個UIBarButtonItem，然后把這個按鈕賦值給self.navigationItem.leftBarButtonItem即可  
  53.     //初始化文字的按鈕類型有UIBarButtonItemStylePlain和UIBarButtonItemStyleDone兩種類型，區別貌似不大  
  54.     UIBarButtonItem *barBtn1=[[UIBarButtonItem alloc]initWithTitle:@"左邊" style:UIBarButtonItemStylePlain target:self action:@selector(changeColor)];  
  55.     self.navigationItem.leftBarButtonItem=barBtn1;  
  56.       
  57.     //我們還可以在左邊和右邊加不止一個按鈕，,且可以添加任意視圖，以右邊為例  
  58.     //添加多個其實就是rightBarButtonItems屬性，注意還有一個rightBarButtonItem，前者是賦予一個UIBarButtonItem對象數組，所以可以顯示多個。后者被賦值一個UIBarButtonItem對象，所以只能顯示一個  
  59.     //顯示順序，左邊：按數組順序從左向右；右邊：按數組順序從右向左  
  60.     //可以初始化成系統自帶的一些barButton，比如UIBarButtonSystemItemCamera是攝像機，還有Done，Reply等等，會顯示成一個icon圖標  
  61.     //還可以initWithImage初始化成圖片  
  62.     //還可以自定義，可以是任意一個UIView  
  63.     UIBarButtonItem *barBtn2=[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemCamera target:self action:@selector(changeColor2)];  
  64.     UIBarButtonItem *barBtn3=[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"logo-40@2x.png"] style:UIBarButtonItemStylePlain target:self action:@selector(changeColor3)];  
  65.     UIView *view4=[[UIView alloc]initWithFrame:CGRectMake(10, 10, 20, 20)];  
  66.     view4.backgroundColor=[UIColor blackColor];  
  67.     UIBarButtonItem *barBtn4=[[UIBarButtonItem alloc]initWithCustomView:view4];  
  68.     NSArray *arr1=[[NSArray alloc]initWithObjects:barBtn2,barBtn3,barBtn4, nil nil];  
  69.     self.navigationItem.rightBarButtonItems=arr1;  
  70.     [super viewDidLoad];  
  71.     // Do any additional setup after loading the view, typically from a nib.  
  72. }  
  73.   
  74. -(void)changeColor{  
  75.     self.view.backgroundColor=[UIColor purpleColor];  
  76. }  
  77. -(void)changeColor2{  
  78.     self.view.backgroundColor=[UIColor whiteColor];  
  79. }  
  80. -(void)changeColor3{  
  81.     self.view.backgroundColor=[UIColor orangeColor];  
  82. }  
  83.   
  84. -(void)jumpTo{  
  85.     //這里面核心的有兩個,所謂跳轉，其實就是往導航控制器棧中PUSH或者POP一個視圖控制器，這樣在最上面的視圖控制器就變了，這樣視圖也跟着變了，因為只顯示在棧頂得那個視圖控制器的視圖  
  86.     //所以(1)控制所謂的跳轉，其實是導航控制器在控制，在里面的元素都可以通過navigationController屬性獲取到它們所在的導航控制器  
  87.     //所以(2)獲取到導航控制器之后，使用Push的那個方法，往棧里面放一個視圖控制器senCon1，這個新放入的在棧頂，就顯示它的視圖，所以用戶改變頁面跳轉了  
  88.     SecondViewController *senCon1=[[SecondViewController alloc]init];  
  89.     [self.navigationController pushViewController:senCon1 animated:YES];  
  90. }  
  91.   
  92. @end  


在SecondViewControllor.m中：

 

 

[objc]  view plain  copy
 
  1. #import "SecondViewController.h"  
  2.   
  3. @interface SecondViewController ()  
  4.   
  5. @end  
  6.   
  7. @implementation SecondViewController  
  8.   
  9. - (void)viewDidLoad {  
  10.     UILabel *label1=[[UILabel alloc]init];  
  11.     label1.frame=CGRectMake(38, 80, 300, 30);  
  12.     label1.backgroundColor=[UIColor whiteColor];  
  13.     label1.text=@"This is secondviewcontroller";  
  14.     [self.view addSubview:label1];  
  15.       
  16.     UIButton *btn2=[UIButton buttonWithType:UIButtonTypeRoundedRect];  
  17.     btn2.frame=CGRectMake(38, 120, 300, 30);  
  18.     [btn2 setTitle:@"backTo" forState:UIControlStateNormal];  
  19.     btn2.backgroundColor=[UIColor orangeColor];  
  20.     [self.view addSubview:btn2];  
  21.     [btn2 addTarget:self action:@selector(backTo) forControlEvents:UIControlEventTouchUpInside];  
  22.       
  23.     //設置導航標題，這個時候的返回按鈕的title就是上一級的navigationItem的title文字  
  24.     [self.navigationItem setTitle:@"子頁"];  
  25.       
  26.     //我們也可以在子頁中自定義一個返回按鈕覆蓋原先的"<back"  
  27.     UIBarButtonItem *barBtn5=[[UIBarButtonItem alloc]initWithTitle:@"回家" style:UIBarButtonItemStylePlain target:self action:@selector(backTo)];  
  28.     self.navigationItem.leftBarButtonItem=barBtn5;  
  29.       
  30.     [super viewDidLoad];  
  31.     // Do any additional setup after loading the view.  
  32. }  
  33.   
  34. -(void)backTo{  
  35.     [self.navigationController popToViewController:[self.navigationController.viewControllers objectAtIndex:0] animated:YES];  
  36. }  
  37.   
  38. @end  


截個圖：

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 導航欄NavigationBar的按鈕設置 Android開發關閉虛擬按鈕、底部導航條 iOS (導航條)navBar 透明 iOS開發之自定義SearchBar導航條右側顯示放大鏡 【uni-app】設置導航條（標題、導航條顏色、加載動畫等） 小程序開發：四 （window） 全局設置小程序的狀態欄、導航條、標題、窗口背景色。 bootstrap-導航條 Bootstrap之導航條，分頁導航 導航條——收縮式導航菜單 Bootstrap系列 -- 42. 導航條中的按鈕、文本和鏈接
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM