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

编辑闹钟页面

本节我们将开发编辑闹钟页面。这个页面由主列表页面点击闹钟列表某个闹钟后跳转进入，可选择时间，铃声，时长和输入名称，最后保存返回主列表页面。整个页面跟创建页面的布局文件ability_add_clock.xml类似，差异点在于标题需要为修改闹钟，以及增加删除按钮。

 

1.增加修改闹钟的Slice,实现修改闹钟特性

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

    {
      "name": "editClock",
      "value": "修改闹钟"
    },
    {
      "name": "deleteClock",
      "value": "删除闹钟"
    },
    {
      "name": "suretodelete",
      "value": "是否删除?"
    },
    {
      "name": "delete",
      "value": "删除"
    }

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

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

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());
    }

1.4 完善ClockManager类，添加必要方法，暂时不实现数据库存储功能。

ClockManager.java

import com.madixin.clock.setting.model.Clock;
import ohos.app.Context;
​
import java.util.LinkedList;
import java.util.List;
import java.util.Optional;
​
public class ClockManager {
    private static final String TAG = ClockManager.class.getName();
​
    private static ClockManager instance;
​
    private Context context;
​
    private ClockManager(Context context) {
        this.context = context;
    }
​
    private List<Clock> clockList = new LinkedList<>();
​
    public static ClockManager getInstance(Context context) {
        if (instance == null) {
            instance = new ClockManager(context);
        }
        return instance;
    }
​
    public void createNewClock(Clock clock) {
        clockList.add(clock);
    }
​
    public List<Clock> getAllClocks() {
        return clockList;
    }
​
    /**
     * 返回列表第几个的闹钟数据
     *
     * @param itemId 列表项
     * @return Optional<Clock>
     */
    public Optional<Clock> getClockByItemId(int itemId) {
        if (itemId > clockList.size() || clockList.size() == 0) {
            return Optional.empty();
        }
​
        return Optional.ofNullable(this.clockList.get(itemId));
    }
​
    public int deleteClock(Clock clockInstance) {
        return -1;
    }
​
    public int updateClock(Clock clockInstance) {
        return -1;
    }
}

1.5 在entry>src>main>resources>base>graphics下新增资源文件background_button.xml.xml，用于删除按钮的背景。 background_button.xml

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

1.6 在entry>src>main>resources>base>layout目录里添加资源文件ability_edit_clock.xml，使用DirectionalLayout垂直布局，从上到下依次添加控件。 ability_edit_clock.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    ohos:id="$+id:layout_root"
    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:editClock"
            ohos:text_size="24fp"
            ohos:vertical_center="true"
            ohos:left_margin="20vp"
            />
​
        <Image
            ohos:id="$+id:image_ok"
            ohos:height="24vp"
            ohos:width="24vp"
            ohos:right_margin="20vp"
            ohos:foreground_element="$media:ok"
            ohos:align_parent_right="true"
            ohos:vertical_center="true"/>
​
    </DependentLayout>
​
    <TimePicker
        ohos:id="$+id:time_picker"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:selected_text_color="#007DFF"
        ohos:selected_text_size="20fp"
        />
​
    <DependentLayout
        ohos:id="$+id:layout_name"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:top_margin="10vp"
        >
​
        <Text
            ohos:id="$+id:item_text_nameLabel"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="$string:clockname"
            ohos:text_size="20fp"
            ohos:layout_alignment="center"
            ohos:top_margin="10vp"
            ohos:bottom_margin="10vp"
            ohos:left_margin="20vp"/>
​
        <Image
            ohos:id="$+id:icon_right_name"
            ohos:height="24vp"
            ohos:width="12vp"
            ohos:align_parent_right="true"
            ohos:right_margin="20vp"
            ohos:top_margin="10vp"
            ohos:image_src="$graphic:right_grey"/>
​
        <Text
            ohos:id="$+id:text_name"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="$string:defaultName"
            ohos:text_size="20fp"
            ohos:layout_alignment="center"
            ohos:top_margin="10vp"
            ohos:bottom_margin="10vp"
            ohos:right_margin="10vp"
            ohos:left_of="$id:icon_right_name"/>
​
        <Component
            ohos:height="1vp"
            ohos:width="match_parent"
            ohos:background_element="$graphic:list_divider"
            ohos:below="$id:text_name"/>
​
    </DependentLayout>
​
    <DependentLayout
        ohos:id="$+id:layout_bell"
        ohos:height="match_content"
        ohos:width="match_parent">
​
        <Text
            ohos:id="$+id:text_bellLabel"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="闹钟铃声"
            ohos:text_size="20fp"
            ohos:layout_alignment="center"
            ohos:top_margin="10vp"
            ohos:bottom_margin="10vp"
            ohos:left_margin="20vp"/>
​
        <Image
            ohos:id="$+id:icon_right_bell"
            ohos:height="24vp"
            ohos:width="12vp"
            ohos:align_parent_right="true"
            ohos:right_margin="20vp"
            ohos:top_margin="10vp"
            ohos:image_src="$graphic:right_grey"/>
