鸿蒙开源三方组件--制作照片拼贴画collageview组件 原创 精华

@toc

1. 介绍

collageview用简洁的方法将指定图片制作成拼贴画，可以使用本地图片，也可以使用加载图片。

2. 效果一览

3. 依赖

allprojects{
    repositories{
        mavenCentral()
    }
}
implementation 'io.github.dzsf:collageview:1.0.0'

4. 使用方法

** 1. 在 layout.xml 文件中加入组件 **

<com.lopei.collageview.CollageView
    ohos:id="$+id:collageView"
    ohos:width="match_parent"
    ohos:height="match_content" />

2. 在 .java 文件中设置相关属性

CollageView collageView = (CollageView) findComponentById(ResourceTable.Id_collageView);

collageView
        .photoMargin(AttrHelper.vp2px(5, this))
        .photoPadding(AttrHelper.vp2px(8, this))
        .backgroundColor(RgbColor.fromArgbInt(0xffff0000))
        .photoFrameColor(RgbColor.fromArgbInt(0xff00ff00))

        .iconSelector(new CollageView.IconSelector() {
            @Override
            public int getIconResId(int i) {
                if (i == 0 || i  == 4) {
                    return ResourceTable.Media_icon;
                }
                return 0;
            }

            @Override
            public int getIconResType(int i) {
                if (i == 0 || i  == 4) {
                    return ICON_SELECTOR_RES_TYPE_MEDIA;
                }
                return 0;
            }
        }, 24)
        .useFirstAsHeader(true) // makes first photo fit device widtdh and use full line
        .defaultPhotosForLine(5) // sets default photos number for line of photos (can be changed by program at runtime)
        .placeHolder(ResourceTable.Media_place_holder) //adds placeholder resource
        .headerForm(CollageView.ImageForm.IMAGE_FORM_SQUARE) // sets form of image for header (if useFirstAsHeader == true)
        .photosForm(CollageView.ImageForm.IMAGE_FORM_HALF_HEIGHT) //sets form of image for other photos
        .loadPhotos(new int[]{
                ResourceTable.Media_res_item_1,
                ResourceTable.Media_res_item_2,
                ResourceTable.Media_res_item_3,
                ResourceTable.Media_res_item_1,
                ResourceTable.Media_res_item_2,
                ResourceTable.Media_res_item_3,
                ResourceTable.Media_res_item_1,
                ResourceTable.Media_res_item_2,
                ResourceTable.Media_res_item_3}); // here you can use Array/List of photo urls or array of resource ids

3. 设置相片的点击事件（非必要）

collageView.setOnPhotoClickListener(new CollageView.OnPhotoClickListener() {
  @Override
  public void onPhotoClick(int position) {
     // do random stuff here
   }
});

4. 设置相片的选择器（需要选择器时，用 .iconSelector(IconSelector))进行设置）

collageView.iconSelector(new CollageView.IconSelector() {
    @Override
    public int getIconResId(int i) {
        if (i == 0 || i  == 4) {
            return ResourceTable.Media_icon;
        }
        return 0;
    }

    @Override
    public int getIconResType(int i) {
        if (i == 0 || i  == 4) {
            return ICON_SELECTOR_RES_TYPE_MEDIA;
        }
        return 0;
    }
}, 24);

5. 下载链接

collageview源码链接