鸿蒙应用：多设备闹钟开发教程(5)

最新推荐文章于 2024-08-10 09:21:35 发布

sd2131512

最新推荐文章于 2024-08-10 09:21:35 发布

阅读量708

点赞数

分类专栏：鸿蒙文章标签：鸿蒙 HarmonyOs

本文链接：https://blog.csdn.net/sd2131512/article/details/117572314

版权

鸿蒙专栏收录该内容

21 篇文章 2 订阅

订阅专栏

删除闹钟页面

本节我们将开发删除闹钟页面。这个页面由主列表页面长按闹钟列表某个闹钟后跳转进入，支持单个选择和全选，点击删除后删除选中的闹钟。

1.增加删除闹钟的Slice,实现删除闹钟特性

1.1 在entry>src>main>resources>base>element>string.json中添加新的文字资源。

  {
      "name": "selectClock",
      "value": "选择闹钟"
    },
    {
      "name": "allSelect",
      "value": "全选"
    }

1.2 在entry>src>main>config.json里添加AddClockAbilitySlice的action信息。

  "actions": [
              "action.system.home",
              "action.clock.addclock",
              "action.clock.editclock",
              "action.clock.deleteclock"
            ]

1.3 在MainAbility里添加AddClockAbilitySlice的路由。

    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(MainAbilitySlice.class.getName());

        addActionRoute("action.clock.addclock", AddClockAbilitySlice.class.getName());
        addActionRoute("action.clock.editclock", EditClockAbilitySlice.class.getName());
        addActionRoute("action.clock.deleteclock", DeleteClockAbilitySlice.class.getName());
    }

1.4 在entry>src>main>resources>base>layout目录里添加资源文件item_delete_clock.xml，用于自定义删除列表项。

item_delete_clock.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    ohos:id="$+id:item_layout"
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:item_text_time"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="4vp"
        ohos:text="Item0"
        ohos:text_size="20fp"
        ohos:layout_alignment="center"
        ohos:left_margin="20vp"/>

    <Text
        ohos:id="$+id:item_text_name"
        ohos:below="$id:item_text_time"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="4vp"
        ohos:text="Item0"
        ohos:text_size="20fp"
        ohos:layout_alignment="center"
        ohos:left_margin="20vp"/>

    <Checkbox
        ohos:id="$+id:item_checkbox"
        ohos:height="30vp"
        ohos:width="60vp"
        ohos:align_parent_right="true"
        ohos:right_margin="20vp"
        ohos:top_margin="20vp"
        ohos:check_element="$graphic:checkbox_deleteclock"
        />

    <Component
        ohos:id="$+id:item_divider"
        ohos:height="1vp"
        ohos:width="match_parent"
        ohos:background_element="$graphic:list_divider"
        ohos:below="$id:item_text_name"/>

</DependentLayout>

1.5 在entry>src>main>resources>base>graphic目录里增加资源文件checkbox_deleteclock.xml，使用2张复选框的图片，自定义复选框不同状态时的样式。

checkbox_deleteclock.xml

<?xml version="1.0" encoding="utf-8"?>
<state-container xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <item ohos:state="component_state_checked" ohos:element="$media:checkbox_check"/>
    <item ohos:state="component_state_empty" ohos:element="$media:checkbox_empty" />
</state-container>

1.6 在entry>src>main>resources>base>layout目录里添加资源文件ability_delete_clock.xml，使用DependentLayout相对布局。 ability_delete_clock.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <DependentLayout
        ohos:id="$+id:app_bar"
        ohos:height="56vp"
        ohos:width="match_parent"
        ohos:padding="10vp"
        >

        <Image
            ohos:id="$+id:image_cancel"
            ohos:height="24vp"
            ohos:width="24vp"
            ohos:left_margin="20vp"
            ohos:foreground_element="$media:cancel"
            ohos:vertical_center="true"/>

        <Text
            ohos:id="$+id:text_clockname"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:right_of="$id:image_cancel"
            ohos:background_element="$graphic:background_ability_main"
            ohos:layout_alignment="horizontal_center"
            ohos:text="$string:selectClock"
            ohos:text_size="24fp"
            ohos:vertical_center="true"
            ohos:left_margin="20vp"
            />

    </DependentLayout>

    <ListContainer
        ohos:id="$+id:list_clock_view"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:below="$id:app_bar"
        ohos:above="$id:layout_bottom"
        />

    <DirectionalLayout
        ohos:id="$+id:layout_bottom"
        ohos:height="56vp"
        ohos:width="match_parent"
        ohos:layout_alignment="horizontal_center"
        ohos:padding="8vp"
        ohos:align_parent_bottom="true"
        ohos:orientation="horizontal"
        >

        <Button
            ohos:id="$+id:button_delete"
            ohos:width="100vp"
            ohos:height="match_content"
            ohos:text_size="27fp"
            ohos:text="$string:delete"
            ohos:element_left="$media:delete"
            ohos:left_margin="50vp"
            />

        <Checkbox
            ohos:id="$+id:checkbox_selectall"
            ohos:height="30vp"
            ohos:width="100vp"
            ohos:left_margin="50vp"
            ohos:text="$string:allSelect"
            ohos:text_size="27fp"
            ohos:check_element="$graphic:checkbox_deleteclock"
            />
    </DirectionalLayout>
