HarmonyOS
项目启动
然后会弹出一个框,需要升级一些东西
需要其他的模拟器,默认提供的两个无法启动,可以点击
创建一个 P40 的模拟器,需要华为开发者账号
如果一直登陆跳转,且提示登陆失败,可能是浏览器缓存的问题,测试谷歌浏览器失败了,可能由于本身使用了油猴脚本的原因,换用 edge 成功。
使用 P40 模拟器打开,点击绿色的按钮运行。
然后以 P40 模拟器运行,entry 这个项目
布局文件
以下所有布局文件即 xxx.xml 均为官网示例代码,复制即可使用
类文件
以下类文件,即 xxx.java 代码均为官网示例代码,复制后需要导入组件所需的类按 Alt+Enter 即可智能导入,代码已上传 gitee
体验TabList和Tab组件
布局文件
在src/main/resources/base/layout目录下新建布局文件tab_list.xml,此布局文件中主要使用Tablist组件,并设置其样式。
slice 目录
在src/main/java/com/huawei/codelab/slice目录下新建TabListSlice.java文件,继承AbilitySlice。
定义成员变量
TabListSlice.java
package com.huawei.codelab.slice;
import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.TabList;
import ohos.agp.components.Text;
public class TabListSlice extends AbilitySlice {
// 需导入 import ohos.aafwk.ability.AbilitySlice;
private TabList tabList; //需导入 import ohos.agp.components.TabList;
private Text tabContent; // 需导入 import ohos.agp.components.Text;
// 重写 AbilitySlice 类里的 onStart 方法
@Override
protected void onStart(Intent intent) {
super.onStart(intent);
// 加载布局文件,之前的 tab_list
super.setUIContent(ResourceTable.Layout_tab_list);
// 初始化组件
initComponent();
// 点击事件监听
addTabSelectedListener();
}
private void initComponent() {
// 根据 tab_list 中的组件 id 获取对应的组件
tabContent = (Text) findComponentById(ResourceTable.Id_tab_content);
tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
initTab();
}
// 创建三个页签
private void initTab() {
if (tabList.getTabCount() == 0) {
tabList.addTab(createTab("Image"));
tabList.addTab(createTab("Video"));
tabList.addTab(createTab("Audio"));
tabList.setFixedMode(true);
tabList.getTabAt(0).select();
tabContent.setText("Select the " + tabList.getTabAt(0).getText());
}
}
private TabList.Tab createTab(String text) {
TabList.Tab tab = tabList.new Tab(this);
tab.setText(text);
tab.setMinWidth(64);
tab.setPadding(12, 0, 12, 0);
return tab;
}
private void addTabSelectedListener() {
tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
@Override
public void onSelected(TabList.Tab tab) {
tabContent.setText("Select the " + tab.getText());
}
@Override
public void onUnselected(TabList.Tab tab) {
}
@Override
public void onReselected(TabList.Tab tab) {
}
});
}
}
关联主页跳转
在src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java的onClick方法中增加关联跳转。
@Override
public void onClick(Component component) {
String className = "";
switch (component.getId()) {
case ResourceTable.Id_tab_list:
className = "com.huawei.codelab.slice.TabListSlice";
break;
default:
break;
}
abilitySliceJump(className);
}
效果展示
体验ListContainer组件
布局文件
在src/main/resources/base/layout目录下创建以下三个布局文件
- news_list_layout.xml作为新闻列表主界面
- item_news_type_layout.xml作为上方的新闻类别的item详情布局
- item_news_layout.xml作为中间的新闻列表的item详情布局
provider 目录
NewsTypeProvider.java ,用于构造新闻类别
package com.huawei.codelab.provider;
import com.huawei.codelab.ResourceTable;
import ohos.agp.components.*;
import ohos.app.Context;
import java.util.Optional;
public class NewsTypeProvider extends BaseItemProvider {
// 继承
// 声明变量
private String[] newsTypeList;
private Context context;
public NewsTypeProvider(String[] listBasicInfo, Context context) {
this.newsTypeList = listBasicInfo;
this.context = context;
}
@Override
public int getCount() {
return newsTypeList == null ? 0 : newsTypeList.length;
}
@Override
public Object getItem(int position) {
return Optional.of(this.newsTypeList[position]);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public Component getComponent(int position, Component componentP, ComponentContainer componentContainer) {
ViewHolder viewHolder = null;
Component component = componentP;
if (component == null) {
component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_news_type_layout, null, false);
viewHolder = new ViewHolder();
Component componentText = component.findComponentById(ResourceTable.Id_news_type_text);
if (componentText instanceof Text) {
viewHolder.title = (Text) componentText;
}
component.setTag(viewHolder);
} else {
if (component.getTag() instanceof ViewHolder) {
viewHolder = (ViewHolder) component.getTag();
}
}
if (viewHolder != null) {
viewHolder.title.setText(newsTypeList[position]);
}
return component;
}
private static class ViewHolder {
Text title;
}
}
NewsTypeProvider.java, 用于构造新闻列表
package com.huawei.codelab.provider;
import com.huawei.codelab.ResourceTable;
import ohos.agp.components.*;
import ohos.app.Context;
import java.util.List;
import java.util.Optional;
public class NewsListProvider extends BaseItemProvider {
private List<