From 96611ef3230e5ffe923846bbe54c68ddf572f39b Mon Sep 17 00:00:00 2001 From: Jaewoong Cheon Date: Sat, 9 Dec 2023 17:26:17 +0900 Subject: [PATCH] Update documents for 1.1.0 --- docs/cell-strategy.md | 25 +++++++++++++++++++++++-- docs/images/span-graphic.png | Bin 0 -> 7952 bytes docs/installation.md | 2 ++ docs/span.md | 29 +++++++++++++++++++++++++++++ mkdocs.yml | 1 + 5 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 docs/images/span-graphic.png create mode 100644 docs/span.md diff --git a/docs/cell-strategy.md b/docs/cell-strategy.md index b53e380..a2dca9c 100644 --- a/docs/cell-strategy.md +++ b/docs/cell-strategy.md @@ -14,13 +14,19 @@ And each cell will have 1/n of the grid size. The API of `Fixed` looks like this: ```kotlin -class Fixed(private val count: Int) : SimpleGridCells +class Fixed( + private val count: Int, + private val fill: Boolean = true +) : SimpleGridCells ``` There is a parameter called `count`. This is the maximum number of cells the grid should have on each line. The `count` must be a positive number. If 0 or negative number is provided, it occurs an exception. +!!! note + For information about `fill` parameter, read [Fill Optoin](#fill-option) section. + For example, a grid has 400dp width or height, and `Fixed(4)` is applied. ```kotlin @@ -50,7 +56,10 @@ And each cell will have at least minimum size. The API of `Adaptive` looks like this: ```kotlin -class Adaptive(private val minSize: Dp) : SimpleGridCells +class Adaptive( + private val minSize: Dp, + private val fill: Boolean = true +) : SimpleGridCells ``` There is a parameter called `minSize`. This is the minimum size of each cell should have. @@ -58,6 +67,9 @@ The `minSize` must be a positive size. If the size is 0 or below, it occurs an e The grid layout with `Adaptive` calculates the maximum number of cells possible while keeping the `minSize` restriction. +!!! note + For information about `fill` parameter, read [Fill Option](#fill-option) section. + For example, a grid has 400dp width or height and `Adaptive(120.dp)` is applied. ```kotlin @@ -81,3 +93,12 @@ And each cells will have 1/3 of 400dp (about 133.333dp) width or height. If the grid size is expanded to 600dp, the number of cells on each line will be changed to 5 and each cell's size will be 120dp. + +## Fill Option + +Both `Fixed` and `Adaptive` have a optional parameter named `fill`. +The `fill` parameter determines that grid's item composable should fill grid cell's size. + +When `fill` is true, grid layout forces item composable to have width or height to fit cell's maximum width or height. +(width when vertical grid, height when horizontal grid) +But when false, item composable can have width or height from 0 to cell's maximum width or height. diff --git a/docs/images/span-graphic.png b/docs/images/span-graphic.png new file mode 100644 index 0000000000000000000000000000000000000000..affb102913a91af2c29cd77f62923e7e62e26c9e GIT binary patch literal 7952 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 bw90CMG3@I7INbaoA;*sf`!SB3{pEiEurK4D literal 0 HcmV?d00001 diff --git a/docs/installation.md b/docs/installation.md index 81b17ae..4e45054 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -29,6 +29,7 @@ The following table shows Compose versions which each library version depends on | GridLayout Version | Compose Version (Android) | Compose Version (Multiplatform) | |--------------------|---------------------------|---------------------------------| +| 1.1.0 | Jetpack Compose 1.5.0 | Compose Multiplatform 1.5.2 | | 1.0.0 | Jetpack Compose 1.5.0 | Compose Multiplatform 1.5.2 | | 0.2.0 | Jetpack Compose 1.4.3 | Compose Multiplatform 1.4.1 | | 0.1.0 | Jetpack Compose 1.4.3 | Compose Multiplatform 1.4.1 | @@ -39,6 +40,7 @@ It is recommended to use following target SDK version when using this library fo | GridLayout Version | Android Target SDK | Android Minimum SDK | |--------------------|--------------------|---------------------| +| 1.1.0 | Android 14 (34) | Lollipop (21) | | 1.0.0 | Android 14 (34) | Lollipop (21) | | 0.2.0 | Android 13 (33) | Lollipop (21) | | 0.1.0 | Android 13 (33) | Lollipop (21) | diff --git a/docs/span.md b/docs/span.md new file mode 100644 index 0000000..fa74a21 --- /dev/null +++ b/docs/span.md @@ -0,0 +1,29 @@ +# Spanning Cells + +The `content` composable lambda of grid layout extends `GridScope`. +To apply span size, you can set `span` modifier in the `GridScope`. + +The following code and graphic show a example of span. + +```kotlin +HorizontalGrid(rows = SimpleGridCells.Fixed(3)) { + Item() + Item(Modifier.span(2)) + Item(Modifier.span(2)) + Item() + Item() +} + +VerticalGrid(columns = SimpleGridCells.Fixed(3)) { + Item() + Item(Modifier.span(2)) + Item(Modifier.span(2)) + Item() + Item() +} +``` + +![span-graphic](images/span-graphic.png) + +!!! warning + If given span size is bigger than maximum cell count of the axis, the cell will be undisplayed. diff --git a/mkdocs.yml b/mkdocs.yml index 08271e2..333079e 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -38,6 +38,7 @@ nav: - 'Layout Composables': layout-composables.md - 'Cell Strategy': cell-strategy.md - 'Arrangement': arrangement.md + - 'Spanning Cells': span.md - 'Changelog': 'https://github.com/cheonjaewoong/gridlayout-compose/blob/main/CHANGELOG.md' # Repository Information