Harmony应用开发之Button点击效果_harmony 按钮点击特效

最近一直在研究Harmony应用的开发，也在着手写一些Demo，在写的过程中难免会写到button的点击效果，网上找了一大圈，也没找到关于button点击效果的文章以及介绍，就想着用java代码监听触摸事件，代码如下：

 cameraBtn.setTouchEventListener(new Component.TouchEventListener() {
            @Override
            public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
                HiLog.error(LABEL, "zz:%{public}s", touchEvent.getAction());
                switch (touchEvent.getAction()){
                    case TouchEvent.PRIMARY_POINT_DOWN:
                        ShapeElement shapeElement=new ShapeElement(MainAbilitySlice.this,ResourceTable.Graphic_button_bg_gray);
                        cameraBtn.setBackground(shapeElement);
                        break;
                    case TouchEvent.PRIMARY_POINT_UP:
                        ShapeElement shapeElement1=new ShapeElement(MainAbilitySlice.this,ResourceTable.Graphic_button_bg_blue);
                        cameraBtn.setBackground(shapeElement1);
                        break;
                }
 
                return true;
            }
        });

思来想去觉得这样比较繁琐，应该是可以用xml实现的，经过一番对官方文档的查找，最终找到了checkBox的选中效果，最后经过查阅api文档终于找到了。xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<state-container
    xmlns:ohos="http://schemas.huawei.com/res/ohos">
 
    <item
        ohos:element="$graphic:button_bg_gray"
        ohos:state="component_state_pressed"/>
 
    <item
        ohos:element="$graphic:button_bg_blue"
        ohos:state="component_state_empty"/>
</state-container>

button_bg_gray.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="100"/>
    <solid
        ohos:color="$color:dialog_btn_gray_color"/>
</shape>

button_bg_blue.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="100"/>
    <solid
        ohos:color="$color:button_blue_color"/>
</shape>

最终的使用：

 <Button
            ohos:id="$+id:confirm_btn"
            ohos:height="50vp"
            ohos:width="0vp"
            ohos:background_element="$graphic:button_click"
            ohos:text="确定"
            ohos:text_color="#1766fb"
            ohos:text_size="16vp"
            ohos:weight="1"
            ohos:right_margin="5vp"
            />

至此Harmony button的点击效果已实现。

HarmonyOS应用demo