Настроить внешний вид UINavigationBar

Question

Я новичок в дизайне IOS UI, и я работаю над написанием кода, который отображает настраиваемую навигационную панель, в которой будет использоваться мое транспортное приложение.

Вот особенности моей навигационной панели (смотрите рисунок ниже):

1. Layout Margins является 18 и Space между его подвидами является 9.
2. Все его подзоны 'height: 44, и все UIBarButtonItem - это прямоугольник.
3. backBarButtonItem должно быть размещено так же, как leftBarButtonItem.
4. нормальное состояние, его height is 80.
5. В расширенном состоянии (, такие как поля направлений смотреть на карте приложений), его titleView будет содержать два UITextField с, так что его height должно быть 136.

See Real Design Скриншоты Так я объявил подкласс UINavigationBar, и подключенный пользовательский класс Navigation Bar объекта в раскадровке с использованием удостоверений инспектора. Однако я не знаю, с чего начать. Хотя я переделал функцию sizeThatFits(_ size:), чтобы сделать ее height долгое время, subviews находятся близко к дну. Я не мог найти оптимальную практику для настройки UINavigationBar, например, Google Maps, Uber и т. Д.

Как реализовать такую ​​навигационную панель путем подкласса UINavigationBar? Или есть другие решения?

Answer 1

Вы можете создать подкласс UINavigationBar со следующими шагами ..

1. Добавить новый класс (подкласс UINavigationBar), выберите NavigationController вашего ViewController в. Выберите панель навигации ViewController в разделе «Структура документа». Установите класс в свой собственный класс.

2. В пользовательском классе, сделайте следующее ..

   override func sizeThatFits(_ size: CGSize) -> CGSize { 
       var bound = super.sizeThatFits(size) 
       bound.height += sizeToAdd //The height you want 
       return bound 
   } 
   
   override init(frame: CGRect) { 
       super.init(frame: frame) 
       self.setup() 
   } 
   
   required init?(coder aDecoder: NSCoder) { 
       super.init(coder: aDecoder) 
       self.setup() 
   } 
   
   override func layoutSubviews() { 
       super.layoutSubviews() 
   
   //If you don't override this function and do as follows, you'll 
   //find that all NavigationButtons and the Title positioned at the 
   //bottom of your navigation bar.(for the Title, we still need to 
   //add one line in setup()) 
   
       let classes = ["UIButton", "UINavigationItemView",    
       "UINavigationButton"] 
   
       for object in self.subviews{ 
   
        let classOfObject = String(describing: type(of: object)) 
   
        if classes.contains(classOfObject){ 
         var objectFrame = object.frame 
         objectFrame.origin.y -= self.sizeToAdd 
         object.frame = objectFrame 
        } 
       } 
   
   } 
   

3. Теперь в настройках(), добавьте следующий код, чтобы получить титул, как один поднят хотел (обычно!)

   func setup() -> Void { 
       self.setTitleVerticalPositionAdjustment(-self.sizeToAdd, for: 
       .default) 
   } 
   

4. Теперь вы можете спроектировать представление по своему усмотрению (здесь я загрузил пользовательский вид с помощью XIB, вы также можете использовать код). Добавляйте его в качестве навигатора в свой ViewController. Например, в вашем viewDidLoad ..

   YOURVIEW.frame = CGRect(x: 0, y: 44, width: 
   (self.navigationController?.navigationBar.bounds.width)!, height: 
   (self.navigationController?.navigationBar.bounds.height)! + 
   self.sizeToAdd)//The height 
   self.navigationController?.navigationBar. 
   addSubview(YOURVIEW) 
   

5. Таким образом, вы можете унаследовать навигационную панель таким образом. Но когда вы нажмете любой другой элемент управления viewController на этот, вы увидите (если вы еще не встроили другой навигационный контроллер в viewController, который вы нажимаете), что представление остается таким же, как и в push-viewController.Вы можете удалить его из супер-представления, прежде чем нажать любой другой элемент управления просмотром. Простое удаление не даст хорошего пользовательского опыта, так как другие элементы системы (если они есть) будут хорошо исчезать. Итак, сделайте следующее, чтобы дать хороший пользовательский опыт ...

   override func viewWillAppear(_ animated: Bool) { 
       super.viewWillAppear(true) 
   
       if(!(self.navigationController?.navigationBar.subviews.contains 
       (YOURVIEW))!){ //Either get it working with setting a tag to 
           //your view and checking it against all subviews 
           //if you haven't use XIB 
        self.navigationController?.navigationBar. 
        addSubview(YOURVIEW) 
       }else { 
        UIView.transition(with: YOURVIEW, 
        duration: 0.5, options: [ANYOPTIONS], animations: { 
         self.profileNavigationView.alpha = 1.0 
       }) { (success) in 
   
       } 
   } 
   

   }

   override func viewWillDisappear(_ animated: Bool) { 
       super.viewWillDisappear(true) 
   
       UIView.transition(with: YOURVIEW, duration: 
       0.5, 
       options: [ANYOPTIONS], animations: { 
        self.profileNavigationView.alpha = 0.0 
       }) { (success) in 
        //remove it here if you want 
       } 
   

   }