HarmonyOS application development -- General app interface framework AppGeneralFrameWork[app general framework] [API V6]

Posted by cl_stef on Sun, 27 Feb 2022 15:30:59 +0100

1. Name

  • The content of this column explains again: the whole column is in the field of Hongmeng application development, and each article is a complete project.
  • This column does not cover the basic course of HarmonyOS application development. There are many high-quality articles on CSDN for reference.
  • This project is the implementation of the overall interface framework of a more general app, which is named: app general framework and AppGeneralFrameWork.
  • If novice readers have read the previous articles, this article is a more framed thing for your reference.
  • The project has been uploaded to Gitee warehouse: AppGeneralFrameWork
  • app Icon:

2. Key skills of APP implementation

Interpretation of the overall framework:

  • The whole page is divided into three parts: the upper, middle and lower parts. In addition to the navigation bar at the bottom of the lower part, the upper and middle parts need to use the technology of dynamically loading XML, and load the corresponding components according to switching different bottom tab labels.
  • Bottom navigation bar: adopts TabList component.
  • Home page: a search bar in the upper part, a TabList in the middle part and a two-way binding component of PageSlider. Each page of PagesSlider has been pre installed with a DirectionalLayout, which can load different components to display content according to different needs of each page. (as described in the previous article, how to load different component contents for PageSlider)
  • List: a ListContainer component is used to display the list data. A general ListContainer initialization function is set, and the general version is adopted here.
  • Authoring: use TextField component, and set a "Cancel" and a "save" button.
  • Message: three Image components are used to represent "like", "comment" and "collection". There is a general version of ListContainer below it. According to the three buttons clicked, load the corresponding data source, and then use notifyDataChanged() to refresh the displayed content.
  • My: an Image component displays the user's Avatar, and a parallel Text displays the user's name. Under it, it adopts the form of 16 squares. Each square has been pre installed with DirectionalLayout, and different component contents can be placed in the square as needed.

3. java source code

  3.1 FloatsOfColorMatrix.java

package com.tdtxdcxm.appgeneralframework.colormatrixfloats;

public class FloatsOfColorMatrix {
    public static final float[] floats1 = {
            0,0,0,0,255,
            0,0,0,0,250,
            0,0,0,0,240,
            0,0,0,0,100
    };
    public static final float[] floats2 = {
            0,0,0,0,255,
            0,0,0,0,218,
            0,0,0,0,185,
            0,0,0,0,100
    };
    public static final float[] floats3 = {
            0,0,0,0,255,
            0,0,0,0,250,
            0,0,0,0,205,
            0,0,0,0,100
    };
    public static final float[] floats4 = {
            0,0,0,0,240,
            0,0,0,0,255,
            0,0,0,0,240,
            0,0,0,0,100
    };
    public static final float[] floats5 = {
            0,0,0,0,230,
            0,0,0,0,230,
            0,0,0,0,250,
            0,0,0,0,100
    };
    public static final float[] floats6 = {
            0,0,0,0,255,
            0,0,0,0,165,
            0,0,0,0,79,
            0,0,0,0,100
    };
    public static final float[] floats7 = {
            0,0,0,0,64,
            0,0,0,0,224,
            0,0,0,0,208,
            0,0,0,0,100
    };

    public static final float[][] floats = {floats1,floats2,floats3,floats4,floats5,floats6,floats7};
}

  3.2 CommonListContainerItem.java

package com.tdtxdcxm.appgeneralframework.item;


public class CommonListContainerItem{
    private String information = "";

    public CommonListContainerItem(String information) {
        this.information = information;
    }

    public void setInformation(String information) {
        this.information = information;
    }

    public String getInformation() {
        return information;
    }

    @Override
    public String toString() {
        return "CommonListContainerItem{" + "information='" + information + '\'' + '}';
    }
}

  3.3 CommonListContainerProvider.java

package com.tdtxdcxm.appgeneralframework.provider;

import com.tdtxdcxm.appgeneralframework.ResourceTable;
import com.tdtxdcxm.appgeneralframework.item.CommonListContainerItem;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;

import java.util.ArrayList;


public class CommonListContainerProvider extends BaseItemProvider{
    public static CommonListContainerProvider commonListContainerProvider = null;//It is used to record the object reference that has been new, so as to call notifyDataChanged();

