鸿蒙Java开发模式6：鸿蒙牛年除夕夜TableLayout宫格拜年构建 原创

1.今天是牛年除夕夜，祝福大家新年快乐，祝福鸿蒙，祝福51CTO越办越好！通过TableLayout布局管理器构建宫格春节祝福语，效果图如下:

2.布局文件如下:

<?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:background_element="snow"
    ohos:row_count="3"
    ohos:column_count="2"
    ohos:layout_alignment="center"
    ohos:alignment_type="align_contents"
    ohos:padding="8vp">
    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="130vp"
        ohos:width="130vp"
        ohos:margin="20vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:orientation="vertical">

        <Image
            ohos:id="$+id:image"
            ohos:width="300px"
            ohos:height="300px"
            ohos:layout_alignment="center"
            ohos:scale_mode="zoom_center"
            ohos:scale_x="0.8"
            ohos:scale_y="0.8"
            ohos:bottom_margin="3vp"
            ohos:image_src="$media:c1"/>

        <Text
            ohos:id="$+id:text0"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="祝愿"
            ohos:text_size="18fp"
            ohos:text_color="black"
            ohos:layout_alignment="horizontal_center"
            ohos:text_alignment="horizontal_center|bottom"
            />

    </DirectionalLayout>

    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="130vp"
        ohos:width="130vp"
        ohos:margin="20vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:orientation="vertical">

        <Image
            ohos:id="$+id:image1"
            ohos:width="300px"
            ohos:height="300px"
            ohos:layout_alignment="center"
            ohos:scale_mode="zoom_center"
            ohos:scale_x="0.8"
            ohos:scale_y="0.8"
            ohos:bottom_margin="3vp"
            ohos:image_src="$media:c2"/>
        <Text
            ohos:id="$+id:text1"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="大家"
            ohos:text_size="18fp"
            ohos:layout_alignment="horizontal_center"
            ohos:text_alignment="horizontal_center|bottom"
            ohos:text_color="black"

            />

    </DirectionalLayout>



    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="130vp"
        ohos:width="130vp"
        ohos:margin="20vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:orientation="vertical">

        <Image
            ohos:id="$+id:image2"
            ohos:width="300px"
            ohos:height="300px"
            ohos:layout_alignment="center"
            ohos:scale_mode="zoom_center"
            ohos:scale_x="0.8"
            ohos:scale_y="0.8"
            ohos:bottom_margin="3vp"
            ohos:image_src="$media:c3"/>

        <Text
            ohos:id="$+id:text2"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="新年"
            ohos:text_size="18fp"
            ohos:text_color="black"
            ohos:layout_alignment="horizontal_center"
            ohos:text_alignment="horizontal_center|bottom"
            />

    </DirectionalLayout>

    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="130vp"
        ohos:width="130vp"
        ohos:margin="20vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:orientation="vertical">

        <Image
            ohos:id="$+id:image3"
            ohos:width="300px"
            ohos:height="300px"
            ohos:layout_alignment="center"
            ohos:scale_mode="zoom_center"
            ohos:scale_x="0.8"
            ohos:scale_y="0.8"
            ohos:bottom_margin="3vp"
            ohos:image_src="$media:c4"/>

        <Text
            ohos:id="$+id:text3"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="快乐"
            ohos:text_size="18fp"
            ohos:text_color="black"
            ohos:layout_alignment="horizontal_center"
            ohos:text_alignment="horizontal_center|bottom"
            />

    </DirectionalLayout>







    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="130vp"
        ohos:width="130vp"
        ohos:margin="20vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:orientation="vertical">

        <Image
            ohos:id="$+id:image4"
            ohos:width="300px"
            ohos:height="300px"
            ohos:layout_alignment="center"
            ohos:scale_mode="zoom_center"
            ohos:scale_x="0.8"
            ohos:scale_y="0.8"
            ohos:bottom_margin="3vp"
            ohos:image_src="$media:c5"/>

        <Text
            ohos:id="$+id:text4"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="多子"
            ohos:text_size="18fp"
            ohos:text_color="black"
            ohos:layout_alignment="horizontal_center"
            ohos:text_alignment="horizontal_center|bottom"
            />

    </DirectionalLayout>




    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="130vp"
        ohos:width="130vp"
        ohos:margin="20vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:orientation="vertical">

        <Image
            ohos:id="$+id:image5"
            ohos:width="300px"
            ohos:height="300px"
            ohos:layout_alignment="center"
            ohos:scale_mode="zoom_center"
            ohos:scale_x="0.8"
            ohos:scale_y="0.8"
            ohos:bottom_margin="3vp"
            ohos:image_src="$media:c6"/>

        <Text
            ohos:id="$+id:text5"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="多福"
            ohos:text_size="18fp"
            ohos:text_color="black"
            ohos:layout_alignment="horizontal_center"
            ohos:text_alignment="horizontal_center|bottom"
            />

    </DirectionalLayout>




</TableLayout>