我們請(qǐng)來了人氣跨平臺(tái)記賬應(yīng)用《錢跡》的開發(fā)者，為大家解讀原生和定制 Android 系統(tǒng)小組件的功過得失。

在今年的 WWDC 中，Apple 終于「舍得」為 iOS 的桌面小組件補(bǔ)上一項(xiàng)重要功能：可交互性。從 iOS 17 開始，無論是在鎖屏、主屏還是這次剛上線的「待機(jī)」頁面，我們都可以通過小組件上的交互按鈕完成一些簡(jiǎn)單的任務(wù)。

關(guān)聯(lián)閱讀：

(資料圖片僅供參考)

但對(duì)于 Android 用戶來說，小組件支持交互似乎應(yīng)該是一件「天經(jīng)地義」的事情。早在 2008 年 10 月發(fā)布的首個(gè)版本中，Android 就支持小組件；2021 年發(fā)布 Android 12 時(shí)，Google 還進(jìn)一步強(qiáng)化了小組件方方面面的功能，包括圓角、主題、自定義、功能、自適應(yīng)布局、動(dòng)畫效果等，為小組件在平板、折疊屏等大屏設(shè)備中的表現(xiàn)力提供了更好的基礎(chǔ)。

Android 4.2 的鎖屏小組件，圖自 Trendblog

不過，這種先發(fā)優(yōu)勢(shì)并不意味著 Android 小組件就能睥睨 iOS。相反，正如 Android 平臺(tái)的常見劇本《起個(gè)大早趕個(gè)晚集》那樣，它的小組件也是功能有余、細(xì)節(jié)不足。今天，如果你在 Google Pixel 的啟動(dòng)器上添加幾個(gè)來自不同 app 的同尺寸小組件，大概率也就能看到幾種各不相同的實(shí)際尺寸和圓角半徑。

或許正是出于對(duì)原生 Android 這種粗糙效果的不滿意，我們看到 MIUI 等定制系統(tǒng)紛紛選擇另起爐灶，重新制定一套小組件的開發(fā)方案和設(shè)計(jì)規(guī)范。

那么，Google 的小組件方案到底有什么問題導(dǎo)致了這種現(xiàn)狀，第三方系統(tǒng)又是怎么試圖解決的？

專業(yè)的問題還是要專業(yè)的人來解答。為此，我們請(qǐng)到了人氣記賬 app《錢跡》的開發(fā)者李唐。作為一款跨平臺(tái) app 的開發(fā)者，李唐對(duì) iOS 和 Android 的小組件適配有著第一手的經(jīng)驗(yàn)，也親身體會(huì)過個(gè)中不為用戶所知的種種「坑」。

下面，我們就把麥克風(fēng)交給李唐，由他來為大家分析原生和定制 Android 系統(tǒng)小組件的功過得失。

找準(zhǔn)「定位」，是小組件的首要問題

和型號(hào)總是已知、分辨率數(shù)值明確的 iPhone 不同，Android 設(shè)備的分辨率可謂千奇百怪，這種屏幕參數(shù)的碎片化，直接導(dǎo)致小組件無法按照開發(fā)者設(shè)想的形狀進(jìn)行呈現(xiàn)。

以下圖為例，物理尺寸觀感基本相同的字母 a，在左側(cè)的低分辨率設(shè)備上顯示時(shí)所使用的實(shí)際物理像素?cái)?shù)量更少；所以反過來說，一個(gè)長(zhǎng)寬均為 100 物理像素的正方形，在同尺寸低分辨率設(shè)備上的顯示效果往往會(huì)更大。

尺寸相同的兩個(gè)屏幕可能具有不同數(shù)量的像素 | 圖：Google

為了保證不同屏幕上的尺寸和觀感一致性，Android 平臺(tái)引入了密度無關(guān)像素（dp）這個(gè)度量單位來進(jìn)行輔助；桌面小組件也不例外。在 Android 12 之前，Google 允許開發(fā)借助單位為 dp 的 minHeight 和 minWidth 兩項(xiàng)參數(shù)來設(shè)定小組件在主屏上的最小長(zhǎng)寬，希望通過這種方式來保證同一小組件在不同設(shè)備上的尺寸基本一致。

但密度問題可以「無關(guān)」，精度問題又會(huì)出來搗亂。密度無關(guān)像素的計(jì)算過程涉及根據(jù)特定公式進(jìn)行計(jì)算轉(zhuǎn)換，由于轉(zhuǎn)換后的數(shù)值可能不是一個(gè)整數(shù)值，結(jié)果需要四舍五入，然后將結(jié)果歸入最為接近的整數(shù)坐標(biāo)網(wǎng)格內(nèi)。另外，因?yàn)檗D(zhuǎn)換公式中屏幕密度與物理像素的正相關(guān)關(guān)系，分辨率越高的設(shè)備，在遇到類似情況時(shí)四舍五入的結(jié)果差異也就越大。

換言之，以 dp 作為小組件尺寸參考的做法只能保證小組件在視覺觀感上的大致相近，并且這種觀感差異會(huì)極大程度上收到高分辨率、高像素密度等因素影響。

