布局组件

---

1 相对布局(DependentLayout)

1.1 相对于父

<DependentLayout
    ...>

    <Button
        ...
        ohos:align_parent_left="true" - 左
        ohos:align_parent_top="true"  - 上
        ...
        />

</DependentLayout>

1.2 相对兄弟

<DependentLayout
    ...>

    <Button
        ...
        ohos:left_of="$id:center"     - 左
        ohos:above="$id:center"       - 上
        ...
        />

</DependentLayout>

例程：DependentLayout

...\DependentLayout\entry\src\main\resources\base\layout\ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#000000">

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:align_parent_left="true"
        ohos:align_parent_top="true"
        ohos:background_element="#ff7f27"
        ohos:text="左上"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:center_in_parent="true"
        ohos:align_parent_top="true"
        ohos:background_element="#00a2e8"
        ohos:text="正上"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:align_parent_right="true"
        ohos:align_parent_top="true"
        ohos:background_element="#ff7f27"
        ohos:text="右上"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:align_parent_left="true"
        ohos:center_in_parent="true"
        ohos:background_element="#00a2e8"
        ohos:text="正左"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:center_in_parent="true"
        ohos:background_element="#22b14c"
        ohos:text="正中"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:align_parent_right="true"
        ohos:center_in_parent="true"
        ohos:background_element="#00a2e8"
        ohos:text="正右"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:align_parent_left="true"
        ohos:align_parent_bottom="true"
        ohos:background_element="#ff7f27"
        ohos:text="左下"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:center_in_parent="true"
        ohos:align_parent_bottom="true"
        ohos:background_element="#00a2e8"
        ohos:text="正下"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:align_parent_right="true"
        ohos:align_parent_bottom="true"
        ohos:background_element="#ff7f27"
        ohos:text="右下"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

</DependentLayout>

...\DependentLayout\entry\src\main\resources\base\layout\ability_buddy.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#000000">

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:left_of="$id:center"
        ohos:above="$id:center"
        ohos:background_element="#ff7f27"
        ohos:text="左上"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:align_left="$id:center"
        ohos:above="$id:center"
        ohos:background_element="#00a2e8"
        ohos:text="正上"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:right_of="$id:center"
        ohos:above="$id:center"
        ohos:background_element="#ff7f27"
        ohos:text="右上"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:left_of="$id:center"
        ohos:align_top="$id:center"
        ohos:background_element="#00a2e8"
        ohos:text="正左"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:id="$+id:center"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:center_in_parent="true"
        ohos:background_element="#22b14c"
        ohos:text="正中"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:right_of="$id:center"
        ohos:align_top="$id:center"
        ohos:background_element="#00a2e8"
        ohos:text="正右"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:left_of="$id:center"
        ohos:below="$id:center"
        ohos:background_element="#ff7f27"
        ohos:text="左下"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:align_left="$id:center"
        ohos:below="$id:center"
        ohos:background_element="#00a2e8"
        ohos:text="正下"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:right_of="$id:center"
        ohos:below="$id:center"
        ohos:background_element="#ff7f27"
        ohos:text="右下"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

</DependentLayout>

...\DependentLayout\entry\src\main\java\com\minwei\dependentlayout\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
    }
    ...
}

或

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_buddy);
    }
    ...
}

运行效果如下图所示：

2 表格布局(TableLayout)

<TableLayout
    ...
    ohos:row_count="3"
    ohos:column_count="3"
    ...>

    ...

</TableLayout>

例程：TableLayout

...\TableLayout\entry\src\main\resources\base\layout\ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:row_count="3"
    ohos:column_count="3"
    ohos:background_element="#000000">

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#ff7f27"
        ohos:text="左上"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#00a2e8"
        ohos:text="正上"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#ff7f27"
        ohos:text="右上"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#00a2e8"
        ohos:text="正左"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#22b14c"
        ohos:text="正中"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#00a2e8"
        ohos:text="正右"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#ff7f27"
        ohos:text="左下"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#00a2e8"
        ohos:text="正下"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#ff7f27"
        ohos:text="右下"
        ohos:text_size="30fp"
        ohos:text_color="#ffffff"
        />

