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

发布于 2021-2-11 23:19
浏览
0收藏

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

鸿蒙Java开发模式6:鸿蒙牛年除夕夜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>

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
2
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