/*
* Copyright 2018 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.compose.material
import androidx.compose.animation.core.TweenSpec
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.Interaction
import androidx.compose.foundation.InteractionState
import androidx.compose.foundation.indication
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offsetPx
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.selection.toggleable
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.ripple.RippleIndication
import androidx.compose.runtime.Composable
import androidx.compose.runtime.State
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.gesture.scrollorientationlocking.Orientation
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.compositeOver
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.platform.DensityAmbient
import androidx.compose.ui.platform.LayoutDirectionAmbient
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
/**
* A Switch is a two state toggleable component that provides on/off like options
*
* @sample androidx.compose.material.samples.SwitchSample
*
* @param checked whether or not this components is checked
* @param onCheckedChange callback to be invoked when Switch is being clicked,
* therefore the change of checked state is requested.
* @param modifier Modifier to be applied to the switch layout
* @param enabled whether or not components is enabled and can be clicked to request state change
* @param interactionState the [InteractionState] representing the different [Interaction]s
* present on this Switch. You can create and pass in your own remembered
* [InteractionState] if you want to read the [InteractionState] and customize the appearance /
* behavior of this Switch in different [Interaction]s.
* @param color main color of the track and thumb when the Switch is checked
*/
@Composable
@OptIn(ExperimentalMaterialApi::class)
fun Switch(
checked: Boolean,
onCheckedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
interactionState: InteractionState = remember { InteractionState() },
color: Color = MaterialTheme.colors.secondaryVariant
) {
val minBound = 0f
val maxBound = with(DensityAmbient.current) { ThumbPathLength.toPx() }
val swipeableState = rememberSwipeableStateFor(checked, onCheckedChange, AnimationSpec)
val isRtl = LayoutDirectionAmbient.current == LayoutDirection.Rtl
Box(
modifier
.toggleable(
value = checked,
onValueChange = onCheckedChange,
enabled = enabled,
interactionState = interactionState,
indication = null
)
.swipeable(
state = swipeableState,
anchors = mapOf(minBound to false, maxBound to true),
thresholds = { _, _ -> FractionalThreshold(0.5f) },
orientation = Orientation.Horizontal,
enabled = enabled,
reverseDirection = isRtl,
interactionState = interactionState,
resistance = null
)
.wrapContentSize(Alignment.Center)
.padding(DefaultSwitchPadding)
.size(SwitchWidth, SwitchHeight)
) {
SwitchImpl(
checked = checked,
enabled = enabled,
checkedColor = color,
thumbValue = swipeableState.offset,
interactionState = interactionState
)
}
}
@Composable
private fun BoxScope.SwitchImpl(
checked: Boolean,
enabled: Boolean,
checkedColor: Color,
thumbValue: State<Float>,
interactionState: InteractionState
) {
val hasInteraction =
Interaction.Pressed in interactionState || Interaction.Dragged in interactionState
val elevation =
if (hasInteraction) {
SwitchDefaults.ThumbPressedElevation
} else {
SwitchDefaults.ThumbDefaultElevation
}
val trackColor = SwitchDefaults.resolveTrackColor(checked, enabled, checkedColor)
val thumbColor = SwitchDefaults.resolveThumbColor(checked, enabled, checkedColor)
Canvas(Modifier.align(Alignment.Center).fillMaxSize()) {
drawTrack(trackColor, TrackWidth.toPx(), TrackStrokeWidth.toPx())
}
Surface(
shape = CircleShape,
color = thumbColor,
elevation = elevation,
modifier = Modifier
.align(Alignment.CenterStart)
.offsetPx(x = thumbValue)
.indication(
interactionState = interactionState,
indication = RippleIndication(radius = ThumbRippleRadius, bounded = false)
)
.size(ThumbDiameter)
) {}
}
private fun DrawScope.drawTrack(trackColor: Color, trackWidth: Float, strokeWidth: Float) {
val strokeRadius = strokeWidth / 2
drawLine(
trackColor,
Offset(strokeRadius, center.y),
Offset(trackWidth - strokeRadius, center.y),
strokeWidth,
StrokeCap.Round
)
}
internal val TrackWidth = 34.dp
internal val TrackStrokeWidth = 14.dp
internal val ThumbDiameter = 20.dp
private val ThumbRippleRadius = 24.dp
private val DefaultSwitchPadding = 2.dp
private val SwitchWidth = TrackWidth
private val SwitchHeight = ThumbDiameter
private val ThumbPathLength = TrackWidth - ThumbDiameter
private val AnimationSpec = TweenSpec<Float>(durationMillis = 100)
internal object SwitchDefaults {
const val CheckedTrackOpacity = 0.54f
const val UncheckedTrackOpacity = 0.38f
val ThumbDefaultElevation = 1.dp
val ThumbPressedElevation = 6.dp
@Composable
private val uncheckedTrackColor
get() = MaterialTheme.colors.onSurface
@Composable
private fun makeDisabledCheckedTrackColor(checkedColor: Color) = EmphasisAmbient.current
.disabled
.applyEmphasis(checkedColor)
.compositeOver(MaterialTheme.colors.surface)
@Composable
private val disabledUncheckedTrackColor
get() = EmphasisAmbient.current.disabled.applyEmphasis(MaterialTheme.colors.onSurface)
.compositeOver(MaterialTheme.colors.surface)
@Composable
private val uncheckedThumbColor
get() = MaterialTheme.colors.surface
@Composable
private fun makeDisabledCheckedThumbColor(checkedColor: Color) = EmphasisAmbient.current
.disabled
.applyEmphasis(checkedColor)
.compositeOver(MaterialTheme.colors.surface)
@Composable
private val disabledUncheckedThumbColor
get() = EmphasisAmbient.current.disabled.applyEmphasis(MaterialTheme.colors.surface)
.compositeOver(MaterialTheme.colors.surface)
@Composable
internal fun resolveTrackColor(checked: Boolean, enabled: Boolean, checkedColor: Color): Color {
return if (checked) {
val color = if (enabled) checkedColor else makeDisabledCheckedTrackColor(checkedColor)
color.copy(alpha = CheckedTrackOpacity)
} else {
val color = if (enabled) uncheckedTrackColor else disabledUncheckedTrackColor
color.copy(alpha = UncheckedTrackOpacity)
}
}
@Composable
internal fun resolveThumbColor(checked: Boolean, enabled: Boolean, checkedColor: Color): Color {
return if (checked) {
if (enabled) checkedColor else makeDisabledCheckedThumbColor(checkedColor)
} else {
if (enabled) uncheckedThumbColor else disabledUncheckedThumbColor
}
}
}