[廚餘回收] Xamarin.Forms Android 渲染 HTML 內容靠左、置中、靠右無效的問題。

Xamarin.Forms Android 要顯示 HTML 內容在一個 Label 上,網路上已經有許多範例,直接 Google 就可以找到答案,但通常都只能做很簡單的樣式,無法像在瀏覽器上那樣豐富,不過我要在這邊說一個有關於文字內容靠左、置中、靠右神奇的故事,如果我們去搜尋有關於這方面的訊息時,結論大都是「不支援」,是這樣的嗎?

通常從做 Web 的切入做 App 時很容易直接把 Web 的 UI 設計到 App 上,就這樣我們從設計的手上接獲了一項要求,要在類似 Chat 的訊息框內顯示 HTML 內容,超連結還要可以點擊跳出瀏覽器來瀏覽更多訊息,我同事很辛苦地將它搞了出來。

可是有一美中不足就是「閱讀更多」無法靠右對齊

就像我前面講的,搜尋這方面的訊息大都跟我們說「不支援」,不過還好 Android Html.FromHtml() 的多載方法中可以讓我們塞入實作 ITagHandler 這個介面的 Instance,於是我就爬了 Android 的 HTML Format 相關原始碼,目的是看人家怎麼弄的,因為 Android 的 TextView 是可以針對部分文字做靠左、置中、靠右對齊的樣式設定,那原生既然不支援的話,我自己客製一個可以吧?

爬了原始碼之後,不只知道現在 Android 對 HTML 內容轉換支援哪些標籤?還知道在哪些特定標籤下支援哪些屬性?,可說是收獲良多,最重要的是我看到了這段 Code。

原來不是 Android 不支援是它只支援 text-align 的值為 startcenterend,想必多數人跟我一樣沒看過 text-align 的值要輸入 start 跟 end 來指定靠左跟靠右的,但 MDN 文件還真的有說可以用 start 跟 end,但是這兩個值是屬於實驗性質 API,不建議用在 Production Code 上。

至於為何 Android 在解析的時候不支援 left 跟 right 值就先不管了,我們趕緊改用 start 跟 end 來試試。

果然證實了這一切,「閱讀更多」它靠右了。

相關資源

C# 指南
ASP.NET 教學
ASP.NET MVC 指引
Azure SQL Database 教學
SQL Server 教學
Xamarin.Forms 教學