如何限制在自定义设计系统中使用特定的可绘制对象?

huangapple go评论62阅读模式
英文:

How to restrict usage of specific Drawables in a custom design system?

问题

I am implementing a custom design system in Android using Jetpack Compose, and I want to restrict the usage of specific drawables to maintain consistency and design integrity. Specifically, I want to restrict the usage of drawables to only the Fluent icons developed by Microsoft, which are shared as drawables in Android Studio.

In my components, I have defined properties that accept icons as drawables. However, I want to restrict these properties to only accept Fluent icons, and not allow the users to pass any integers or any other drawables.

How can I achieve this restriction in my custom design system? Should I use annotation processing or implement a custom class that checks for the Fluent icons? Or is there a better approach to achieve this?

Any insights or guidance would be appreciated. Thank you in advance!

英文:

I am implementing a custom design system in Android using Jetpack Compose, and I want to restrict the usage of specific drawables to maintain consistency and design integrity. Specifically, I want to restrict the usage of drawables to only the Fluent icons developed by Microsoft, which are shared as drawables in Android Studio.

In my components, I have defined properties that accept icons as drawables. However, I want to restrict these properties to only accept Fluent icons, and not allow the users to pass any integers or any other drawables.

How can I achieve this restriction in my custom design system? Should I use annotation processing or implement a custom class that checks for the Fluent icons? Or is there a better approach to achieve this?

Any insights or guidance would be appreciated. Thank you in advance!

答案1

得分: 1

I doubt that there is only 1 solution to your problem, one approach that I like is using LocalComposition.

data class Spacing(
    val small: Dp = 8.dp,
    val medium: Dp = 16.dp,
    val large: Dp = 32.dp,
)

val LocalSpacing = compositionLocalOf { Spacing() }

val MaterialTheme.spacing: Spacing
    @Composable
    @ReadOnlyComposable
    get() = LocalSpacing.current

@Composable
fun MainApplicationTheme(
    content: @Composable () -> Unit
) {
    CompositionLocalProvider(
        LocalSpacing provides Spacing(),
    ) {

        MaterialTheme(
            colors = LightColorPalette,
            typography = Typography,
            shapes = Shapes,
            content = content
        )
    }
}

Then you wrap in your MainActivity your composables with the MainApplicationTheme, and you have access to the spacings.

You could also do something like that for your Fluent icons drawables.

You use the above like this: MaterialTheme.spacing.small

Update1 the code that I was referring to that needs some changes from the above snippet is like the following:

class Icons

@get:DrawableRes
public val Icons.AddCircle: Int
    get() {
        return R.drawable.add_circle
    }

val LocalIcons = compositionLocalOf { Icons() }

val MaterialTheme.icons: Icons
    @Composable
    @ReadOnlyComposable
    get() = LocalIcons.current

@Composable
fun MainApplicationTheme(
    content: @Composable () -> Unit
) {
    CompositionLocalProvider(
        LocalIcons provides Icons(),
    ) {

        MaterialTheme(
            colors = LightColorPalette,
            typography = Typography,
            shapes = Shapes,
            content = content
        )
    }
}

And use it like this: MaterialTheme.icons.AddCircle

英文:

I doubt that there is only 1 solution to your problem, one approach that i like is using of LocalComposition.

example with spacings


data class Spacing(
    val small: Dp = 8.dp,
    val medium: Dp = 16.dp,
    val large: Dp = 32.dp,
)

val LocalSpacing = compositionLocalOf { Spacing() }

val MaterialTheme.spacing: Spacing
    @Composable
    @ReadOnlyComposable
    get() = LocalSpacing.current


@Composable
fun MainApplicationTheme(
    content: @Composable () -> Unit
) {
    CompositionLocalProvider(
        LocalSpacing provides Spacing(),
    ) {

        MaterialTheme(
            colors = LightColorPalette,
            typography = Typography,
            shapes = Shapes,
            content = content
        )
    }
}


then you wrap in your MainActivity your composables with the MainApplicationTheme and you have access to the spacings.

You could do also something like that for your Fluent icons drawables

You use the above like that MaterialTheme.spacing.small

Update1
the code that i was referring that needs some changes from the above snippet is like the following


class Icons

@get:DrawableRes
public val Icons.AddCircle: Int
    get() {
        return R.drawable.add_circle
    }

val LocalIcons = compositionLocalOf { Icons() }

val MaterialTheme.icons: Icons
    @Composable
    @ReadOnlyComposable
    get() = LocalIcons.current

@Composable
fun MainApplicationTheme(
    content: @Composable () -> Unit
) {
    CompositionLocalProvider(
        LocalIcons provides Icons(),
    ) {

        MaterialTheme(
            colors = LightColorPalette,
            typography = Typography,
            shapes = Shapes,
            content = content
        )
    }
}


and use it like this MaterialTheme.icons.AddCircle

huangapple
  • 本文由 发表于 2023年5月17日 19:28:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/76271588.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定