HarmonyOS应用开发--基于ListContainer的通讯录管理系统TelManageSys[电话本][API V6]

1. 名称

• 将本次主要基于ListContainer的通讯录管理系统命名为：电话本、TelManageSys。

• 本项目也放置在了Gitee仓库中：TelManageSys

• app图标如下：

2. 功能描述

• 具有显示联系人列表、添加联系人信息、删除联系人信息、修改联系人信息、搜索联系人信息主要功能。
• 在关键步骤操作时，具有演出Toast提示和CommDialog窗口确认的功能。
• 具有数据的存储功能，但不是通过数据库操作，而是使用配置文件写入相应的数据，并进行读取与修改。
• 在设置中，具有切换底部导航栏配色的选择功能。

3. app实现关键技巧

• 实现通过底部按钮切换页面：将一个页面分割成上、中、下三部分，其中上、中需要使用动态装载XML布局的技术依照点击不同的底部导航按钮装载对应得布局，达到切换页面得效果，这是本专栏所介绍得的一种导航页面切换得方法，后续还有其他技巧介绍。
• 实现底部配色主题得切换：将底部得配色归纳成四种Rgb配色，统一得存放在BottomBarColor.java文件中，使其保持static/final，并且编写相应得static函数操作。当用户选择了某个主题配色并点击“应用”按钮后，会调用设置相应得颜色，即可达到切换配色得目的！
• 实现数据的存储：此次项目还未使用数据库操作，而是使用配置文件直接存储数据。其中，将联系人姓名统一存储在一个联系人列表文件中，每个联系人都有一个单独的以其姓名为文件名的文件当作个人信息存储！当需要删除某个联系人时，首先将联系人列表文件内容全部取出来，然后从中去掉要删除的联系人，最后将新的人员列表信息写入到文件中，同步的删除该联系人的个人信息文件。
• 在编辑时，实现点击“+”增加一个输入框，点击“-”减少一个输入框：实现这一功能的方法同样离不开XML文件的动态装载技术，但是需要在指定的组件之后装载，才能达到点击加号增加一行的目的。实现减少一行，只需要从布局中移除指定的组件即可。
• 在编辑时，只有输入姓名，才会出现确认按钮：实现这一操作，只需要检查姓名输入框中的内容是否为空，如果是空，则将该组件隐藏，如果不是空则将该组件设置为可见，即可达到这一操作的目的！

4. 源代码

  4.0 项目文件结构图

  4.1 Java代码

   4.1.1 BottomBarColor.java

package com.tdtxdcxm.telmanagesys.configcolor;


import ohos.agp.colors.RgbColor;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.render.ColorMatrix;

public class BottomBarColor {
    public static void setBottomBarColor(DirectionalLayout ddl3,int i){
        switch (i){
            case 0:
                ddl3.setBackground(BottomBarColor.defaultShapeElement());
                break;
            case 1:
                ddl3.getBackgroundElement().setColorMatrix(new ColorMatrix(BottomBarColor.darkcolor));
                break;
            case 2:
                ddl3.getBackgroundElement().setColorMatrix(new ColorMatrix(BottomBarColor.lightcolor));
                break;
            case 3:
                ddl3.getBackgroundElement().setColorMatrix(new ColorMatrix(BottomBarColor.simplecolor));
                break;
            default:
                break;
        }
    }
    public static ShapeElement defaultShapeElement(){
        ShapeElement shapeElement = new ShapeElement();
        RgbColor rgbColor = new RgbColor();
        rgbColor.setRed(255);
        rgbColor.setGreen(255);
        rgbColor.setBlue(255);
        rgbColor.setAlpha(28);

        shapeElement.setRgbColor(rgbColor);
        rgbColor.setRed(139);
        rgbColor.setGreen(69);
        rgbColor.setBlue(19);
        rgbColor.setAlpha(100);
        shapeElement.setStroke(9,rgbColor);
        shapeElement.setCornerRadius(50);
        return shapeElement;
    }
    //CornflowerBlue	矢车菊的蓝色	#6495ED	100,149,237
    public static final float[] onclickfloats = {   0,0,0,0,100,
                                                    0,0,0,0,149,
                                                    0,0,0,0,237,
                                                    0,0,0,0,80};
    public static final float[] darkcolor = {0, 0, 0, 0, 47,
                                             0, 0, 0, 0, 79,
                                             0, 0, 0, 0, 79,
                                             0, 0, 0, 0, 90
                                            };
    public static final float[] lightcolor = {  0, 0, 0, 0, 175,
                                                0, 0, 0, 0, 238,
                                                0, 0, 0, 0, 238,
                                                0, 0, 0, 0, 100
                                             };
    public static final float[] simplecolor = { 0, 0, 0, 0, 221,
                                                0, 0, 0, 0, 219,
                                                0, 0, 0, 0, 219,
                                                0, 0, 0, 0, 28
                                              };
    private BottomBarColor(){}
}

---

   4.1.2 PeopleItem.java

package com.tdtxdcxm.telmanagesys.itemdata;

public class PeopleItem {
    private String name;

    public PeopleItem(String name) {
        this.name = name;
    }

    public void setName(String name){
        this.name = name;
    }
    public String getName(){
        System.out.println("getName--->name:"+name);
        return name;
    }

    @Override
    public String toString(){
        return "联系人{"+"姓名:"+name+"}";
    }
}

---

   4.1.3 PeopleItemProvider.java

package com.tdtxdcxm.telmanagesys.provider;

import com.tdtxdcxm.telmanagesys.ResourceTable;
import com.tdtxdcxm.telmanagesys.itemdata.PeopleItem;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;

import java.util.List;

public class PeopleItemProvider extends BaseItemProvider {

    private List<PeopleItem> list;
    private AbilitySlice slice;

    public PeopleItemProvider(List<PeopleItem> list, AbilitySlice slice) {
        this.list = list;
        this.slice = slice;
    }

    @Override
    public int getCount() {
        return list != null?list.size():0;
    }

    @Override
    public Object getItem(int i) {
        if(list == null || (i < 0 || i >= list.size())){
            return null;
        }
        return list.get(i);
    }

    @Override
    public long getItemId(int i) {

        return i;
    }

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        final Component cmpt;
        if(component == null){
            cmpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_ability_listcontainer_itemlayout,null,false);
        }
        else{
            cmpt = component;
        }

        PeopleItem peopleItem = list.get(i);
        Text text = (Text) cmpt.findComponentById(ResourceTable.Id_item_text);
        text.setText(peopleItem.getName());

        return cmpt;
    }
}

---

   4.1.4 MainAbilitySlice.java

package com.tdtxdcxm.telmanagesys.slice;

import com.tdtxdcxm.telmanagesys.PeopleInfoConfig;
import com.tdtxdcxm.telmanagesys.ResourceTable;
import com.tdtxdcxm.telmanagesys.configcolor.BottomBarColor;
import com.tdtxdcxm.telmanagesys.itemdata.PeopleItem;
import com.tdtxdcxm.telmanagesys.provider.PeopleItemProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.*;
import ohos.agp.components.element.Element;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.render.ColorMatrix;
import ohos.agp.utils.Color;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;

import java.util.ArrayList;
import java.util.List;

public class MainAbilitySlice extends AbilitySlice {
    private int idbut = -1;
    private int i = 0;

    private DirectionalLayout search_top_sublayout;
    private TextField search_tfd;
    private Button search_but;
    private DirectionalLayout edit_top_sublayout;
    private Button edit_deletebut,edit_resetbut,edit_okbut;
    private DirectionalLayout config_top_sublayout;
    private Button config_deletebut,config_resetbut,config_okbut;


    private DirectionalLayout people_listcontainer_sublayout;
    private ListContainer people_listcontainer;
    private List<PeopleItem> list = new ArrayList<>();
    private DirectionalLayout edit_area_rootdl;
    private Text edit_nametext;
    private Button edit_addtel_but,edit_addemail_but,edit_addwork_but,edit_addaddress_but;
    private TextField edit_nametfd,edit_teltfd,edit_emailtfd,edit_worktfd,edit_addresstfd;
    private DirectionalLayout config_area_rootdl;
    private RadioContainer config_radioContainer;
    private RadioButton bottombar_default,bottombar_dark,bottombar_light,bottombar_simple;


    private DirectionalLayout main_rootdl_ddl1;
    private DirectionalLayout main_rootdl_ddl2;
    private DirectionalLayout main_rootdl_ddl3;
    private Button ddl3_butpeople,ddl3_butedit,ddl3_butconfig;