​
        <Text
            ohos:id="$+id:item_text_bell"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="Cannon"
            ohos:text_size="20fp"
            ohos:layout_alignment="center"
            ohos:top_margin="10vp"
            ohos:bottom_margin="10vp"
            ohos:right_margin="10vp"
            ohos:left_of="$id:icon_right_bell"/>
​
        <Component
            ohos:height="1vp"
            ohos:width="match_parent"
            ohos:background_element="$graphic:list_divider"
            ohos:below="$id:text_bellLabel"/>
​
    </DependentLayout>
​
    <DependentLayout
        ohos:id="$+id:layout_duration"
        ohos:height="match_content"
        ohos:width="match_parent">
​
        <Text
            ohos:id="$+id:item_text_durationLabel"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="$string:clockDuration"
            ohos:text_size="20fp"
            ohos:layout_alignment="center"
            ohos:top_margin="10vp"
            ohos:bottom_margin="10vp"
            ohos:left_margin="20vp"/>
​
        <Image
            ohos:id="$+id:icon_right_duration"
            ohos:height="24vp"
            ohos:width="12vp"
            ohos:align_parent_right="true"
            ohos:right_margin="20vp"
            ohos:top_margin="10vp"
            ohos:image_src="$graphic:right_grey"/>
​
        <Text
            ohos:id="$+id:item_text_duration"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="$string:fiveMinute"
            ohos:text_size="20fp"
            ohos:layout_alignment="center"
            ohos:top_margin="10vp"
            ohos:bottom_margin="10vp"
            ohos:right_margin="10vp"
            ohos:left_of="$id:icon_right_duration"/>
​
        <Component
            ohos:height="1vp"
            ohos:width="match_parent"
            ohos:background_element="$graphic:list_divider"
            ohos:below="$id:item_text_durationLabel"/>
​
    </DependentLayout>
​
    <Button
        ohos:id="$+id:btn_delete"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:text="$string:deleteClock"
        ohos:text_size="30vp"
        ohos:background_element="$graphic:background_button"
        ohos:top_margin="30fp"/>
​
</DirectionalLayout>

1.7 新增EditClockAbilitySlice类，继承BaseClockAbilitySlice。主要实现从intent获取列表id，查询修改的对象，以及saveClock更新闹钟的操作。

EditClockAbilitySlice.java

package com.madixin.clock.setting.slice;
​
import com.madixin.clock.common.util.LogUtil;
import com.madixin.clock.common.util.ResourceUtil;
import com.madixin.clock.setting.ResourceTable;
import com.madixin.clock.setting.manager.ClockManager;
import com.madixin.clock.setting.model.Clock;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Text;
import ohos.agp.components.TextField;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.CommonDialog;
import ohos.agp.window.dialog.IDialog;
​
import java.util.Optional;
​
public class EditClockAbilitySlice extends BaseClockAbilitySlice {
    private static final String TAG = EditClockAbilitySlice.class.getName();
​
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_edit_clock);
​
        //clockInstance by id
        int item = intent.getIntParam("itemClock", 0);
        LogUtil.info(TAG, "itemClock=" + item);
​
        Optional<Clock> clockOptional = ClockManager.getInstance(this.getApplicationContext()).getClockByItemId(item);
​
        if (!clockOptional.isPresent()) {
            backToMainSlice(false);
        }
        clockInstance = clockOptional.get();
​
        initView();
​
        Button btnDelete = (Button) findComponentById(ResourceTable.Id_btn_delete);
        btnDelete.setClickedListener((btn) -> {
            CommonDialog alertDialog = new CommonDialog(this);
            TextField textFieldName = new TextField(this);
            textFieldName.setText(ResourceTable.String_suretodelete);
            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, ResourceUtil.getString(this, ResourceTable.String_cancel), new IDialog.ClickedListener() {
                @Override
                public void onClick(IDialog iDialog, int i) {
                    iDialog.destroy();
                }
            });
            alertDialog.setButton(IDialog.BUTTON3, ResourceUtil.getString(this, ResourceTable.String_delete), new IDialog.ClickedListener() {
                @Override
                public void onClick(IDialog iDialog, int i) {
                    iDialog.destroy();
                    ClockManager.getInstance(getApplicationContext()).deleteClock(clockInstance);
                    backToMainSlice(true);
                }
            });
            alertDialog.show();
        });
    }
​
    @Override
    protected void saveClock() {
        clockInstance.setHour(timePicker.getHour());
        clockInstance.setMinute(timePicker.getMinute());
        clockInstance.setEnable(true);
        ClockManager.getInstance(this.getApplicationContext()).updateClock(clockInstance);
        LogUtil.info(TAG, "updateClock:" + clockInstance.toString());
    }
}

2.实现从主页面点击列表某个闹钟后，跳转到修改页面

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

        // 单击跳转到修改页面
        listClockContainer.setItemClickedListener((listContainer, component, i, l) -> {
            Intent intent = new Intent();
            intent.setParam("itemClock", i);
            presentForResult(new EditClockAbilitySlice(), intent, 0);
        });

3.小结

本章完成了闹钟编辑页面的开发。

下一步我们将开发闹钟删除界面。

4.代码地址：

github，提交记录：f7be29f5ebaacc7942a72c27d3aac9f8bd72fbf9