通用app界面框架AppGeneralFrameWork[app通用框架][API V6]

目录

1. 名称

  • 本专栏文章内容再次说明：全专栏处于鸿蒙应用开发领域，每篇文章都是一个完整的项目。
  • 本专栏不讲HarmonyOS应用开发基础教程，有关教程在CSDN上有很多优质的文章可供参阅。
  • 本次项目是一个比较通用app的整体界面框架的实现，命名为：app通用框架、AppGeneralFrameWork。
  • 如果新手读者朋友已经阅读过前面几篇文章的话，这篇文章则是一个更加框架化的东西，供大家参阅。
  • 项目已经上传至Gitee仓库中：AppGeneralFrameWork
  • app图标：
    请添加图片描述

2. app实现关键技巧

整体框架解读：

  • 页面整体划分：上、中、下三部分，除下部底部导航栏外，上、中都需要使用动态装载XML的技术，根据切换不同的底部tab标签，装载相应的组件。
  • 底部导航栏：采用TabList组件。
  • 首页：上部一个搜索栏、中部一个TabList和PageSlider的双向绑定组件，其中PagesSlider的每页都已经预装有一个DirectionalLayout，可以根据每页不同的需要装载不同的组件显示内容。（在上一篇文章中已经介绍过，如何给PageSlider装载不同的组件内容）
  • 榜单：采用一个ListContainer组件，显示榜单数据。设定了一个通用ListContanier初始化函数，这里采用的是通用版本。
  • 创作：采用TextField组件，并且设置一个“取消”和一个“发布”按钮。
  • 消息：采用三个Image组件分别表示“点赞”、“评论”、“收藏”，在其下方有一个通用版本的ListContainer，根据点击的三个按钮，加载相应的数据源，然后使用notifyDataChanged()即可刷新显示的内容。
  • 我的：一个Image组件显示用户头像、一个并列的Text显示用户名称，在其下方采用16宫格的形式，每个宫格都已经预装有DirectionalLayout，可以根据需要在宫格中放置不同的组件内容。

3. java源代码

  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;//用于记录已经new的对象引用，便于调用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 = {"首页","榜单","创作","消息","我的"};
    private String[] firstcenter_names = {"HarmonyOS","c语言","java","javascript","数据结构与算法","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<>();//普通listcontainer数据源列表

    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("已经点击了第"+i+"个！准备跳转详情页！");
            }
        });
    }


    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) {
                //小技巧：
                //这里的当一个tab被重复选中，可以执行诸如刷新页面的操作
                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("首页")) {
                        installSearchBar();
                        installCenterSubLayout(0);
                        initFirstCenterPageSlider(firstpage_center_rootdl_PageSlider);
                        initFirstCenterTabList(firstpage_center_rootdl_tablist, firstcenter_names, "firstcenter_tabslist");
                        return;
                    }

                    int i = tabList.getSelectedTabIndex();//获取当前选中的tab位置
                    installTitleBar(bottomtabslist.get(i).getText());//将该tab的文本设置为该页的title
                    installCenterSubLayout(i);
                }
            }

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

            }

            @Override
            public void onReselected(TabList.Tab tab) {
                //小技巧：
                //这里的当一个tab被重复选中，可以执行诸如刷新页面的操作
            }
        });
        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-首页，1-动态，2-创作，3-消息，4-我的
        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);
                /************************************示例数据填充***************************/
                commonlistcontaineritem_list.clear();
                for(int i = 0;i < 13;i++){
                    commonlistcontaineritem_list.add(new CommonListContainerItem("榜单排名第"+i+"条！"));
                }
                initCommonListContainer(dtpage_center_rootdl_listcontainer);

                /************************************示例数据填充***************************/
                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("取消发布！");
                        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("内容不能为空！");
                            writepage_center_rootdl_tfd.clearFocus();
                            return;
                        }
                        writepage_center_rootdl_tfd.setText("");
                        writepage_center_rootdl_tfd.clearFocus();
                        toastShow("发布成功！");
                        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) {
                        /************************************示例数据填充***************************/
                        commonlistcontaineritem_list.clear();
                        for(int i = 0;i < 13;i++){
                            commonlistcontaineritem_list.add(new CommonListContainerItem("点赞信息"+i+"条！"));
                        }
                        CommonListContainerProvider.commonListContainerProvider.notifyDataChanged();
                        /************************************示例数据填充***************************/
                    }
                });
                messagepage_center_rootdl_ddl1_discuss.setClickedListener(new Component.ClickedListener() {
                    @Override
                    public void onClick(Component component) {
                        /************************************示例数据填充***************************/
                        commonlistcontaineritem_list.clear();
                        for(int i = 0;i < 13;i++){
                            commonlistcontaineritem_list.add(new CommonListContainerItem("评论信息"+i+"条！"));
                        }
                        CommonListContainerProvider.commonListContainerProvider.notifyDataChanged();
                        /************************************示例数据填充***************************/
                    }
                });
                messagepage_center_rootdl_ddl1_collection.setClickedListener(new Component.ClickedListener() {
                    @Override
                    public void onClick(Component component) {
                        /************************************示例数据填充***************************/
                        commonlistcontaineritem_list.clear();
                        for(int i = 0;i < 13;i++){
                            commonlistcontaineritem_list.add(new CommonListContainerItem("收藏信息"+i+"条！"));
                        }
                        CommonListContainerProvider.commonListContainerProvider.notifyDataChanged();
                        /************************************示例数据填充***************************/
                    }
                });

                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);//默认执行一次点击“点赞”的动作
                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源代码

  4.1 UI背景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 主页与子布局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="请输入要搜索的内容..."
        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="取消"
            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="发布"
            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="输入文章内容(最多20行)..."
        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. 图像资源

  5.1 点赞图标

在这里插入图片描述

  5.2 评论图标

在这里插入图片描述

  5.3 收藏图标

在这里插入图片描述

  5.4 搜索图标（来自鸿蒙官网系统图标下载）

请添加图片描述

6. app截图

请添加图片描述

请添加图片描述

请添加图片描述

请添加图片描述

请添加图片描述

7. app运行视频（本地模拟器运行）

通用app界面框架AppGeneralFrameWork[app通用框架][API V6]

posted @   TDTX  阅读(341)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示