Harmonyos application development -- General app interface framework appgeneralframework[app general framework][api v6]

1. name

• The content of this column once again explains ： The whole column is in the field of Hongmeng application development , Each article is a complete project .
• This column does not cover HarmonyOS Basic course of application development , The tutorials are in CSDN There are many excellent articles available for reference .
• This project is a relatively general app Implementation of the overall interface framework , Name it ：app General framework 、AppGeneralFrameWork.
• If the novice readers have read the previous articles , This article is a more framework thing , For your reference .
• The project has been uploaded to Gitee Warehouse ：AppGeneralFrameWork
• app Icon ：
  

2. app Key skills to achieve

Interpretation of the overall framework ：

• The whole page is divided ： On 、 in 、 The next three parts , In addition to the lower bottom navigation bar , On 、 Dynamic loading is required in XML Technology , Switch different bottoms according to tab label , Load the corresponding components .
• Bottom navigation bar ： use TabList Components .
• home page ： The upper search bar 、 Middle one TabList and PageSlider Two way binding component of , among PagesSlider Each page of has been pre loaded with a DirectionalLayout, You can load different components to display content according to different needs of each page .（ In the last article, we introduced , How to give PageSlider Load different component contents ）
• The list ： Use a ListContainer Components , Display list data . Set a general ListContanier Initialization function , The general version is used here .
• A literary creation ： use TextField Components , And set up a “ Cancel ” And a “ Release ” Button .
• news ： Three methods are used Image Components represent “ give the thumbs-up ”、“ Comment on ”、“ Collection ”, Below it is a generic version of ListContainer, According to the three buttons clicked , Load the corresponding data source , And then use notifyDataChanged() You can refresh the displayed content .
• my ： One Image Component displays the user's Avatar 、 A parallel Text Show user name , Below it 16 The form of Gongge , Each grid has been pre installed with DirectionalLayout, Different component contents can be placed in the grid as required .

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;// Used to record that new Object reference of , Easy 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 "," The 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<>();// Ordinary listcontainer List of 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 have clicked on the "+i+" individual ！ 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's when one tab Selected repeatedly , You can perform operations such as refreshing the page 
                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());// Will be tab The text of is set to the... Of the page title
                    installCenterSubLayout(i);
                }
            }

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

            }

            @Override
            public void onReselected(TabList.Tab tab) {
    
                // Tips ：
                // Here's when one tab Selected repeatedly , You can perform operations such as refreshing the page 
            }
        });
        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- home page ,1- dynamic ,2- A literary creation ,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(" No.1 on the list "+i+" strip ！"));
                }
                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(" Unpublish ！");
                        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(" The content cannot be empty ！");
                            writepage_center_rootdl_tfd.clearFocus();
                            return;
                        }
                        writepage_center_rootdl_tfd.setText("");
                        writepage_center_rootdl_tfd.clearFocus();
                        toastShow(" Successful release ！");
                        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+" strip ！"));
                        }
                        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+" strip ！"));
                        }
                        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+" strip ！"));
                        }
                        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);// The default execution is one click “ give the thumbs-up ” The action of 
                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 what you want to search for ..." 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 the content of the article ( most 20 That's ok )..." 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 Collection Icon

  5.4 Search icon （ Download system icon from Hongmeng official website ）

6. app Screenshot

7. app Run the video （ The local simulator runs ）

Universal app Interface framework AppGeneralFrameWork