    private ArrayList<CommonListContainerItem> commonlistcontaineritem_list;
    private AbilitySlice abilitySlice;

    public CommonListContainerProvider(ArrayList<CommonListContainerItem> commonlistcontaineritem_list,AbilitySlice abilitySlice,String providername) {
        this.commonlistcontaineritem_list = commonlistcontaineritem_list;
        this.abilitySlice = abilitySlice;
        CommonListContainerProvider.commonListContainerProvider = this;
    }

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

    @Override
    public Object getItem(int i) {
        if(commonlistcontaineritem_list == null || (i < 0 || i >= commonlistcontaineritem_list.size())){
            return null;
        }
        return commonlistcontaineritem_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(abilitySlice).parse(ResourceTable.Layout_common_listcontainer_item,null,false);
        }
        else{
            cmpt = component;
        }

        CommonListContainerItem commonListContainerItem = commonlistcontaineritem_list.get(i);
        Text common_listcontainer_item_text = (Text) cmpt.findComponentById(ResourceTable.Id_common_listcontainer_item_text);
        common_listcontainer_item_text.setText(commonListContainerItem.getInformation());

        return cmpt;
    }
}

  3.4 FirstCenterPgSdProvider.java

package com.tdtxdcxm.appgeneralframework.provider;

import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.PageSliderProvider;

import java.util.ArrayList;

public class FirstCenterPgSdProvider extends PageSliderProvider {
    public static FirstCenterPgSdProvider firstCenterPgSdProvider = null;
    private ArrayList<DirectionalLayout> firstcenter_pagesliderslist = new ArrayList<>();

    public FirstCenterPgSdProvider(ArrayList<DirectionalLayout> firstcenter_pagesliderslist) {
        this.firstcenter_pagesliderslist = firstcenter_pagesliderslist;
        FirstCenterPgSdProvider.firstCenterPgSdProvider = this;
    }

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

    @Override
    public Object createPageInContainer(ComponentContainer componentContainer, int i) {
        DirectionalLayout directionalLayout = firstcenter_pagesliderslist.get(i);
        componentContainer.addComponent(directionalLayout);

        return directionalLayout;
    }

    @Override
    public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
        componentContainer.removeComponent((Component) o);
    }

    @Override
    public boolean isPageMatchToObject(Component component, Object o) {
        return true;
    }
}

  3.5 MainAbilitySlice.java

package com.tdtxdcxm.appgeneralframework.slice;

import com.tdtxdcxm.appgeneralframework.ResourceTable;
import com.tdtxdcxm.appgeneralframework.colormatrixfloats.FloatsOfColorMatrix;
import com.tdtxdcxm.appgeneralframework.item.CommonListContainerItem;
import com.tdtxdcxm.appgeneralframework.provider.CommonListContainerProvider;
import com.tdtxdcxm.appgeneralframework.provider.FirstCenterPgSdProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.render.ColorMatrix;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;

import java.util.ArrayList;



public class MainAbilitySlice extends AbilitySlice {
    private String[] bottomnames = {"home page","List","a literary creation","news","my"};
    private String[] firstcenter_names = {"HarmonyOS","c language","java","javascript","Data structure and algorithm","linux","python"};

    private DirectionalLayout approotdl_topdl,approotdl_centerdl,approotdl_bottomdl;

    private TabList firstpage_center_rootdl_tablist;
    private TabList approotdl_bottomdl_tablist;

    private PageSlider firstpage_center_rootdl_PageSlider;

    private ListContainer dtpage_center_rootdl_listcontainer,messagepage_center_rootdl_listcontainer;

    private final ArrayList<TabList.Tab> bottomtabslist = new ArrayList<>();
    private final ArrayList<TabList.Tab> firstcenter_tabslist = new ArrayList<>();

    private final ArrayList<DirectionalLayout> firstcenter_pagesliderslist = new ArrayList<>();

    private final ArrayList<CommonListContainerItem> commonlistcontaineritem_list = new ArrayList<>();//List of common listcontainer data sources

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

