鴻蒙上自定義組件的過(guò)程

在實(shí)際開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)遇到一些系統(tǒng)原有組件無(wú)法滿(mǎn)足的情況，而 HarmonyOS 提供了自定義組件的方式，我們使用自定義組件來(lái)滿(mǎn)足項(xiàng)目需求。

自定義組件是由開(kāi)發(fā)者定義的具有一定特性的組件，通過(guò)擴(kuò)展 Component 或其子類(lèi)實(shí)現(xiàn)，可以精確控制屏幕元素的外觀，實(shí)現(xiàn)開(kāi)發(fā)者想要達(dá)到的效果，也可響應(yīng)用戶(hù)的點(diǎn)擊、觸摸、長(zhǎng)按等操作。

下面通過(guò)自定義一個(gè)仿微信朋友圈主頁(yè)的組件來(lái)了解一下自定義組件的過(guò)程。

關(guān)于自定義組件，一般遵循以下幾個(gè)方式：

①首先，創(chuàng)建一個(gè)繼承 Component 或其子類(lèi)的自定義組件類(lèi)，并添加構(gòu)造方法，如 MyComponent。

②實(shí)現(xiàn) Component.EstimateSizeListener 接口，在 onEstimateSize 方法中進(jìn)行組件測(cè)量，并通過(guò) setEstimatedSize 方法通知組件。

③自定義組件測(cè)量出的大小需通過(guò) setEstimatedSize 通知組件，并且必須返回 true 使測(cè)量值生效。

setEstimatedSize 方法的入?yún)y帶模式信息，可使用 Component.EstimateSpec.getChildSizeWithMode 方法進(jìn)行拼接。

⑤自定義 xml 屬性，通過(guò)構(gòu)造方法中攜帶的參數(shù) attrSet，可以獲取到在 xml 中配置的屬性值，并應(yīng)用在該自定義組件中。

⑥實(shí)現(xiàn) Component.DrawTask 接口，在 onDraw 方法中執(zhí)行繪制任務(wù)，該方法提供的畫(huà)布 Canvas，可以精確控制屏幕元素的外觀。在執(zhí)行繪制任務(wù)之前，需要定義畫(huà)筆 Paint。

⑦實(shí)現(xiàn) Component.TouchEventListener 或其他事件的接口，使組件可響應(yīng)用戶(hù)輸入。

⑧在 xml 文件中創(chuàng)建并配置自定義組件。

在 HarmonyOS 中 Component 是視圖的父類(lèi)，既然組件都是繼承 Component 來(lái)實(shí)現(xiàn)的，那么我們也可以繼承它來(lái)實(shí)現(xiàn)我們想要的視圖了，根據(jù)具體流程，我們按照示例代碼來(lái)了解一下大致流程。

創(chuàng)建自定義布局

复制...
publicclassMyComponentextendsComponentimplementsComponent.DrawTask,Component.EstimateSizeListener{
privatePaintpaint;
privatePaintpaintText;

privatePixelMapbigImage;

privatePixelMapsmallImage;

publicMyComponent(Contextcontext){
this(context,null);
}

publicMyComponent(Contextcontext,AttrSetattrSet){
this(context,attrSet,"");
}

publicMyComponent(Contextcontext,AttrSetattrSet,StringstyleName){
super(context,attrSet,styleName);
init(context);
}

publicvoidinit(Contextcontext){
//設(shè)置測(cè)量組件的偵聽(tīng)器
setEstimateSizeListener(this);
//初始化畫(huà)筆
initPaint();
//添加繪制任務(wù)
addDrawTask(this);
}

privatevoidinitPaint(){
paint=newPaint();
paint.setAntiAlias(true);
paint.setStrokeCap(Paint.StrokeCap.ROUND_CAP);
paint.setStyle(Paint.Style.STROKE_STYLE);

paintText=newPaint();
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
publicvoidaddDrawTask(Component.DrawTasktask){
super.addDrawTask(task);
task.onDraw(this,mCanvasForTaskOverContent);
}

@Override
publicbooleanonEstimateSize(intwidthEstimateConfig,intheightEstimateConfig){
intwidth=Component.EstimateSpec.getSize(widthEstimateConfig);
intheight=Component.EstimateSpec.getSize(heightEstimateConfig);
setEstimatedSize(
Component.EstimateSpec.getChildSizeWithMode(width,width,Component.EstimateSpec.NOT_EXCEED),
Component.EstimateSpec.getChildSizeWithMode(height,height,Component.EstimateSpec.NOT_EXCEED));
returntrue;
}

@Override
publicvoidonDraw(Componentcomponent,Canvascanvas){
intwidth=getWidth();
intcenter=width/2;

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

//獲取大圖片的大小

SizebigImageSize=bigImage.getImageInfo().size;
RectFloatbigImageRect=newRectFloat(0,0,width,bigImageSize.height);

//獲取小圖片的大小
SizesmallImageSize=smallImage.getImageInfo().size;
RectFloatsmallImageRect=newRectFloat(length*5,length*5-50,1100,1030);

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

}

}

如上代碼，我們創(chuàng)建一個(gè) MyComponent 繼承 Component ，并且在構(gòu)造方法中，初始化一些畫(huà)筆屬性，傳入默認(rèn)的圖片，當(dāng)然也可以通過(guò)調(diào)用接口的方式在引用的地方傳入圖片。

然后在 ondraw 方法中做具體的畫(huà)筆操作。通過(guò) canvas.drawPixelMapHolderRect 方法畫(huà)出一大一小兩張可堆疊的圖片，并調(diào)整好位置參數(shù)。

在 Ability 中引用

复制...
publicclassImageAbilitySliceextendsAbilitySlice{

@Override
protectedvoidonStart(Intentintent){
super.onStart(intent);
//super.setUIContent(ResourceTable.Layout_ability_image_main);
drawMyComponent();
}

privatevoiddrawMyComponent(){
//聲明布局
ScrollViewmyLayout=newScrollView(this);
DirectionalLayout.LayoutConfigconfig=newDirectionalLayout.LayoutConfig(
DirectionalLayout.LayoutConfig.MATCH_PARENT,DirectionalLayout.LayoutConfig.MATCH_PARENT);
myLayout.setLayoutConfig(config);
myLayout.setReboundEffect(true);
MyComponentcustomComponent=newMyComponent(this);
myLayout.addComponent(customComponent);
super.setUIContent(myLayout);
}

}

在 XML 文件中引用

复制
<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>

需要注意的是，微信朋友圈主頁(yè)的滑動(dòng)有下拉回彈效果，所以我們需要設(shè)置 ScrollView 的布局屬性。

通過(guò)在代碼中調(diào)用 setReboundEffect(true) 或者 xml 中設(shè)置 ohos:rebound_effect=“true” 來(lái)實(shí)現(xiàn)。