鸿蒙系统主题如何自定义,自定义流式布局

一、介绍

在鸿蒙系统上自定义流式布局

二、效果图

f29558099195be9b5afbdc373c060461.png

效果图里面的内容是从服务器获取的,我们使用蒹葭网络库来请求服务器,

蒹葭是鸿蒙系统上一款网络请求框架,本质上是从retrofit移植过来的,

蒹葭的用法跟retrofit是一样,如果不熟悉蒹葭的用法,

可以阅读鸿蒙系统网络请求框架—蒹葭 这篇文章。

在示例代码中,我们会访问搜索热词

这个接口,这个接口用于获取搜索热词。

三、示例代码讲解

3、1 在配置文件中添加访问网络的权限

"ohos.permission.INTERNET"

3、2 打开entry目录下的build.gradle文件中,在build.gradle文件中的dependencies闭包下添加下面的依赖。

// 蒹葭的核心代码

implementation 'io.gitee.zhongte:jianjia:1.0.1'

// 数据转换器,数据转换器使用gson来帮我们解析json,不需要我们手动解析json

implementation 'io.gitee.zhongte:converter-gson:1.0.1'

implementation "com.google.code.gson:gson:2.8.2"

3、3 在布局文件添加流式布局

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:orientation="vertical">

ohos:id="$+id:flow_layout"

ohos:height="match_content"

ohos:width="match_parent"/>

3、4 在布局文件中创建流式布局的子组件

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:background_element="$graphic:background_ability_main"

ohos:height="match_content"

ohos:margin="10vp"

ohos:padding="10vp"

ohos:text_alignment="center"

ohos:text_color="#ffffff"

ohos:text_size="15fp"

ohos:width="match_content">

3、5 创建接口

/**

* @author 裴云飞

* @date 2021/5/16

*/

public interface Wan {

@GET("/hotkey/json")

Call getHotKey();

}

3、6 在AbilityPackage中创建蒹葭对象,并创建接口的实例对象

public class MyApplication extends AbilityPackage {

private static MyApplication application;

private JianJia mJianJia;

private Wan mWan;

public static MyApplication getInstance() {

return application;

}

@Override

public void onInitialize() {

super.onInitialize();

application = this;

// 创建蒹葭对象

mJianJia = new JianJia.Builder()

.baseUrl("https://www.wanandroid.com/")

.addConverterFactory(GsonConverterFactory.create())

.build();

// 创建接口的实例对象

mWan = mJianJia.create(Wan.class);

}

/**

* 获取蒹葭对象

*

* @return 蒹葭对象

*/

public JianJia getJianJia() {

return mJianJia;

}

/**

* 获取接口的实例对象

*

* @return

*/

public Wan getWan() {

return mWan;

}

}

3、7 在MainAbilitySlice里面使用蒹葭访问服务器,将搜索热词显示到流式布局里面

public class MainAbilitySlice extends AbilitySlice {

private FlowLayout mFlowLayout;

@Override

public void onStart(Intent intent) {

super.onStart(intent);

super.setUIContent(ResourceTable.Layout_ability_main);

mFlowLayout = (FlowLayout) findComponentById(ResourceTable.Id_flow_layout);

// 请求服务端的搜索热词

MyApplication.getInstance().getWan().getHotKey().enqueue(new Callback() {

@Override

public void onResponse(Call call, Response response) {

// 请求成功

if (response.isSuccessful()) {

HotKey hotKey = response.body();

// 设置搜索热词

setHotKey(hotKey);

}

}

@Override

public void onFailure(Call call, Throwable throwable) {

// 请求失败

LogUtils.info("yunfei", throwable.getMessage());

}

});

}

/**

* 设置搜索热词

*

* @param hotKey

*/

private void setHotKey(HotKey hotKey) {

if (hotKey == null || hotKey.data == null || hotKey.data.isEmpty()) {

// 判空操作

return;

}

List hotKeys = hotKey.data;

for (Data data : hotKeys) {

// 将布局文件转换成组件对象,并强转为Text组件

Text text = (Text) LayoutScatter.getInstance(this).

parse(ResourceTable.Layout_item_text, null, false);

if (data != null && !TextUtils.isEmpty(data.name)) {

// 显示组件的内容

text.setText(data.name);

// 将组件添加到流式布局

mFlowLayout.addComponent(text);

}

}

}

@Override

public void onActive() {

super.onActive();

}

@Override

public void onForeground(Intent intent) {

super.onForeground(intent);

}

}

更多代码讲解,请查看博客 ,

博客以自定义流式布局为例,非常详细的介绍了

自定义布局的各方面知识,非常适合鸿蒙的初学者。

四、感谢

感谢玩Android 提供的开放接口

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值