    public void initCommonListContainer(ListContainer commonlistContainer){
        commonlistContainer.setItemProvider(new CommonListContainerProvider(commonlistcontaineritem_list,this, "dt_listcontainer"));
        commonlistContainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
            @Override
            public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
                toastShow("You've clicked on page"+i+"One! Ready to jump to the details page!");
            }
        });
    }


    public void installSearchBar(){
        if(approotdl_topdl == null){
            return;
        }
        if(approotdl_topdl.getChildCount() != 0){
            approotdl_topdl.removeAllComponents();
        }
        DirectionalLayout searchbar_rootdl = (DirectionalLayout) LayoutScatter.getInstance(this.getContext()).parse(ResourceTable.Layout_searchbar,null,true);
        TextField searchtextField = (TextField) searchbar_rootdl.getComponentAt(0);
        Image searchimage = (Image) searchbar_rootdl.getComponentAt(1);

        searchtextField.addTextObserver(new Text.TextObserver() {
            @Override
            public void onTextUpdated(String s, int i, int i1, int i2) {

            }
        });

        searchimage.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                searchtextField.clearFocus();
            }
        });

        approotdl_topdl.addComponent(searchbar_rootdl);
    }
    public void installTitleBar(String name){
        if(approotdl_topdl == null){
            return;
        }
        if(approotdl_topdl.getChildCount() != 0){
            approotdl_topdl.removeAllComponents();
        }
        DirectionalLayout titlebar_rootdl = (DirectionalLayout) LayoutScatter.getInstance(this.getContext()).parse(ResourceTable.Layout_titlebar,null,true);
        ((Text) titlebar_rootdl.getComponentAt(0)).setText(name);
        approotdl_topdl.addComponent(titlebar_rootdl);
    }

    public void addTabToTabList(TabList tabList,String name,String tablistname){
        if(tabList == null || name.equals("")){
            return;
        }

        TabList.Tab tab = tabList.new Tab(this.getContext());
        tab.setText(name);
        tabList.addTab(tab);

        if(tablistname.equals("bottomtablist")){
            bottomtabslist.add(tab);
        }
        if(tablistname.equals("firstcenter_tabslist")){
            firstcenter_tabslist.add(tab);
        }
    }

    public void initFirstCenterTabList(TabList tabList,String[] tabnames,String tablistname){
        if(tabList == null){
            return;
        }
        firstcenter_tabslist.clear();
        tabList.removeAllComponents();
        for(int i = 0;i < tabnames.length;i++){
            addTabToTabList(tabList,tabnames[i],tablistname);
        }

        tabList.setName(tablistname);


        tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {
                firstpage_center_rootdl_PageSlider.setCurrentPage(tabList.getSelectedTabIndex());
            }

            @Override
            public void onUnselected(TabList.Tab tab) {
                DirectionalLayout directionalLayout = (DirectionalLayout)  approotdl_topdl.getComponentAt(0);
                TextField searchtextField = (TextField) directionalLayout.getComponentAt(0);
                searchtextField.clearFocus();
            }

            @Override
            public void onReselected(TabList.Tab tab) {
                //Tips:
                //Here, when a tab is repeatedly selected, operations such as refreshing the page can be performed
                DirectionalLayout directionalLayout = (DirectionalLayout) approotdl_topdl.getComponentAt(0);
                TextField searchtextField = (TextField) directionalLayout.getComponentAt(0);
                searchtextField.clearFocus();
            }
        });
        if(tabList.getTabCount() != 0){
            tabList.selectTabAt(0);
        }
    }
    public void initBottomTabList(TabList tabList,String[] tabnames,String tablistname){
        if(tabList == null){
            return;
        }
        for(int i = 0;i < tabnames.length;i++){
            addTabToTabList(tabList,tabnames[i],tablistname);
        }

        tabList.setName(tablistname);

        tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {

                if (tabList.getName().equals(tablistname)) {
                    if (tab.getText().equals("home page")) {
                        installSearchBar();
                        installCenterSubLayout(0);
                        initFirstCenterPageSlider(firstpage_center_rootdl_PageSlider);
                        initFirstCenterTabList(firstpage_center_rootdl_tablist, firstcenter_names, "firstcenter_tabslist");
                        return;
                    }

                    int i = tabList.getSelectedTabIndex();//Get the currently selected tab location
                    installTitleBar(bottomtabslist.get(i).getText());//Set the text of the tab to the title of the page
                    installCenterSubLayout(i);
                }
            }

            @Override
            public void onUnselected(TabList.Tab tab) {

            }

            @Override
            public void onReselected(TabList.Tab tab) {
                //Tips:
                //Here, when a tab is repeatedly selected, operations such as refreshing the page can be performed
            }
        });
        if(tabList.getTabCount() != 0){
            tabList.selectTabAt(0);
        }
    }

    public void addPagesToPageSliderList(){
        firstcenter_pagesliderslist.clear();
        for(int i = 0;i < firstcenter_names.length;i++){
            DirectionalLayout directionalLayout = (DirectionalLayout) LayoutScatter.getInstance(this.getContext()).parse(ResourceTable.Layout_pageslider_directionallayout,null,false);
            ColorMatrix colorMatrix = new ColorMatrix();
            colorMatrix.setMatrix(FloatsOfColorMatrix.floats[i]);
            directionalLayout.getBackgroundElement().setColorMatrix(colorMatrix);

            firstcenter_pagesliderslist.add(directionalLayout);
        }
    }

    public void initFirstCenterPageSlider(PageSlider pageSlider){
        if(pageSlider == null){
            return;
        }
        addPagesToPageSliderList();

        pageSlider.setPageSwitchTime(50);
        pageSlider.setSlidingPossible(true);
        pageSlider.setReboundEffect(true);

        pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {
            @Override
            public void onPageSliding(int i, float v, int i1) {

            }

            @Override
            public void onPageSlideStateChanged(int i) {

            }

            @Override
            public void onPageChosen(int i) {
                firstpage_center_rootdl_tablist.selectTabAt(i);
            }
        });
        pageSlider.setProvider(new FirstCenterPgSdProvider(firstcenter_pagesliderslist));
    }

    public void installCenterSubLayout(int n){
        //0-homepage, 1-dynamic, 2-creative, 3-news, 4-my
        if(approotdl_centerdl == null){
            return;
        }
        if(approotdl_centerdl.getChildCount() != 0){
            approotdl_centerdl.removeAllComponents();
        }
        approotdl_centerdl.removeAllComponents();
        switch(n){
            case 0:
                DirectionalLayout firstpage_center_rootdl = (DirectionalLayout) LayoutScatter.getInstance(this.getContext()).parse(ResourceTable.Layout_firstpage_center,null,false);
                firstpage_center_rootdl_tablist = (TabList) firstpage_center_rootdl.findComponentById(ResourceTable.Id_firstpage_center_rootdl_tablist);
                firstpage_center_rootdl_PageSlider = (PageSlider) firstpage_center_rootdl.findComponentById(ResourceTable.Id_firstpage_center_rootdl_PageSlider);
                approotdl_centerdl.addComponent(firstpage_center_rootdl);
                break;
            case 1:
                DirectionalLayout dtpage_center_rootdl = (DirectionalLayout) LayoutScatter.getInstance(this.getContext()).parse(ResourceTable.Layout_dtpage_center,null,false);
                dtpage_center_rootdl_listcontainer = (ListContainer) dtpage_center_rootdl.findComponentById(ResourceTable.Id_dtpage_center_rootdl_listcontainer);
                /************************************Sample data fill***************************/
                commonlistcontaineritem_list.clear();
                for(int i = 0;i < 13;i++){
                    commonlistcontaineritem_list.add(new CommonListContainerItem("Ranked No"+i+"Bar!"));
                }
                initCommonListContainer(dtpage_center_rootdl_listcontainer);

                /************************************Sample data fill***************************/
                approotdl_centerdl.addComponent(dtpage_center_rootdl);
                break;
            case 2:
                DirectionalLayout writepage_center_rootdl = (DirectionalLayout) LayoutScatter.getInstance(this.getContext()).parse(ResourceTable.Layout_writepage_center,null,false);
                Button writepage_center_topddl_nobut,writepage_center_topddl_gobut;
                TextField writepage_center_rootdl_tfd;

                writepage_center_topddl_nobut = (Button) writepage_center_rootdl.findComponentById(ResourceTable.Id_writepage_center_topddl_nobut);
                writepage_center_topddl_gobut = (Button) writepage_center_rootdl.findComponentById(ResourceTable.Id_writepage_center_topddl_gobut);
                writepage_center_rootdl_tfd = (TextField) writepage_center_rootdl.findComponentById(ResourceTable.Id_writepage_center_rootdl_tfd);

                writepage_center_topddl_nobut.setClickedListener(new Component.ClickedListener() {
                    @Override
                    public void onClick(Component component) {
                        writepage_center_rootdl_tfd.setText("");
                        writepage_center_rootdl_tfd.clearFocus();
                        toastShow("Cancel publishing!");
                        approotdl_bottomdl_tablist.selectTabAt(0);
                    }
                });
                writepage_center_topddl_gobut.setClickedListener(new Component.ClickedListener() {
                    @Override
                    public void onClick(Component component) {
                        if(writepage_center_rootdl_tfd.getText().equals("")){
                            toastShow("Content cannot be empty!");
                            writepage_center_rootdl_tfd.clearFocus();
                            return;
                        }
                        writepage_center_rootdl_tfd.setText("");
                        writepage_center_rootdl_tfd.clearFocus();
                        toastShow("Published successfully!");
                        approotdl_bottomdl_tablist.selectTabAt(0);
                    }
                });

                writepage_center_rootdl_tfd.addTextObserver(new Text.TextObserver() {
                    @Override
                    public void onTextUpdated(String s, int i, int i1, int i2) {

                    }
                });
                approotdl_centerdl.addComponent(writepage_center_rootdl);
                break;
            case 3:
                DirectionalLayout messagepage_center_rootdl = (DirectionalLayout) LayoutScatter.getInstance(this.getContext()).parse(ResourceTable.Layout_messagepage_center,null,false);
                Image messagepage_center_rootdl_ddl1_agree,messagepage_center_rootdl_ddl1_discuss,messagepage_center_rootdl_ddl1_collection;
                messagepage_center_rootdl_ddl1_agree = (Image) messagepage_center_rootdl.findComponentById(ResourceTable.Id_messagepage_center_rootdl_ddl1_agree);
                messagepage_center_rootdl_ddl1_discuss = (Image) messagepage_center_rootdl.findComponentById(ResourceTable.Id_messagepage_center_rootdl_ddl1_discuss);
                messagepage_center_rootdl_ddl1_collection = (Image) messagepage_center_rootdl.findComponentById(ResourceTable.Id_messagepage_center_rootdl_ddl1_collection);
                messagepage_center_rootdl_listcontainer = (ListContainer) messagepage_center_rootdl.findComponentById(ResourceTable.Id_messagepage_center_rootdl_listcontainer);

                messagepage_center_rootdl_ddl1_agree.setClickedListener(new Component.ClickedListener() {
                    @Override
                    public void onClick(Component component) {
                        /************************************Sample data fill***************************/
                        commonlistcontaineritem_list.clear();
                        for(int i = 0;i < 13;i++){
                            commonlistcontaineritem_list.add(new CommonListContainerItem("Like information"+i+"Bar!"));
                        }
                        CommonListContainerProvider.commonListContainerProvider.notifyDataChanged();
                        /************************************Sample data fill***************************/
                    }
                });
                messagepage_center_rootdl_ddl1_discuss.setClickedListener(new Component.ClickedListener() {
                    @Override
                    public void onClick(Component component) {
                        /************************************Sample data fill***************************/
                        commonlistcontaineritem_list.clear();
                        for(int i = 0;i < 13;i++){
                            commonlistcontaineritem_list.add(new CommonListContainerItem("Comment information"+i+"Bar!"));
                        }
                        CommonListContainerProvider.commonListContainerProvider.notifyDataChanged();
                        /************************************Sample data fill***************************/
                    }
                });
                messagepage_center_rootdl_ddl1_collection.setClickedListener(new Component.ClickedListener() {
                    @Override
                    public void onClick(Component component) {
                        /************************************Sample data fill***************************/
                        commonlistcontaineritem_list.clear();
                        for(int i = 0;i < 13;i++){
                            commonlistcontaineritem_list.add(new CommonListContainerItem("Collection information"+i+"Bar!"));
                        }
                        CommonListContainerProvider.commonListContainerProvider.notifyDataChanged();
                        /************************************Sample data fill***************************/
                    }
                });

                approotdl_centerdl.addComponent(messagepage_center_rootdl);

                commonlistcontaineritem_list.clear();
                initCommonListContainer(messagepage_center_rootdl_listcontainer);

                messagepage_center_rootdl_ddl1_agree.getClickedListener().onClick(messagepage_center_rootdl_ddl1_agree);//Click "like" once by default
                break;
            case 4:
                DirectionalLayout mepage_center_rootdl = (DirectionalLayout) LayoutScatter.getInstance(this.getContext()).parse(ResourceTable.Layout_mepage_center,null,false);

                approotdl_centerdl.addComponent(mepage_center_rootdl);

                break;
            default:
                break;
        }


    }

    public void initMSComponents(){
        approotdl_topdl = (DirectionalLayout) findComponentById(ResourceTable.Id_approotdl_topdl);
        approotdl_centerdl = (DirectionalLayout) findComponentById(ResourceTable.Id_approotdl_centerdl);
        approotdl_bottomdl = (DirectionalLayout) findComponentById(ResourceTable.Id_approotdl_bottomdl);

        approotdl_bottomdl_tablist = (TabList) findComponentById(ResourceTable.Id_approotdl_bottomdl_tablist);
    }


    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        initMSComponents();
        initBottomTabList(approotdl_bottomdl_tablist,bottomnames,"bottomtablist");
    }

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

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

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

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

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

  3.6 MainAbility.java

