e

---

延續上一篇 [Xcode][Swift3] 手動加入 TableView 元件 - KnucklesNote板 - Disp BBS
在 ViewController 手動加入 TableView
以及上方固定的 ScrollView 後

這篇要在 ScrollView 中加上可水平捲動的選單

先在 ViewController 的屬性檢視器，
取消勾選「Adjust Scroll View Insets」

避免 ScrollView 中的元件自動下移 NavigationBar 的高度

我們預計在水平選單中放5個 90x36 的按鈕
所以要先放一個 450x36 的 View

拉一個 View 放到 ScrollView 裡面


在 View 加上 上下左右為 0 的 Constraints
以及 寬 450、高 36 的 Constraints
Update Frames 選擇「Items of New Constraints」
點「Add 6 Constraints」

ScrollView 中的 View 必需設定四個方向與寬高共六個 Constraints 才行

拉一個按鈕進來，在尺寸檢視器設定 X:0, Y:0, Width:90, Height:36
顯示文字改為「按鈕1」


點一下按鈕1後，按 command+c 複製，再按 command+p 四次貼上四個按鈕
修改四個按鈕的 x 分別為 90, 180, 270, 360
顯示文字分別為「按鈕2」「按鈕3」「按鈕4」「按鈕5」


執行看看，水平選單可以向左滑動以顯示按鈕5



點選按鈕後改變按鈕顏色

想要讓按鈕像頁籤一樣可以選取，點了以後會改變顏色的話

先修改按鈕1為預設先選取的顏色
Text Color: Black Color, Background: Light Gray Color


每個按鈕的字體都調成 System 18.0

使用 Assistant editor 建立5個按鈕的 @IBOutlet


使用 Assistant editor 建立5個按鈕的 @IBAction



切換回 Standard editor
在 ViewController.swift 加上成員變數
用來記錄現在選取的是哪一個按鈕

在 viewDidLoad() 裡加上
設定預設先選取的是按鈕1

新增一個成員函數 changeTab(to:)

修改5個按鈕的 @IBAction 為

執行看看，點選按鈕後會改變選取的按鈕了



水平選單下方加上分隔線

將下方的 tableView 調低一點，拉一個 View 進來


點 Add New Constraints
設定上左右為 0，高為 1，取消勾選「Constrain to margins」
Update Frames 選 Items of New Constraints
點 Add 4 Constraints


點一下 View 後按 Enter，將名稱改為「Separator View」


重新設定下方 TableView 的 Constraints
點 TableView 後點「Resolve Auto Layout Issues」/「Clear Constraints」
Add Constraints 時上方邊界改為與 Separator View 的間距為 0


將 Separator View 的背景色改為 Light Gray Color


執行結果



點擊 Status Bar 捲動 TableView 至最上方

在一般的頁面往下捲動後，只要點擊上方的 Status Bar 時，就會捲動到最上方
但加了水平捲動選單後，點 Status Bar
下方的 TableView 不會捲動到最上方

參考 StackOverflow
要將水平選單中的 ScrollView 拉一個 @IBOutlet 後
在 viewDidLoad() 中設定 ScrollView 的屬性 .scrollToTop = false
這樣點擊 Status Bar 時，下方的 TableView 就會捲動到最上方了




--
※ 作者: Knuckles 時間: 2017-04-01 23:58:12
※ 編輯: Knuckles 時間: 2017-04-25 00:18:08