标签：通用 center 框架 app approotdl rootdl void Override public
HarmonyOS应用开发--通用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运行视频（本地模拟器运行）
待传…
标签：通用,center,框架,app,approotdl,rootdl,void,Override,public 来源： https://blog.csdn.net/weixin_54698498/article/details/123167848
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。