package com.tdtxdcxm.appgeneralframework;

import com.tdtxdcxm.appgeneralframework.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());
    }
}

  3.7 MyApplication.java

package com.tdtxdcxm.appgeneralframework;

import ohos.aafwk.ability.AbilityPackage;

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

4. XML source code

4.1 UI background XML

   4.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="#FFFFFF"/>
</shape>

   4.1.2 background_common_directional.xml.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <stroke
        ohos:width="3vp"
        ohos:color="#2AFFFFFF"/>
    <corners
        ohos:radius="10vp"/>
</shape>

   4.1.3 background_common_listcontainer_item.xml

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

    <stroke
        ohos:width="2vp"
        ohos:color="#7A4A4A4A"/>
    <solid
        ohos:color="#FFFFFF"/>
</shape>

   4.1.4 background_common_subdirectional.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <stroke
        ohos:width="3vp"
        ohos:color="#2A808080"/>
    <corners
        ohos:radius="10vp"/>
</shape>

   4.1.5 background_searchbar_rootdl.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="#23E7ECEB"/>
</shape>

   4.1.6 background_titlebar_rootdl.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <stroke
        ohos:width="3vp"
        ohos:color="#6DF8E9D1"/>
    <corners
        ohos:radius="10vp"/>
</shape>

4.2 home page and sub layout XML

   4.2.1 ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:approotdl"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
    <DirectionalLayout
        ohos:id="$+id:approotdl_topdl"
        ohos:height="0"
        ohos:weight="0.8"
        ohos:width="match_parent"

        ohos:alignment="center"
        ohos:orientation="vertical"

        ohos:background_element="#1DEFEFEF">
    </DirectionalLayout>
    <DirectionalLayout
        ohos:id="$+id:approotdl_centerdl"
        ohos:height="0"
        ohos:weight="8.4"
        ohos:width="match_parent"

        ohos:alignment="center"
        ohos:orientation="vertical">
    </DirectionalLayout>
    <DirectionalLayout
        ohos:id="$+id:approotdl_bottomdl"
        ohos:height="0"
        ohos:weight="0.8"
        ohos:width="match_parent"

        ohos:alignment="center"
        ohos:orientation="vertical">
        <TabList
            ohos:id="$+id:approotdl_bottomdl_tablist"
            ohos:height="match_parent"
            ohos:width="match_parent"

            ohos:fixed_mode="true"

            ohos:normal_text_color="#FF798892"
            ohos:selected_text_color="#FFCA4545"

            ohos:tab_indicator_type="bottom_line"
            ohos:selected_tab_indicator_color="#FF15BC93"
            ohos:selected_tab_indicator_height="4vp"

            ohos:text_size="25vp"
            ohos:text_alignment="center"

            ohos:orientation="horizontal"
            ohos:background_element="#1DEFEFEF">
        </TabList>
    </DirectionalLayout>
