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” 來實現。
效果展示
