Mercandj / compose-aspect-ratio-reference

Jetpack Compose lib: Aspect Ratio based on parent reference. SDK on JitPack

Home Page:https://medium.com/@jonathan.mercandalli_41381/aspect-ratio-with-reference-in-jetpack-compose-9bf9b79016ee

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cards

medium

Compose - Aspect Ratio Reference

What?

Jetpack Compose Modifier.aspectRatio does not let you choose the dimens used to compute the ratio.

Goal. Be able to choose the reference of the ratio based on:

  • parent width
  • parent height
  • min(parent width, parent height)
  • max(parent width, parent height)

How to integrate?

Step 1. In project root build.gradle or build.gradle.kts, add:

allprojects {
    repositories {
        maven { url 'https://jitpack.io' } // Groovy: build.gradle
        maven(url = "https://jitpack.io") // Kotlin: build.gradle.kts
    }
}

Step 2. Add the dependency in app build.gradle or build.gradle.kts:

dependencies {
    implementation("com.github.Mercandj:compose-aspect-ratio-reference:1.00.04")
}

How to use it?

Box(modifier = Modifier.width(300.dp).height(200.dp)) { // Parent
    Surface( // Child
        color = Color.Red,
        modifier = Modifier
            .aspectRatioReference(
                aspectRatioWidth = 1f,
                aspectRatioHeight = 1f,
                aspectRatioReference = AspectRatioReference.MIN_PARENT_WIDTH_PARENT_HEIGHT
            )
            .align(Alignment.Center)
    ) {}
}

Preview

preview

About

How to support:

  • Star ⭐️ this git project 🙏
  • Clap 👏 on Medium 🙏

Goku Genkidama

About

Jetpack Compose lib: Aspect Ratio based on parent reference. SDK on JitPack

https://medium.com/@jonathan.mercandalli_41381/aspect-ratio-with-reference-in-jetpack-compose-9bf9b79016ee

License:MIT License


Languages

Language:Kotlin 100.0%