</DirectionalLayout>

   4.2.2 common_listcontainer_item.xml

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

    ohos:background_element="$graphic:background_common_listcontainer_item">
    <Text
        ohos:id="$+id:common_listcontainer_item_text"
        ohos:height="match_parent"
        ohos:width="match_parent"

        ohos:text=""
        ohos:text_size="20vp"
        ohos:text_color="black"
        ohos:text_alignment="start"
        ohos:multiple_lines="true"
        ohos:max_text_lines="3"

        ohos:selection_color="blue">
    </Text>
</DirectionalLayout>

   4.2.3 dtpage_center.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:dtpage_center_rootdl"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
    <ListContainer
        ohos:id="$+id:dtpage_center_rootdl_listcontainer"
        ohos:height="match_parent"
        ohos:width="match_parent"

        ohos:orientation="vertical"
        ohos:rebound_effect="true"

        ohos:background_element="#4B94E2D8">
    </ListContainer>
</DirectionalLayout>

   4.2.4 firstpage_center.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:firstpage_center_rootdl"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
    <TabList
        ohos:id="$+id:firstpage_center_rootdl_tablist"
        ohos:height="0"
        ohos:weight="0.5"
        ohos:width="match_parent"

        ohos:fixed_mode="false"

        ohos:tab_margin="6vp"

        ohos:rebound_effect="true"
        ohos:normal_text_color="#FF403E3E"
        ohos:selected_text_color="#FFF61212"

        ohos:tab_indicator_type="bottom_line"
        ohos:selected_tab_indicator_color="#FF1566BC"
        ohos:selected_tab_indicator_height="3vp"

        ohos:text_size="15vp"
        ohos:text_alignment="center"

        ohos:orientation="horizontal"
        ohos:background_element="#1DFFFFFF">
    </TabList>
    <PageSlider
        ohos:id="$+id:firstpage_center_rootdl_PageSlider"
        ohos:height="0"
        ohos:weight="9.5"
        ohos:width="match_parent"

        ohos:orientation="horizontal"
        ohos:page_cache_size="2"

        ohos:background_element="#FFFFFFFF">
    </PageSlider>
