作者hrdrq (惜福)
看板MacDev
標題[請益] 請問這支app的這種button是怎麼做到的
時間Tue Oct 2 21:46:13 2012
最近在app strore上下載了一個app，
我發現它的UI有個地方另我百思不解
如下圖：
http://imageshack.us/a/img209/8070/img0840p.png
在Navigation Bar下面有三個按鈕，「5KM」、「所有頻道」、「綜合…」
當我按下「所有頻道」（按住不放），會變如下圖：
http://imageshack.us/a/img651/804/img0841.png
可以發現按鈕的漸層色彩會變相反，上面的字也會變色。
我能想到的做法是使用一個custom的UIButton，
並準備兩種圖片，一種是按鈕未按下時的樣子，一種是按下、highlighted的樣子
因為三個按鈕的尺寸可能不同，因此要準備六張圖片，
因為我看IB沒有提供設定UIButton被highlighted時的text的顏色，
只能設定text單一的顏色，所以我想應該要寫code讓UIButton按下時改變text的顏色
可是現在問題來了！！
我使用iFunbox翻遍了這個app的所有圖片png檔，完全找不到用在這三個按鈕的圖，
甚至按鈕右側那個圓型的箭頭的圖都沒有！！
這讓我非常困惑，到底是怎麼實作的！請教大家，謝謝！
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.250.47.78
1F：推 kiii210:這種漸層有可能是用畫的喔..記得是CAGradientLayer? 10/02 22:01
喔喔！原來是用畫的！沒有想到
2F：推 keanos:iFunbox看不到包在裡面的圖吧？最簡單是把字放在圖裡一起換 10/02 22:21
可以喔！不過我忘記是不是要JB才看得到
3F：→ kiii210:iFunbox可以喔! 常常在用 XD 10/02 22:24
4F：推 dryman:CAGradientLayer不好用，用CGGradient比較簡單 10/02 22:28
5F：→ dryman:箭頭可以用字型取代 10/02 22:29
請問用字型取代是什麼意思呢？謝謝
另外又想到一個問題，是不是為了實現這樣的效果（button不會因為捲動table而不見），
我原本寫好的UITableViewController的子類，
是不是要改寫成UIViewController的子類呢
然後再放上那些按鈕跟一個UITableView。
感覺只是多個按鈕，就要大費周章改繼承的class？
※ 編輯: hrdrq 來自: 111.250.47.78 (10/02 22:51)
6F：→ hrdrq:是不是有修到推文>"< 10/02 22:51
7F：→ kiii210:我怎麼覺得他只是一個UIView而已,下面放UITableview 10/02 22:53
我打錯字！
※ 編輯: hrdrq 來自: 111.250.47.78 (10/02 22:55)
8F：→ appleway:UIButton 可以設定highlighted時text的顏色。 10/03 00:34
請問IB可以設定嗎，在哪邊我都找不到，謝謝！
9F：→ RiddleApple:把Button加到self.navigationController.view上， 10/03 14:13
10F：→ RiddleApple:這樣Button就不會跟著Table捲動了 10/03 14:13
我想要的效果是像圖片中那樣，UINavigationBar和UITableView中間有個獨立空間來
放button，照著作把Button加到self.navigationController.view上，無法作出效果耶
※ 編輯: hrdrq 來自: 61.56.128.14 (10/03 19:23)
11F：→ RiddleApple:你是想做類似這樣的效果嗎?： 10/04 01:58
沒錯沒錯！！您就是用把Button加到self.navigationController.view上的方法嗎
好厲害，可以請教寫法嗎？謝謝！
※ 編輯: hrdrq 來自: 211.72.67.226 (10/04 13:35)
謝謝您！！！我終於懂這個作法了，真酷。
不過有美中不足的地方：
1.最上面往下拉，第一個cell上面沒有格線，因為它的上面是header
2.捲軸的頂端比button的位置還高，看得出來放button的view是在table view上方重疊的
3.若有多個section，第一個section要另外設定，多留一些空位給放button的view
不過這個做法還是滿讚的，再次謝謝您！受教了
※ 編輯: hrdrq 來自: 61.56.128.14 (10/04 20:23)
14F：推 ljhgc:IB裡,button的屬性設定裡有一項是State Config,那邊選你要的 10/05 12:29
15F：→ ljhgc:狀態, 下面的image, text color 那些也會跟著改變對應 10/05 12:30
16F：→ level39:也可以用ViewController加上TableView的方式 10/05 15:01