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

程序媛儿zzZZ

发布于 2021-7-23 16:24

浏览

1收藏

1. 介绍

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

2. 效果一览

鸿蒙开源三方组件--制作照片拼贴画collageview组件-鸿蒙开发者社区

3. 依赖

allprojects{
    repositories{
        mavenCentral()
    }
}
implementation 'io.github.dzsf:collageview:1.0.0'
1.
2.
3.
4.
5.
6.

4. 使用方法

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

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

在 .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
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

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

collageView.setOnPhotoClickListener(new CollageView.OnPhotoClickListener() {
  @Override
  public void onPhotoClick(int position) {
     // do random stuff here
   }
});
1.
2.
3.
4.
5.
6.

设置相片的选择器（需要选择器时，用 .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);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.