Desarrollo de HarmonyOS Learning Road—Java UI Framework (DirectionalLayout)

Diseño direccional

 

DirectionalLayout es un diseño de componente importante en la interfaz de usuario de Java, que se utiliza para organizar un grupo de componentes (Componente) en dirección horizontal o vertical, y puede alinear fácilmente los componentes en el diseño. La combinación de este diseño y otros diseños puede realizar métodos de diseño más ricos.

                                                            Diagrama de diseño direccional

Atributos XML admitidos

Los atributos XML comunes de DirectionalLayout se heredan de: Componente

Los atributos XML propios de DirectionalLayout se muestran en la siguiente tabla:

Nombre del Atributo	descripción china	valor	Descripción del valor	Casos de uso
alineación	alineación	izquierda	Indica alineación a la izquierda.	Puede establecer los elementos de valor como se indica en la tabla, También puede usar "|" para combinaciones múltiples. ohos:alineación ="arriba|izquierda" ohos:alineación ="izquierda"
		arriba	Indica la alineación superior.
		bien	Indica la alineación correcta
		abajo	Indica alineación inferior.
		centro_horizontal	Indica alineación central horizontal.
		centro_vertical	Indica alineación central vertical.
		centro	Indica alineación central.
		comenzar	Indica alineación por el inicio.
		fin	Indica alineación al final.
orientación	Dirección de disposición del diseño secundario	horizontal	Indica un diseño horizontal.	ohos: orientación ="horizontal"
		vertical	Indica un diseño vertical.	ohos: orientación = "verticales"
peso total	La suma de los pesos de todas las subvistas	tipo flotante	Puede establecer directamente el valor de punto flotante o puede hacer referencia al recurso de punto flotante flotante.	ohos:peso_total ="2.5" ohos:peso_total t="$flotante:peso_total"

Los atributos XML soportados por los componentes contenidos en DirectionalLayout se muestran en la siguiente tabla:

Nombre del Atributo	descripción china	valor	Descripción del valor	Casos de uso
disposición_alineación	alineación	izquierda	Indica alineación a la izquierda.	Puede establecer los elementos de valor como se indica en la tabla o usar "|" para hacer varias combinaciones. ohos:layout_alignment ="superior" ohos:layout_alignmen t="arriba|izquierda"
		arriba	Indica la alineación superior.
		bien	Indica la alineación correcta
		abajo	Indica alineación inferior.
		centro_horizontal	Indica alineación central horizontal.
		centro_vertical	Indica alineación central vertical.
		centro	Indica alineación central.
peso	proporción	tipo flotante	Puede establecer directamente el valor de punto flotante o puede hacer referencia al recurso de punto flotante flotante.	ohos: peso ="1" ohos: peso ="$flotante:peso"

Acuerdo

La orientación de DirectionalLayout se divide en horizontal o vertical. Utilice la orientación para establecer la disposición de los componentes en el diseño, y el valor predeterminado es la disposición vertical.

disposición vertical

Organice tres botones verticalmente, el efecto es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="vertical">
    <Button
        ohos:width="33vp"
        ohos:height="20vp"
        ohos:bottom_margin="3vp"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="33vp"
        ohos:height="20vp"
        ohos:bottom_margin="3vp"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="33vp"
        ohos:height="20vp"
        ohos:bottom_margin="3vp"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cian_elemento.xml：

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

disposición horizontal

 El componente secundario no excede el tamaño del diseño en sí. 

Organice tres botones horizontalmente, el efecto es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="horizontal">
    <Button
        ohos:width="33vp"
        ohos:height="20vp"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="33vp"
        ohos:height="20vp"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="33vp"
        ohos:height="20vp"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cian_elemento.xml：

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

• El componente secundario excede el tamaño del diseño en sí

DirectionalLayout no se ajustará automáticamente, y sus subcomponentes se organizarán en secuencia de acuerdo con la dirección establecida. Si excede el tamaño del diseño en sí, la parte que excede el tamaño del diseño no se mostrará.

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="20vp"
    ohos:orientation="horizontal">
    <Button
        ohos:width="166vp"
        ohos:height="match_content"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="166vp"
        ohos:height="match_content"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="166vp"
        ohos:height="match_content"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

 color_cian_elemento.xml：

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

Este diseño contiene tres botones, pero dado que DirectionalLayout no se ajusta automáticamente, la parte del componente que excede el tamaño del diseño no se puede mostrar. La interfaz se muestra de la siguiente manera:

alineación

 Los componentes en DirectionalLayout usan layout_alignment para controlar su propia alineación en el diseño. El método de alineación está estrechamente relacionado con el método de disposición. Cuando el método de disposición es horizontal, el método de alineación opcional solo funciona en la dirección vertical (superior, inferior, centro_vertical, centro). Otros métodos de alineación no tendrán efecto. Cuando la disposición es vertical, la alineación opcional solo se aplica al tipo horizontal (izquierda, derecha, inicio, final, centro_horizontal, centro), otras alineaciones no tendrán efecto.