    public void initAndLoadSearch(DirectionalLayout ddl1){
        ddl1.removeAllComponents();
        search_top_sublayout = (DirectionalLayout) LayoutScatter.getInstance(this).parse(ResourceTable.Layout_ability_search_topsublayout,null,false);
        search_tfd = (TextField) search_top_sublayout.findComponentById(ResourceTable.Id_search_tfd);
        search_but = (Button) search_top_sublayout.findComponentById(ResourceTable.Id_search_but);

        /*<*************************给输入框和搜索按钮设置监听器****************************/
        search_tfd.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {

            }
        });
        search_but.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                search_tfd.clearFocus();
                Intent intent = new Intent();
                intent.setParam("姓名",search_tfd.getText());
                present(new PersonDetailSlice(),intent);
            }
        });
        /****************************给输入框和搜索按钮设置监听器**************************>*/

        ddl1.addComponent(search_top_sublayout);
    }

    public void initAndLoadEditTop(DirectionalLayout ddl1){
        ddl1.removeAllComponents();
        edit_top_sublayout = (DirectionalLayout) LayoutScatter.getInstance(this).parse(ResourceTable.Layout_ability_edit_topsublayout,null,false);
        edit_deletebut = (Button) edit_top_sublayout.findComponentById(ResourceTable.Id_edit_deletebut);
        edit_resetbut = (Button) edit_top_sublayout.findComponentById(ResourceTable.Id_edit_resetbut);
        edit_okbut = (Button) edit_top_sublayout.findComponentById(ResourceTable.Id_edit_okbut);

        edit_okbut.setVisibility(Component.HIDE);

        /*<*************************给三个功能按钮设置监听器****************************/
        edit_deletebut.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                edit_nametfd.setText("");
                edit_nametfd.clearFocus();
                edit_nametext.setText("待输入");

                edit_teltfd.setText("");
                edit_teltfd.clearFocus();
                DirectionalLayout edit_telanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_telanother_rootdl);
                if(edit_telanother_rootdl != null){
                    ((TextField)edit_telanother_rootdl.findComponentById(ResourceTable.Id_edit_telanother_teltfd)).setText("");
                    ((TextField)edit_telanother_rootdl.findComponentById(ResourceTable.Id_edit_telanother_teltfd)).clearFocus();
                }

                edit_emailtfd.setText("");
                edit_emailtfd.clearFocus();
                DirectionalLayout edit_emailanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_emailanother_rootdl);
                if(edit_emailanother_rootdl != null){
                    ((TextField)edit_emailanother_rootdl.findComponentById(ResourceTable.Id_edit_emailanother_emailtfd)).setText("");
                    ((TextField)edit_emailanother_rootdl.findComponentById(ResourceTable.Id_edit_emailanother_emailtfd)).clearFocus();
                }

                edit_worktfd.setText("");
                edit_worktfd.clearFocus();
                DirectionalLayout edit_workanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_workanother_rootdl);
                if(edit_workanother_rootdl != null){
                    ((TextField) edit_workanother_rootdl.findComponentById(ResourceTable.Id_edit_workanother_worktfd)).setText("");
                    ((TextField) edit_workanother_rootdl.findComponentById(ResourceTable.Id_edit_workanother_worktfd)).clearFocus();
                }

                edit_addresstfd.setText("");
                edit_addresstfd.clearFocus();
                DirectionalLayout edit_addressanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_addressanother_rootdl);
                if(edit_addressanother_rootdl != null){
                    ((TextField) edit_addressanother_rootdl.findComponentById(ResourceTable.Id_edit_addressanother_addresstfd)).setText("");
                    ((TextField) edit_addressanother_rootdl.findComponentById(ResourceTable.Id_edit_addressanother_addresstfd)).clearFocus();
                }
                toastShow("已清空！");
            }
        });
        edit_resetbut.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                DirectionalLayout edit_telanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_telanother_rootdl);
                if(edit_telanother_rootdl != null){
                    edit_area_rootdl.removeComponent(edit_telanother_rootdl);
                    edit_addtel_but.setText("+");
                    edit_addtel_but.setTextColor(Color.GREEN);
                }
                DirectionalLayout edit_emailanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_emailanother_rootdl);
                if(edit_emailanother_rootdl != null){
                    edit_area_rootdl.removeComponent(edit_emailanother_rootdl);
                    edit_addemail_but.setText("+");
                    edit_addemail_but.setTextColor(Color.GREEN);
                }

                DirectionalLayout edit_workanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_workanother_rootdl);
                if(edit_workanother_rootdl != null){
                    edit_area_rootdl.removeComponent(edit_workanother_rootdl);
                    edit_addwork_but.setText("+");
                    edit_addwork_but.setTextColor(Color.GREEN);
                }

                DirectionalLayout edit_addressanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_addressanother_rootdl);
                if(edit_addressanother_rootdl != null){
                    edit_area_rootdl.removeComponent(edit_addressanother_rootdl);
                    edit_addaddress_but.setText("+");
                    edit_addaddress_but.setTextColor(Color.GREEN);
                }
                toastShow("已重置！");
            }
        });
        edit_okbut.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                String[] personinfo = new String[9];

                personinfo[0] = edit_nametfd.getText();

                personinfo[1] = edit_teltfd.getText();
                DirectionalLayout edit_telanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_telanother_rootdl);
                if(edit_telanother_rootdl != null){
                    personinfo[2] = ((TextField)edit_telanother_rootdl.findComponentById(ResourceTable.Id_edit_telanother_teltfd)).getText();
                }
                else{
                    personinfo[2] = "";
                }

                personinfo[3] = edit_emailtfd.getText();
                DirectionalLayout edit_emailanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_emailanother_rootdl);
                if(edit_emailanother_rootdl != null){
                    personinfo[4] = ((TextField)edit_emailanother_rootdl.findComponentById(ResourceTable.Id_edit_emailanother_emailtfd)).getText();
                }
                else{
                    personinfo[4] = "";
                }

                personinfo[5] = edit_worktfd.getText();
                DirectionalLayout edit_workanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_workanother_rootdl);
                if(edit_workanother_rootdl != null){
                    personinfo[6] = ((TextField) edit_workanother_rootdl.findComponentById(ResourceTable.Id_edit_workanother_worktfd)).getText();
                }
                else{
                    personinfo[6] = "";
                }

                personinfo[7] = edit_addresstfd.getText();
                DirectionalLayout edit_addressanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_addressanother_rootdl);
                if(edit_addressanother_rootdl != null){
                    personinfo[8] = ((TextField) edit_addressanother_rootdl.findComponentById(ResourceTable.Id_edit_addressanother_addresstfd)).getText();
                }
                else{
                    personinfo[8] = "";
                }
                PeopleInfoConfig.writeData(MainAbilitySlice.this.getContext(),personinfo);

                ddl3_butpeople.getClickedListener().onClick(ddl3_butpeople);
            }
        });
        /***************************给三个功能按钮设置监听器**************************>*/

        ddl1.addComponent(edit_top_sublayout);

    }

    public void initAndLoadConfigTop(DirectionalLayout ddl1){
        ddl1.removeAllComponents();
        config_top_sublayout = (DirectionalLayout) LayoutScatter.getInstance(this).parse(ResourceTable.Layout_ability_config_topsublayout,null,false);
        config_resetbut = (Button) config_top_sublayout.findComponentById(ResourceTable.Id_config_resetbut);
        config_okbut = (Button) config_top_sublayout.findComponentById(ResourceTable.Id_config_okbut);

        /*<*****************************给三个功能按钮设置监听器*************************************/
        config_resetbut.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                RadioContainer radioContainer = (RadioContainer) main_rootdl_ddl2.findComponentById(ResourceTable.Id_config_radioContainer);
                if(radioContainer != null){
                    radioContainer.mark(0);
                    BottomBarColor.setBottomBarColor(main_rootdl_ddl3,MainAbilitySlice.this.i);
                }
            }
        });
        config_okbut.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                BottomBarColor.setBottomBarColor(main_rootdl_ddl3,MainAbilitySlice.this.i);
                toastShow("已经设置：第"+(MainAbilitySlice.this.i+1)+"种主题！");
            }
        });
        /******************************给三个功能按钮设置监听器***********************************>*/

        ddl1.addComponent(config_top_sublayout);

    }

    public void toastShow(String s){
        ToastDialog toastDialog = new ToastDialog(this.getContext());
        toastDialog.setText(s);
        toastDialog.setTransparent(true);
        toastDialog.setDuration(500);
        toastDialog.setAlignment(LayoutAlignment.CENTER);
        toastDialog.show();
    }

    public void installListContainer(DirectionalLayout ddl2){
        System.out.println("开始装载listcontainer!！");
        ddl2.removeAllComponents();
        people_listcontainer_sublayout = (DirectionalLayout) LayoutScatter.getInstance(this).parse(ResourceTable.Layout_ability_people_listcontainerlayout,null,false);
        people_listcontainer = (ListContainer) people_listcontainer_sublayout.findComponentById(ResourceTable.Id_people_listcontainer);

        ddl2.addComponent(people_listcontainer_sublayout);
    }
    public void initListContainer(){
        System.out.println("开始读出数据！");
        PeopleInfoConfig.readData(this.getContext(),list);
        PeopleItemProvider peopleItemProvider = new PeopleItemProvider(list,this);
        people_listcontainer.setItemProvider(peopleItemProvider);

        people_listcontainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
            @Override
            public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
                Text item_text = (Text) component.findComponentById(ResourceTable.Id_item_text);

                if(item_text.getText().equals("请添加联系人") == false){
                    Intent intent = new Intent();
                    intent.setParam("姓名",item_text.getText());
                    present(new PersonDetailSlice(),intent);
                }
                else{
                    toastShow("通讯录无联系人信息！");
                }
            }
        });
        people_listcontainer.setItemLongClickedListener(new ListContainer.ItemLongClickedListener() {
            @Override
            public boolean onItemLongClicked(ListContainer listContainer, Component component, int i, long l) {
                Text item_text = (Text) component.findComponentById(ResourceTable.Id_item_text);
                item_text.setTextColor(Color.RED);
                PeopleInfoConfig.deleteData(MainAbilitySlice.this.getContext(),item_text.getText());
                PeopleInfoConfig.readData(MainAbilitySlice.this.getContext(),list);
                peopleItemProvider.notifyDataChanged();

                return true;
            }
        });
    }

    public void installEditArea(DirectionalLayout ddl2){
        ddl2.removeAllComponents();
        edit_area_rootdl = (DirectionalLayout) LayoutScatter.getInstance(this).parse(ResourceTable.Layout_ability_edit,null,false);
        edit_nametext = (Text) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_nametext);
        edit_addtel_but = (Button) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_addtel_but);
        edit_addemail_but = (Button) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_addemail_but);
        edit_addwork_but = (Button) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_addwork_but);
        edit_addaddress_but = (Button) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_addaddress_but);

        edit_nametfd = (TextField) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_nametfd);
        edit_teltfd = (TextField) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_teltfd);
        edit_emailtfd = (TextField) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_emailtfd);
        edit_worktfd = (TextField) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_worktfd);
        edit_addresstfd = (TextField) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_addresstfd);
        /*<**********************************给输入姓名的文本框设置文本监视***********************************/
        edit_nametfd.addTextObserver(new Text.TextObserver() {
            @Override
            public void onTextUpdated(String s, int i, int i1, int i2) {
                edit_nametext.setText(s);
                if(s.equals("")){
                    edit_okbut.setVisibility(Component.HIDE);
                    edit_okbut.setText("确认");
                }
                else{
                    edit_okbut.setVisibility(Component.VISIBLE);
                }
            }
        });
        /************************************给输入姓名的文本框设置文本监视*********************************>*/

        /*<****************************给四个添加按钮设置监听器******************************************/
        edit_addtel_but.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(edit_addtel_but.getText().equals("-")){
                    DirectionalLayout edit_telanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_telanother_rootdl);
                    edit_area_rootdl.removeComponent(edit_telanother_rootdl);
                    edit_addtel_but.setText("+");
                    edit_addtel_but.setTextColor(Color.GREEN);
                    return;
                }
                DirectionalLayout edit_tel_dlyt = (DirectionalLayout) findComponentById(ResourceTable.Id_edit_tel_dlyt);
                DirectionalLayout edit_telanother_rootdl = (DirectionalLayout) LayoutScatter.getInstance(MainAbilitySlice.this).parse(ResourceTable.Layout_ability_edit_telsublayout,null,false);

                int i = edit_area_rootdl.getChildIndex(edit_tel_dlyt);
                System.out.println("edit_area_rootdl.getChildCount()-->"+edit_area_rootdl.getChildCount());

                edit_area_rootdl.addComponent(edit_telanother_rootdl,i+1);

                edit_addtel_but.setText("-");
                edit_addtel_but.setTextColor(Color.RED);
            }
        });
        edit_addemail_but.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(edit_addemail_but.getText().equals("-")){
                    DirectionalLayout edit_emailanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_emailanother_rootdl);
                    edit_area_rootdl.removeComponent(edit_emailanother_rootdl);
                    edit_addemail_but.setText("+");
                    edit_addemail_but.setTextColor(Color.GREEN);
                    return;
                }
                DirectionalLayout edit_email_dlyt = (DirectionalLayout) findComponentById(ResourceTable.Id_edit_email_dlyt);
                DirectionalLayout edit_emailanother_rootdl = (DirectionalLayout) LayoutScatter.getInstance(MainAbilitySlice.this).parse(ResourceTable.Layout_ability_edit_emailsublayout,null,false);

                int i = edit_area_rootdl.getChildIndex(edit_email_dlyt);
                System.out.println("edit_area_rootdl.getChildCount()-->"+edit_area_rootdl.getChildCount());

                edit_area_rootdl.addComponent(edit_emailanother_rootdl,i+1);

                edit_addemail_but.setText("-");
                edit_addemail_but.setTextColor(Color.RED);
            }
        });
        edit_addwork_but.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(edit_addwork_but.getText().equals("-")){
                    DirectionalLayout edit_workanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_workanother_rootdl);
                    edit_area_rootdl.removeComponent(edit_workanother_rootdl);
                    edit_addwork_but.setText("+");
                    edit_addwork_but.setTextColor(Color.GREEN);
                    return;
                }
                DirectionalLayout edit_work_dlyt = (DirectionalLayout) findComponentById(ResourceTable.Id_edit_work_dlyt);
                DirectionalLayout edit_workanother_rootdl = (DirectionalLayout) LayoutScatter.getInstance(MainAbilitySlice.this).parse(ResourceTable.Layout_ability_edit_worksublayout,null,false);

                int i = edit_area_rootdl.getChildIndex(edit_work_dlyt);
                System.out.println("edit_area_rootdl.getChildCount()-->"+edit_area_rootdl.getChildCount());

                edit_area_rootdl.addComponent(edit_workanother_rootdl,i+1);

                edit_addwork_but.setText("-");
                edit_addwork_but.setTextColor(Color.RED);
            }
        });
        edit_addaddress_but.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(edit_addaddress_but.getText().equals("-")){
                    DirectionalLayout edit_addressanother_rootdl = (DirectionalLayout) edit_area_rootdl.findComponentById(ResourceTable.Id_edit_addressanother_rootdl);
                    edit_area_rootdl.removeComponent(edit_addressanother_rootdl);
                    edit_addaddress_but.setText("+");
                    edit_addaddress_but.setTextColor(Color.GREEN);
                    return;
                }
                DirectionalLayout edit_address_dlyt = (DirectionalLayout) findComponentById(ResourceTable.Id_edit_address_dlyt);
                DirectionalLayout edit_addressanother_rootdl = (DirectionalLayout) LayoutScatter.getInstance(MainAbilitySlice.this).parse(ResourceTable.Layout_ability_edit_addresssublayout,null,false);

                int i = edit_area_rootdl.getChildIndex(edit_address_dlyt);
                System.out.println("edit_area_rootdl.getChildCount()-->"+edit_area_rootdl.getChildCount());

                edit_area_rootdl.addComponent(edit_addressanother_rootdl,i+1);

                edit_addaddress_but.setText("-");
                edit_addaddress_but.setTextColor(Color.RED);
            }
        });
        /*****************************给四个添加按钮设置监听器****************************************>*/

        ddl2.addComponent(edit_area_rootdl);
    }

    public void installConfigArea(DirectionalLayout ddl2){
        ddl2.removeAllComponents();
        config_area_rootdl = (DirectionalLayout) LayoutScatter.getInstance(this).parse(ResourceTable.Layout_ability_config,null,false);
        config_radioContainer = (RadioContainer) config_area_rootdl.findComponentById(ResourceTable.Id_config_radioContainer);
        bottombar_default = (RadioButton) config_area_rootdl.findComponentById(ResourceTable.Id_bottombar_default);
        bottombar_dark = (RadioButton) config_area_rootdl.findComponentById(ResourceTable.Id_bottombar_dark);
        bottombar_light = (RadioButton) config_area_rootdl.findComponentById(ResourceTable.Id_bottombar_light);
        bottombar_simple = (RadioButton) config_area_rootdl.findComponentById(ResourceTable.Id_bottombar_simple);
        config_radioContainer.mark(MainAbilitySlice.this.i);
        config_radioContainer.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
            @Override
            public void onCheckedChanged(RadioContainer radioContainer, int i) {
                switch (i){
                    case 0:
                        toastShow("选择："+bottombar_default.getText());
                        MainAbilitySlice.this.i = i;
                        break;
                    case 1:
                        toastShow("选择："+bottombar_dark.getText());
                        MainAbilitySlice.this.i = i;
                        break;
                    case 2:
                        toastShow("选择："+bottombar_light.getText());
                        MainAbilitySlice.this.i = i;
                        break;
                    case 3:
                        toastShow("选择："+bottombar_simple.getText());
                        MainAbilitySlice.this.i = i;
                        break;
                    default:
                        break;
                }
            }
        });
        ddl2.addComponent(config_area_rootdl);
    }

    public void initMASliceComponents(){
        main_rootdl_ddl1 = (DirectionalLayout) findComponentById(ResourceTable.Id_main_rootdl_ddl1);
        main_rootdl_ddl2 = (DirectionalLayout) findComponentById(ResourceTable.Id_main_rootdl_ddl2);
        main_rootdl_ddl3 = (DirectionalLayout) findComponentById(ResourceTable.Id_main_rootdl_ddl3);
        ddl3_butpeople = (Button) findComponentById(ResourceTable.Id_ddl3_butpeople);

        main_rootdl_ddl3.setBackground(BottomBarColor.defaultShapeElement());


        ddl3_butpeople.getBackgroundElement().setColorMatrix(new ColorMatrix(BottomBarColor.onclickfloats));
        idbut = ResourceTable.Id_ddl3_butpeople;


        ddl3_butedit = (Button) findComponentById(ResourceTable.Id_ddl3_butedit);
        ddl3_butconfig = (Button) findComponentById(ResourceTable.Id_ddl3_butconfig);

        /*<*************************给三个导航按钮监听器****************************/
        ddl3_butpeople.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(idbut != ddl3_butpeople.getId()) {
                    Button button = (Button) findComponentById(idbut);
                    button.getBackgroundElement().setColorMatrix(new ColorMatrix(BottomBarColor.simplecolor));


                    ddl3_butpeople.getBackgroundElement().setColorMatrix(new ColorMatrix(BottomBarColor.onclickfloats));
                    idbut = ddl3_butpeople.getId();
                    initAndLoadSearch(main_rootdl_ddl1);
                    installListContainer(main_rootdl_ddl2);
                    initListContainer();
                }
            }
        });
        ddl3_butedit.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(idbut != ddl3_butedit.getId()) {
                    Button button = (Button) findComponentById(idbut);
                    button.getBackgroundElement().setColorMatrix(new ColorMatrix(BottomBarColor.simplecolor));


                    ddl3_butedit.getBackgroundElement().setColorMatrix(new ColorMatrix(BottomBarColor.onclickfloats));
                    idbut = ddl3_butedit.getId();
                    initAndLoadEditTop(main_rootdl_ddl1);
                    installEditArea(main_rootdl_ddl2);
                }
            }
        });
        ddl3_butconfig.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(idbut != ddl3_butconfig.getId()) {
                    Button button = (Button) findComponentById(idbut);
                    button.getBackgroundElement().setColorMatrix(new ColorMatrix(BottomBarColor.simplecolor));


                    ddl3_butconfig.getBackgroundElement().setColorMatrix(new ColorMatrix(BottomBarColor.onclickfloats));
                    idbut = ddl3_butconfig.getId();
                    initAndLoadConfigTop(main_rootdl_ddl1);
                    installConfigArea(main_rootdl_ddl2);
                }
            }
        });
        /***************************给三个导航按钮监听器**************************>*/

    }

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        System.out.println("开始了-----》》》》》》");
        initMASliceComponents();
        initAndLoadSearch(main_rootdl_ddl1);
        installListContainer(main_rootdl_ddl2);
        initListContainer();
    }

    @Override
    protected void onInactive() {
        super.onInactive();
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    protected void onBackground() {
        super.onBackground();
    }

    @Override
    protected void onStop() {
        super.onStop();
    }
}

