一革骨、布局介紹

Android的布局開發(fā)中存在五大布局农尖，在鴻蒙布局開發(fā)中也存在與之相似的五種布局類型，唯一多余的一個類型叫做自適應(yīng)盒子布局苛蒲，布局可以在不同設(shè)備上有不同的展示方式卤橄。
熟悉Android開發(fā)的小伙伴可以參照Android的布局開發(fā)來學(xué)習(xí)。

二臂外、布局開發(fā)

① DirectionalLayout 對應(yīng) LinearLayout
在此布局中可以對布局中的所有組件進(jìn)行橫向或縱向排列窟扑，并且使組件與組件之間進(jìn)行對齊喇颁。在布局開發(fā)中也是最常用的一種布局，而且可以結(jié)合其他布局進(jìn)行頁面設(shè)計(jì)嚎货。
自有XML屬性：(基礎(chǔ)屬性省略了橘霎，這里羅列重要的一些屬性)

所包含組件可支持的XML屬性：

注意事項(xiàng)：DirectionalLayout不會自動換行，其子組件會按照設(shè)定的方向依次排列殖属，若超過布局本身的大小姐叁，超出布局大小的部分將不會被顯示。

② DependentLayout 對應(yīng) RelativeLayout

DependentLayout是Java UI框架里的一種常見布局洗显。與DirectionalLayout相比外潜，擁有更多的排布方式，每個組件可以指定相對于其他同級元素的位置挠唆，或者指定相對于父組件的位置处窥。
自有XML屬性：

所包含組件可支持的XML屬性表：

包含組件的xml屬性可以理解為DependentLayout布局的一大特性滔驾，種類較多就不一一列舉了，簡單的描述一下即可俄讹。

③ StackLayout 對應(yīng) FrameLayout

StackLayout直接在屏幕上開辟出一塊空白的區(qū)域哆致，添加到這個布局中的視圖都是以層疊的方式顯示，而它會把這些視圖默認(rèn)放到這塊區(qū)域的左上角患膛，第一個添加到布局中的視圖顯示在最底層摊阀，最后一個被放在最頂層。上一層的視圖會覆蓋下一層的視圖剩瓶。

自有XML屬性：

④ TableLayout 對應(yīng) TableLayout

TableLayout使用表格的方式劃分子組件延曙。

TableLayout的自有XML屬性：

注意事項(xiàng)：在設(shè)置子組件的行列屬性時，TableLayout剩余的行數(shù)和列數(shù)必須大于等于該子組件所設(shè)置的行數(shù)和列數(shù)亡哄。

目前僅支持Java代碼設(shè)置TableLayout子組件的行列屬性枝缔。

⑤ PositionLayout 對應(yīng) AbsoluteLayout

在PositionLayout中，子組件通過指定準(zhǔn)確的x/y坐標(biāo)值在屏幕上顯示蚊惯。(0, 0)為左上角愿卸；當(dāng)向下或向右移動時，坐標(biāo)值變大截型；允許組件之間互相重疊趴荸。

布局方式

PositionLayout以坐標(biāo)的形式控制組件的顯示位置，允許組件相互重疊宦焦。

在layout目錄下的XML文件中創(chuàng)建PositionLayout并添加多個組件发钝，并通過position_x和position_y屬性設(shè)置子組件的坐標(biāo)顿涣。

⑥ AdaptiveBoxLayout

AdaptiveBoxLayout是自適應(yīng)盒子布局，該布局提供了在不同屏幕尺寸設(shè)備上的自適應(yīng)布局能力酝豪，主要用于相同級別的多個組件需要在不同屏幕尺寸設(shè)備上自動調(diào)整列數(shù)的場景涛碑。

• 該布局中的每個子組件都用一個單獨(dú)的“盒子”裝起來，子組件設(shè)置的布局參數(shù)都是以盒子作為父布局生效孵淘，不以整個自適應(yīng)布局為生效范圍蒲障。
• 該布局中每個盒子的寬度固定為布局總寬度除以自適應(yīng)得到的列數(shù)，高度為match_content瘫证，每一行中的所有盒子按高度最高的進(jìn)行對齊揉阎。
• 該布局水平方向是自動分塊，因此水平方向不支持match_content背捌，布局水平寬度僅支持match_parent或固定寬度毙籽。
• 自適應(yīng)僅在水平方向進(jìn)行了自動分塊，縱向沒有做限制载萌，因此如果某個子組件的高設(shè)置為match_parent類型惧财，可能導(dǎo)致后續(xù)行無法顯示。

AdaptiveBoxLayout常用方法列表

Java關(guān)鍵代碼：

AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);

findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {
    // 添加規(guī)則
    adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);
    // 更新布局
    adaptiveBoxLayout.postLayout();
}));

findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {
    // 移除規(guī)則
    adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);
    // 更新布局
    adaptiveBoxLayout.postLayout();
}));