自定義UISearchBar外觀

2021-09-08 04:20:04 字數 2399 閱讀 7993

圖1:設計效果圖

從上圖可以看出,我們要做的uisearchbar要有圓角,邊框顏色,取消按鈕顏色,背景透明等等。

開始以為可能要自己寫乙個自定義的uisearchbar控制項了,後面研究了一番,發現可以設定系統uisearchbar屬性來更改,便把經驗記錄下來。

首先,我們看下系統預設的searchbar的樣式,離我們的目標樣式確實相差很大, 後面我會一步一步詳細說明做成我們的目標樣式。

圖2:uisearchbar預設樣式

我以白色的背景色為例,下面看看**:

//1. 設定背景顏色

//設定背景圖是為了去掉上下黑線

self.customsearchbar.backgroundimage = [[uiimage alloc] init]; // 設定searchbar的顏色主題為白色 self.customsearchbar.bartintcolor = [uicolor whitecolor];

圖3:設定searchbar背景色為白色

//2. 設定圓角和邊框顏色

uitextfield *searchfield = [self.customsearchbar valueforkey:@"searchfield"];

if (searchfield)

這段**有個特別的地方就是通過kvc獲得到uisearchbar的私有變數

searchfield(型別為uitextfield),設定searchbar的邊框顏色和圓角實際上也就變成了設定searchfield的邊框顏色和圓角,你可以試試直接設定searchbar.layer.bordercolor和cornerradius,會發現這樣做是有問題的。

圖4:設定邊框顏色和圓角

嗯,離預期效果越來越近了,有木有!

//3. 設定按鈕文字和顏色

[self.customsearchbar fm_setcancelbuttontitle:@"取消"];

圖5:設定按鈕文字和顏色

需要特別注意的是設定searchbar的tintcolor會使輸入框的游標顏色改變,可以通過設定searchfield的tintcolor來修正。

//4. 設定輸入框文字顏色和字型

圖6:最終對比效果圖

//5. 設定搜尋icon

[self.customsearchbar setimage:[uiimage imagenamed:@"search_icon"] forsearchbaricon:uisearchbariconsearch state:uicontrolstatenormal];

為了跟系統預設icon的有個明顯的對比,我特殊找了張綠色的搜尋icon,效果見下圖:

設定搜尋icon.png

tips: 還可以設定其他的icon(如清除按鈕圖示),也是用上面的方法,具體要設定什麼,可以去看看uisearchbaricon這個列舉。

圖7:類似qq搜尋框樣式

很簡單,在storyboard中設定searchbar的bar style為minimal,或者用**設定 :

//設定類似qq搜尋框

self.minimalsearchbar.searchbarstyle = uisearchbarstyleminimal;

完整**在這裡。

自定義 如何自定義協議

何為自定義協議,其實是相對標準協議來說的,這裡主要針對的是應用層協議 常見的標準的應用層協議如http ftp smtp等,如果我們在網路通訊的過程中不去使用這些標準協議,那就需要自定義協議,比如我們常用的rpc框架 dubbo,thrift 分布式快取 redis,memcached 等都是自定義...

自定義控制項 自定義鐘錶

private context mcontext 畫筆 private paint mpaint 控制項的寬 private int mwidth x方向的圓心座標 private int center 鐘錶的半徑 private int mradio 圓環的寬 private int stroke...

自定義控制項及自定義屬性

自定義控制項在android開發中的重要性,是不言而喻,眾人皆知的。希望通過這二天的學習,能讓大家了解自定義控制項的原理,熟悉自定義控制項的使用步驟,並能寫出一些普通的效果。內容介紹 1 使用系統控制項,實現自定義的效果,案例有 優酷環形選單 廣告條 viewpager 下拉列表 spinner 2...