---

   4.1.5 PersonDetailSlice.java

package com.tdtxdcxm.telmanagesys.slice;


import com.tdtxdcxm.telmanagesys.PeopleInfoConfig;
import com.tdtxdcxm.telmanagesys.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
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 ohos.agp.window.dialog.ToastDialog;


public class PersonDetailSlice extends AbilitySlice {
    private Button persondetail_backbut,persondetail_nobut,persondetail_okeditbut;

    private Text persondetail_nametext;
    private TextField persondetail_teltfd,persondetail_teltfd2;
    private TextField persondetail_emailtfd,persondetail_emailtfd2;
    private TextField persondetail_worktfd,persondetail_worktfd2;
    private TextField persondetail_addresstfd,persondetail_addresstfd2;

    private boolean isssave = false;

    public void toastShow(String s){
        ToastDialog toastDialog = new ToastDialog(this.getContext());
        toastDialog.setText(s);
        toastDialog.setTransparent(true);
        toastDialog.setDuration(1000);
        toastDialog.setAlignment(LayoutAlignment.BOTTOM);
        toastDialog.show();
    }
    public void commonDialogShow(String titletext,String contenttext){
        CommonDialog commonDialog = new CommonDialog(this.getContext());
        commonDialog.setTitleText(titletext);
        commonDialog.setContentText(contenttext);
        commonDialog.setAlignment(LayoutAlignment.CENTER);
        commonDialog.setCornerRadius(20);
        commonDialog.setSize(700,360);
        commonDialog.setButton(1, "确定", new IDialog.ClickedListener() {
            @Override
            public void onClick(IDialog iDialog, int i) {
                commonDialog.destroy();
                terminate();
            }
        });
        commonDialog.setButton(2, "取消", new IDialog.ClickedListener() {
            @Override
            public void onClick(IDialog iDialog, int i) {
                commonDialog.destroy();
            }
        });
        commonDialog.show();
    }