開發(fā)者為了避免小組件內(nèi)容顯示出現(xiàn)錯(cuò)位、異常，就不得不通過一些特定的布局手段來對(duì)小組件邊界進(jìn)行額外調(diào)整，比如邊距、比例、對(duì)齊規(guī)則等……這些額外的調(diào)整標(biāo)準(zhǔn)各不相同，最終小組件呈現(xiàn)出來的實(shí)際效果自然千差萬別。

以下圖中的 Glance Weather 與 Apple Music 的小組件為例。盡管兩者名義上都是 4 × 1 尺寸，但前者追求將小組件鋪滿所在的網(wǎng)格區(qū)域，后者則以內(nèi)容為中心，將小組件做得盡可能緊湊；放在一起，就會(huì)出現(xiàn)這種「逼死強(qiáng)迫癥」的景觀。

因此，李唐認(rèn)為直到 Android 12 之前，Android 的小組件都可以說是「半成品」。從開發(fā)者的角度觸發(fā)，他的記賬應(yīng)用錢跡最初進(jìn)行小組件開發(fā)時(shí)就遇到過非常多的痛點(diǎn)，加上 Android 本身比較割裂的生態(tài)，Google 以往所提供的方法或者屬性在實(shí)際應(yīng)用中可以說是沒什么效果的：

早前如果我們按照 Google 的官方文檔開發(fā)小組件，這個(gè)小組件在不同廠商的手機(jī)上所呈現(xiàn)出來的尺寸大概率各不相同，同一個(gè)小組件在 4x5 和 5x6 的桌面中寬高比也完全不一樣……在經(jīng)歷了多輪嘗試后，我們最終放棄了對(duì)尺寸統(tǒng)一的奢望，以 MATCH_PARENT 這種方式將小組件尺寸渲染完全交給手機(jī)去自行處理——盡管它在某些機(jī)型又會(huì)帶來其他問題。

那么，對(duì)小組件做出重大更新的 Android 12 是否解決了這個(gè)問題呢？答案并不十分樂觀。

首先回顧一下 Android 12 對(duì)小組件的一個(gè)主要改進(jìn)和切入點(diǎn)：桌面網(wǎng)格（grid cells）。從這代系統(tǒng)開始，小組件可以預(yù)設(shè)自己的目標(biāo)網(wǎng)格寬度和高度（通過 targetCellWidth 和 targetCellHeight 兩項(xiàng)屬性）了。換句話說，開發(fā)者可以向桌面聲明其小組件預(yù)期呈現(xiàn)的形態(tài)，而不是放由系統(tǒng)進(jìn)行不精確的估算和轉(zhuǎn)換。這樣，用戶能夠直接感，特殊情況也更易提前考慮，在 Google 看來正是更好的選擇。

應(yīng)當(dāng)肯定，這個(gè)改進(jìn)是有效果的。直接將小組件與桌面網(wǎng)格匹配的做法，配合 Android 12 對(duì)小組件圓角半徑、響應(yīng)式布局以及精確式布局等方面的改進(jìn)，使得借助這些新規(guī)范進(jìn)行開發(fā)的小組件在 Android 12 及以上版本系統(tǒng)中，已經(jīng)能夠呈現(xiàn)視覺效果幾乎一致的小組件尺寸了，比如下圖右側(cè)上方的 Google 天氣和 Google 相冊(cè)：

iOS 與 Android 的 2 × 2 小組件對(duì)比

但這套方案與 iOS 的小組件差距依然存在，因?yàn)?Android 12 的新方案并沒有解決所有問題。網(wǎng)格能約束小組件的「外在」，但管不到「內(nèi)在」。Google 并未像 iOS 那樣為小組件規(guī)定更為嚴(yán)格的布局屬性，如果在網(wǎng)格內(nèi)部小組件與網(wǎng)格邊緣的邊距各不相同，依然會(huì)導(dǎo)致特定尺寸、尤其是不規(guī)則形狀小組件在視覺效果上的「不和諧」。

以下圖的兩個(gè)小組件為例，雖然名義上都是 3 × 2 尺寸，但一個(gè)內(nèi)部邊距大、一個(gè)內(nèi)部邊距小，看起來完全不像是一個(gè)尺寸的東西：

3 × 2 尺寸的不規(guī)則小組件，邊距就千奇百怪了立足小生態(tài)摳細(xì)節(jié)、嚴(yán)管理：MIUI 的嘗試

Google 的原生方案不好用，定制系統(tǒng)也就紛紛動(dòng)起了另起爐灶的心思。特別是 MIUI、OriginOS 等本就或多或少借鑒了 iOS 的國內(nèi)定制系統(tǒng)，眼看著 iOS 跟進(jìn)了小組件，繼續(xù)「從善如流」地打造一套更接近 Apple 做法的方案，是一個(gè)比較自然的選擇。

這方面，最有代表性的就是 MIUI。2021 年 9 月，MIUI「小部件」功能上線開發(fā)版，同時(shí)上線的還有首批適配了小部件的第三方應(yīng)用，包括百度、QQ 音樂、高德地圖等。