</DirectionalLayout>

   4.2.5 mepage_center.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:mepage_center_rootdl"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
    <DirectionalLayout
        ohos:id="$+id:mepage_center_rootdl_ddl1"
        ohos:height="0"
        ohos:weight="0.7"
        ohos:width="match_parent"

        ohos:alignment="center"
        ohos:orientation="horizontal"

        ohos:background_element="#D7EFE4B0">
        <Image
            ohos:id="$+id:mepage_center_rootdl_ddl1_peopleicon"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1.4"

            ohos:image_src="$media:peopleicon"
            ohos:clip_alignment="center"
            ohos:scale_mode="stretch">
        </Image>
        <Text
            ohos:id="$+id:mepage_center_rootdl_ddl1_peoplename"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="8.6"

            ohos:text="TDTX"
            ohos:auto_font_size="true"
            ohos:text_alignment="center">
        </Text>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:id="$+id:mepage_center_rootdl_ddl2"
        ohos:height="0"
        ohos:weight="9.3"
        ohos:width="match_parent"

        ohos:alignment="center"
        ohos:orientation="vertical"

        ohos:background_element="#FFFFFFFF">
        <DirectionalLayout
            ohos:height="0"
            ohos:weight="1"
            ohos:width="match_parent"

            ohos:margin="5vp"

            ohos:alignment="center"
            ohos:orientation="horizontal"

            ohos:background_element="$graphic:background_common_directional">
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:height="0"
            ohos:weight="1"
            ohos:width="match_parent"

            ohos:margin="5vp"

            ohos:alignment="center"
            ohos:orientation="horizontal"

            ohos:background_element="$graphic:background_common_directional">
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:height="0"
            ohos:weight="1"
            ohos:width="match_parent"

            ohos:margin="5vp"

            ohos:alignment="center"
            ohos:orientation="horizontal"

            ohos:background_element="$graphic:background_common_directional">
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:height="0"
            ohos:weight="1"
            ohos:width="match_parent"

            ohos:margin="5vp"

            ohos:alignment="center"
            ohos:orientation="horizontal"

            ohos:background_element="$graphic:background_common_directional">
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

                ohos:background_element="$graphic:background_common_subdirectional">
            </DirectionalLayout>
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:weight="1"
                ohos:width="0"

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

   4.2.6 messagepage_center.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:messagepage_center_rootdl"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
    <DirectionalLayout
        ohos:id="$+id:messagepage_center_rootdl_ddl1"
        ohos:height="0"
        ohos:weight="0.7"
        ohos:width="match_parent"

        ohos:alignment="center"
        ohos:orientation="horizontal"

        ohos:background_element="#40B7AEAE">
        <Image
            ohos:id="$+id:messagepage_center_rootdl_ddl1_agree"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"

            ohos:image_src="$media:agree"
            ohos:clip_alignment="center"
            ohos:scale_mode="stretch"

            >
        </Image>
        <Image
            ohos:id="$+id:messagepage_center_rootdl_ddl1_discuss"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"

            ohos:image_src="$media:discuss"
            ohos:clip_alignment="center"
            ohos:scale_mode="stretch">
        </Image>
        <Image
            ohos:id="$+id:messagepage_center_rootdl_ddl1_collection"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"

            ohos:image_src="$media:collection"
            ohos:clip_alignment="center"
            ohos:scale_mode="stretch">
        </Image>
    </DirectionalLayout>
    <ListContainer
        ohos:id="$+id:messagepage_center_rootdl_listcontainer"
        ohos:height="0"
        ohos:weight="9.3"
        ohos:width="match_parent"

        ohos:orientation="vertical"
        ohos:rebound_effect="true"

        ohos:background_element="#4BFFE0E0">
    </ListContainer>
