Update arrangement guide in the readme

cheonjaeung · Jul 20, 2023 · 5419091 · 5419091
1 parent 4b9f6c6
commit 5419091
Show file tree

Hide file tree

Showing 16 changed files with 61 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -1,16 +1,36 @@
-<p align="center"><img alt="logo" src="images/compose-grid-logo.png" width="200"></p>
+<p align="center"><img alt="logo" src="images/logo.png" width="200"></p>
 <h1 align="center">Grid Layout for Compose</h1>
 <p align="center"><i>Missing grid layout for Jetpack Compose and Compose Multiplatform</i></p>
 
 **This project is under development.** But if you have a great idea for implementing grid, feel free
 to create issue or pull request.
 
+## Installation
+
+This library depends on Compose. It is recommended to use grid layout version that matches with your
+project's compose version.
+
+| GridLayout | Jetpack Compose (Android) | Compose Multiplatform |
+|------------|---------------------------|-----------------------|
+| 1.0        | 1.4.3                     | 1.4.1                 |
+
+To download `gridlayout-compose`, add this library to your project's dependency:
+
+```groovy
+dependencies {
+    implementation("io.woong.compose.grid:grid:${version}")
+}
+```
+
 ## Usage
 
-There are 2 layout composable called `HorizontalGrid` and `VerticalGrid`. You can just place
-children composables in the grid layout.
+This library contains 2 layout composable called `HorizontalGrid` and `VerticalGrid`. Both layout
+creates multiple rows and columns, but `HorizontalGrid` has fixed rows and `VerticalGrid`has fixed
+columns. The grid layout places children as a line until the number of children is smaller than
+main axis count (row count if horizontal, column count if vertical). But if the number of children
+is over than main axis count, the grid places next children at the next line.
 
-For instance, you can write code like below for grid of color boxes:
+For instance, below code is an example of horizontal grid:
 
 ```kotlin
 @Composable
@@ -25,6 +45,43 @@ fun ExampleGrid(colors: List<Color>) {
 
 ![horizontal-grid-example](./images/horizontal-grid-example.png)
 
+## Features
+
+`HorizontalGrid` and `VerticalGrid` have following features.
+
+### Arrangement
+
+The grid layout have `horizontalArrangement` and `verticalArrangement` parameter that controls
+the way to place children and determine space between children. The default horizontal arrangement
+is `Arrangement.Start` and the default vertical arrangement is `Arrangement.Top`.
+
+The following shows types of `horizontalArrangement`:
+
+| Horizontal Arrangement   | Example                                                                                    |
+|--------------------------|--------------------------------------------------------------------------------------------|
+| Arrangement.Start        | ![horizontal_arrangement_start](./images/horizontal_arrangement_start.png)                 |
+| Arrangement.Center       | ![horizontal_arrangement_center](./images/horizontal_arrangement_center.png)               |
+| Arrangement.End          | ![horizontal_arrangement_end](./images/horizontal_arrangement_end.png)                     |
+| Arrangement.SpaceAround  | ![horizontal_arrangement_space_around](./images/horizontal_arrangement_space_around.png)   |
+| Arrangement.SpaceBetween | ![horizontal_arrangement_space_between](./images/horizontal_arrangement_space_between.png) |
+| Arrangement.SpaceEvenly  | ![horizontal_arrangement_space_evenly](./images/horizontal_arrangement_space_evenly.png)   |
+
+And the following shows types of `verticalArrangement`:
+
+| Vertical Arrangement     | Example                                                                                |
+|--------------------------|----------------------------------------------------------------------------------------|
+| Arrangement.Top          | ![vertical_arrangement_top](./images/vertical_arrangement_top.png)                     |
+| Arrangement.Center       | ![vertical_arrangement_center](./images/vertical_arrangement_center.png)               |
+| Arrangement.Bottom       | ![vertical_arrangement_bottom](./images/vertical_arrangement_bottom.png)               |
+| Arrangement.SpaceAround  | ![vertical_arrangement_space_around](./images/vertical_arrangement_space_around.png)   |
+| Arrangement.SpaceBetween | ![vertical_arrangement_space_between](./images/vertical_arrangement_space_between.png) |
+| Arrangement.SpaceEvenly  | ![vertical_arrangement_space_evenly](./images/vertical_arrangement_space_evenly.png)   |
+
+## Sample App
+
+This project contains sample app for Android and Desktop platform. You can see how the grid layout
+actually works with options. Checkout `sample-android` and `sample-desktop` directory.
+
 ## License
 
 Compose Grid is licensed under Apache License 2.0. See [license file](./LICENSE.txt) for more details.
diff --git a/images/compose-grid-logo.png b/images/compose-grid-logo.png
diff --git a/images/compose-grid-logo.svg b/images/compose-grid-logo.svg
diff --git a/images/horizontal_arrangement_center.png b/images/horizontal_arrangement_center.png
diff --git a/images/horizontal_arrangement_end.png b/images/horizontal_arrangement_end.png
diff --git a/images/horizontal_arrangement_space_around.png b/images/horizontal_arrangement_space_around.png
diff --git a/images/horizontal_arrangement_space_between.png b/images/horizontal_arrangement_space_between.png
diff --git a/images/horizontal_arrangement_space_evenly.png b/images/horizontal_arrangement_space_evenly.png
diff --git a/images/horizontal_arrangement_start.png b/images/horizontal_arrangement_start.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/vertical_arrangement_bottom.png b/images/vertical_arrangement_bottom.png
diff --git a/images/vertical_arrangement_center.png b/images/vertical_arrangement_center.png
diff --git a/images/vertical_arrangement_space_around.png b/images/vertical_arrangement_space_around.png
diff --git a/images/vertical_arrangement_space_between.png b/images/vertical_arrangement_space_between.png
diff --git a/images/vertical_arrangement_space_evenly.png b/images/vertical_arrangement_space_evenly.png
diff --git a/images/vertical_arrangement_top.png b/images/vertical_arrangement_top.png