iOS系統導航欄自定義標題動畫跳變解析

若是咱們使用iOS系統的導航欄，本身設置titleView，leftItem和rightItem，當titleView長度達到必定時，push會出現titleView左右跳變的狀況，本文將分析跳變緣由及解決辦法。

導航欄的內部佈局

在一個全新的APP，自定義導航欄的左中右後，查看佈局，會發現，導航欄內部佈局以下

設置了自定義leftItem，titleView和rightItem，在導航欄中，咱們自定義的view都會被_UITAMICAdaptorView包裹，其中leftItem和rightItem在_UITAMICAdaptorView外還會包裹一層_UIButtonBarStackView，最後佈局在_UINavigationBarContentView中。

在導航欄內部佈局的左邊塊、中間塊和右邊塊，如下簡稱ABC，整個屏幕寬爲Width。

如下以iPhone XS Max爲例，gap1爲20，gap2爲6。

安全區域

A不論寬度如何（包括爲0），必定會距離左邊gap1。

C不論寬度如何（包括爲0），必定會距離右邊gap1。

B就算再寬，也必定會距離A和C各gap2。

（A設置寬40，B設置寬414，C設置寬40）

當A和C寬度設爲0時，B距離屏幕左右各(gap1+gap2)。

當A和C設置爲nil時，B距離屏幕左右各12（gap3）。

對齊方式

當增長A的寬度時，A是以左邊不動，右邊增長來加寬的，B的寬度會因A寬度增長而壓縮，A最寬不超過C.left-gap2*2。

當增長C的寬度時，C是以右邊不動，左邊增長來加寬的，B的寬度會因C寬度增長而壓縮，C最寬不超過A.right-gap2*2。

當調節B的寬度時，B默認是以導航欄中心爲錨點，左右同時增長，且最大不會超過 162(Width-A.width-B.width-gap12-gap22)

當把ABC所有調成屏幕寬時，B會被徹底擠沒，AC平分除了安全區域的全部空間（Width-gap12-gap22）

導航欄標題欄動畫

從左到右的跳變的產生

首先理解了前面的佈局，可知道B的x座標的相對於A的計算公式

B.left = Max( (Width - B.width)/2 , A.right+gap2)

B的x座標理想狀況下是(Width - B.width)/2，也就是動畫結束位置，實際x座標位置多是(Width - B.width)/2或者(A.right+gap2)（二者取最大值），也就是最後佈局位置。

當實際位置爲A.right+gap2時，說明動畫初始位置在實際位置左邊，就會出現push時，導航欄title左側有個從左到右的跳變。

從右到左的跳變的產生

同理，B的right座標的相對於C的計算公式

B.right = Min( (Width + B.width)/2 , C.left-gap2)

B的right座標理想狀況下是 (Width + B.width)/2，也就是動畫結束位置，實際位置多是(Width + B.width)/2或者(C.left-gap2)（二者取最小值），也就是最後佈局位置。

當實際位置爲(C.left-gap2)時，說明動畫初始位置在實際位置右邊，就會出現push時，導航欄title右側有個從右到左的跳變。

防止跳變的結論

爲了防止上述兩種跳變，只要令B的left實際位置爲 (Width - B.width)/2，B的right實際位置爲 (Width + B.width)/2，也就是

求 (Width - B.width)/2 > (A.right+gap2) 且 (Width + B.width)/2 < C.left-gap2 的 B.width的取值範圍？ 因已知 A.right = gap1 + A.width + gap2，且 C.left = Width - gap2 - C.width - gap1 可求得B的寬度限制爲 B.width < Width - gap12 - gap22 - A.width2 且 B.width < Width - gap12 - gap22 - C.width2 也就是 B.width < Width - gap12 - gap22 - Max(A.width, C.width)*2

翻譯成中文就是B的寬度不能超過屏幕寬減去固定的安全區域再減去A和C之中最寬的2倍。

解決了？

