{"id":26323476,"url":"https://github.com/illarionov/debuglayout","last_synced_at":"2025-03-15T17:18:06.342Z","repository":{"id":215994679,"uuid":"739759344","full_name":"illarionov/debuglayout","owner":"illarionov","description":"A set of tools for Compose to help you align objects: layouts, grids and rulers","archived":false,"fork":false,"pushed_at":"2025-03-01T08:53:46.000Z","size":847,"stargazers_count":2,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-01T09:27:24.229Z","etag":null,"topics":["android","compose","compose-ui","debugging-tools","kotlin-multiplatform","kotlin-multiplatform-library"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/illarionov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-06T13:10:59.000Z","updated_at":"2025-03-01T08:52:59.000Z","dependencies_parsed_at":"2024-01-10T23:28:38.531Z","dependency_job_id":"ea7ae913-bd28-4491-bf83-54bc12a0c3b7","html_url":"https://github.com/illarionov/debuglayout","commit_stats":null,"previous_names":["illarionov/pixnews-debuglayout","illarionov/debuglayout"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/illarionov%2Fdebuglayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/illarionov%2Fdebuglayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/illarionov%2Fdebuglayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/illarionov%2Fdebuglayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/illarionov","download_url":"https://codeload.github.com/illarionov/debuglayout/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243762228,"owners_count":20343979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","compose","compose-ui","debugging-tools","kotlin-multiplatform","kotlin-multiplatform-library"],"created_at":"2025-03-15T17:18:05.713Z","updated_at":"2025-03-15T17:18:06.325Z","avatar_url":"https://github.com/illarionov.png","language":"Kotlin","readme":"# Compose Debug Layout Toolbox\n\nA set of tools for Compose to help you align objects: layouts, grids and rulers.\n\nIt is intended to be used only with `@Preview` Composables, in screenshot tests or in custom debug drawers.\n\n## Installation\n\nThe latest release is available on [Maven Central].\n\n```kotlin\nrepositories {\n    mavenCentral()\n}\n```\n\nAdd the dependency:\n\n```kotlin\ndependencies {\n    implementation(\"at.released.debuglayout:core:0.2\")\n}\n```\n\nSnapshot versions may be published to a self-hosted public repository:\n\n```kotlin\npluginManagement {\n    repositories {\n        maven {\n            url = uri(\"https://maven.pixnews.ru\")\n            mavenContent {\n                includeGroup(\"at.released.debuglayout\")\n            }\n        }\n    }\n}\n```\n\n## Usage\n\nBuild `debuglayout {}` modifier with the set of tools you need. For example:\n\n(these examples uses layouts from [Now in Android App](https://github.com/android/nowinandroid))\n\n```kotlin\n@Preview\n@Composable\nfun SimpleComposablePreview() {\n    Box(\n        modifier = Modifier\n            .debugLayout {\n                rowsFromTop(\n                    rows = 1.asRowColumnCount,\n                    height = 56.dp,\n                    color = DebugLayoutDefaults.colorSecondary,\n                )\n                rowsFromBottom(\n                    rows = 1.asRowColumnCount,\n                    height = 56.dp,\n                    color = DebugLayoutDefaults.colorTertiary,\n                )\n                columnsStretch(\n                    columns = 4,\n                    margin = 16.dp,\n                    gutter = 16.dp,\n                    color = DebugLayoutDefaults.colorPrimary,\n                )\n                verticalRuler()\n            }\n    ) {\n        …\n    }\n}\n```\n\n![Sample](doc/img/sample.png)\n\n## Tools\n\nThis library has grids, guidelines, rows columns and rules.\n\n### Grids\n\n`grid()` draws a simple grid of a specified size.\n\n```kotlin\nfun grid(size: Dp, color: Color, strokeWidth: Dp)\n```\n\nExample:\n\n```kotlin\n@Preview\n@Composable\nprivate fun SearchToolbarPreview() {\n    Box(\n        modifier = Modifier\n            .debugLayout {\n                grid(size = 8.dp)\n            }\n    ) { … }\n}\n```\n\n\u003cimg alt=\"Sample Grid\" src=\"doc/img/sample-grid.png\" height=\"117\" \u003e\n\n### Guidelines\n\n`guideline()` draws horizontal and vertical guidelines. Position of the guideline can be specified from top, bottom,\nright, left, or center, with an optional offset in dp or percents.\n\n```kotlin\nfun guideline(\n    position: DebugGuidelinePosition,\n    color: Color,\n    strokeWidth: Dp,\n)\n```\n\nExample:\n\n```kotlin\n@Preview\n@Composable\nfun EmptySearchResultColumnPreview() {\n    Box(\n        modifier = Modifier\n            .debugLayout {\n                guideline(\n                    position = Top(offset = 28.dp.asGuidelineOffset),\n                    color = Color.Blue,\n                )\n                guideline(\n                    position = Bottom(28.dp.asGuidelineOffset),\n                    color = Color.Blue,\n                )\n                guideline(\n                    position = Start(24.dp.asGuidelineOffset),\n                )\n                guideline(\n                    position = End(16.dp.asGuidelineOffset),\n                )\n                guideline(\n                    position = CenterHorizontal(),\n                    color = Color.LightGray,\n                )\n                guideline(\n                    position = CenterVertical(),\n                    color = Color.LightGray,\n                )\n                guideline(\n                    position = Top(offset = (2/5f).asGuidelineOffsetPercent),\n                    color = Color.Yellow,\n                )\n            },\n    ) {\n        …\n    }\n}\n```\n\n\u003cimg alt=\"Sample Guidelines\" src=\"doc/img/sample-guidelines.png\" height=\"252\" \u003e\n\nThere are also a number of auxiliary extensions:\n\n```kotlin\nDebugLayout.guidelineFromStart()\nDebugLayout.guidelineFromEnd()\nDebugLayout.guidelineFromTop()\nDebugLayout.guidelineFromBottom()\nDebugLayout.guidelineCenterHorizontal()\nDebugLayout.guidelineCenterVertical()\n```\n\n### Rows and columns\n\nAllows you to draw rows of a specified width and columns of a specified height with customized margins and gutters.\n\n```kotlin\nfun columns(\n    // DebugColumnsArrangement: Top | Bottom | Center | Stretch\n    arrangement: DebugColumnsArrangement,\n    columns: RowsColumnsCount,\n    color: Color,\n)\n\nfun rows(\n    // DebugRowsArrangement: Left | Right | Center | Stretch\n    arrangement: DebugRowsArrangement,\n    rows: RowsColumnsCount,\n    color: Color,\n)\n```\n\nExample rows from top and bottom:\n\n```kotlin\n@Preview\n@Composable\nfun EmptySearchResultColumnPreview() {\n    Box(\n        modifier = Modifier\n            .debugLayout {\n                rows(\n                    arrangement = DebugRowsArrangement.Top(\n                        height = 8.dp,\n                        offset = 2.dp,\n                        gutter = 4.dp\n                    ),\n                    rows = 3.asRowColumnCount,\n                    color = DebugLayoutDefaults.colorPrimary,\n                )\n                rows(\n                    arrangement = DebugRowsArrangement.Bottom(\n                        height = 8.dp,\n                        offset = 2.dp,\n                        gutter = 4.dp\n                    ),\n                    rows = 3.asRowColumnCount,\n                    color = DebugLayoutDefaults.colorSecondary,\n                )\n                rows(\n                    arrangement = DebugRowsArrangement.Center(\n                        height = 12.dp,\n                        gutter = 8.dp\n                    ),\n                    rows = 4.asRowColumnCount,\n                    color = DebugLayoutDefaults.colorTertiary,\n                )\n            },\n    ) {\n        …\n    }\n}\n```\n\n![Sample top, bottom and center rows](doc/img/sample-rows-1.png)\n\nColumns:\n\n```kotlin\n@Preview\n@Composable\nfun EmptySearchResultColumnPreview() {\n    Box(\n        modifier = Modifier\n            .debugLayout {\n                columns(\n                    arrangement = Stretch(\n                        gutter = 24.dp,\n                        margin = 82.dp,\n                    ),\n                    columns = 3.asRowColumnCount,\n                    color = DebugLayoutDefaults.colorSecondary,\n                )\n                columns(\n                    arrangement = DebugColumnsArrangement.Right(\n                        gutter = 32.dp,\n                        width = 8.dp,\n                        offset = 16.dp\n                    ),\n                    columns = Auto,\n                    color = DebugLayoutDefaults.colorTertiary,\n                )\n            },\n    ) {\n        …\n    }\n}\n```\n\n![Sample top, bottom and center rows](doc/img/sample-columns-1.png)\n\nAuxiliary extensions:\n\n```kotlin\nDebugLayout.columnsFromLeft()\nDebugLayout.columnsFromRight()\nDebugLayout.columnsFromCenter()\nDebugLayout.columnsStretch()\nDebugLayout.rowsFromTop()\nDebugLayout.rowsFromBottom()\nDebugLayout.rowsFromCenter()\nDebugLayout.rowsStretch()\n```\n\n### Rulers\n\n`horizontalRuler()` and `verticalRuler()` are designed to draw a horizontal or vertical ruler along the edge of\nthe frame.\n\nYou can set the value of the ticks on the ruler: dp, pixels, millimeters or inches and the frequency.\nYou can also adjust the zero position: from top, center or bottom with a defined offset.\n\n```kotlin\nfun horizontalRuler(\n    step: DebugRulerMeasureUnit,\n    zeroOffset: DebugRulerHorizontalZeroPoint,\n)\n\nfun verticalRuler(\n    step: DebugRulerMeasureUnit = DebugLayoutDefaults.Ruler.step,\n    zeroOffset: DebugRulerVerticalZeroPoint = DebugRulerVerticalZeroPoint.ZERO, \n)\n```\n\nExample of a vertical ruler with 16 dp ticks and a zero position at 16 dp from top:\n\n```kotlin\n@Preview\n@Composable\nfun EmptySearchResultColumnPreview() {\n    Box(\n        modifier = Modifier\n            .debugLayout {\n                verticalRuler(\n                    step = 16.rulerDp,\n                    zeroOffset = DebugRulerVerticalZeroPoint(\n                        alignment = TOP,\n                        offset = 56.rulerDp\n                    ),\n                )\n            },\n    ) { … }\n}\n```\n\n![Vertical ruler](doc/img/sample-vertical-ruler-1.png)\n\nExample of a horizontal ruler with a step of 10mm and a zero position at 10 mm to the left of center:\n\n```kotlin\n@Preview\n@Composable\nfun EmptySearchResultColumnPreview() {\n    Box(\n        modifier = Modifier\n            .debugLayout {\n                horizontalRuler(\n                    step = 10.rulerMm,\n                    zeroOffset = DebugRulerHorizontalZeroPoint(\n                        alignment = CENTER,\n                        offset = (-10).rulerMm\n                    ),\n                )\n            },\n    ) { … }\n}\n```\n\n![Horizontal ruler](doc/img/sample-horizontal-ruler-1.png)\n\nYou can also check out this set of predefined layouts as example: [Material3DebugLayouts.kt](core%2fsrc%2fcommonMain%2fkotlin%2fMaterial3DebugLayouts.kt)\n\n## Contributing\n\nAny type of contributions are welcome. Please see the [contribution guide](CONTRIBUTING.md).\n\n## License\n\nThese services are licensed under Apache 2.0 License. Authors and contributors are listed in the\n[Authors](AUTHORS) file.\n\n```\nCopyright 2024 compose-debuglayout project authors and contributors.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fillarionov%2Fdebuglayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fillarionov%2Fdebuglayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fillarionov%2Fdebuglayout/lists"}