【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】iOS定制UISearchBar導(dǎo)航欄同步iOS11的方法

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】iOS定制UISearchBar導(dǎo)航欄同步iOS11的方法

系統(tǒng)原生的UISearchBar在iOS11經(jīng)歷了一次變革，高度由原來(lái)的44變成了56(使用默認(rèn)高度的估計(jì)都被坑了)，樣式也發(fā)生了些微的變化,比如在未輸入狀態(tài)下圓角變化,放大鏡圖標(biāo)和文本的文字不再居中而是靠左了。具體看圖一些主流App也常見(jiàn)在導(dǎo)航欄嵌入searchBar，以網(wǎng)易云音樂(lè)和知乎為例，左邊是主頁(yè)，右邊是搜索頁(yè)面(注意光標(biāo))。實(shí)現(xiàn)思路與案例核心思想是設(shè)置導(dǎo)航欄的titleView和左右的barButtonItem。主要有3種方式為什么上面的titleView說(shuō)是button不是其他的？其他的當(dāng)然也可以實(shí)現(xiàn)。button自帶imageView和titleLabel，只需要設(shè)置偏移量更容易達(dá)到我們想要的，而且視圖層級(jí)更少，在流暢性方面更有保證些。案例網(wǎng)易云音樂(lè)首頁(yè)和搜索頁(yè)面的導(dǎo)航欄視圖層級(jí)，titleView都使用MCSearchBar來(lái)實(shí)現(xiàn)，并且設(shè)置了導(dǎo)航欄左右兩邊的按鈕。這類似上文所說(shuō)的第二種思路。

圖中可以清楚看到知乎首頁(yè)導(dǎo)航欄由2個(gè)button組成，搜索頁(yè)面使用了textField，這類似上文提到的第三種思路。實(shí)戰(zhàn)通過(guò)自定義SearchBar實(shí)現(xiàn)一個(gè)如下樣式的導(dǎo)航欄先自定義一個(gè)UISearchBar的初始化方法，觀察一下首頁(yè)和搜索頁(yè)的異同，像searchField的大小背景色是一致的，可以這部分可以直接給定，而placeholder是不一樣的，所以應(yīng)該在調(diào)用的時(shí)候提供。以此類推，新建一個(gè)OHSearchBar類，一個(gè)初始化方法新建一個(gè)首頁(yè)OHHomeViewController，設(shè)置導(dǎo)航欄的titleView和rightBarButton讓我們來(lái)看下效果，左邊為iOS9，右邊iOS11這時(shí)候可以看到幾處差異解決方法：第一和第二個(gè)問(wèn)題，判斷設(shè)備是否是iOS11，若是則設(shè)置其高度，不是則讓其placeholder居左。關(guān)鍵代碼如下對(duì)于第三和第四個(gè)問(wèn)題，用KVC獲取textField，并對(duì)其進(jìn)行定制。令textField位置、大小、圓角一致。同樣的，先看下運(yùn)行效果原本以為這下是沒(méi)什么問(wèn)題的，結(jié)果簡(jiǎn)直是坑textFild的長(zhǎng)度、位置、圓角都不一樣解釋下這里出現(xiàn)的問(wèn)題觀察上方圖片上方的searchBar，會(huì)發(fā)現(xiàn)textField左邊是圓角，右邊是直角，說(shuō)明是被截取的。導(dǎo)航欄titleView的范圍就劃分到了那個(gè)部分，而下邊的searchBar連rightBarButton都不放過(guò)，直接搶占了位置。推測(cè)這是由于iOS11導(dǎo)航欄視圖層級(jí)變化產(chǎn)生的，可以這里了解下/p/352f101d6…，或者自行科普，不詳細(xì)展開(kāi)。所以對(duì)于searchBar的size設(shè)置要小心了，盡量控制在合適的范圍。textField的圓角是不一致的，自定義圓角大小時(shí)，取消其本身的圓角樣式查看視圖層級(jí)會(huì)發(fā)現(xiàn)，iOS11以下，設(shè)置titleView，x的默認(rèn)坐標(biāo)居然是12，而iOS11是0。所以設(shè)置textField的x坐標(biāo)的話，在iOS11下必須多出12才會(huì)是一致的位置。

修改代碼上面的代碼這時(shí)候就是我們想要的結(jié)果了。首頁(yè)暫時(shí)告一段落，接著開(kāi)始我們的搜索頁(yè)面。與首頁(yè)不同的是需要searchBar與searchController配合使用。新建一個(gè)OHSearchController類添加一個(gè)屬性初始化代碼接著是我們的視圖控制器OHSearchViewController完成這一步后到了交互環(huán)節(jié)了，點(diǎn)擊首頁(yè)的searchBar跳轉(zhuǎn)搜索頁(yè)面，點(diǎn)擊搜索頁(yè)面的取消按鈕返回到首頁(yè)。首頁(yè)設(shè)置searchbar的代理，并完成一下代理方法搜索頁(yè)設(shè)置searchbar的代理，并完成一下代理方法這時(shí)候問(wèn)題又出現(xiàn)了，點(diǎn)擊搜索頁(yè)面的取消按鈕，沒(méi)有跳回首頁(yè)而是還在這個(gè)頁(yè)面。但是可以看到屏幕的閃動(dòng)。通過(guò)打印消息發(fā)現(xiàn)，點(diǎn)了取消按鈕，執(zhí)行了首頁(yè)的-(BOOL)searchBarShouldBeginEditing:(UISearchBar*)searchBar方法。