    public void initPDSilceComponents(String name){
        persondetail_backbut = (Button) findComponentById(ResourceTable.Id_persondetail_backbut);
        persondetail_nobut= (Button) findComponentById(ResourceTable.Id_persondetail_nobut);
        persondetail_okeditbut = (Button) findComponentById(ResourceTable.Id_persondetail_okeditbut);

        persondetail_nametext = (Text) findComponentById(ResourceTable.Id_persondetail_nametext);

        persondetail_teltfd = (TextField) findComponentById(ResourceTable.Id_persondetail_teltfd);
        persondetail_teltfd2 = (TextField) findComponentById(ResourceTable.Id_persondetail_teltfd2);
        persondetail_emailtfd = (TextField) findComponentById(ResourceTable.Id_persondetail_emailtfd);
        persondetail_emailtfd2 = (TextField) findComponentById(ResourceTable.Id_persondetail_emailtfd2);
        persondetail_worktfd = (TextField) findComponentById(ResourceTable.Id_persondetail_worktfd);
        persondetail_worktfd2 = (TextField) findComponentById(ResourceTable.Id_persondetail_worktfd2);
        persondetail_addresstfd = (TextField) findComponentById(ResourceTable.Id_persondetail_addresstfd);
        persondetail_addresstfd2 = (TextField) findComponentById(ResourceTable.Id_persondetail_addresstfd2);

        String[] personinfo = PeopleInfoConfig.readPersonData(this.getContext(),name);
        persondetail_nametext.setText(personinfo[0]);
        persondetail_teltfd.setText(personinfo[1]);
        persondetail_teltfd2.setText(personinfo[2]);
        persondetail_emailtfd.setText(personinfo[3]);
        persondetail_emailtfd2.setText(personinfo[4]);
        persondetail_worktfd.setText(personinfo[5]);
        persondetail_worktfd2.setText(personinfo[6]);
        persondetail_addresstfd.setText(personinfo[7]);
        persondetail_addresstfd2.setText(personinfo[8]);

        persondetail_teltfd.setClickable(false);
        persondetail_teltfd2.setClickable(false);
        persondetail_emailtfd.setClickable(false);
        persondetail_emailtfd2.setClickable(false);
        persondetail_worktfd.setClickable(false);
        persondetail_worktfd2.setClickable(false);
        persondetail_addresstfd.setClickable(false);
        persondetail_addresstfd2.setClickable(false);

        persondetail_backbut.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(isssave == false){
                    commonDialogShow("返回","还未保存，确定退出吗？");
                }
                else{
                    commonDialogShow("返回","已经保存，确定退出吗？");
                }
            }
        });
        persondetail_nobut.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                persondetail_okeditbut.setText("编辑");

                persondetail_teltfd.clearFocus();
                persondetail_teltfd2.clearFocus();
                persondetail_emailtfd.clearFocus();
                persondetail_emailtfd2.clearFocus();
                persondetail_worktfd.clearFocus();
                persondetail_worktfd2.clearFocus();
                persondetail_addresstfd.clearFocus();
                persondetail_addresstfd2.clearFocus();

                persondetail_teltfd.setClickable(false);
                persondetail_teltfd2.setClickable(false);
                persondetail_emailtfd.setClickable(false);
                persondetail_emailtfd2.setClickable(false);
                persondetail_worktfd.setClickable(false);
                persondetail_worktfd2.setClickable(false);
                persondetail_addresstfd.setClickable(false);
                persondetail_addresstfd2.setClickable(false);

                toastShow("已退出编辑状态！");
            }
        });
        persondetail_okeditbut.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(persondetail_okeditbut.getText().equals("编辑") && personinfo[0].equals("") == false){
                    persondetail_teltfd.setClickable(true);
                    persondetail_teltfd2.setClickable(true);
                    persondetail_emailtfd.setClickable(true);
                    persondetail_emailtfd2.setClickable(true);
                    persondetail_worktfd.setClickable(true);
                    persondetail_worktfd2.setClickable(true);
                    persondetail_addresstfd.setClickable(true);
                    persondetail_addresstfd2.setClickable(true);
                    persondetail_okeditbut.setText("保存");
                    isssave = false;
                    toastShow("可以修改编辑！");
                    return;
                }
                if(persondetail_okeditbut.getText().equals("保存")){
                    String[] tpersoninfo = new String[9];
                    tpersoninfo[0] = persondetail_nametext.getText();
                    tpersoninfo[1] = persondetail_teltfd.getText();
                    tpersoninfo[2] = persondetail_teltfd2.getText();
                    tpersoninfo[3] = persondetail_emailtfd.getText();
                    tpersoninfo[4] = persondetail_emailtfd2.getText();
                    tpersoninfo[5] = persondetail_worktfd.getText();
                    tpersoninfo[6] = persondetail_worktfd2.getText();
                    tpersoninfo[7] = persondetail_addresstfd.getText();
                    tpersoninfo[8] = persondetail_addresstfd2.getText();

                    PeopleInfoConfig.writePersonData(PersonDetailSlice.this.getContext(),tpersoninfo);
                    persondetail_okeditbut.setText("编辑");
                    persondetail_nobut.getClickedListener().onClick(persondetail_nobut);
                    isssave = true;
                    toastShow("已经保存！");
                }
            }
        });
    }

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_persondetail);
        initPDSilceComponents(intent.getStringParam("姓名"));
        System.out.println("开始了-----》》》》》》");

    }

    @Override
    protected void onInactive() {
        super.onInactive();
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    protected void onBackground() {
        super.onBackground();
    }

    @Override
    protected void onStop() {
        super.onStop();
    }
}

