[[433138]]

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

前言

在實(shí)際開發(fā)過程中，我們經(jīng)常會遇到一些系統(tǒng)原有組件無法滿足的情況，而HarmonyOS提供了自定義組件的方式，我們使用自定義組件來滿足項(xiàng)目需求。自定義組件是由開發(fā)者定義的具有一定特性的組件，通過擴(kuò)展 Component 或其子類實(shí)現(xiàn)，可以精確控制屏幕元素的外觀，實(shí)現(xiàn)開發(fā)者想要達(dá)到的效果，也可響應(yīng)用戶的點(diǎn)擊、觸摸、長按等操作。下面通過自定義一個仿微信朋友圈主頁的組件來了解一下自定義組件的過程。

簡述

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

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

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

自定義組件測量出的大小需通過 setEstimatedSize 通知組件，并且必須返回true使測量值生效。setEstimatedSize 方法的入?yún)y帶模式信息，可使用 Component.EstimateSpec.getChildSizeWithMode 方法進(jìn)行拼接。

測量模式

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

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

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

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

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

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

... 
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) { 
        // 設(shè)置測量組件的偵聽器 
        setEstimateSizeListener(this); 
        // 初始化畫筆 
        initPaint(); 
        // 添加繪制任務(wù) 
        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); 
 
    } 
 
} 

如上代碼，我們創(chuàng)建一個 MyComponent 繼承 Component ，并且在構(gòu)造方法中，初始化一些畫筆屬性，傳入默認(rèn)的圖片，當(dāng)然也可以通過調(diào)用接口的方式在引用的地方傳入圖片。然后在 ondraw 方法中做具體的畫筆操作。通過 canvas.drawPixelMapHolderRect 方法畫出一大一小兩張可堆疊的圖片，并調(diào)整好位置參數(shù)。

在 Ability 中引用

實(shí)現(xiàn)組件之后，我們就可以在我們需要展示的 Ability 去調(diào)用這個自定義組件了。

... 
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> 

需要注意的是，微信朋友圈主頁的滑動有下拉回彈效果，所以我們需要設(shè)置 ScrollView 的布局屬性。通過在代碼中調(diào)用 setReboundEffect(true) 或者 xml 中設(shè)置 ohos:rebound_effect=“true” 來實(shí)現(xiàn)。

效果展示

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com