当前位置:   article > 正文

鸿蒙初学 在代码中动态改变Image的背景色(Harmony Beginner: Change Image‘s background element by using code)_鸿蒙开发 怎么对资源图片 变成黑色

鸿蒙开发 怎么对资源图片 变成黑色

需求: 默认的标题栏显示, 图片的背景图为白色, 点击图片, 将其背景色改为黑色, 同时隐藏标题栏, 再次时显示标题栏, 背景色改为白色.

参考资源: HarmonyOs Text 设置背景颜色和文本颜色

效果如下:
在这里插入图片描述
参见: 隐藏TitleBar的方式

实现过程

首先, 创建布局文件

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent">
    <!--进入时的背景色为白色, 标题栏可见, 点击之后隐藏标题栏-->
    <DirectionalLayout
        ohos:id="$+id:tool_bar_dl"
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:visibility="visible">

        <Button
            ohos:id="$+id:back_btn"
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:background_element="$graphic:circle_button_element"
            ohos:bottom_margin="15vp"
            ohos:left_margin="15vp"
            ohos:left_padding="15vp"
            ohos:right_padding="15vp"
            ohos:text="B"
            ohos:text_size="15fp"/>

        <DirectionalLayout
            ohos:height="match_parent"
            ohos:width="300vp"
            ohos:left_margin="10vp"
            ohos:orientation="vertical">

            <Text
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:text="2021年8月6日"
                ohos:text_size="20fp"/>

            <Text
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:text="南京市雨花台区"
                ohos:text_size="12fp"/>
        </DirectionalLayout>
    </DirectionalLayout>

    <Image
        ohos:id="$+id:detail_image"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="$graphic:white_background_rectangle"
        ohos:image_src="$media:icon"
        ohos:scale_mode="zoom_center"/>
</DirectionalLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

效果图如下:
布局文件效果图

其次, 在base/graphic创建白色矩形黑色矩形的Shape

ps:不知道该怎么直接设置背景色, 所以采用这种方式…

black_background_rectangle.xml

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

    <solid ohos:color="$color:black"/>
</shape>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

white_background_rectangle.xml

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

    <solid ohos:color="$color:white"/>
</shape>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

最后, 在Java代码中控制标题栏的显示和隐藏

关键代码如下:

@Override
public void onClick(Component component) {
    HiLog.error(LABEL_LOG, "onClick", "");
    if (mToolBarDirectionLayout.getVisibility() == Component.HIDE) {
        HiLog.error(LABEL_LOG, "Component.HIDE", "");
        mToolBarDirectionLayout.setVisibility(Component.VISIBLE);
        ShapeElement element = new ShapeElement(getContext(),
                ResourceTable.Graphic_white_background_rectangle);
        mDetailImage.setBackground(element);
    } else {
        HiLog.error(LABEL_LOG, "Component.VISIBLE", "");
        mToolBarDirectionLayout.setVisibility(Component.HIDE);
        ShapeElement element = new ShapeElement(getContext(),
                ResourceTable.Graphic_black_background_rectangle);
        mDetailImage.setBackground(element);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

结束: peace!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/228835
推荐阅读
相关标签
  

闽ICP备14008679号