</DependentLayout>

1.7 新增DeleteClockItemProvider类继承BaseItemProvider，用于删除界面列表的自定义数据提供，每个数据项包含闹钟名称，闹钟时间，以及是否选择的复选框。

DeleteClockItemProvider.java

package com.madixin.clock.setting.provider;

import com.madixin.clock.setting.ResourceTable;
import com.madixin.clock.setting.model.Clock;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;


import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.LinkedList;
import java.util.List;

public class DeleteClockItemProvider extends BaseItemProvider {
    private static final String TAG = DeleteClockItemProvider.class.getName();

    private AbilitySlice slice;

    private List<Clock> dataList = new LinkedList<>();

    SimpleDateFormat sdf = new SimpleDateFormat("HH:mm");

    public DeleteClockItemProvider(AbilitySlice abilitySlice) {
        this.slice = abilitySlice;
    }

    @Override
    public int getCount() {
        return dataList.size();
    }

    @Override
    public Object getItem(int i) {
        return dataList.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public Component getComponent(int position, Component component, ComponentContainer componentContainer) {
        final Component cpt;
        ViewHolder viewHolder;
        Clock clock = dataList.get(position);

        if (component == null) {
            cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_delete_clock, null, false);
            viewHolder = new ViewHolder();
            viewHolder.textName = (Text) cpt.findComponentById(ResourceTable.Id_item_text_name);
            viewHolder.textTime = (Text) cpt.findComponentById(ResourceTable.Id_item_text_time);
            viewHolder.checkboxDelete = (Checkbox) cpt.findComponentById(ResourceTable.Id_item_checkbox);

            viewHolder.checkboxDelete.setCheckedStateChangedListener((absButton, isCheck) -> {
                clock.setEnable(isCheck);
            });

            cpt.setTag(viewHolder);
        } else {
            cpt = component;
            viewHolder = (ViewHolder) component.getTag();
        }

        viewHolder.textName.setText(clock.getName());

        Calendar calendar = Calendar.getInstance();
        calendar.set(Calendar.HOUR_OF_DAY, clock.getHour());
        calendar.set(Calendar.MINUTE, clock.getMinute());
        viewHolder.textTime.setText(sdf.format(calendar.getTime()));

        viewHolder.checkboxDelete.setChecked(clock.isEnable());

        return cpt;
    }

    public List<Clock> getDataList() {
        return dataList;
    }

    public void setDataList(List<Clock> dataList) {
        this.dataList = dataList;
    }
    class ViewHolder {
        Text textName;
        Text textTime;
        Checkbox checkboxDelete;
    }
}

1.8 新增DeleteClockAbilitySlice类，继承AbilitySlice。控件主要为自定义列表listContainer，以及两个按钮删除和全选。

DeleteClockAbilitySlice.java

package com.madixin.clock.setting.slice;

import com.madixin.clock.common.util.LogUtil;
import com.madixin.clock.setting.ResourceTable;
import com.madixin.clock.setting.manager.ClockManager;
import com.madixin.clock.setting.provider.DeleteClockItemProvider;
import ohos.aafwk.ability.AbilitySlice;
import com.madixin.clock.setting.model.Clock;

import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.CommonDialog;
import ohos.agp.window.dialog.IDialog;


import java.util.List;

public class DeleteClockAbilitySlice extends AbilitySlice {
    private static final String TAG = DeleteClockAbilitySlice.class.getName();

    private ListContainer listContainer;

    private Checkbox checkboxSelectAll;

