我在鸿蒙上开发了个“微信朋友圈”主页

在实际开发过程中,我们经常会遇到一些系统原有组件无法满足的情况,而 HarmonyOS 提供了自定义组件的方式,我们使用自定义组件来满足项目需求。

在实际开发过程中,我们经常会遇到一些系统原有组件无法满足的情况,而 HarmonyOS 提供了自定义组件的方式,我们使用自定义组件来满足项目需求。

我在鸿蒙上开发了个“微信朋友圈”主页

自定义组件是由开发者定义的具有一定特性的组件,通过扩展 Component 或其子类实现,可以精确控制屏幕元素的外观,实现开发者想要达到的效果,也可响应用户的点击、触摸、长按等操作。

下面通过自定义一个仿微信朋友圈主页的组件来了解一下自定义组件的过程。

关于自定义组件,一般遵循以下几个方式:

首先,创建一个继承 Component 或其子类的自定义组件类,并添加构造方法,如 MyComponent。

实现 Component.EstimateSizeListener 接口,在 onEstimateSize 方法中进行组件测量,并通过 setEstimatedSize 方法通知组件。

自定义组件测量出的大小需通过 setEstimatedSize 通知组件,并且必须返回 true 使测量值生效。

setEstimatedSize 方法的入参携带模式信息,可使用 Component.EstimateSpec.getChildSizeWithMode 方法进行拼接。

测量模式如下图:

我在鸿蒙上开发了个“微信朋友圈”主页

自定义 xml 属性,通过构造方法中携带的参数 attrSet,可以获取到在 xml 中配置的属性值,并应用在该自定义组件中。

实现 Component.DrawTask 接口,在 onDraw 方法中执行绘制任务,该方法提供的画布 Canvas,可以精确控制屏幕元素的外观。在执行绘制任务之前,需要定义画笔 Paint。

实现 Component.TouchEventListener 或其他事件的接口,使组件可响应用户输入。

在 xml 文件中创建并配置自定义组件。

在 HarmonyOS 中 Component 是视图的父类,既然组件都是继承 Component 来实现的,那么我们也可以继承它来实现我们想要的视图了,根据具体流程,我们按照示例代码来了解一下大致流程。

创建自定义布局

...
public class MyComponent extends Component implements Component.DrawTask,Component.EstimateSizeListener {
private Paint paint;
private Paint paintText;

private PixelMap bigImage;

private PixelMap smallImage;

public MyComponent(Context context) {
this(context, null);
}

public MyComponent(Context context, AttrSet attrSet) {
this(context, attrSet,"");
}

public MyComponent(Context context, AttrSet attrSet, String styleName) {
super(context, attrSet, styleName);
init(context);
}

public void init(Context context) {
// 设置测量组件的侦听器
setEstimateSizeListener(this);
// 初始化画笔
initPaint();
// 添加绘制任务
addDrawTask(this);
}

private void initPaint() {
paint = new Paint();
paint.setAntiAlias(true);
paint.setStrokeCap(Paint.StrokeCap.ROUND_CAP);
paint.setStyle(Paint.Style.STROKE_STYLE);

paintText = new Paint();
paintText.setStrokeCap(Paint.StrokeCap.ROUND_CAP);
paintText.setStyle(Paint.Style.FILL_STYLE);
paintText.setColor(Color.WHITE);
paintText.setTextSize(50);
paintText.setAntiAlias(true);

bigImage = PixelMapUtils.createPixelMapByResId(ResourceTable.Media_imageDev, getContext()).get();
smallImage = PixelMapUtils.createPixelMapByResId(ResourceTable.Media_icon, getContext()).get();

}

@Override
public void addDrawTask(Component.DrawTask task) {
super.addDrawTask(task);
task.onDraw(this, mCanvasForTaskOverContent);
}

@Override
public boolean onEstimateSize(int widthEstimateConfig, int heightEstimateConfig) {
int width = Component.EstimateSpec.getSize(widthEstimateConfig);
int height = Component.EstimateSpec.getSize(heightEstimateConfig);
setEstimatedSize(
Component.EstimateSpec.getChildSizeWithMode(width, width, Component.EstimateSpec.NOT_EXCEED),
Component.EstimateSpec.getChildSizeWithMode(height, height, Component.EstimateSpec.NOT_EXCEED));
return true;
}

@Override
public void onDraw(Component component, Canvas canvas) {
int width = getWidth();
int center = width / 2;

float length = (float) (center - Math.sqrt(2) * 1.0f / 2 * center);

// 获取大图片的大小

Size bigImageSize = bigImage.getImageInfo().size;
RectFloat bigImageRect = new RectFloat(0, 0, width, bigImageSize.height);

// 获取小图片的大小
Size smallImageSize = smallImage.getImageInfo().size;
RectFloat smallImageRect = new RectFloat(length * 5, length * 5 - 50, 1100, 1030);

canvas.drawPixelMapHolderRect(new PixelMapHolder(bigImage), bigImageRect, paint);
canvas.drawPixelMapHolderRect(new PixelMapHolder(smallImage), smallImageRect, paint);
canvas.drawText(paintText,"ABCDEFG",width - length * 3.3f, bigImageSize.height - length * 0.2f);

}

}

