iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
1
自我挑戰組

Hey! UIKit, 做個朋友吧~系列 第 20

Day 20: 來自深淵-UITableView(V)

終於來到了第20天,今天就恢復輕鬆主題,來講講與table外顯相關的一些參數及function吧!

Appearance

headerView / FooterView

header view跟footer View分別是table顯示的第一項與最後一項物件,使用tableHeaderView與tableFooterView指定一個UIView來設定,預設值為nil。

如果你要設定header view與footer view,需要為你的view指定一個非0的高度,我們家table view可是只認高度的,寬度會自動幫你調節成table view的寬度。

BackgroundView

background view在table所有的cell、header view及footer view之後,並不會隨著table的內容捲動。background view可以用來改變table的背景顏色,利用指定一個UIView給backgroundView來實現,預設值為nil。

指定給table view的UIVeiw不需要額外設定frame,table view會自動把它變成table view的形狀,我們家table view94這麼霸道!

Height

Row Height

顧名思義就是列高,用rowHeight給定一個CGFloat來實現。
使用此參數會統一列高,如果希望每列的高度不同,要另外使用delegate裡的tableView(_:heightForRowAt:)來實現。

newTableView.rowHeight = 100


那estimated row height又是怎麼一回事呢?這就要先來講講row的配位的機制。當一個table配置row的時候,他是利用計算前面幾個row的高度來決定現在要生成的row的位置。
因此如果這個table有非常多筆資料,或是他的列高是可變動的,table在讀取的時候就會耗費很多成本。
於是工程師就想,反正全部位置都算出來配置的好好的,我螢幕一次也顯示不了這麼多(又來了!),不如先給他們一個估計值,等他真的要被顯示的時候再算就好。
於是estimation就這樣被發明了。他在被呼叫的時候會管理父類別UIScrollView的contentOffset和contentSize,計算出一個automaticDimension(預設值)來當作row的生成位置,把實際算出row的位置的這件事從讀取時推遲到滾動時,因此改善了table view的讀取速度。

而如果將這個值設為0,estimation就會被停用,意味著table view讀取時會實際計算每個row的高度。我是想不到誰會這麼無聊啦...不過如果你的row裡有使用自適應cell的話,這個值就不可以為0,即使你這麼無聊也不可以。

header/footer height

此參數定義了header與footer的高度,使用sectionHeaderHeight與sectionFooterHeight實現。
而與row height相同,定義此參數會統一header與footer的高度,如果希望每個section的header/footer高度不同的話,需要使用delegate裡的tableView(:heightForHeaderInSection:)與tableView(:heightForFooterInSection:)。如果此方法與delegate裡的方法同時被定義,table view會優先採用delegate裡的定義。

而estimation的機制也與row的相同,就不再另外解釋與demo了。

Cell Layout

cell提供了2個名字落落長的layout:cellLayoutMarginsFollowReadableWidth和insetsContentViewsToSafeArea,都是布林值,分別是cell的邊界可不可以從可讀內容的寬度中取得,和table view會不會調整插入的視圖內容以避免內容被其他視圖或邊緣所遮蓋,預設值為true。

Separator

separator是row與row之間的分隔線,雖然我的demo超他X的不清楚,但有94有。

Style

Style是separator的類型,只有none與single line兩種,原本還有double line這個style,但功能在iOS 11之後被拿掉了,可能再過不久就會消失在這個世界上。
使用separatorStyle這個參數來實現,但因為我的demo有跟沒有都看不太清楚,所以就不demo了,很簡單直白的功能大家自己實作看看。

Color

separator也可以指定顏色,預設值為灰色,當然你要在separatorStyle是singleLine的時候才有辦法實現,不要給我假笑。

newTableView.separatorColor = UIColor.red

Effect

separatorEffect為separator提供了一些視覺效果,例如漸層模糊處理。
但我對UIVisualEffect實在不熟QQ加上想把時間花在讀好UITableView上,所以只好直接上網抓demo給大家看了。

(圖片來源:什麼是UITableView separatorEffect屬性?)

Inset

separatorInset定義了你的separator所留的邊界。
一般沒有定義的情況下,separator的起始位置會對齊data,一路延伸到畫面的邊界。而你可以藉由為separator指定一個UIEdgeInsets來決定separator的寬度。

newTableView.separatorInset = UIEdgeInsets(top: 0, left: 50, bottom: 0, right: 100)


由於separator只是一條橫線,所以只有left與right的數值會對separatorInset有影響,就算你把top加到9999,也沒有人會理你。
另外如果你的使用者語言是由右至左閱讀的,separatorInset則會幫你翻轉right與left的數值,是不是非常貼心呢?

而separatorInsetReference則定義了剛剛inset的基準位置,預設的情況是從cell的邊界開始(fromCellEdge),也可以定義成從預設的separator inset開始(fromAutomaticInsets),也就是我們一開始說的對齊data的起始位置而非cell的邊界。

那下一回...我也不知道要講什麼。
一樣還是UITableView,就看我看到哪裡吧QQ


上一篇
Day 19: 來自深淵-UITableView(IV)
下一篇
Day 21: 來自深淵-UITableView(VI)
系列文
Hey! UIKit, 做個朋友吧~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言