英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论