    private DeleteClockItemProvider listViewItemProvider;

    private boolean isModify = false;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_delete_clock);
        initView();
        initListContainer();
    }

    private void initListContainer() {
        listContainer = (ListContainer) this.findComponentById(ResourceTable.Id_list_clock_view);
        listViewItemProvider = new DeleteClockItemProvider(this);

        List<Clock> clockList = getAllClocks();
        // 默认所有闹钟取消选中
        clockList.stream().forEach(clock -> {
            clock.setEnable(false);
        });

        listViewItemProvider.setDataList(clockList);
        listContainer.setItemProvider(listViewItemProvider);
    }

    private List<Clock> getAllClocks() {
        return ClockManager.getInstance(this.getApplicationContext()).getAllClocks();
    }

    private void initView() {
        Image imageCancel = (Image) findComponentById(ResourceTable.Id_image_cancel);
        imageCancel.setClickedListener(component -> {
            backToMainSlice(isModify);
        });

        checkboxSelectAll = (Checkbox) findComponentById(ResourceTable.Id_checkbox_selectall);
        checkboxSelectAll.setCheckedStateChangedListener((absButton, isCheck) -> {
            LogUtil.info(TAG,"setCheckedStateChangedListener: " + isCheck);
            List<Clock> clockList = listViewItemProvider.getDataList();
            for (Clock clock : clockList) {
                clock.setEnable(isCheck);
            }
            listViewItemProvider.notifyDataChanged();
        });

        Button btnDelete = (Button) findComponentById(ResourceTable.Id_button_delete);
        btnDelete.setClickedListener((button) -> {
            List<Clock> clockList = listViewItemProvider.getDataList();
            int selectClock = 0;
            for (Clock clock : clockList) {
                if (clock.isEnable()) {
                    selectClock++;
                }
            }
            if (selectClock > 0) {
                CommonDialog alertDialog = new CommonDialog(this);
                TextField textFieldName = new TextField(this);
                textFieldName.setText(String.format("是否删%d个闹钟?", selectClock));
                textFieldName.setTextSize(20, Text.TextSizeType.FP);
                DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig();
                layoutConfig.alignment = LayoutAlignment.CENTER;

                textFieldName.setLayoutConfig(layoutConfig);

                alertDialog.setContentCustomComponent(textFieldName);
                alertDialog.setButton(IDialog.BUTTON1, "取消", new IDialog.ClickedListener() {
                    @Override
                    public void onClick(IDialog iDialog, int i) {
                        iDialog.destroy();
                    }
                });
                alertDialog.setButton(IDialog.BUTTON3, "删除", new IDialog.ClickedListener() {
                    @Override
                    public void onClick(IDialog iDialog, int i) {
                        iDialog.destroy();
                        deleteClocks();
                        //backToMainSlice(true);

                        // 重新加载闹钟数据
                        List<Clock> clockList = getAllClocks();
                        // 默认所有闹钟取消选中
                        clockList.stream().forEach(clock -> {
                            clock.setEnable(false);
                        });
                        listViewItemProvider.setDataList(clockList);
                        listViewItemProvider.notifyDataChanged();

                        checkboxSelectAll.setChecked(false);
                    }
                });
                alertDialog.show();
            }
        });

    }

    /**
     * 删除选中闹钟
     */
    private void deleteClocks() {
        this.isModify = true;
        List<Clock> clockList = listViewItemProvider.getDataList();
        for (Clock clock : clockList) {
            if (clock.isEnable()) {
                int res = ClockManager.getInstance(this.getApplicationContext()).deleteClock(clock);
                LogUtil.info(TAG,"success delete clock:" + res);
            }
        }
    }

    /**
     * 返回闹钟首页
     *
     * @param isRefresh 是否刷新界面
     */
    private void backToMainSlice(boolean isRefresh) {
        Intent resultIntent = new Intent();
        resultIntent.setParam("isRefresh", isRefresh);
        setResult(resultIntent);
        terminate();
    }
}

2.实现从主页面长按列表某个闹钟后，跳转到删除页面

2.1 在 MainAbilitySlice的initListContainer方法中增加监听列表点击事件，把当前点击列项的itemId作为intent参数传递。

        // 长按跳转到删除界面
        listClockContainer.setItemLongClickedListener((listContainer, component, i, l) -> {
            presentForResult(new DeleteClockAbilitySlice(), new Intent(), 0);
            return true;
        });