Ejemplo de código para tres alineaciones:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="60vp">
    <Button
        ohos:width="50vp"
        ohos:height="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:layout_alignment="left"
        ohos:text="Button 1"/>
    <Button
        ohos:width="50vp"
        ohos:height="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Button 2"/>
    <Button
        ohos:width="50vp"
        ohos:height="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:layout_alignment="right"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cian_elemento.xml：

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

Ejemplo de tres efectos de alineación

 Pesos

El peso (peso) es para asignar el tamaño del componente padre proporcionalmente al componente. La fórmula de cálculo en el diseño horizontal es:

Ancho asignable del diseño principal = ancho del diseño principal - suma del ancho de todos los componentes secundarios;

Ancho del componente = peso del componente / suma de todos los pesos de los componentes * el diseño principal puede asignar ancho;

En el uso real, se recomienda usar width=0 para distribuir proporcionalmente el ancho del diseño principal. El efecto de 1:1:1 es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="horizontal">
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:background_element="$graphic:color_gray_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

 color_cian_elemento.xml：

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

elemento_color_gris.xml：

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

Ejemplo de escenario

 Ejemplo de código fuente:

<?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:background_element="#FFFFFFFF">

    <DirectionalLayout
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ohos:background_element="#FF9F9F9F"
        ohos:top_margin="10vp">

        <Button
            ohos:height="20vp"
            ohos:width="33vp"
            ohos:background_element="#FF00FFFD"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:text="Button 1"/>

        <Button
            ohos:height="20vp"
            ohos:width="33vp"
            ohos:background_element="#FF00FFFD"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:text="Button 2"/>

        <Button
            ohos:height="20vp"
            ohos:width="33vp"
            ohos:background_element="#FF00FFFD"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:text="Button 3"/>
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:background_element="#FF9F9F9F"
        ohos:top_margin="10vp"
        >

        <Button
            ohos:height="20vp"
            ohos:width="33vp"
            ohos:background_element="#FF00FFFD"
            ohos:left_margin="13vp"
            ohos:text="Button 1"/>

        <Button
            ohos:height="20vp"
            ohos:width="33vp"
            ohos:background_element="#FF00FFFD"
            ohos:left_margin="13vp"
            ohos:text="Button 2"/>

        <Button
            ohos:height="20vp"
            ohos:width="33vp"
            ohos:background_element="#FF00FFFD"
            ohos:left_margin="13vp"
            ohos:text="Button 3"/>
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:background_element="#FF9F9F9F"
        ohos:top_margin="10vp"
        >

        <Button
            ohos:height="match_content"
            ohos:width="166vp"
            ohos:background_element="#FF00FFFD"
            ohos:left_margin="13vp"
            ohos:text="Button 1"/>

        <Button
            ohos:height="match_content"
            ohos:width="166vp"
            ohos:background_element="#FF00FFFD"
            ohos:left_margin="13vp"
            ohos:text="Button 2"/>

        <Button
            ohos:height="match_content"
            ohos:width="166vp"
            ohos:background_element="#FF00FFFD"
            ohos:left_margin="13vp"
            ohos:text="Button 3"/>
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:background_element="#FF9F9F9F"
        ohos:top_margin="10vp"
        >

        <Button
            ohos:height="20vp"
            ohos:width="50vp"
            ohos:background_element="#FF00FFFD"
            ohos:layout_alignment="left"
            ohos:text="Button 1"/>

        <Button
            ohos:height="20vp"
            ohos:width="50vp"
            ohos:background_element="#FF00FFFD"
            ohos:layout_alignment="horizontal_center"
            ohos:text="Button 2"/>

        <Button
            ohos:height="20vp"
            ohos:width="50vp"
            ohos:background_element="#FF00FFFD"
            ohos:layout_alignment="right"
            ohos:text="Button 3"/>
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:background_element="#FF9F9F9F"
        ohos:top_margin="10vp"
        >

        <Button
            ohos:height="20vp"
            ohos:width="0vp"
            ohos:background_element="#FF00FFFD"
            ohos:text="Button 1"
            ohos:weight="1"/>

        <Button
            ohos:height="20vp"
            ohos:width="0vp"
            ohos:background_element="#FFFF8A8A"
            ohos:text="Button 2"
            ohos:weight="1"/>

        <Button
            ohos:height="20vp"
            ohos:width="0vp"
            ohos:background_element="#FF00FFFD"
            ohos:text="Button 3"
            ohos:weight="1"/>
    </DirectionalLayout>
</DirectionalLayout>