Can multiple directional layouts be created?

Question

Using DevEco Studio can one directional layout be created in another directional layout ? If Yes how can we do that ?

Answer 1

You could create multiple DirectionalLayouts in the XML layout file of the resource-layout for parallel or nesting.

Could refer to the following code:

<DirectionalLayout
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:orientation="horizontal">

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal">
    </DirectionalLayout>
    
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal">
    </DirectionalLayout>

</DirectionalLayout>

Answer 2

Yes , we can create Child DirectionalLayout inside parent DirectionalLayout, sample Usage

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:alignment="center"
    ohos:total_weight="4">

    <DirectionalLayout
        ohos:weight="1"
        ohos:id="$+id:firstChild"
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:margin="5vp"
        ohos:total_weight="3"
        ohos:background_element="$color:material_light_brown">
        <DependentLayout
            ohos:weight="1"
            ohos:height="match_parent"
            ohos:width="0vp"
            ohos:margin="5vp"
            ohos:background_element="$color:material_brown"/>

        <DependentLayout
            ohos:weight="1"
            ohos:height="match_parent"
            ohos:width="0vp"
            ohos:margin="5vp"
            ohos:background_element="$color:material_brown"/>

        <DependentLayout
            ohos:weight="1"
            ohos:height="match_parent"
            ohos:width="0vp"
            ohos:margin="5vp"
            ohos:background_element="$color:material_brown"/>


    </DirectionalLayout>

    <DependentLayout
        ohos:weight="1"
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:margin="5vp"
        ohos:background_element="$color:material_brown"/>

    <DependentLayout
        ohos:weight="1"
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:margin="5vp"
        ohos:background_element="$color:material_brown"/>

    <DependentLayout
        ohos:weight="1"
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:margin="5vp"
        ohos:background_element="$color:material_brown"/>



</DirectionalLayout>