</DirectionalLayout>

   4.2.7 pageslider_directionallayout.xml

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

    ohos:background_element="white">

</DirectionalLayout>

   4.2.8 searchbar.xml

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

    ohos:left_margin="6vp"
    ohos:right_margin="6vp"
    ohos:top_margin="3vp"
    ohos:bottom_margin="3vp"

    ohos:alignment="center"
    ohos:orientation="horizontal"

    ohos:background_element="$graphic:background_searchbar_rootdl">
    <TextField
        ohos:height="match_parent"
        ohos:width="0"
        ohos:weight="8"

        ohos:hint="Please enter the content to search..."
        ohos:hint_color="#434A4A48"

        ohos:multiple_lines="false"
        ohos:text_alignment="center"
        ohos:text_size="16vp"
        ohos:text_color="black"

        ohos:background_element="$graphic:background_searchbar_rootdl">
    </TextField>
    <Image
        ohos:height="match_parent"
        ohos:width="40vp"


        ohos:image_src="$media:ic_public_input_search"
        ohos:clip_alignment="center"
        ohos:scale_mode="stretch"

        ohos:background_element="$graphic:background_searchbar_rootdl">
    </Image>
</DirectionalLayout>

   4.2.9 titlebar.xml

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

    ohos:left_margin="6vp"
    ohos:right_margin="6vp"
    ohos:top_margin="3vp"
    ohos:bottom_margin="3vp"

    ohos:alignment="center"
    ohos:orientation="horizontal"

    ohos:background_element="$graphic:background_titlebar_rootdl">
    <Text
        ohos:height="match_parent"
        ohos:width="match_parent"

        ohos:text=""
        ohos:text_alignment="center"
        ohos:text_size="25vp"
        ohos:text_color="#FFCA4545"

        ohos:background_element="$graphic:background_titlebar_rootdl">
    </Text>