---

   4.1.6 MainAbility.java

package com.tdtxdcxm.telmanagesys;

import com.tdtxdcxm.telmanagesys.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(MainAbilitySlice.class.getName());
    }
}

---

   4.1.7 MyApplication.java

package com.tdtxdcxm.telmanagesys;

import ohos.aafwk.ability.AbilityPackage;

public class MyApplication extends AbilityPackage {
    @Override
    public void onInitialize() {
        super.onInitialize();
    }
}

---

   4.1.8 PersonInfoConfig.java

package com.tdtxdcxm.telmanagesys;

import com.tdtxdcxm.telmanagesys.itemdata.PeopleItem;
import ohos.app.Context;
import ohos.data.DatabaseHelper;
import ohos.data.preferences.Preferences;

import java.util.ArrayList;
import java.util.List;

public class PeopleInfoConfig {
    private static final String peoplelistfilename = "peopleinfo.ple";

    public static void readData(Context context, List<PeopleItem> list){
        list.clear();
        System.out.println("--------------》》》》这里了！");
        DatabaseHelper databaseHelper = new DatabaseHelper(context);
        Preferences preferences = databaseHelper.getPreferences(peoplelistfilename);

        String namelist = preferences.getString("名字","请添加联系人").toString();

        System.out.println(namelist);

        String[] pername = namelist.split(",");
        if(pername[0].equals("")){
            list.add(new PeopleItem("请添加联系人"));
            return;
        }
        for(int i = 0;i < pername.length;i++){
            System.out.println("名字："+pername[i]);
            list.add(new PeopleItem(pername[i]));
        }
    }
    public static String[] readPersonData(Context context,String name){
        String[] personinfo = new String[9];
        DatabaseHelper databaseHelper = new DatabaseHelper(context);
        Preferences preferences = databaseHelper.getPreferences(name+".tdtx");

        personinfo[0] = preferences.getString("姓名","");
        personinfo[1] = preferences.getString("电话","");
        personinfo[2] = preferences.getString("座机","");
        personinfo[3] = preferences.getString("邮箱","");
        personinfo[4] = preferences.getString("其他邮箱","");
        personinfo[5] = preferences.getString("工作单位","");
        personinfo[6] = preferences.getString("其他单位","");
        personinfo[7] = preferences.getString("地址","");
        personinfo[8] = preferences.getString("其他地址","");
        return personinfo;
    }
    public static void writeData(Context context, String[] personinfo){
        DatabaseHelper databaseHelper = new DatabaseHelper(context);
        Preferences preferences = databaseHelper.getPreferences(peoplelistfilename);

        List<PeopleItem> tlist = new ArrayList<>();
        String namelist;
        namelist = preferences.getString("名字","").toString();
        System.out.println("writedata namelistfile--->"+namelist);

        if(namelist.equals("")){
            preferences.putString("名字",personinfo[0]);
        }
        else
        {
            preferences.putString("名字",namelist+","+personinfo[0]);
        }
        preferences.flushSync();

        DatabaseHelper personfile_databaseHelper = new DatabaseHelper(context);
        Preferences person_preferences = personfile_databaseHelper.getPreferences(personinfo[0]+".tdtx");
        person_preferences.putString("姓名",personinfo[0]);
        person_preferences.putString("电话",personinfo[1]);
        person_preferences.putString("座机",personinfo[2]);
        person_preferences.putString("邮箱",personinfo[3]);
        person_preferences.putString("其他邮箱",personinfo[4]);
        person_preferences.putString("工作单位",personinfo[5]);
        person_preferences.putString("其他单位",personinfo[6]);
        person_preferences.putString("地址",personinfo[7]);
        person_preferences.putString("其他地址",personinfo[8]);

        person_preferences.flushSync();
    }
    public static void writePersonData(Context context, String[] personinfo){
        DatabaseHelper personfile_databaseHelper = new DatabaseHelper(context);
        Preferences person_preferences = personfile_databaseHelper.getPreferences(personinfo[0]+".tdtx");
        person_preferences.putString("姓名",personinfo[0]);
        person_preferences.putString("电话",personinfo[1]);
        person_preferences.putString("座机",personinfo[2]);
        person_preferences.putString("邮箱",personinfo[3]);
        person_preferences.putString("其他邮箱",personinfo[4]);
        person_preferences.putString("工作单位",personinfo[5]);
        person_preferences.putString("其他单位",personinfo[6]);
        person_preferences.putString("地址",personinfo[7]);
        person_preferences.putString("其他地址",personinfo[8]);

        person_preferences.flushSync();
    }

    public static void deleteData(Context context, String personname){
        DatabaseHelper databaseHelper = new DatabaseHelper(context);
        Preferences preferences = databaseHelper.getPreferences(peoplelistfilename);

        List<PeopleItem> tlist = new ArrayList<>();
        String namelist;
        namelist = preferences.getString("名字","").toString();
        System.out.println("writedata namelistfile--->"+namelist);

        if(namelist.equals("")){

        }
        else
        {
            String[] names = namelist.split(",");
            StringBuilder stringBuilder = new StringBuilder();
            int k = 0;
            for(int i = 0;i < names.length;i++){
                System.out.println("------>>>>"+stringBuilder.toString());
                if(names[i].equals(personname) == false){
                    if(k != 0){
                        stringBuilder.append(",");
                        stringBuilder.append(names[i]);
                        k++;
                        continue;
                    }
                    stringBuilder.append(names[i]);
                    k++;
                }
            }
            namelist = stringBuilder.toString();

            preferences.putString("名字",namelist);
        }
        preferences.flushSync();

        DatabaseHelper personfile_databaseHelper = new DatabaseHelper(context);
        //Preferences person_preferences = personfile_databaseHelper.getPreferences(personname+".tdtx");
        personfile_databaseHelper.deletePreferences(personname+".tdtx");
        personfile_databaseHelper.removePreferencesFromCache(personname+".tdtx");
    }
}

  4.2 XML代码

   4.2.1 UI背景XML

    4.2.1.1 background_ability_main.xml

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="#8AFFFFFF"/>
</shape>

---

    4.2.1.2 background_bottombutton.xml

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

    <corners
        ohos:radius="50vp"/>
</shape>

---

    4.2.1.3 background_ddl1.xml

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

    <corners
        ohos:radius="50vp"/>
    <stroke
        ohos:width="3vp"
        ohos:color="#FF1952C3"/>
    <solid
        ohos:color="#48DDDBDB"/>
</shape>

---

    4.2.1.4 background_ddl2.xml

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

    <corners
        ohos:radius="10vp"/>
    <stroke
        ohos:width="5vp"
        ohos:color="#FFD1AEF1"/>
    <solid
        ohos:color="#48DDDBDB"/>
</shape>

---

    4.2.1.5 background_ddl3.xml

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

    <corners
        ohos:radius="50vp"/>
    <stroke
        ohos:width="3vp"
        ohos:color="#FFFFFFFF"/>
    <solid
        ohos:color="#FFFFFFFF"/>
