- Hello HarmonyOS!:鴻蒙應用開發從入門到精通
- 孫洋
- 1393字
- 2022-05-06 15:42:16
2.2.4 TableLayout
TableLayout是一種表格布局,將頁面分為多個單元格,以行、列單元格的形 式 來 管 理 子 組 件,其 最 基 本 的 兩 個 屬 性 是 ohos:row_count 和ohos:column_count,分別代表行數和列數。圖2-23所示為ohos:row_count=3,ohos:column_count=3 的表格布局。在 TableLayout 中,組件的排列方向ohos:orientation屬性指定了組件在排列時,是按垂直方向排列還是按水平方向排列。

圖2-23 表格布局示意圖
TableLayout有以下特有的屬性,見表2-4。
表2-4 TableLayout的屬性

下面來看一些具體問題,首先設置表格的屬性。

在上述代碼中,表格設置的是水平排列,column_count 設置為 1,表示TableLayout只有一列,然后在TableLayout中添加3個組件。

頁面的預覽效果如圖2-24所示。

圖2-24 表格布局的單列演示
雖然TableLayout的排列方向設置為水平,但實際效果是組件排成一列。雖然設置了水平排列,B 組件的位置應該在 A 組件的右側,但由于TableLayout 設置的列數為 1,意思是每一行只有一列。所以,A組件的右側已經沒有位置了,B組件只能被繪制到第二行。同理,C組件的位置也是這樣確定的。
現在把列數設置為2,在TableLayout中放入5個組件。


頁面的預覽效果如圖2-25所示。
設置 ohos:column_count="2"的含義是,每一行最多可以放兩個組件,多的組件只能放到下一行,比如在上述例子中,組件的第一行分別是A、B組件,C組件排到了第二行。

圖2-25 表格布局的多列演示
細心的讀者可能發現,在TableLayout的屬性中,還加入了 ohos:row_count="2",聲明了TableLayout 有兩行,但很明顯,這個屬性值并未起作用,因為第五個組件 E被放到了第三行,可以理解為,當表格的方向設置為水平時,它的ohos:row_count 屬性不起作用。根據對偶性,當表格的方向設置為垂直時,ohos:column_count屬性不起作用。TableLayout的排列方向默認為水平。
TableLayout還有另一個屬性alignment_type,它有兩個子屬性:邊距對齊“align_contents”、邊界對齊“align_edges”,默認為“align_contents”。下面來測試這兩個屬性的效果。


在TableLayout中擺放三個組件,對齊方式為邊距對齊“align_contents”。其中,A組件加了外邊距20vp,B組件和C組件都沒有加外邊距。頁面的預覽效果如圖2-26所示。
我們可以很清晰地看到A組件四周的外邊距。B組件由于沒有外邊距,緊貼著 A 組件右側外邊距的位置和屏幕頂部來繪制。C 組件緊貼屏幕左側和 A組件下側外邊距來繪制。但是當給C組件一個比A組件大的外邊距時,B組件左側的參考位置就發生了變化。我們看一下下面的例子。


這個案例和上面案例的不同點在于,C組件的外邊距被設置為50vp,明顯比A組件的外邊距20vp要大。那么在繪制B組件時,B組件左側緊貼的不再是 A 組件右側的外邊距,而是邊距更大的 C 組件右側的外邊距,頁面的預覽效果如圖 2-27 所示,這就是邊距對齊的含義。在這種方式下,組件的邊距值確定了組件所占的矩形區域大小。對于表格布局,上下排列的表格大小是一樣的,如果下方表格比上方表格大,那么自然就會把上方的表格撐開,在垂直方向上也是一樣的。

圖2-26 表格布局的邊距對齊“align_contents”的效果

圖2-27 表格布局的修改組件的邊距效果
把TableLayout的對齊方式改為align_edges,其他都不做改動。

頁面的預覽效果如圖2-28所示。
在邊界對齊的方式下,B組件雖然沒有邊距,但B組件的上邊界和A組件的上邊界對齊了,A組件的左邊界也和C組件的左邊界對齊了,在行和列兩個方向上取外邊距最大的組件的外邊距作為其他組件繪制時的外邊距,從而將邊界進行“對齊”。

圖2-28 表格布局的邊界對齊“align_edges”的效果
實現TableLayout的Java代碼如下。

Button 通 過 TableLayout.LayoutConfig 的Specification 對象來為行和列進行設置,其中TableLayout.specification包含多個重載方法。
TableLayout.Specification specification(int start,float weight)
TableLayout.Specification specification(int start,int size)
TableLayout.Specification specification(int start,int size,float weight)
TableLayout.Specification specification(int start,int size,int alignment)
TableLayout.Specification specification(int start,int size,int alignment,float weight)
其中,start為起始行(列)的索引,從0開始計數。size是跨行(列)的數量,如果為 1,那么代表不跨行(列)。weight 為組件所在位置的權重值。alignment是組件的對齊方式。
- 3ds Max 2014標準教程(全視頻微課版)
- UG NX 12.0中文版完全自學一本通
- JasperReports for Java Developers
- 中文版AutoCAD 2016從入門到精通
- Celtx: Open Source Screenwriting Beginner's Guide
- 鍵盤錄入技術(第2版)
- jQuery Mobile First Look
- 數碼攝影后期處理秘笈:Photoshop CC專業調色(第2版)
- 下一代空間計算:AR與VR創新理論與實踐
- Photoshop CS6實戰從入門到精通(超值版)
- CryENGINE 3 Cookbook
- GlassFish Administration
- Drupal 6 Content Administration
- 中文版After Effects 2022基礎教程
- 中文版Maya 2014基礎培訓教程