顯示廣告
隱藏 ✕
看板 KnucklesNote
作者 Knuckles (站長 那克斯)
標題 [Xcode][Swift3] 調整 Navigation Bar 顏色
時間 2017-03-17 Fri. 18:33:30


修改 Navigation Bar 的顏色

在 storyboard 點一下 Navigation Controller 裡的 Navigation Bar
在屬性檢視器,取消勾選「Translucent」不要加上透明度
Bar Tint 選深藍色(#000080) 就是整條的背景色
Title Color 選白色,代表顯示文字的顏色
Tint 選白色,代表圖示的顏色
[圖]


只要調整 Naviation Bar 的屬性檢視器後,就會跳出一個警告訊息
「Frame for "Navigation Bar" will be different at run time.」
就算把設定改回來也不會消失,應該是個 bug

不過只要在 Navigation Controller 的屬性檢視器
取消勾選「Adjust Scroll View Insets」然後再勾回來
錯誤訊息就會消失了... 參考 StackOverflow
[圖]


執行結果
[圖]



修改狀態列的顏色

發現上方狀態列使用黑色會看不清楚
要改成白色的話,參考 StackOverflow

到專案設定的 Info 點一下任意一項後面的✚
[圖]


輸入「View controller-based status bar appearance」後按 Tab 選「NO」
[圖]


在專案設定的 General 將 Status Bar Style 改為「Light」
[圖]


執行結果
[圖]



修改 TableView 的顏色

Table View 的屬性檢視器
將 Separator 的顏色改為 Dark Gray Color
View 的 Background 改為 Black Color

Table View Cell 的屬性檢視器
Selection 可以選擇選取的顏色,但只有 Blue, Gray, Default 可以選
View 的 Background 改為 Black Color

某些iOS版本在 storyboard 設定 Table View Cell 的背景色會失效
所以最好在 tableView(_:cellForRowAt:) 裡再加上
        cell.backgroundColor = UIColor.black


要自訂選取的顏色的話,要修改程式
在 tableView(_:cellForRowAt:) 加上
        let cellBackgroundView = UIView()
        cellBackgroundView.backgroundColor = UIColor.dark.Gray
        cell.selectedBackgroundView = cellBackgroundView

執行結果
[圖]



修改 WebView 顏色

要將 WebView 背景改為黑色,避免網頁載入前顯示白色
在 WebView 的屬性檢視器將 Background 設為 Black Color
並且取消勾選「Opaque」
[圖]



--
※ 作者: Knuckles 時間: 2017-03-17 18:33:30
※ 編輯: Knuckles 時間: 2017-05-17 01:16:53
※ 看板: KnucklesNote 文章推薦值: 0 目前人氣: 0 累積人氣: 283 
分享網址: 複製 已複製
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇
看板名稱: 確定(Enter) 取消(Esc) 搜尋(Space)
查詢帳號: 確定(Enter) 取消(Esc) 搜尋(Space)
搜尋: m)m文 b)進板 c)未分類 a)作者 /)標題 q)取消?[q]

搜尋 送出(Enter) 取消(Esc)

回覆文章至: f)看板 m)作者信箱 b)兩者皆是 q)取消?[f]
要引用原文嗎? y)引用原文 n)不引用 a)全部回覆 r)複製原文 q)取消?[y]
轉錄本文章於看板: 1)使用連結 2)使用複製 q)取消 ?[1]
轉寄至站內信箱於使用者: 確定(Enter) 取消(Esc)
轉寄至站內信箱於使用者: 確定(Enter) 取消(Esc)
修改文章標題為: 確定(Enter) 取消(Esc)
修改文章標題為: 確定(Enter) 取消(Esc) 全部(a)

確定要刪除這篇文章?(可按大U救回) 確定(Enter) 取消(Esc)

刪除理由:

確定(Enter) 取消(Esc)
加到這個分類: 確定(Enter) 下一層(→) 回上層(←) 取消(Esc)
你覺得這篇文章: 1)真讚 2)真瞎 q)取消?[1] (再選一次即可收回)
你覺得這篇文章: 1)值得推薦 2)表示反對 3)單純註解 q)取消?[3]
guest
預覽(Enter) 取消(Esc)
上傳圖片
按ctrl+Enter可輸入下一行。
guest
確定要送出? 確定(Enter) 取消(Esc) 繼續(e)
搜尋: 送出(Enter) 取消(Esc)

▏▎▍▌▋▊▉ 請按任意鍵繼續