Open harmony Implementation of ImageLists

.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+/local.properties
+/.idea
+**/build

AppScope/app.json5

@@ -0,0 +1,11 @@
+{
+  "app": {
+    "bundleName": "com.example.imagelists",
+    "vendor": "example",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:app_icon",
+    "label": "$string:app_name",
+    "distributedNotificationEnabled": true
+  }
+}

AppScope/resources/base/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "ImageLists"
+    }
+  ]
+}

ImageLists/.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/.preview
+/build

ImageLists/build-profile.json5

@@ -0,0 +1,5 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+  }
+}

ImageLists/hvigorfile.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright (C) 2022 Application Library Engineering Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+module.exports = require('@ohos/hvigor-ohos-plugin').harTasks
+

ImageLists/index.ets

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2022 Application Library Engineering Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ImageData, ImageSize } from './src/main/ets/components/ImageDataItem'
+
+export { standardImageList } from './src/main/ets/components/StandardImageList'
+
+export { wovenImageList } from './src/main/ets/components/WovenImageList'
+
+export { quiltedImageList } from './src/main/ets/components/QuiltedImageList'
+
+export { masonaryImageList } from './src/main/ets/components/MasonaryImageList'

ImageLists/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@ohos/imagelists",
+  "description": "a npm package which contains arkUI2.0 page",
+  "ohos": {
+    "org": ""
+  },
+  "version": "1.0.0",
+  "main": "index.ets",
+  "types": "",
+  "repository": {},
+  "license": "ISC",
+  "dependencies": {}
+}

ImageLists/src/main/ets/components/ImageDataItem.ets

@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2022 Application Library Engineering Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export enum ImageSize {
+  BIG_SQUARE,
+  RECTANGLE,
+  SMALL_SQUARE
+}
+
+export class ImageData {
+  id: number
+  title: string
+  imagePath: Resource
+  width: string | number
+  height: string | number
+  size: ImageSize
+
+  constructor(id: number, title: string, path: Resource, width?: string | number, height?: string | number, size?: ImageSize) {
+    this.id = id
+    this.title = title
+    this.imagePath = path
+    this.width = width
+    this.height = height
+    this.size = size
+  }
+
+  getId(): number {
+    return this.id
+  }
+
+  getTitle(): string {
+    return this.title
+  }
+
+  getPath(): Resource {
+    return this.imagePath
+  }
+
+  setImageWidth(width: number) {
+    this.width = width
+  }
+
+  setImageHeight(height: number) {
+    this.height = height
+  }
+
+  setImageSize(size: ImageSize) {
+    this.size = size
+  }
+}

ImageLists/src/main/ets/components/MasonaryImageList.ets

@@ -0,0 +1,107 @@
+/*
+ * Copyright (C) 2022 Application Library Engineering Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ImageData } from './ImageDataItem'
+
+@Component
+export struct masonaryImageList {
+  @State images: ImageData[] = new Array()
+  @State padding: number = 4
+  private scroller: Scroller = new Scroller();
+  private model: MasonaryImageListModel
+
+  aboutToAppear() {
+    this.model = new MasonaryImageListModel(this.images)
+  }
+
+  build() {
+    Column() {
+      Scroll(this.scroller) {
+        Row() {
+          Column() {
+            ForEach([...new Array(this.model.images.length).keys()], (index: number) => {
+              if ((index + 1) % 2 != 0) {
+                Stack({ alignContent: Alignment.BottomStart }) {
+                  Row() {
+                    Image(this.model.images[index].imagePath).width('100%').height(this.model.images[index].height)
+                  }
+
+                  Row() {
+                    Text(this.model.images[index].title)
+                      .fontSize('12fp')
+                      .fontWeight(FontWeight.Bold)
+                      .fontColor(Color.White)
+                      .padding(7)
+                  }.width('100%').height('25vp').backgroundColor(Color.Black).opacity(0.5)
+                }.padding(this.padding)
+              }
+            })
+          }
+          .width('50%')
+
+          Column() {
+            ForEach([...new Array(this.model.images.length).keys()], (index: number) => {
+              if ((index + 1) % 2 == 0) {
+                Stack({ alignContent: Alignment.BottomStart }) {
+                  Row() {
+                    Image(this.model.images[index].imagePath).width('100%').height(this.model.images[index].height)
+                  }
+
+                  Row() {
+                    Text(this.model.images[index].title)
+                      .fontSize('12fp')
+                      .fontWeight(FontWeight.Bold)
+                      .fontColor(Color.White)
+                      .padding(7)
+                  }.width('100%').height('25vp').backgroundColor(Color.Black).opacity(0.5)
+                }.padding(this.padding)
+              }
+            })
+          }
+          .width('50%')
+        }.margin({ top: '5vp', left: '5vp', right: '5vp', bottom: '30vp' }).alignItems(VerticalAlign.Top)
+      }
+      .scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off)
+
+    }
+  }
+}
+
+class MasonaryImageListModel {
+  images: ImageData[]
+
+  constructor(images: ImageData[]) {
+    this.images = images
+    this.setHeights()
+  }
+
+  setHeights() {
+    for (var i = 0;i < this.images.length; i++) {
+      if (i % 8 == 0 || i % 8 == 4 || i % 8 == 5) {
+        this.images[i].height = '224vp'
+      }
+      else if (i % 8 == 1 || i % 8 == 3 || i % 8 == 6) {
+        this.images[i].height = '152vp'
+      }
+      else if (i % 8 == 2) {
+        this.images[i].height = '112vp'
+      }
+      else {
+        this.images[i].height = '184vp'
+      }
+    }
+  }
+}