title: Customize appearance of UINavigationBar
body: <p>I'm new to iOS UI design, and I'm working on writing code that displays highly customized navigation bar, which will be used my transportation app.</p>
  
  <p>Here are features of my navigation bar (see figure below):
  <img src="https://i.stack.imgur.com/ptpBe.png" alt="Custom UINavigationBar Blueprint"></p>
  
  <ol>
  <li><code>Layout Margins</code> are <code>18</code>, and <code>Space</code> between its subviews is <code>9</code>.</li>
  <li>All of its subviews' <code>height</code> is <code>44</code>, and all <code>UIBarButtonItem</code> is rectangle.</li>
  <li><code>backBarButtonItem</code> should be positioned same as <code>leftBarButtonItem</code>.</li>
  <li>In <strong>normal state</strong>, its <code>height</code> is <code>80</code>.</li>
  <li>In <strong>expanded state</strong> (<em>such as direction fields view in map apps</em>), its <code>titleView</code> will contain two <code>UITextField</code>s, so its <code>height</code> should be <code>136</code>.</li>
  </ol>
  
  <p>See Real Design Screenshots
  <img src="https://i.stack.imgur.com/7pMfB.png" alt="See Real Design Screenshots">
  So I've declared subclass of <code>UINavigationBar</code>, and connected custom class to <code>Navigation Bar</code> object in storyboard using Identity Inspector. However, I'm not sure where to begin. Though I overrode <code>sizeThatFits(_ size:)</code> function to make its <code>height</code> long for now, the subviews are close to bottom. I could't find a best practice to customize <code>UINavigationBar</code> like Google Maps, Uber, etc.</p>
  
  <p>How can I implement such navigation bar by subclassing <code>UINavigationBar</code>? Or are there any other solutions?</p>