skill: add Android skills
This commit is contained in:
@@ -0,0 +1,213 @@
|
||||
When creating a Glimmer Button component, refer to the following source code in
|
||||
`Button.kt`:
|
||||
|
||||
|
||||
```kotlin
|
||||
/*
|
||||
* Copyright 2025 The Android Open Source Project
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package androidx.xr.glimmer
|
||||
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.RowScope
|
||||
import androidx.compose.foundation.layout.defaultMinSize
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.runtime.Immutable
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.semantics.Role
|
||||
import androidx.compose.ui.semantics.role
|
||||
import androidx.compose.ui.semantics.semantics
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
/**
|
||||
* Button is a component used for exposing actions to a user.
|
||||
*
|
||||
* @sample androidx.xr.glimmer.samples.ButtonSample
|
||||
*
|
||||
* Buttons can use icons to provide more context about the action:
|
||||
*
|
||||
* @sample androidx.xr.glimmer.samples.ButtonWithLeadingIconSample
|
||||
*
|
||||
* There are multiple button size variants - providing a different [ButtonSize] will affect default
|
||||
* values used inside this button, such as the minimum height. Note that you can still provide a
|
||||
* size modifier such as [androidx.compose.foundation.layout.size] to change the layout size of this
|
||||
* button, [buttonSize] affects default values and values internal to the button.
|
||||
*
|
||||
* @sample androidx.xr.glimmer.samples.LargeButtonSample
|
||||
* @param onClick called when this button is clicked
|
||||
* @param modifier the [Modifier] to be applied to this button
|
||||
* @param enabled controls the enabled state of this button. When `false`, this button will not
|
||||
* respond to user input
|
||||
* @param buttonSize the size variant of this button, represented as a [ButtonSize]. Changing
|
||||
* [buttonSize] will affect some default values used by this button - but the final resulting size
|
||||
* of the button will still be calculated based on the content of the button, and any provided
|
||||
* size modifiers such as [androidx.compose.foundation.layout.size]. For example, setting a 100.dp
|
||||
* size using a size modifier will result in the same layout size regardless of [buttonSize], but
|
||||
* the provided [buttonSize] will affect other properties such as padding values and the size of
|
||||
* icons.
|
||||
* @param leadingIcon optional leading icon to be placed before the [content]. This is typically an
|
||||
* [Icon] tinted with [contentColor] by default.
|
||||
* @param trailingIcon optional trailing icon to be placed after the [content]. This is typically an
|
||||
* [Icon] tinted with [contentColor] by default.
|
||||
* @param shape the [Shape] used to clip this button, and also used to draw the background and
|
||||
* border
|
||||
* @param color background color of this button
|
||||
* @param contentColor content color used by components inside [content], [leadingIcon], and
|
||||
* [trailingIcon].
|
||||
* @param border the border to draw around this button
|
||||
* @param contentPadding the spacing values to apply internally between the container and the
|
||||
* content
|
||||
* @param interactionSource an optional hoisted [MutableInteractionSource] for observing and
|
||||
* emitting Interactions for this button. You can use this to change the button's appearance or
|
||||
* preview the button in different states. Note that if `null` is provided, interactions will
|
||||
* still happen internally.
|
||||
* @param content the main content, typically [Text], to display inside this button
|
||||
*/
|
||||
@Composable
|
||||
public fun Button(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
buttonSize: ButtonSize = ButtonSize.Medium,
|
||||
leadingIcon: @Composable (() -> Unit)? = null,
|
||||
trailingIcon: @Composable (() -> Unit)? = null,
|
||||
shape: Shape = GlimmerTheme.shapes.large,
|
||||
color: Color = GlimmerTheme.colors.surface,
|
||||
contentColor: Color = calculateContentColor(color),
|
||||
border: BorderStroke? = SurfaceDefaults.border(),
|
||||
contentPadding: PaddingValues = ButtonDefaults.contentPadding(buttonSize),
|
||||
interactionSource: MutableInteractionSource? = null,
|
||||
content: @Composable RowScope.() -> Unit,
|
||||
) {
|
||||
val iconSize = ButtonDefaults.iconSize
|
||||
val iconSpacing = ButtonDefaults.iconSpacing
|
||||
val minHeight = ButtonDefaults.minimumHeight(buttonSize)
|
||||
|
||||
val depth =
|
||||
SurfaceDepthEffect(
|
||||
depthEffect = null,
|
||||
focusedDepthEffect = GlimmerTheme.depthEffectLevels.level1,
|
||||
)
|
||||
|
||||
val internalInteractionSource = interactionSource ?: remember { MutableInteractionSource() }
|
||||
|
||||
CompositionLocalProvider(LocalTextStyle provides GlimmerTheme.typography.bodySmall) {
|
||||
Row(
|
||||
modifier
|
||||
.semantics { role = Role.Button }
|
||||
.surface(
|
||||
enabled = enabled,
|
||||
shape = shape,
|
||||
color = color,
|
||||
contentColor = contentColor,
|
||||
depthEffect = depth,
|
||||
border = border,
|
||||
interactionSource = internalInteractionSource,
|
||||
)
|
||||
.clickable(
|
||||
enabled = enabled,
|
||||
interactionSource = internalInteractionSource,
|
||||
onClick = onClick,
|
||||
)
|
||||
.defaultMinSize(minHeight = minHeight)
|
||||
.padding(contentPadding),
|
||||
horizontalArrangement = Arrangement.Center,
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
if (leadingIcon != null) {
|
||||
Box(Modifier.padding(end = iconSpacing)) {
|
||||
CompositionLocalProvider(LocalIconSize provides iconSize, content = leadingIcon)
|
||||
}
|
||||
}
|
||||
content()
|
||||
if (trailingIcon != null) {
|
||||
Box(Modifier.padding(start = iconSpacing)) {
|
||||
CompositionLocalProvider(
|
||||
LocalIconSize provides iconSize,
|
||||
content = trailingIcon,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ButtonSize represents the different size variants of a [Button]. ButtonSize will affect default
|
||||
* values used inside a [Button], such as the minimum height and the size of icons.
|
||||
*/
|
||||
@Immutable
|
||||
@JvmInline
|
||||
public value class ButtonSize internal constructor(private val value: Int) {
|
||||
public companion object {
|
||||
/** ButtonSize representing a medium [Button]. This is the default size. */
|
||||
public val Medium: ButtonSize = ButtonSize(1)
|
||||
/** ButtonSize representing a large [Button]. */
|
||||
public val Large: ButtonSize = ButtonSize(2)
|
||||
}
|
||||
}
|
||||
|
||||
/** Default values used for [Button]. */
|
||||
public object ButtonDefaults {
|
||||
/** Default content padding used for a [Button] with the specified [buttonSize]. */
|
||||
@Composable
|
||||
public fun contentPadding(buttonSize: ButtonSize): PaddingValues {
|
||||
val componentSpacingValues = GlimmerTheme.componentSpacingValues
|
||||
return if (buttonSize == ButtonSize.Medium) {
|
||||
PaddingValues(
|
||||
horizontal = componentSpacingValues.large,
|
||||
vertical = componentSpacingValues.small,
|
||||
)
|
||||
} else {
|
||||
PaddingValues(componentSpacingValues.large)
|
||||
}
|
||||
}
|
||||
|
||||
/** Default minimum height for [Button] and [ToggleButton] with the specified [buttonSize]. */
|
||||
internal fun minimumHeight(buttonSize: ButtonSize): Dp {
|
||||
return when (buttonSize) {
|
||||
ButtonSize.Medium -> 48.dp
|
||||
ButtonSize.Large -> 72.dp
|
||||
else -> throw IllegalArgumentException("Unknown size $buttonSize.")
|
||||
}
|
||||
}
|
||||
|
||||
/** Default icon size for buttons with non-icon content: [Button], [ToggleButton]. */
|
||||
@get:Composable
|
||||
internal val iconSize: Dp
|
||||
get() = GlimmerTheme.iconSizes.small
|
||||
|
||||
/** Default spacing between icon and content for [Button] and [ToggleButton]. */
|
||||
@get:Composable
|
||||
internal val iconSpacing: Dp
|
||||
get() = GlimmerTheme.componentSpacingValues.extraSmall
|
||||
}
|
||||
```
|
||||
|
||||
<br />
|
||||
Reference in New Issue
Block a user