> 文档中心 > HarmonyOS应用开发--通用app界面框架AppGeneralFrameWork[app通用框架][API V6]

HarmonyOS应用开发--通用app界面框架AppGeneralFrameWork[app通用框架][API V6]

HarmonyOS应用开发--通用app界面框架AppGeneralFrameWork[app通用框架][API V6]

  • 1. 名称
  • 2. app实现关键技巧
  • 3. java源代码
    •   3.1 FloatsOfColorMatrix.java
    •   3.2 CommonListContainerItem.java
    •   3.3 CommonListContainerProvider.java
    •   3.4 FirstCenterPgSdProvider.java
    •   3.5 MainAbilitySlice.java
    •   3.6 MainAbility.java
    •   3.7 MyApplication.java
  • 4. XML源代码
    •   4.1 UI背景XML
      •    4.1.1 background_ability_main.xml
      •    4.1.2 background_common_directional.xml.xml
      •    4.1.3 background_common_listcontainer_item.xml
      •    4.1.4 background_common_subdirectional.xml
      •    4.1.5 background_searchbar_rootdl.xml
      •    4.1.6 background_titlebar_rootdl.xml
    •   4.2 主页与子布局XML
      •    4.2.1 ability_main.xml
      •    4.2.2 common_listcontainer_item.xml
      •    4.2.3 dtpage_center.xml
      •    4.2.4 firstpage_center.xml
      •    4.2.5 mepage_center.xml
      •    4.2.6 messagepage_center.xml
      •    4.2.7 pageslider_directionallayout.xml
      •    4.2.8 searchbar.xml
      •    4.2.9 titlebar.xml
      •    4.2.10 writepage_center.xml
  • 5. 图像资源
    •   5.1 点赞图标
    •   5.2 评论图标
    •   5.3 收藏图标
    •   5.4 搜索图标(来自鸿蒙官网系统图标下载)
  • 6. app截图
  • 7. app运行视频(本地模拟器运行)

1. 名称

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

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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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 点赞图标

HarmonyOS应用开发--通用app界面框架AppGeneralFrameWork[app通用框架][API V6]

  5.2 评论图标

HarmonyOS应用开发--通用app界面框架AppGeneralFrameWork[app通用框架][API V6]

  5.3 收藏图标

HarmonyOS应用开发--通用app界面框架AppGeneralFrameWork[app通用框架][API V6]

  5.4 搜索图标(来自鸿蒙官网系统图标下载)

HarmonyOS应用开发--通用app界面框架AppGeneralFrameWork[app通用框架][API V6]

6. app截图

请添加图片描述

请添加图片描述

请添加图片描述

请添加图片描述

请添加图片描述

7. app运行视频(本地模拟器运行)

通用app界面框架AppGeneralFrameWork