如上代码,我们创建一个 MyComponent 继承 Component ,并且在构造方法中,初始化一些画笔属性,传入默认的图片,当然也可以通过调用接口的方式在引用的地方传入图片。

然后在 ondraw 方法中做具体的画笔操作。通过 canvas.drawPixelMapHolderRect 方法画出一大一小两张可堆叠的图片,并调整好位置参数。

在 Ability 中引用

实现组件之后,我们就可以在我们需要展示的 Ability 去调用这个自定义组件了。

...
public class ImageAbilitySlice extends AbilitySlice {

@Override
protected void onStart(Intent intent) {
super.onStart(intent);
// super.setUIContent(ResourceTable.Layout_ability_image_main);
drawMyComponent();
}

private void drawMyComponent() {
// 声明布局
ScrollView myLayout = new ScrollView(this);
DirectionalLayout.LayoutConfig config = new DirectionalLayout.LayoutConfig(
DirectionalLayout.LayoutConfig.MATCH_PARENT, DirectionalLayout.LayoutConfig.MATCH_PARENT);
myLayout.setLayoutConfig(config);
myLayout.setReboundEffect(true);
MyComponent customComponent = new MyComponent(this);
myLayout.addComponent(customComponent);
super.setUIContent(myLayout);
}

}

在 XML 文件中引用

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
ohos:id="$+id:dl"
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:rebound_effect="true"
ohos:orientation="vertical">

<com.example.harmonyosdeveloperchenpan.MyComponent
ohos:id="$+id:myComponent"
ohos:height="match_parent"
ohos:width="match_parent"/>

</ScrollView>

需要注意的是,微信朋友圈主页的滑动有下拉回弹效果,所以我们需要设置 ScrollView 的布局属性。

通过在代码中调用 setReboundEffect(true) 或者 xml 中设置 ohos:rebound_effect=“true” 来实现。

效果展示如下图:

我在鸿蒙上开发了个“微信朋友圈”主页

作者:陈潘

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/74649.html

(0)

相关推荐

  • 库克霸气回应:用户想侧载可以买安卓;腾讯员工人均月薪8万;Facebook与微软达成合作 | 极客头条

    CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 孙胜 出品 | CSDN(ID:CSDNnews) 一分钟速览新闻点...

    科技 2021年11月11日
  • 老年人记住“二少”益于身体健康,有助延年益寿

    (一)少思虑 少思虑,老年人思虑过度容易导致气机郁结不行,进而引起疾病。 不妨看开、放下、没有过不去的坎,更不要去计算别人,不要纠结一些小事,不计人怨,不钻牛角尖,乐观开朗,宽宏大...

    生活 2021年10月8日
  • 为什么我的孩子每个月都会发高烧,喉咙发炎?吃什么可以提高免疫力?

    导读:不同的孩子,在身体体质发展上也有所不同,有的小孩是一年也生不了几次病,但有的孩子却像是药罐子转世一样,动不动就生病而且来去也就是那老几样,跟断不了尾一样。面对孩子多病的问题,妈妈们也都为此而忧心不已,就盼望着自己的孩子能健康一点。

    生活 2021年10月21日
  • 小儿厌食症中医,小儿厌食中药方

    “厌食” 是小儿最常见的消化道疾病,随着生活水平的提高,厌食的孩子却越来越多了。经常在育儿群里听到家长抱怨,孩子就是“不爱吃饭”。有的孩子从小就厌食,在吃辅食的时候就挑食,吃得少,好话说了千千万,就是喂不进一口饭。

    生活 2021年10月24日
  • 下周策略:会继续调整,还是会开启新一轮的拉升行情吗?,主力拉升前都会洗盘

    从国庆节后到现在大A基本上走的震荡下跌走势。本想着11月第一周会有一个开门红,但是市场总是出人意料的,本周A股总体走出震荡下跌走势,五个交易日就有四个交易日是下跌,只有一个交易日是单边上涨迎来普涨行情。周五还是以下跌收场,所以本周A股行情确实太差太弱了,相信大部分股民投资者经过这二个月的持续阴跌之后,对A股已经失去信心,即将到绝望的地步,希望下周A股能结束阴跌行情,开启新一轮的上涨行情。 首先来回顾一些本周A股的行情,周一是A股集体低开,全天走出震荡普跌行情;周二盘面出现大幅下跌,造成市场走弱恐慌;周三先诱多再下跌,但是个股迎来普涨行情;周四三大指数集体高开震荡上涨,迎来普涨行情;而周五直接低开低走,午后更是出现跳水杀跌,最终以集体收跌结束本周A股行情。

    生活 2021年11月7日
  • 阿里蚂蚁测试工程师(阿里巴巴工程师谈软件测试)

    混沌工程是在分布式系统上进行实验的学科,目的是建立对系统承受生产中动荡条件的能力的信心。 混沌原理 混沌工程是分布式系统实验的一个主题,其目的是建立系统抵抗生产环境中失控条件的能力...

    科技 2021年12月18日