HarmonyOS Java UI之DirectionalLayout佈局

HarmonyOS技術社群發表於2020-11-16
JavaUI

在之前的章節中我使用的是Java 程式碼構建UI介面，從本節開始，將使用XML構建UI介面。

使用XML構建UI（預設你已經會在專案中建立XML佈局檔案）介面相對Java程式碼構建的好處是：結構清晰，程式碼簡潔。

DirectionalLayout（單一方向排列布局）是Java UI的一種重要的元件佈局，用於將一組元件按照水平或垂直方向排布，能夠方便地對齊佈局內的元件。與Android中的線性佈局相似。可以通過設定orientation屬性來控制元件的排列方式，預設為垂直排列。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                   ohos:width="match_parent"
                   ohos:height="match_parent"
                   ohos:background_element="#FFCCCCCC"
                   ohos:orientation="vertical">
    <Text
        ohos:id="$+id:txtOne"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:padding="20vp"
        ohos:margin="20vp"
        ohos:text_size="30vp"
        ohos:text_color="#FFFFFFFF"
        ohos:background_element="#FFFF00FF"
        ohos:text="我是第一個"/>

    <Text
        ohos:id="$+id:txtTwo"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:padding="20vp"
        ohos:margin="20vp"
        ohos:text_size="30vp"
        ohos:text_color="#FFFFFFFF"
        ohos:background_element="#FFFF00FF"
        ohos:text="我是第二個"/>

    <Text
        ohos:id="$+id:txtThird"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:padding="20vp"
        ohos:margin="20vp"
        ohos:text_size="30vp"
        ohos:text_color="#FFFFFFFF"
        ohos:background_element="#FFFF00FF"
        ohos:text="我是第三個"/>

</DirectionalLayout>

將上面程式碼中的ohos:orientation="vertical"換成ohos:orientation="horizontal" 然後執行檢視效果如下所示。

DirectionalLayout佈局中的元件不會自動換行，會按照設定的方向依次排列，若超出佈局本身大小，超出佈局大小的部分將不會顯示。我們將上面示例程式碼中的Text元件寬度設定為400vp，然後執行效果如下所示，我們可以看到，第三個Text元件顯示了一部分。

DirectionalLayout中的元件使用layout_alignment控制自身在佈局中的對齊方式，當對齊方式與排列方式一致時，對齊方式不會生效，如佈局為水平方法排列，則其下元件左對齊、右對齊將不會生效。因為佈局中可以巢狀佈局來豐富UI樣式，我們可以使用這個方式來演示一下對齊樣式

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                   ohos:width="match_parent"
                   ohos:height="match_parent"
                   ohos:orientation="vertical">
    <DirectionalLayout
            ohos:width="match_parent"
            ohos:height="0vp"
            ohos:weight="2"
            ohos:margin="10vp"
            ohos:background_element="#FFDDDDDD"
            ohos:orientation="vertical">
        <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:padding="10vp"
                ohos:margin="10vp"
                ohos:text_size="20vp"
                ohos:text_color="#FFFFFFFF"
                ohos:layout_alignment="left"
                ohos:background_element="#FFFF00FF"
                ohos:text="左對齊"/>

        <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:padding="10vp"
                ohos:margin="10vp"
                ohos:text_size="20vp"
                ohos:text_color="#FFFFFFFF"
                ohos:layout_alignment="horizontal_center"
                ohos:background_element="#FFFF00FF"
                ohos:text="水平方向居中"/>

        <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:padding="10vp"
                ohos:margin="10vp"
                ohos:text_size="20vp"
                ohos:text_color="#FFFFFFFF"
                ohos:layout_alignment="right"
                ohos:background_element="#FFFF00FF"
                ohos:text="右對齊"/>
        <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:padding="10vp"
                ohos:margin="10vp"
                ohos:text_size="20vp"
                ohos:text_color="#FFFFFFFF"
                ohos:layout_alignment="center"
                ohos:background_element="#FFFF00FF"
                ohos:text="垂直與水平方向都居中"/>
    </DirectionalLayout>
    <DirectionalLayout
            ohos:width="match_parent"
            ohos:height="0vp"
            ohos:margin="10vp"
            ohos:weight="1"
            ohos:background_element="#FFCCCCCC"
            ohos:orientation="horizontal">
        <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:padding="10vp"
                ohos:margin="10vp"
                ohos:text_size="20vp"
                ohos:text_color="#FFFFFFFF"
                ohos:layout_alignment="top"
                ohos:background_element="#FFFF00FF"
                ohos:text="頂部對齊"/>

        <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:padding="10vp"
                ohos:margin="10vp"
                ohos:text_size="20vp"
                ohos:text_color="#FFFFFFFF"
                ohos:layout_alignment="vertical_center"
                ohos:background_element="#FFFF00FF"
                ohos:text="垂直方向居中"/>

        <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:padding="10vp"
                ohos:margin="10vp"
                ohos:text_size="20vp"
                ohos:text_color="#FFFFFFFF"
                ohos:layout_alignment="bottom"
                ohos:background_element="#FFFF00FF"
                ohos:text="底部對齊"/>
        <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:padding="10vp"
                ohos:margin="10vp"
                ohos:text_size="20vp"
                ohos:text_color="#FFFFFFFF"
                ohos:layout_alignment="center"
                ohos:background_element="#FFFF00FF"
                ohos:text="垂直與水平方向都居中"/>
    </DirectionalLayout>
</DirectionalLayout>

在上面程式碼中我們看到兩個DirectionalLayout子佈局中有ohos:weight="1"屬性，這個屬性就是設定元件在佈局中的權重，按照比例來分配元件佔用父元件的大小。

DirectionalLayout佈局需要掌握的知識點也就這麼多，接下來再說說題外話。

設定UI顯示介面問題

我們使用XML方式構建UI，在AbilitySlice中設定介面入口的時候，一般會報錯，找不到佈局檔案。官方推薦使用Build -> Build App(s)/Hap(s) > Build Debug Hap(s)重新編譯一次即可。

下載原文資源包

作者：IT明
想了解更多內容，請訪問：
51CTO和華為官方戰略合作共建的鴻蒙技術社群
https://harmonyos.51cto.com#bky

相關文章