[請益] 請問這支app的這種button是怎麼做到的

看板MacDev作者 (惜福)時間13年前 (2012/10/02 21:46), 編輯推噓5(5011)
留言16則, 8人參與, 最新討論串1/1
最近在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

10/02 22:01, , 1F
這種漸層有可能是用畫的喔..記得是CAGradientLayer?
10/02 22:01, 1F
喔喔!原來是用畫的!沒有想到

10/02 22:21, , 2F
iFunbox看不到包在裡面的圖吧?最簡單是把字放在圖裡一起換
10/02 22:21, 2F
可以喔!不過我忘記是不是要JB才看得到

10/02 22:24, , 3F
iFunbox可以喔! 常常在用 XD
10/02 22:24, 3F

10/02 22:28, , 4F
CAGradientLayer不好用,用CGGradient比較簡單
10/02 22:28, 4F

10/02 22:29, , 5F
箭頭可以用字型取代
10/02 22:29, 5F
請問用字型取代是什麼意思呢?謝謝 另外又想到一個問題,是不是為了實現這樣的效果(button不會因為捲動table而不見), 我原本寫好的UITableViewController的子類, 是不是要改寫成UIViewController的子類呢 然後再放上那些按鈕跟一個UITableView。 感覺只是多個按鈕,就要大費周章改繼承的class? ※ 編輯: hrdrq 來自: 111.250.47.78 (10/02 22:51)

10/02 22:51, , 6F
是不是有修到推文>"<
10/02 22:51, 6F

10/02 22:53, , 7F
我怎麼覺得他只是一個UIView而已,下面放UITableview
10/02 22:53, 7F
我打錯字! ※ 編輯: hrdrq 來自: 111.250.47.78 (10/02 22:55)

10/03 00:34, , 8F
UIButton 可以設定highlighted時text的顏色。
10/03 00:34, 8F
請問IB可以設定嗎,在哪邊我都找不到,謝謝!

10/03 14:13, , 9F
把Button加到self.navigationController.view上,
10/03 14:13, 9F

10/03 14:13, , 10F
這樣Button就不會跟著Table捲動了
10/03 14:13, 10F
我想要的效果是像圖片中那樣,UINavigationBar和UITableView中間有個獨立空間來 放button,照著作把Button加到self.navigationController.view上,無法作出效果耶 ※ 編輯: hrdrq 來自: 61.56.128.14 (10/03 19:23)

10/04 01:58, , 11F
你是想做類似這樣的效果嗎?:
10/04 01:58, 11F

10/04 01:58, , 12F
沒錯沒錯!!您就是用把Button加到self.navigationController.view上的方法嗎 好厲害,可以請教寫法嗎?謝謝! ※ 編輯: hrdrq 來自: 211.72.67.226 (10/04 13:35)

10/04 18:51, , 13F
謝謝您!!!我終於懂這個作法了,真酷。 不過有美中不足的地方: 1.最上面往下拉,第一個cell上面沒有格線,因為它的上面是header 2.捲軸的頂端比button的位置還高,看得出來放button的view是在table view上方重疊的 3.若有多個section,第一個section要另外設定,多留一些空位給放button的view 不過這個做法還是滿讚的,再次謝謝您!受教了 ※ 編輯: hrdrq 來自: 61.56.128.14 (10/04 20:23)

10/05 12:29, , 14F
IB裡,button的屬性設定裡有一項是State Config,那邊選你要的
10/05 12:29, 14F

10/05 12:30, , 15F
狀態, 下面的image, text color 那些也會跟著改變對應
10/05 12:30, 15F

10/05 15:01, , 16F
也可以用ViewController加上TableView的方式
10/05 15:01, 16F
文章代碼(AID): #1GQl0eo3 (MacDev)