不，還沒完，到目前這步，是手Q8.0.0以前的作法，設定了A和C可能存在的最大寬度（由於AC的寬度是可能會變的，好比左邊沒有未讀消息和有99條未讀寬度是不同的，再好比右邊可能有一個圖標或兩個圖標），而後獲得的B的寬度就很窄了。

如圖，B和A之間還有一大段距離沒有利用上，若是想利用上這段空間，又不但願出現跳變，該怎麼辦呢？

推翻從右到左的跳變

首先要再回到導航欄標題欄動畫 - 從右到左的跳變的產生，其實由於系統動畫自己就是從右到左，因此看不出來有跳變，會使人覺得是正常的動畫，如下兩張圖，就動畫而言，不會使人有跳變的感受。

會有跳變的感受是由於加上內容後，B的內容從C中滑過

但通常狀況下，C放置的都是圖標，空白區域很大，B的內容從C有動畫滑過其實能夠接受。

若是能夠接受，那麼B的寬度就變爲了只依賴A的寬度

B.width < Width - gap12 - gap22 - A.width*2

不接受「推翻從右到左的跳變」

不行，追求完美的人說，我就是這麼一點點跳變都不能接受，並且，上面的方法只解決了C大於A的狀況，A大於C的狀況仍是有問題呀！

好，下面重點介紹下planB——

內容越界方案

首先，ABC裏的內容，是能夠超過ABC的寬度限制顯示的！（後面ABC的內容各稱爲abc）

什麼意思呢，回到上一張圖，當我把A的內容「< left」的x座標設爲-20，a就頂着屏幕左邊出現了。

若是我把ABC寬度都調爲0，再看內容的顯示：

能夠看到除了a的x座標被我設了-20，b和c都是以B和C的x座標爲原點顯示的，而且是所有顯示，不會由於寬度爲0就不顯示，也就是結論：ABC內容的顯示不會被其寬度影響，可是會位置會受ABC的x座標的影響。(固然前提你本身不能給自定義的view設置clipsToBounds爲真)

也就是說，在"防止跳變的結論"基礎上，咱們能夠把b的位置根據AC寬度進行調整，以下圖

C比A寬，B和A之間空餘了X的寬度（X.width = C.width - A.width），那麼b的x起始點位置就能夠計算爲 -X.width（也就是A.width - C.width），b的最大寬度爲Width - A.width - C.width - gap12 - gap22；

同理假如A比C寬，B和C之間就空餘了X的寬度（X.width = A.width - C.width），那麼b的x座標爲0，b的寬度爲Width - A.width - C.width - gap12 - gap22。

綜上，計算b的公式爲

b.left = Min(0, A.width - C.width) b.width = Width - A.width - C.width - gap12 - gap22

當B的背景顏色置爲透明時，看效果就只看到B的內容了（如下兩圖區別在於右圖B背景設爲透明）

（PS.由實踐看出，當a的x座標處於安全區域gap1內時，push動畫會有一個該區域從無到有的變化，同理當c的right位置處於最右邊的安全區域也有，因此建議A和C的內容不要越過安全區域，可是這個也是有解決辦法的，之後再說。）

基於以上方案，也能夠一開始就把B的寬度設爲0，而後每次只須要計算b的座標和寬度就好了，還能夠經過計算令B把左右gap2的區域也佔掉。

在手Q上的實踐效果：左圖長標題，右圖短標題（左邊的未讀消息數從無到有）

附：不一樣機型下gap1和gap2的值

新增gap3（當A和C設爲nil，B距離屏幕左右距離）

綜上，能夠判斷

if (SCREEN_WIDTH > 375) {
    gap1 = 20;
    gap3 = 12
} else {
    gap1 = 16;
    gap3 = 8;
}
    gap2 = 6;
複製代碼

---

Demo源碼：github.com/Xieyupeng52…

若是有幫助到你，請給我Github上一個Star鼓勵一下O(∩_∩)O謝謝！