</TableLayout>

运行效果如下图所示：

3 栈布局(StackLayout)

<StackLayout
    ...>

    ...

</StackLayout>

例程：StackLayout

...\StackLayout\entry\src\main\resources\base\layout\ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<StackLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#000000">

    <Button
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:margin="30vp"
        ohos:background_element="#00a2e8"
        />

    <Button
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:margin="60vp"
        ohos:background_element="#ff7f27"
        />

    <Button
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:margin="90vp"
        ohos:background_element="#22b14c"
        />

</StackLayout>

运行效果如下图所示：

4 自适应布局(AdaptiveBoxLayout)

鸿蒙操作系统特有的布局。一套布局自动适配在不同设备上显示界面。

-------------------------
手表  手机   平板    电视
-------------------------
| 1|  |12|  |123|  |1234|
| 2|  |34|  |4  |  |    |
| 3|  |  |  |   |  |    |
| 4|  |  |  |   |  |    |
-------------------------

<AdaptiveBoxLayout
    ...
    ohos:id="$+id:abl"
    ...>

    <Text
        ...
        ohos:width="match_parent" - 宽度由布局决定
        ...
        />

    ...

</AdaptiveBoxLayout>

AdaptiveBoxLayout adaptiveBoxLayout =
    (AdaptiveBoxLayout) findComponentById(ResourceTable.Id_abl);
// 清除规则
adaptiveBoxLayout.clearAdaptiveRules();
// 添加规则，当屏幕宽度介于0~2000像素时，每行显示1列
adaptiveBoxLayout.addAdaptiveRule(0, 2000, 1);
// 添加规则，当屏幕宽度为2000像素以上时，每行显示5列
adaptiveBoxLayout.addAdaptiveRule(2000, Integer.MAX_VALUE, 5);

例程：AdaptiveBoxLayout

...\AdaptiveBoxLayout\entry\src\main\resources\base\layout\ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<AdaptiveBoxLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:abl"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#000000">

    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#00a2e8"
        ohos:text="1"
        ohos:text_size="26fp"
        ohos:text_color="#ffffff"
        ohos:text_alignment="horizontal_center"
        />

    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#22b14c"
        ohos:text="2"
        ohos:text_size="26fp"
        ohos:text_color="#ffffff"
        ohos:text_alignment="horizontal_center"
        />

    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#ffc90e"
        ohos:text="3"
        ohos:text_size="26fp"
        ohos:text_color="#ffffff"
        ohos:text_alignment="horizontal_center"
        />

    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#ff7f27"
        ohos:text="4"
        ohos:text_size="26fp"
        ohos:text_color="#ffffff"
        ohos:text_alignment="horizontal_center"
        />

    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:padding="$ohos:float:button_radius"
        ohos:background_element="#ff2020"
        ohos:text="5"
        ohos:text_size="26fp"
        ohos:text_color="#ffffff"
        ohos:text_alignment="horizontal_center"
        />

</AdaptiveBoxLayout>

...\AdaptiveBoxLayout\entry\src\main\java\com\minwei\adaptiveboxlayout\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        ...
        AdaptiveBoxLayout adaptiveBoxLayout =
            (AdaptiveBoxLayout) findComponentById(ResourceTable.Id_abl);
        adaptiveBoxLayout.clearAdaptiveRules();
        adaptiveBoxLayout.addAdaptiveRule(0, 2000, 1);
        adaptiveBoxLayout.addAdaptiveRule(2000, Integer.MAX_VALUE, 5);
    }
    ...
}

运行效果如下图所示：

5 位置布局(PositionLayout)

以像素坐标的形式定位布局中的组件。

<PositionLayout
    ...>

    <Text
        ohos:id="$+id:txt
        ...
        />

    ...

</PositionLayout>

Text txt = (Text)findComponentById(ResourceTable.Id_txt);
txt.setContentPosition(100, 200);

原点位于窗口左上角，水平轴向右为正，垂直轴向下为正。

例程：PositionLayout

...\PositionLayout\entry\src\main\config.json