</DirectionalLayout>

   4.2.10 writepage_center.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:writepage_center_rootdl"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
    <DirectionalLayout
        ohos:id="$+id:writepage_center_topddl"
        ohos:height="0"
        ohos:weight="0.5"
        ohos:width="match_parent"

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

            ohos:left_padding="5vp"

            ohos:text_alignment="left"
            ohos:text="cancel"
            ohos:auto_font_size="true"
            ohos:text_color="#86A53232">
        </Button>
        <Button
            ohos:id="$+id:writepage_center_topddl_gobut"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"

            ohos:right_padding="5vp"

            ohos:text_alignment="right"
            ohos:auto_font_size="true"
            ohos:text="release"
            ohos:text_color="#86A53232">
        </Button>
    </DirectionalLayout>
    <TextField
        ohos:id="$+id:writepage_center_rootdl_tfd"
        ohos:height="0"
        ohos:weight="9.5"
        ohos:width="match_parent"

        ohos:hint="Enter article content(Up to 20 lines)..."
        ohos:hint_color="#FFCBC7C7"

        ohos:selection_color="blue"
        ohos:multiple_lines="true"
        ohos:max_text_lines="20"
        ohos:text_size="20vp"
        ohos:text_alignment="start">
    </TextField>
</DirectionalLayout>

5. Image resources

5.1 like Icon

5.2 comment icon

5.3 favorite icons

5.4 search icon (downloaded from the system icon on Hongmeng official website)

6. app screenshot

7. app running video (local simulator running)

To be transmitted

Topics: xml harmonyos

Hot Topics

©2024 Programmer Think