Widget小組件如何自適應(yīng)高度

OneSwift - iOS Tips Based On Swift

一位用戶@NaThan INN 反饋了關(guān)于Widget小組件的Bug婆廊,他提到日期的一行文字無法顯示臭脓,后來又收到一位用戶反饋了同樣的問題。

Widget小部件顯示日期異常

我在手機上試了很多次,在模擬器上也試過了,都無法找出是什么問題。后來我發(fā)現(xiàn)用戶給的截圖中邑时,字體的大小和模擬器上有些差別,通過對系統(tǒng)設(shè)置字體大小特姐,我發(fā)現(xiàn)了問題的根源晶丘。

因為開發(fā)之初將cell的高定位了固定的55,但是這個值隨著系統(tǒng)字體大小的設(shè)置唐含,影響了分辨率的處理铣口,Cell在不同的系統(tǒng)字體下有不同的高度滤钱。

解決方案:將固定高度改為自適應(yīng)高度。

方案策略:折疊狀態(tài)下的高度作為自適應(yīng)的參考高度脑题。

第一步:檢測Widget的折疊和展開

Class中添加 NCWidgetProviding件缸,同時添加一個儲存高度的變量cellHeight。這樣才能檢測Widget的狀態(tài)叔遂,同時獲取高度儲存后使用他炊。

第二步:獲取Widget總體高度

具體代碼如下,其中NCWidgetDisplayMode.compact表示折疊狀態(tài)已艰,NCWidgetDisplayMode.expanded表示展開狀態(tài)痊末。

在OneDay中,折疊狀態(tài)只顯示兩行哩掺,所以每個Cell的高度為總體高的的1/2凿叠,也就是maxSize.height/2,同時這個高度會作為展開狀態(tài)下其他Cell的高度嚼吞。

當(dāng)然盒件,這個函數(shù)中我還順便把展開狀態(tài)的高度做了,根據(jù)數(shù)據(jù)的個數(shù)去計算高度舱禽。

//折疊change size

func widgetActiveDisplayModeDidChange(_ activeDisplayMode: NCWidgetDisplayMode, withMaximumSize maxSize: CGSize) {

    if activeDisplayMode == NCWidgetDisplayMode.compact {

    self.preferredContentSize = CGSize(width:maxSize.width,height: maxSize.height)

    self.activeDisplayIndex = 0

    self.cellHeight = Int(maxSize.height/2)

    print("cellHeight",self.cellHeight)

        }else{

    let hei = CGFloat((self.cellHeight * self.number)+self.cellHeight+5)

    self.preferredContentSize = CGSize(width: maxSize.width,height:hei )

    self.activeDisplayIndex = 1

    print("cellHeight",self.cellHeight)

        }

//        self.eventsTable.reloadData()

}

第三步:給Tableview加載高度

獲取高度之后來使用就很簡單了炒刁,直接用heightForRowAt。

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

        return CGFloat(self.cellHeight)

}

第四步:注意事項和重新加載

注意要給 cellHeight一個初始值誊稚,一般推薦50~55翔始;

var cellHeight:Int = 50

因為widget通常是加載好的,所以在viewWillAppear中加入tableviewreloadData方法里伯,以便在用戶改變系統(tǒng)字體后隨時改變城瞎。

self.eventsTable.reloadData()

最后:看看效果

系統(tǒng)最大字體和最小字體的適配結(jié)果對比

其實,Widget小組件自適應(yīng)的效果疾瓮,看了幾個應(yīng)用都沒有處理得很好脖镀,往往容易被忽視。我手機里的應(yīng)用爷贫,workflow應(yīng)該也是這樣類似的解決方案认然,以便應(yīng)對系統(tǒng)字體設(shè)置帶來widget適配問題补憾。

最后漫萄,感謝NaThan INN用戶的反饋,不然真的很難發(fā)現(xiàn)盈匾,這項特性將在OneDay 2.4.0版本中正式發(fā)布腾务。

GitHub:OneSwift - iOS Tips Based On Swift

微博:xDEHANG

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市削饵,隨后出現(xiàn)的幾起案子岩瘦,更是在濱河造成了極大的恐慌未巫,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件启昧,死亡現(xiàn)場離奇詭異叙凡,居然都是意外死亡,警方通過查閱死者的電腦和手機密末,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門握爷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人严里,你說我怎么就攤上這事新啼。” “怎么了刹碾?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵燥撞,是天一觀的道長。 經(jīng)常有香客問我迷帜,道長物舒,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任瞬矩,我火速辦了婚禮茶鉴,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘景用。我一直安慰自己涵叮,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布伞插。 她就那樣靜靜地躺著割粮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪媚污。 梳的紋絲不亂的頭發(fā)上舀瓢,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天,我揣著相機與錄音耗美,去河邊找鬼京髓。 笑死,一個胖子當(dāng)著我的面吹牛商架,可吹牛的內(nèi)容都是我干的堰怨。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼蛇摸,長吁一口氣:“原來是場噩夢啊……” “哼备图!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤揽涮,失蹤者是張志新(化名)和其女友劉穎抠藕,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蒋困,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡盾似,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了雪标。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颜说。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖汰聋,靈堂內(nèi)的尸體忽然破棺而出门粪,到底是詐尸還是另有隱情,我是刑警寧澤烹困,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布玄妈,位于F島的核電站,受9級特大地震影響髓梅,放射性物質(zhì)發(fā)生泄漏拟蜻。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一枯饿、第九天 我趴在偏房一處隱蔽的房頂上張望酝锅。 院中可真熱鬧,春花似錦奢方、人聲如沸搔扁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽稿蹲。三九已至,卻和暖如春鹊奖,著一層夾襖步出監(jiān)牢的瞬間苛聘,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工忠聚, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留设哗,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓两蟀,卻偏偏與公主長得像网梢,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子垫竞,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容