{
  ...
  "module": {
    ...
    "abilities": [
      {
        ...
        "configChanges": [
          "orientation"
        ]
      }
    ]
  }
}

...\PositionLayout\entry\src\main\resources\base\graphic\background_text_box.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners ohos:radius="50"/>
    <solid ohos:color="#000000"/>
    <stroke ohos:width="2vp" ohos:color="#ff7f27"/>
</shape>

...\PositionLayout\entry\src\main\resources\base\graphic\background_text_ball.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="oval">
    <solid ohos:color="#ff7f27"/>
</shape>

...\PositionLayout\entry\src\main\resources\base\layout\ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<PositionLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#00a2e8">

    <Text
        ohos:id="$+id:txtBox"
        ohos:height="665vp"
        ohos:width="327vp"
        ohos:background_element="$graphic:background_text_box"
        />

    <Text
        ohos:id="$+id:txtBall"
        ohos:height="40vp"
        ohos:width="40vp"
        ohos:background_element="$graphic:background_text_ball"
        />

</PositionLayout>

...\PositionLayout\entry\src\main\java\com\minwei\positionlayout\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    private Text txtBox, txtBall;

    private MoveBall moveBall;

    @Override
    public void onStart(Intent intent) {
        ...
        txtBox = (Text)findComponentById(ResourceTable.Id_txtBox);
        txtBall = (Text)findComponentById(ResourceTable.Id_txtBall);

        int l = 50, t = 50;
        txtBox.setContentPosition(l, t);
        int r = l + txtBox.getWidth();
        int b = t + txtBox.getHeight();

        int d = txtBall.getWidth();
        int x = l + (r - l) / 2 - d / 2;
        int y = t + (b - t) / 2 - d / 2;
        txtBall.setContentPosition(x, y);

        new Timer().schedule(moveBall = new MoveBall(
            this, txtBall, l, t, r, b, d, x, y), 0, 1);
    }
    ...
    @Override
    protected void onOrientationChanged(
        DisplayOrientation displayOrientation) {
        super.onOrientationChanged(displayOrientation);

        if (displayOrientation == DisplayOrientation.LANDSCAPE) {
            txtBox.setWidth(AttrHelper.vp2px(721, this));
            txtBox.setHeight(AttrHelper.vp2px(233, this));
        }
        else {
            txtBox.setWidth(AttrHelper.vp2px(327, this));
            txtBox.setHeight(AttrHelper.vp2px(665, this));
        }

        int l = (int)txtBox.getContentPositionX();
        int t = (int)txtBox.getContentPositionY();
        int r = l + txtBox.getWidth();
        int b = t + txtBox.getHeight();
        moveBall.update(r, b);
    }
}

class MoveBall extends TimerTask {
    private AbilitySlice context;
    private Component ball;
    private int l, t, r, b, d, x, y;

    private int dx, dy;

    public MoveBall(AbilitySlice context, Component ball,
        int l, int t, int r, int b, int d, int x, int y) {
        this.context = context;
        this.ball = ball;
        this.l = l;
        this.t = t;
        this.r = r;
        this.b = b;
        this.d = d;
        this.x = x;
        this.y = y;

        dx = dy = d / 100;
    }

    public void update(int r, int b) {
        this.r = r;
        this.b = b;
    }

    @Override
    public void run() {
        if (x + dx <= l) {
            x = l;
            dx = -dx;
        }
        else if (x + dx >= r - d) {
            x = r - d;
            dx = -dx;
        }
        else
            x += dx;

        if (y + dy <= t) {
            y = t;
            dy = -dy;
        }
        else if (y + dy >= b - d) {
            y = b - d;
            dy = -dy;
        }
        else
            y += dy;

        context.getUITaskDispatcher()
            .asyncDispatch(new PlaceBall(ball, x, y));
    }
}

class PlaceBall implements Runnable {
    private Component ball;
    private int x, y;

    public PlaceBall(Component ball, int x, int y) {
        this.ball = ball;
        this.x = x;
        this.y = y;
    }

    @Override
    public void run() {
        ball.setContentPosition(x, y);
    }
}

运行效果如下图所示：

更多精彩，敬请期待……

---