</shape>

---

    4.2.1.6 background_edit_addbutton.xml

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

    <corners
        ohos:radius="100vp"/>

    <stroke
        ohos:width="2vp"
        ohos:color="#FF3FFF18"/>
    <solid
        ohos:color="#FFFFFFFF"/>
    
</shape>

---

    4.2.1.7 background_edit_addnametext.xml

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

    <corners
        ohos:radius="5vp"/>

    <stroke
        ohos:width="2vp"
        ohos:color="#FF18B6FF"/>
    <solid
        ohos:color="#FFFFFFFF"/>
    
</shape>

---

    4.2.1.8 background_edit_addtfd.xml

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

    <corners
        ohos:radius="20vp"/>

    <stroke
        ohos:width="2vp"
        ohos:color="#FFF5AC17"/>
    <solid
        ohos:color="#FFFFFFFF"/>
    
</shape>

---

    4.2.1.9 background_edit_topbut.xml

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

    <corners
        ohos:radius="3vp"/>

    <stroke
        ohos:width="2vp"
        ohos:color="#FF2E4658"/>
    <solid
        ohos:color="#FFFFFFFF"/>
    
</shape>

---

    4.2.1.10 background_listcontainer_item.xml

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

    <corners
        ohos:radius="10vp"/>
    <stroke
        ohos:width="3vp"
        ohos:color="#FFAECEF1"/>
    <solid
        ohos:color="#48FFFFFF"/>
</shape>

---

    4.2.1.11 background_people_listcontainer.xml

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

    <corners
        ohos:radius="10vp"/>

    <solid
        ohos:color="#48DDDBDB"/>
</shape>

---

    4.2.1.12 background_searchbutton.xml

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

    <corners
        ohos:radius="50vp"/>

    <solid
        ohos:color="#4836E5F3"/>
</shape>

---

    4.2.1.13 background_searchtextfield.xml

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

    <corners
        ohos:radius="50vp"/>

    <solid
        ohos:color="#48FDC42E"/>
</shape>

   4.2.2 主页面与子布局XML

    4.2.2.1 ability_config.xml

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

    ohos:orientation="vertical"
    ohos:alignment="horizontal_center">
    <RadioContainer
        ohos:id="$+id:config_radioContainer"
        ohos:height="200vp"
        ohos:width="match_parent"

        ohos:margin="10vp"

        ohos:orientation="vertical"
        ohos:alignment="horizontal_center">
        <RadioButton
            ohos:id="$+id:bottombar_default"
            ohos:height="0"
            ohos:weight="1"
            ohos:width="match_parent"


            ohos:text="底部导航栏：默认配色"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:multiple_lines="true"
            ohos:text_color_on="#FF0C7F9B"
            ohos:text_color_off="#FFD1C3EA"

            ohos:background_element="$graphic:background_edit_addtfd">
        </RadioButton>
        <RadioButton
            ohos:id="$+id:bottombar_dark"
            ohos:height="0"
            ohos:weight="1"
            ohos:width="match_parent"

            ohos:text="底部导航栏：黑暗配色"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:text_color_on="#FF0C7F9B"
            ohos:text_color_off="#FFD1C3EA"

            ohos:background_element="$graphic:background_edit_addtfd">
        </RadioButton>
        <RadioButton
            ohos:id="$+id:bottombar_light"
            ohos:height="0"
            ohos:weight="1"
            ohos:width="match_parent"

            ohos:text="底部导航栏：轻快配色"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:text_color_on="#FF0C7F9B"
            ohos:text_color_off="#FFD1C3EA"

            ohos:background_element="$graphic:background_edit_addtfd">
        </RadioButton>
        <RadioButton
            ohos:id="$+id:bottombar_simple"
            ohos:height="0"
            ohos:weight="1"
            ohos:width="match_parent"

            ohos:text="底部导航栏：简约配色"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:text_color_on="#FF0C7F9B"
            ohos:text_color_off="#FFD1C3EA"

            ohos:background_element="$graphic:background_edit_addtfd">
        </RadioButton>
    </RadioContainer>
</DirectionalLayout>

---

    4.2.2.2 ability_config_topsublayout.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:config_top_sublayout"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:top_margin="5vp"

    ohos:left_margin="20vp"
    ohos:right_margin="20vp"

    ohos:orientation="horizontal"
    ohos:alignment="vertical_center">
    <Button
        ohos:id="$+id:config_resetbut"
        ohos:height="match_parent"
        ohos:width="0"
        ohos:weight="1"

        ohos:text="默认"
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:text_color="#FF0E2A85"

        ohos:background_element="$graphic:background_edit_topbut">
    </Button>
    <Button
        ohos:id="$+id:config_okbut"
        ohos:height="match_parent"
        ohos:width="0"
        ohos:weight="1"

        ohos:left_margin="20vp"

        ohos:text="应用"
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:text_color="#FF0E2A85"

        ohos:background_element="$graphic:background_edit_topbut">
    </Button>
</DirectionalLayout>

---

    4.2.2.3 ability_edit.xml

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

    ohos:orientation="vertical"
    ohos:alignment="horizontal_center">
    <DirectionalLayout
        ohos:id="$+id:edit_name_dlyt"
        ohos:height="60vp"
        ohos:width="match_parent"

        ohos:margin="10vp"

        ohos:orientation="horizontal"
        ohos:alignment="vertical_center">
        <Text
            ohos:id="$+id:edit_nametext"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="3"


            ohos:text="待输入"
            ohos:text_alignment="center"

            ohos:multiple_lines="true"
            ohos:auto_font_size="true"
            ohos:text_color="#FF6D37D2"

            ohos:background_element="$graphic:background_edit_addnametext">
        </Text>
        <TextField
            ohos:id="$+id:edit_nametfd"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="7"


            ohos:hint="姓名"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:hint_color="gray"

            ohos:background_element="$graphic:background_edit_addtfd">
        </TextField>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:id="$+id:edit_tel_dlyt"
        ohos:height="40vp"
        ohos:width="match_parent"

        ohos:margin="5vp"

        ohos:orientation="horizontal"
        ohos:alignment="vertical_center">
        <Button
            ohos:id="$+id:edit_addtel_but"
            ohos:height="match_parent"
            ohos:width="40vp"


            ohos:text="+"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:text_color="green"

            ohos:background_element="$graphic:background_edit_addbutton">
        </Button>
        <TextField
            ohos:id="$+id:edit_teltfd"
            ohos:height="match_parent"
            ohos:width="match_parent"


            ohos:hint="电话"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:hint_color="gray"

            ohos:background_element="$graphic:background_edit_addtfd">
        </TextField>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:id="$+id:edit_email_dlyt"
        ohos:height="40vp"
        ohos:width="match_parent"

        ohos:margin="5vp"

        ohos:orientation="horizontal"
        ohos:alignment="vertical_center">
        <Button
            ohos:id="$+id:edit_addemail_but"
            ohos:height="match_parent"
            ohos:width="40vp"


            ohos:text="+"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:text_color="green"

            ohos:background_element="$graphic:background_edit_addbutton">
        </Button>
        <TextField
            ohos:id="$+id:edit_emailtfd"
            ohos:height="match_parent"
            ohos:width="match_parent"


            ohos:hint="邮件"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:hint_color="gray"

            ohos:background_element="$graphic:background_edit_addtfd">
        </TextField>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:id="$+id:edit_work_dlyt"
        ohos:height="40vp"
        ohos:width="match_parent"

        ohos:margin="5vp"

        ohos:orientation="horizontal"
        ohos:alignment="vertical_center">
        <Button
            ohos:id="$+id:edit_addwork_but"
            ohos:height="match_parent"
            ohos:width="40vp"


            ohos:text="+"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:text_color="green"

            ohos:background_element="$graphic:background_edit_addbutton">
        </Button>
        <TextField
            ohos:id="$+id:edit_worktfd"
            ohos:height="match_parent"
            ohos:width="match_parent"


            ohos:hint="工作单位"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:hint_color="gray"

            ohos:background_element="$graphic:background_edit_addtfd">
        </TextField>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:id="$+id:edit_address_dlyt"
        ohos:height="40vp"
        ohos:width="match_parent"

        ohos:margin="5vp"

        ohos:orientation="horizontal"
        ohos:alignment="vertical_center">
        <Button
            ohos:id="$+id:edit_addaddress_but"
            ohos:height="match_parent"
            ohos:width="40vp"


            ohos:text="+"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:text_color="green"

            ohos:background_element="$graphic:background_edit_addbutton">
        </Button>
        <TextField
            ohos:id="$+id:edit_addresstfd"
            ohos:height="match_parent"
            ohos:width="match_parent"


            ohos:hint="地址"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:hint_color="gray"

            ohos:background_element="$graphic:background_edit_addtfd">
        </TextField>
    </DirectionalLayout>
