编辑闹钟页面
本节我们将开发编辑闹钟页面。这个页面由主列表页面点击闹钟列表某个闹钟后跳转进入,可选择时间,铃声,时长和输入名称,最后保存返回主列表页面。整个页面跟创建页面的布局文件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