Remove content backdrop

This commit is contained in:
Kyant0 committed 2025-10-07 20:58:21 +08:00
1 parent e096ea868b
commit 5b2df7a200
16 files changed
+66 -230

No files matched your search

@@ -41,24 +41,20 @@ import com.kyant.backdrop.shadow.ShadowElement
private val DefaultHighlight = { Highlight.Default }
private val DefaultShadow = { Shadow.Default }
private val DefaultOnDrawBackdrop: DrawScope.(DrawScope.() -> Unit) -> Unit = { it() }
private val DefaultOnDrawContent: ContentDrawScope.() -> Unit = { drawContent() }
fun Modifier.drawBackdrop(
backdrop: Backdrop,
shape: () -> Shape,
effects: BackdropEffectScope.() -> Unit,
highlight: (() -> Highlight?)? = DefaultHighlight,
shadow: (() -> Shadow?)? = DefaultShadow,
innerShadow: (() -> InnerShadow?)? = null,
effects: (BackdropEffectScope.() -> Unit)? = null,
layerBlock: (GraphicsLayerScope.() -> Unit)? = null,
exportedBackdrop: LayerBackdrop? = null,
onDrawBehind: (DrawScope.() -> Unit)? = null,
onDrawBackdrop: DrawScope.(drawBackdrop: DrawScope.() -> Unit) -> Unit = DefaultOnDrawBackdrop,
onDrawSurface: (DrawScope.() -> Unit)? = null,
onDrawFront: (DrawScope.() -> Unit)? = null,
contentEffects: (BackdropEffectScope.() -> Unit)? = null,
onDrawContent: ContentDrawScope.() -> Unit = DefaultOnDrawContent,
drawContent: Boolean = true
onDrawFront: (DrawScope.() -> Unit)? = null
): Modifier {
val shapeProvider = ShapeProvider(shape)
return this
@@ -109,10 +105,7 @@ fun Modifier.drawBackdrop(
onDrawBehind = onDrawBehind,
onDrawBackdrop = onDrawBackdrop,
onDrawSurface = onDrawSurface,
onDrawFront = onDrawFront,
contentEffects = contentEffects,
onDrawContent = onDrawContent,
drawContent = drawContent
onDrawFront = onDrawFront
)
)
}
@@ -120,16 +113,13 @@ fun Modifier.drawBackdrop(
private class DrawBackdropElement(
val backdrop: Backdrop,
val shapeProvider: ShapeProvider,
val effects: (BackdropEffectScope.() -> Unit)?,
val effects: BackdropEffectScope.() -> Unit,
val layerBlock: (GraphicsLayerScope.() -> Unit)?,
val exportedBackdrop: LayerBackdrop?,
val onDrawBehind: (DrawScope.() -> Unit)?,
val onDrawBackdrop: DrawScope.(drawBackdrop: DrawScope.() -> Unit) -> Unit,
val onDrawSurface: (DrawScope.() -> Unit)?,
val onDrawFront: (DrawScope.() -> Unit)?,
val contentEffects: (BackdropEffectScope.() -> Unit)?,
val onDrawContent: ContentDrawScope.() -> Unit,
val drawContent: Boolean
val onDrawFront: (DrawScope.() -> Unit)?
) : ModifierNodeElement<DrawBackdropNode>() {
override fun create(): DrawBackdropNode {
@@ -142,10 +132,7 @@ private class DrawBackdropElement(
onDrawBehind = onDrawBehind,
onDrawBackdrop = onDrawBackdrop,
onDrawSurface = onDrawSurface,
onDrawFront = onDrawFront,
contentEffects = contentEffects,
onDrawContent = onDrawContent,
drawContent = drawContent
onDrawFront = onDrawFront
)
}
@@ -159,9 +146,6 @@ private class DrawBackdropElement(
node.onDrawBackdrop = onDrawBackdrop
node.onDrawSurface = onDrawSurface
node.onDrawFront = onDrawFront
node.contentEffects = contentEffects
node.onDrawContent = onDrawContent
node.drawContent = drawContent
node.invalidateDrawCache()
}
@@ -176,9 +160,6 @@ private class DrawBackdropElement(
properties["onDrawBackdrop"] = onDrawBackdrop
properties["onDrawSurface"] = onDrawSurface
properties["onDrawFront"] = onDrawFront
properties["contentEffects"] = contentEffects
properties["onDrawContent"] = onDrawContent
properties["drawContent"] = drawContent
}
override fun equals(other: Any?): Boolean {
@@ -194,9 +175,6 @@ private class DrawBackdropElement(
if (onDrawBackdrop != other.onDrawBackdrop) return false
if (onDrawSurface != other.onDrawSurface) return false
if (onDrawFront != other.onDrawFront) return false
if (contentEffects != other.contentEffects) return false
if (onDrawContent != other.onDrawContent) return false
if (drawContent != other.drawContent) return false
return true
}
@@ -204,16 +182,13 @@ private class DrawBackdropElement(
override fun hashCode(): Int {
var result = backdrop.hashCode()
result = 31 * result + shapeProvider.hashCode()
result = 31 * result + (effects?.hashCode() ?: 0)
result = 31 * result + effects.hashCode()
result = 31 * result + (layerBlock?.hashCode() ?: 0)
result = 31 * result + (exportedBackdrop?.hashCode() ?: 0)
result = 31 * result + (onDrawBehind?.hashCode() ?: 0)
result = 31 * result + onDrawBackdrop.hashCode()
result = 31 * result + (onDrawSurface?.hashCode() ?: 0)
result = 31 * result + (onDrawFront?.hashCode() ?: 0)
result = 31 * result + (contentEffects?.hashCode() ?: 0)
result = 31 * result + onDrawContent.hashCode()
result = 31 * result + drawContent.hashCode()
return result
}
}
@@ -221,16 +196,13 @@ private class DrawBackdropElement(
private class DrawBackdropNode(
var backdrop: Backdrop,
var shapeProvider: ShapeProvider,
var effects: (BackdropEffectScope.() -> Unit)?,
var effects: BackdropEffectScope.() -> Unit,
var layerBlock: (GraphicsLayerScope.() -> Unit)?,
var exportedBackdrop: LayerBackdrop?,
var onDrawBehind: (DrawScope.() -> Unit)?,
var onDrawBackdrop: DrawScope.(drawBackdrop: DrawScope.() -> Unit) -> Unit,
var onDrawSurface: (DrawScope.() -> Unit)?,
var onDrawFront: (DrawScope.() -> Unit)?,
var contentEffects: (BackdropEffectScope.() -> Unit)?,
var onDrawContent: ContentDrawScope.() -> Unit,
var drawContent: Boolean
var onDrawFront: (DrawScope.() -> Unit)?
) : LayoutModifierNode, DrawModifierNode, GlobalPositionAwareModifierNode, ObserverModifierNode, Modifier.Node() {
override val shouldAutoInvalidate: Boolean = false
@@ -241,8 +213,7 @@ private class DrawBackdropNode(
override val shape: Shape get() = shapeProvider.innerShape
}
private var backdropGraphicsLayer: GraphicsLayer? = null
private var contentGraphicsLayer: GraphicsLayer? = null
private var graphicsLayer: GraphicsLayer? = null
private val layoutLayerBlock: GraphicsLayerScope.() -> Unit = {
clip = true
@@ -265,21 +236,13 @@ private class DrawBackdropNode(
}
private val drawBackdropLayer: DrawScope.() -> Unit = {
val layer = backdropGraphicsLayer
val layer = graphicsLayer
if (layer != null) {
recordLayer(layer, block = recordBackdropBlock)
drawLayer(layer)
}
}
private val drawContentLayer: ContentDrawScope.() -> Unit = drawContent@{
val layer = contentGraphicsLayer
if (layer != null) {
recordLayer(layer) { this@drawContent.onDrawContent() }
drawLayer(layer)
}
}
override fun MeasureScope.measure(
measurable: Measurable,
constraints: Constraints
@@ -298,8 +261,7 @@ private class DrawBackdropNode(
onDrawBehind?.invoke(this)
drawBackdropLayer()
onDrawSurface?.invoke(this)
drawContentLayer()
if (drawContent) drawContent()
drawContent()
onDrawFront?.invoke(this)
exportedBackdrop?.graphicsLayer?.let { layer ->
@@ -339,60 +301,27 @@ private class DrawBackdropNode(
}
private fun updateEffects() {
val graphicsContext = requireGraphicsContext()
val backdropEffects = effects
if (backdropEffects != null) {
if (backdropGraphicsLayer == null) {
backdropGraphicsLayer = graphicsContext.createGraphicsLayer()
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
effectScope.renderEffect = null
backdropEffects(effectScope)
backdropGraphicsLayer?.renderEffect = effectScope.renderEffect?.asComposeRenderEffect()
}
} else {
backdropGraphicsLayer?.let { layer ->
graphicsContext.releaseGraphicsLayer(layer)
backdropGraphicsLayer = null
}
}
val contentEffects = contentEffects
if (contentEffects != null) {
if (contentGraphicsLayer == null) {
val graphicsContext = requireGraphicsContext()
contentGraphicsLayer = graphicsContext.createGraphicsLayer()
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
effectScope.renderEffect = null
contentEffects(effectScope)
contentGraphicsLayer?.renderEffect = effectScope.renderEffect?.asComposeRenderEffect()
}
} else {
contentGraphicsLayer?.let { layer ->
graphicsContext.releaseGraphicsLayer(layer)
contentGraphicsLayer = null
}
effects(effectScope)
graphicsLayer?.renderEffect = effectScope.renderEffect?.asComposeRenderEffect()
}
}
override fun onAttach() {
val graphicsContext = requireGraphicsContext()
graphicsLayer = graphicsContext.createGraphicsLayer()
observeEffects()
}
override fun onDetach() {
val graphicsContext = requireGraphicsContext()
backdropGraphicsLayer?.let { layer ->
graphicsLayer?.let { layer ->
graphicsContext.releaseGraphicsLayer(layer)
backdropGraphicsLayer = null
}
contentGraphicsLayer?.let { layer ->
graphicsContext.releaseGraphicsLayer(layer)
contentGraphicsLayer = null
graphicsLayer = null
}
effectScope.reset()
layoutCoordinates = null
exportedBackdrop?.currentCoordinates = null
Binary file not shown.
@@ -9,7 +9,6 @@ enum class CatalogDestination {
BottomTabs,
Dialog,
LockScreen,
ControlCenter,
Magnifier,
@@ -14,7 +14,6 @@ import com.kyant.backdrop.catalog.destinations.DialogContent
import com.kyant.backdrop.catalog.destinations.GlassPlaygroundContent
import com.kyant.backdrop.catalog.destinations.HomeContent
import com.kyant.backdrop.catalog.destinations.LazyScrollContainerContent
import com.kyant.backdrop.catalog.destinations.LockScreenContent
import com.kyant.backdrop.catalog.destinations.MagnifierContent
import com.kyant.backdrop.catalog.destinations.ScrollContainerContent
import com.kyant.backdrop.catalog.destinations.SliderContent
@@ -37,7 +36,6 @@ fun MainContent() {
CatalogDestination.BottomTabs -> BottomTabsContent()
CatalogDestination.Dialog -> DialogContent()
CatalogDestination.LockScreen -> LockScreenContent()
CatalogDestination.ControlCenter -> ControlCenterContent()
CatalogDestination.Magnifier -> MagnifierContent()
@@ -204,10 +204,6 @@ fun LiquidBottomTabs(
.drawBackdrop(
backdrop = backdrop,
shape = { ContinuousCapsule },
highlight = {
val progress = dampedDragAnimation.pressProgress
Highlight.Default.copy(alpha = progress)
},
effects = {
val progress = dampedDragAnimation.pressProgress
vibrancy()
@@ -217,6 +213,10 @@ fun LiquidBottomTabs(
24f.dp.toPx() * progress
)
},
highlight = {
val progress = dampedDragAnimation.pressProgress
Highlight.Default.copy(alpha = progress)
},
onDrawSurface = { drawRect(containerColor) }
)
.then(interactiveHighlight.modifier)
@@ -240,6 +240,14 @@ fun LiquidBottomTabs(
.drawBackdrop(
backdrop = rememberCombinedBackdrop(backdrop, tabsBackdrop),
shape = { ContinuousCapsule },
effects = {
val progress = dampedDragAnimation.pressProgress
lens(
12f.dp.toPx() * progress,
12f.dp.toPx() * progress,
chromaticAberration = DefaultChromaticAberration
)
},
highlight = {
val progress = dampedDragAnimation.pressProgress
Highlight.Default.copy(alpha = progress)
@@ -255,14 +263,6 @@ fun LiquidBottomTabs(
alpha = progress
)
},
effects = {
val progress = dampedDragAnimation.pressProgress
lens(
12f.dp.toPx() * progress,
12f.dp.toPx() * progress,
chromaticAberration = DefaultChromaticAberration
)
},
layerBlock = {
scaleX = dampedDragAnimation.scaleX
scaleY = dampedDragAnimation.scaleY
@@ -159,6 +159,15 @@ fun LiquidSlider(
}
),
shape = { ContinuousCapsule },
effects = {
val progress = dampedDragAnimation.pressProgress
blur(8f.dp.toPx() * (1f - progress))
lens(
10f.dp.toPx() * progress,
14f.dp.toPx() * progress,
chromaticAberration = DefaultChromaticAberration
)
},
highlight = {
val progress = dampedDragAnimation.pressProgress
Highlight.Ambient.copy(
@@ -180,15 +189,6 @@ fun LiquidSlider(
alpha = progress
)
},
effects = {
val progress = dampedDragAnimation.pressProgress
blur(8f.dp.toPx() * (1f - progress))
lens(
10f.dp.toPx() * progress,
14f.dp.toPx() * progress,
chromaticAberration = DefaultChromaticAberration
)
},
layerBlock = {
scaleX = dampedDragAnimation.scaleX
scaleY = dampedDragAnimation.scaleY
@@ -148,6 +148,15 @@ fun LiquidToggle(
}
),
shape = { ContinuousCapsule },
effects = {
val progress = dampedDragAnimation.pressProgress
blur(8f.dp.toPx() * (1f - progress))
lens(
5f.dp.toPx() * progress,
10f.dp.toPx() * progress,
chromaticAberration = DefaultChromaticAberration
)
},
highlight = {
val progress = dampedDragAnimation.pressProgress
Highlight.Ambient.copy(
@@ -169,15 +178,6 @@ fun LiquidToggle(
alpha = progress
)
},
effects = {
val progress = dampedDragAnimation.pressProgress
blur(8f.dp.toPx() * (1f - progress))
lens(
5f.dp.toPx() * progress,
10f.dp.toPx() * progress,
chromaticAberration = DefaultChromaticAberration
)
},
layerBlock = {
scaleX = dampedDragAnimation.scaleX
scaleY = dampedDragAnimation.scaleY
@@ -99,7 +99,6 @@ fun AdaptiveLuminanceGlassContent() {
.drawBackdrop(
backdrop = backdrop,
shape = { ContinuousRoundedRectangle(24f.dp) },
highlight = { Highlight.Plain },
effects = {
val l = (luminanceAnimation.value * 2f - 1f).let { sign(it) * it * it }
colorControls(
@@ -117,6 +116,7 @@ fun AdaptiveLuminanceGlassContent() {
)
lens(24f.dp.toPx(), size.minDimension / 2f, depthEffect = true)
},
highlight = { Highlight.Plain },
layerBlock = {
val offset = offsetAnimation.value
val zoom = zoomAnimation.value
@@ -221,9 +221,9 @@ fun ControlCenterContent() {
.drawBackdrop(
backdrop = backdrop,
shape = glassShape,
effects = glassEffects,
highlight = glassHighlight,
shadow = null,
effects = glassEffects,
layerBlock = glassLayer,
onDrawSurface = glassSurface
)
@@ -263,9 +263,9 @@ fun ControlCenterContent() {
.drawBackdrop(
backdrop = backdrop,
shape = glassShape,
effects = glassEffects,
highlight = glassHighlight,
shadow = null,
effects = glassEffects,
layerBlock = glassLayer,
onDrawSurface = glassSurface
)
@@ -289,9 +289,9 @@ fun ControlCenterContent() {
.drawBackdrop(
backdrop = backdrop,
shape = glassShape,
effects = glassEffects,
highlight = glassHighlight,
shadow = null,
effects = glassEffects,
layerBlock = glassLayer,
onDrawSurface = glassSurface
)
@@ -303,9 +303,9 @@ fun ControlCenterContent() {
.drawBackdrop(
backdrop = backdrop,
shape = glassShape,
effects = glassEffects,
highlight = glassHighlight,
shadow = null,
effects = glassEffects,
layerBlock = glassLayer,
onDrawSurface = glassSurface
)
@@ -321,9 +321,9 @@ fun ControlCenterContent() {
.drawBackdrop(
backdrop = backdrop,
shape = glassShape,
effects = glassEffects,
highlight = glassHighlight,
shadow = null,
effects = glassEffects,
layerBlock = glassLayer
)
.size(itemTwoSpanSize, itemSize)
@@ -339,9 +339,9 @@ fun ControlCenterContent() {
.drawBackdrop(
backdrop = backdrop,
shape = glassShape,
effects = glassEffects,
highlight = glassHighlight,
shadow = null,
effects = glassEffects,
layerBlock = glassLayer,
onDrawSurface = glassSurface
)
@@ -352,9 +352,9 @@ fun ControlCenterContent() {
.drawBackdrop(
backdrop = backdrop,
shape = glassShape,
effects = glassEffects,
highlight = glassHighlight,
shadow = null,
effects = glassEffects,
layerBlock = glassLayer,
onDrawSurface = glassSurface
)
@@ -374,9 +374,9 @@ fun ControlCenterContent() {
.drawBackdrop(
backdrop = backdrop,
shape = glassShape,
effects = glassEffects,
highlight = glassHighlight,
shadow = null,
effects = glassEffects,
layerBlock = glassLayer,
onDrawSurface = glassSurface
)
@@ -393,9 +393,9 @@ fun ControlCenterContent() {
.drawBackdrop(
backdrop = backdrop,
shape = glassShape,
effects = glassEffects,
highlight = glassHighlight,
shadow = null,
effects = glassEffects,
layerBlock = glassLayer,
onDrawSurface = glassSurface
)
@@ -407,9 +407,9 @@ fun ControlCenterContent() {
.drawBackdrop(
backdrop = backdrop,
shape = glassShape,
effects = glassEffects,
highlight = glassHighlight,
shadow = null,
effects = glassEffects,
layerBlock = glassLayer,
onDrawSurface = glassSurface
)
@@ -429,9 +429,9 @@ fun ControlCenterContent() {
.drawBackdrop(
backdrop = backdrop,
shape = glassShape,
effects = glassEffects,
highlight = glassHighlight,
shadow = null,
effects = glassEffects,
layerBlock = glassLayer,
onDrawSurface = glassSurface
)
@@ -60,7 +60,6 @@ fun DialogContent() {
.drawBackdrop(
backdrop = backdrop,
shape = { ContinuousRoundedRectangle(48f.dp) },
highlight = { Highlight.Plain },
effects = {
colorControls(
brightness = if (isLightTheme) 0.2f else 0f,
@@ -69,6 +68,7 @@ fun DialogContent() {
blur(if (isLightTheme) 16f.dp.toPx() else 8f.dp.toPx())
lens(24f.dp.toPx(), 48f.dp.toPx(), depthEffect = true)
},
highlight = { Highlight.Plain },
onDrawSurface = { drawRect(containerColor) }
)
.fillMaxWidth()
@@ -66,7 +66,6 @@ fun GlassPlaygroundContent() {
.drawBackdrop(
backdrop = backdrop,
shape = { ContinuousRoundedRectangle(256f.dp / 2f * cornerRadiusFrac) },
highlight = { Highlight.Plain },
effects = {
val minDimension = size.minDimension
vibrancy()
@@ -78,6 +77,7 @@ fun GlassPlaygroundContent() {
chromaticAberration = Offset(chromaticAberration, chromaticAberration)
)
},
highlight = { Highlight.Plain },
layerBlock = {
val offset = offsetAnimation.value
val zoom = zoomAnimation.value
@@ -129,12 +129,12 @@ fun GlassPlaygroundContent() {
.drawBackdrop(
backdrop = backdrop,
shape = { ContinuousRoundedRectangle(32f.dp) },
highlight = { Highlight.Plain },
effects = {
vibrancy()
blur(4f.dp.toPx())
lens(16f.dp.toPx(), 32f.dp.toPx())
},
highlight = { Highlight.Plain },
exportedBackdrop = sheetBackdrop,
onDrawSurface = { drawRect(Color.White.copy(alpha = 0.5f)) }
)
@@ -49,7 +49,6 @@ fun HomeContent(onNavigate: (CatalogDestination) -> Unit) {
ListItem({ onNavigate(CatalogDestination.Dialog) }, "Dialog")
Subtitle("System UIs")
ListItem({ onNavigate(CatalogDestination.LockScreen) }, "Lock screen")
ListItem({ onNavigate(CatalogDestination.ControlCenter) }, "Control center")
ListItem({ onNavigate(CatalogDestination.Magnifier) }, "Magnifier")
@@ -1,89 +0,0 @@
package com.kyant.backdrop.catalog.destinations
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.kyant.backdrop.catalog.BackdropDemoScaffold
import com.kyant.backdrop.catalog.R
import com.kyant.backdrop.drawBackdrop
import com.kyant.backdrop.effects.blur
import com.kyant.backdrop.effects.lens
import com.kyant.backdrop.effects.vibrancy
import com.kyant.backdrop.shadow.Shadow
import com.kyant.capsule.ContinuousRoundedRectangle
@Composable
fun LockScreenContent() {
BackdropDemoScaffold(
Modifier.drawWithContent {
drawContent()
drawRect(Color.Black.copy(0.5f))
}
) { backdrop ->
Column(
Modifier.padding(16f.dp),
verticalArrangement = Arrangement.spacedBy(16f.dp)
) {
Row(
Modifier
.drawBackdrop(
backdrop = backdrop,
shape = { ContinuousRoundedRectangle(24f.dp) },
shadow = {
Shadow(
radius = 4f.dp,
color = Color.Black.copy(0.05f)
)
},
effects = {
vibrancy()
blur(4f.dp.toPx())
lens(12f.dp.toPx(), 24f.dp.toPx(), depthEffect = true)
},
onDrawSurface = { drawRect(Color.White.copy(0.1f)) },
contentEffects = {
blur(4f.dp.toPx())
lens(8f.dp.toPx(), 24f.dp.toPx())
}
)
.fillMaxWidth()
.padding(12f.dp),
horizontalArrangement = Arrangement.spacedBy(12f.dp),
verticalAlignment = Alignment.CenterVertically
) {
Image(
painterResource(R.drawable.instagram_logo),
null,
Modifier.size(40f.dp)
)
Column(verticalArrangement = Arrangement.spacedBy(2f.dp)) {
BasicText(
"Kyant",
style = TextStyle(Color.White, 15f.sp)
)
BasicText(
"Shared a photo.",
Modifier.graphicsLayer(blendMode = BlendMode.Plus),
style = TextStyle(Color.White.copy(0.5f), 15f.sp)
)
}
}
}
}
}
@@ -84,7 +84,6 @@ fun MagnifierContent() {
.drawBackdrop(
backdrop = rememberCombinedBackdrop(backdrop, contentBackdrop, cursorBackdrop),
shape = { ContinuousCapsule },
innerShadow = { InnerShadow(radius = 16f.dp) },
effects = {
lens(
8f.dp.toPx(),
@@ -93,6 +92,7 @@ fun MagnifierContent() {
chromaticAberration = DefaultChromaticAberration
)
},
innerShadow = { InnerShadow(radius = 16f.dp) },
onDrawBackdrop = { drawBackdrop ->
withTransform(
{