</DirectionalLayout>

---

    4.2.2.4 ability_edit_addresssublayout.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:edit_addressanother_rootdl"
    ohos:height="40vp"
    ohos:width="match_parent"

    ohos:margin="5vp"

    ohos:orientation="horizontal"
    ohos:alignment="vertical_center">

    <Button
        ohos:id="$+id:edit_addressanother_addaddress_but"
        ohos:height="match_parent"
        ohos:width="40vp"

        ohos:text=""
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:text_color="green">
    </Button>
    <TextField
        ohos:id="$+id:edit_addressanother_addresstfd"
        ohos:height="match_parent"
        ohos:width="match_parent"


        ohos:hint="其他地址"
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:hint_color="gray"

        ohos:background_element="$graphic:background_edit_addtfd">
    </TextField>
</DirectionalLayout>

---

    4.2.2.5 ability_edit_emailsublayout.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:edit_emailanother_rootdl"
    ohos:height="40vp"
    ohos:width="match_parent"

    ohos:margin="5vp"

    ohos:orientation="horizontal"
    ohos:alignment="vertical_center">

    <Button
        ohos:id="$+id:edit_emailanother_addemail_but"
        ohos:height="match_parent"
        ohos:width="40vp"

        ohos:text=""
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:text_color="green">
    </Button>
    <TextField
        ohos:id="$+id:edit_emailanother_emailtfd"
        ohos:height="match_parent"
        ohos:width="match_parent"


        ohos:hint="其他邮箱"
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:hint_color="gray"

        ohos:background_element="$graphic:background_edit_addtfd">
    </TextField>
</DirectionalLayout>

---

    4.2.2.6 ability_edit_telsublayout.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:edit_telanother_rootdl"
    ohos:height="40vp"
    ohos:width="match_parent"

    ohos:margin="5vp"

    ohos:orientation="horizontal"
    ohos:alignment="vertical_center">

    <Button
        ohos:id="$+id:edit_telanother_addtel_but"
        ohos:height="match_parent"
        ohos:width="40vp"

        ohos:text=""
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:text_color="green">
    </Button>
    <TextField
        ohos:id="$+id:edit_telanother_teltfd"
        ohos:height="match_parent"
        ohos:width="match_parent"


        ohos:hint="座机"
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:hint_color="gray"

        ohos:background_element="$graphic:background_edit_addtfd">
    </TextField>
</DirectionalLayout>

---

    4.2.2.7 ability_edit_topsublayout.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:edit_top_sublayout"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:top_margin="5vp"

    ohos:left_margin="20vp"
    ohos:right_margin="20vp"

    ohos:orientation="horizontal"
    ohos:alignment="vertical_center">
    <Button
        ohos:id="$+id:edit_deletebut"
        ohos:height="match_parent"
        ohos:width="0"
        ohos:weight="1"

        ohos:right_margin="20vp"

        ohos:text="清空"
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:text_color="#FF0E2A85"

        ohos:background_element="$graphic:background_edit_topbut">
    </Button>
    <Button
        ohos:id="$+id:edit_resetbut"
        ohos:height="match_parent"
        ohos:width="0"
        ohos:weight="1"

        ohos:text="重置"
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:text_color="#FF0E2A85"

        ohos:background_element="$graphic:background_edit_topbut">
    </Button>
    <Button
        ohos:id="$+id:edit_okbut"
        ohos:height="match_parent"
        ohos:width="0"
        ohos:weight="1"

        ohos:left_margin="20vp"

        ohos:text="确认"
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:text_color="#FF0E2A85"

        ohos:background_element="$graphic:background_edit_topbut">
    </Button>
</DirectionalLayout>

---

    4.2.2.8 ability_edit_worksublayout.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:edit_workanother_rootdl"
    ohos:height="40vp"
    ohos:width="match_parent"

    ohos:margin="5vp"

    ohos:orientation="horizontal"
    ohos:alignment="vertical_center">

    <Button
        ohos:id="$+id:edit_workanother_addwork_but"
        ohos:height="match_parent"
        ohos:width="40vp"

        ohos:text=""
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:text_color="green">
    </Button>
    <TextField
        ohos:id="$+id:edit_workanother_worktfd"
        ohos:height="match_parent"
        ohos:width="match_parent"


        ohos:hint="其他单位"
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:hint_color="gray"

        ohos:background_element="$graphic:background_edit_addtfd">
    </TextField>
</DirectionalLayout>

---

    4.2.2.9 ability_listcontainer_itemlayout

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:item_rootdl"
    ohos:height="35vp"
    ohos:width="match_parent"
    ohos:orientation="horizontal"
    ohos:background_element="$graphic:background_listcontainer_item">
    <Text
        ohos:id="$+id:item_text"
        ohos:height="match_parent"
        ohos:width="match_parent"

        ohos:text="测试"
        ohos:text_size="20vp"
        ohos:text_alignment="vertical_center"
        ohos:text_color="black">
    </Text>

</DirectionalLayout>

---

    4.2.2.10 ability_main.xml

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

    ohos:orientation="vertical"
    ohos:alignment="horizontal_center"

    ohos:background_element="$graphic:background_ability_main">
    <DirectionalLayout
        ohos:id="$+id:main_rootdl_ddl1"
        ohos:height="0"
        ohos:weight="0.6"
        ohos:width="match_parent"


        ohos:orientation="vertical"
        ohos:alignment="horizontal_center">
    </DirectionalLayout>

    <DirectionalLayout
        ohos:id="$+id:main_rootdl_ddl2"
        ohos:height="0"
        ohos:weight="8.8"
        ohos:width="match_parent"

        ohos:top_margin="5vp"

        ohos:background_element="$graphic:background_ddl2">
    </DirectionalLayout>

    <DirectionalLayout
        ohos:id="$+id:main_rootdl_ddl3"
        ohos:height="0"
        ohos:weight="0.6"
        ohos:width="match_parent"

        ohos:top_margin="5vp"
        ohos:bottom_margin="5vp"
        ohos:left_margin="45vp"
        ohos:right_margin="45vp"

        ohos:orientation="horizontal"
        ohos:alignment="vertical_center"

        ohos:background_element="$graphic:background_ddl3">
        <Button
            ohos:id="$+id:ddl3_butpeople"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"

            ohos:margin="3vp"

            ohos:text="$string:people"
            ohos:text_alignment="center"
            ohos:text_size="25vp"
            ohos:text_color="#FFB35353"

            ohos:background_element="$graphic:background_bottombutton">
        </Button>
        <Button
            ohos:id="$+id:ddl3_butedit"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"

            ohos:margin="3vp"

            ohos:text="$string:edit"
            ohos:text_alignment="center"
            ohos:text_size="25vp"
            ohos:text_color="#FF1086CA"

            ohos:background_element="$graphic:background_bottombutton">
        </Button>
        <Button
            ohos:id="$+id:ddl3_butconfig"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"

            ohos:margin="3vp"

            ohos:text="$string:config"
            ohos:text_alignment="center"
            ohos:text_size="25vp"
            ohos:text_color="#FF79086A"

            ohos:background_element="$graphic:background_bottombutton">
        </Button>
    </DirectionalLayout>
</DirectionalLayout>

---

    4.2.2.11 ability_people_listcontainerlayout.xml

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

    ohos:orientation="vertical"
    ohos:alignment="horizontal_center"

    ohos:background_element="$graphic:background_people_listcontainer">
    <ListContainer
        ohos:id="$+id:people_listcontainer"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ohos:rebound_effect="true">
    </ListContainer>
</DirectionalLayout>

---

    4.2.2.12 ability_persondetail.xml

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

    ohos:orientation="vertical"
    ohos:alignment="horizontal_center"

    ohos:background_element="$graphic:background_ability_main">
    <DirectionalLayout
        ohos:id="$+id:persondetail_rootdl_ddl1"
        ohos:height="0"
        ohos:weight="0.6"
        ohos:width="match_parent"

        ohos:top_margin="5vp"

        ohos:left_margin="20vp"
        ohos:right_margin="20vp"

        ohos:orientation="horizontal"
        ohos:alignment="vertical_center">
        <Button
            ohos:id="$+id:persondetail_backbut"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"

            ohos:right_margin="20vp"

            ohos:text="$string:back"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:text_color="#FF0E2A85"

            ohos:background_element="$graphic:background_edit_topbut">
        </Button>
        <Button
            ohos:id="$+id:persondetail_nobut"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"

            ohos:text="取消"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:text_color="#FF0E2A85"

            ohos:background_element="$graphic:background_edit_topbut">
        </Button>
        <Button
            ohos:id="$+id:persondetail_okeditbut"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"

            ohos:left_margin="20vp"

            ohos:text="编辑"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:text_color="#FF0E2A85"

            ohos:background_element="$graphic:background_edit_topbut">
        </Button>
    </DirectionalLayout>

    <DirectionalLayout
        ohos:id="$+id:persondetail_rootdl_ddl2"
        ohos:height="0"
        ohos:weight="8.8"
        ohos:width="match_parent"

        ohos:top_margin="5vp"

        ohos:background_element="$graphic:background_ddl2">
        <DirectionalLayout
            ohos:id="$+id:persondetail_name_dlyt"
            ohos:height="60vp"
            ohos:width="match_parent"

            ohos:margin="10vp"

            ohos:orientation="horizontal"
            ohos:alignment="vertical_center">
            <Text
                ohos:id="$+id:persondetail_nametext"
                ohos:height="match_parent"
                ohos:width="0"
                ohos:weight="3"


                ohos:text="error"
                ohos:text_alignment="center"

                ohos:multiple_lines="true"
                ohos:auto_font_size="true"
                ohos:text_color="#FF6D37D2"

                ohos:background_element="$graphic:background_edit_addnametext">
            </Text>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:persondetail_tel_dlyt"
            ohos:height="40vp"
            ohos:width="match_parent"

            ohos:margin="5vp"

            ohos:orientation="horizontal"
            ohos:alignment="vertical_center">
            <Text
                ohos:id="$+id:persondetail_teltext"
                ohos:height="match_parent"
                ohos:width="60vp"


                ohos:text="电话"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:text_color="green"

                ohos:background_element="$graphic:background_edit_addbutton">
            </Text>
            <TextField
                ohos:id="$+id:persondetail_teltfd"
                ohos:height="match_parent"
                ohos:width="match_parent"


                ohos:hint="电话"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:hint_color="gray"

                ohos:background_element="$graphic:background_edit_addtfd">
            </TextField>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:persondetail_tel_dlyt2"
            ohos:height="40vp"
            ohos:width="match_parent"

            ohos:margin="5vp"

            ohos:orientation="horizontal"
            ohos:alignment="vertical_center">
            <Text
                ohos:id="$+id:persondetail_teltext2"
                ohos:height="match_parent"
                ohos:width="60vp"


                ohos:text="  "
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:text_color="green">
            </Text>
            <TextField
                ohos:id="$+id:persondetail_teltfd2"
                ohos:height="match_parent"
                ohos:width="match_parent"


                ohos:hint="座机"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:hint_color="gray"

                ohos:background_element="$graphic:background_edit_addtfd">
            </TextField>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:persondetail_email_dlyt"
            ohos:height="40vp"
            ohos:width="match_parent"

            ohos:margin="5vp"

            ohos:orientation="horizontal"
            ohos:alignment="vertical_center">
            <Text
                ohos:id="$+id:persondetail_addemail_but"
                ohos:height="match_parent"
                ohos:width="60vp"


                ohos:text="邮件"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:text_color="green"

                ohos:background_element="$graphic:background_edit_addbutton">
            </Text>
            <TextField
                ohos:id="$+id:persondetail_emailtfd"
                ohos:height="match_parent"
                ohos:width="match_parent"


                ohos:hint="邮件"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:hint_color="gray"

                ohos:background_element="$graphic:background_edit_addtfd">
            </TextField>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:persondetail_email_dlyt2"
            ohos:height="40vp"
            ohos:width="match_parent"

            ohos:margin="5vp"

            ohos:orientation="horizontal"
            ohos:alignment="vertical_center">
            <Text
                ohos:id="$+id:persondetail_addemail_but2"
                ohos:height="match_parent"
                ohos:width="60vp"


                ohos:text="  "
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:text_color="green">
            </Text>
            <TextField
                ohos:id="$+id:persondetail_emailtfd2"
                ohos:height="match_parent"
                ohos:width="match_parent"


                ohos:hint="其他邮箱"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:hint_color="gray"

                ohos:background_element="$graphic:background_edit_addtfd">
            </TextField>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:persondetail_work_dlyt"
            ohos:height="40vp"
            ohos:width="match_parent"

            ohos:margin="5vp"

            ohos:orientation="horizontal"
            ohos:alignment="vertical_center">
            <Text
                ohos:id="$+id:persondetail_addwork_but"
                ohos:height="match_parent"
                ohos:width="60vp"


                ohos:text="单位"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:text_color="green"

                ohos:background_element="$graphic:background_edit_addbutton">
            </Text>
            <TextField
                ohos:id="$+id:persondetail_worktfd"
                ohos:height="match_parent"
                ohos:width="match_parent"


                ohos:hint="工作单位"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:hint_color="gray"

                ohos:background_element="$graphic:background_edit_addtfd">
            </TextField>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:persondetail_work_dlyt2"
            ohos:height="40vp"
            ohos:width="match_parent"

            ohos:margin="5vp"

            ohos:orientation="horizontal"
            ohos:alignment="vertical_center">
            <Text
                ohos:id="$+id:persondetail_addwork_but2"
                ohos:height="match_parent"
                ohos:width="60vp"


                ohos:text="  "
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:text_color="green">
            </Text>
            <TextField
                ohos:id="$+id:persondetail_worktfd2"
                ohos:height="match_parent"
                ohos:width="match_parent"


                ohos:hint="其他单位"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:hint_color="gray"

                ohos:background_element="$graphic:background_edit_addtfd">
            </TextField>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:persondetail_address_dlyt"
            ohos:height="40vp"
            ohos:width="match_parent"

            ohos:margin="5vp"

            ohos:orientation="horizontal"
            ohos:alignment="vertical_center">
            <Button
                ohos:id="$+id:persondetail_addaddress_but"
                ohos:height="match_parent"
                ohos:width="60vp"


                ohos:text="地址"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:text_color="green"

                ohos:background_element="$graphic:background_edit_addbutton">
            </Button>
            <TextField
                ohos:id="$+id:persondetail_addresstfd"
                ohos:height="match_parent"
                ohos:width="match_parent"


                ohos:hint="地址"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:hint_color="gray"

                ohos:background_element="$graphic:background_edit_addtfd">
            </TextField>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:persondetail_address_dlyt2"
            ohos:height="40vp"
            ohos:width="match_parent"

            ohos:margin="5vp"

            ohos:orientation="horizontal"
            ohos:alignment="vertical_center">
            <Button
                ohos:id="$+id:persondetail_addaddress_but2"
                ohos:height="match_parent"
                ohos:width="60vp"


                ohos:text="  "
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:text_color="green">
            </Button>
            <TextField
                ohos:id="$+id:persondetail_addresstfd2"
                ohos:height="match_parent"
                ohos:width="match_parent"


                ohos:hint="其他地址"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:hint_color="gray"

                ohos:background_element="$graphic:background_edit_addtfd">
            </TextField>
        </DirectionalLayout>
    </DirectionalLayout>

    <DirectionalLayout
        ohos:id="$+id:persondetail_rootdl_ddl3"
        ohos:height="0"
        ohos:weight="0.6"
        ohos:width="match_parent"

        ohos:top_margin="5vp"
        ohos:bottom_margin="5vp"
        ohos:left_margin="45vp"
        ohos:right_margin="45vp"

        ohos:orientation="horizontal"
        ohos:alignment="vertical_center">
    </DirectionalLayout>
</DirectionalLayout>

---

    4.2.2.13 ability_search_topsublayout.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:search_top_sublayout"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:top_margin="5vp"

    ohos:left_margin="20vp"
    ohos:right_margin="20vp"

    ohos:orientation="horizontal"
    ohos:alignment="vertical_center"

    ohos:background_element="$graphic:background_ddl1">
    <TextField
        ohos:id="$+id:search_tfd"
        ohos:height="match_parent"
        ohos:width="0"
        ohos:weight="8"

        ohos:hint="请输入联系人......"
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:hint_color="gray"
        ohos:background_element="$graphic:background_searchtextfield">
    </TextField>
    <Button
        ohos:id="$+id:search_but"
        ohos:height="match_parent"
        ohos:width="0"
        ohos:weight="2"

        ohos:text="查找"
        ohos:text_alignment="center"
        ohos:text_size="20vp"
        ohos:text_color="#FF186992"

        ohos:background_element="$graphic:background_searchbutton">
    </Button>
</DirectionalLayout>

5. app截图（远程模拟器运行）

  5.1 人员页面

  5.2 联系人详情页面

点击“编辑”，会进入编辑状态，该按钮变为“保存”按钮

  5.3 编辑页面

点击其中某个“+”按钮，会新增一行输入框，点击“-”会将新增的输入框减去

点击“清空”会将输入框内容清空，同时由于姓名为输入，则隐藏“确认”按钮

点击“重置”，会将所有的展开行都减去，变回初始状态

  5.4 设置页面

点击某个选项后，再点击“应用”，会执行选项

  5.5 删除联系人gif图（长按删除）

  5.6 人员搜索gif图

6. app运行视频（远程真机调试运行）

基于ListContainer通讯录管理系统/电话本