Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit bc600ca

Browse files
add RenderEffect blur sample
1 parent b0cd392 commit bc600ca

File tree

1 file changed

+185
-0
lines changed

1 file changed

+185
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
package com.smarttoolfactory.tutorial1_1basics.chapter6_graphics
2+
3+
import android.graphics.RenderEffect
4+
import android.graphics.Shader
5+
import android.os.Build
6+
import androidx.compose.foundation.Image
7+
import androidx.compose.foundation.border
8+
import androidx.compose.foundation.layout.Column
9+
import androidx.compose.foundation.layout.fillMaxSize
10+
import androidx.compose.foundation.layout.padding
11+
import androidx.compose.foundation.layout.width
12+
import androidx.compose.foundation.rememberScrollState
13+
import androidx.compose.foundation.verticalScroll
14+
import androidx.compose.material3.Slider
15+
import androidx.compose.material3.Text
16+
import androidx.compose.runtime.Composable
17+
import androidx.compose.runtime.getValue
18+
import androidx.compose.runtime.mutableFloatStateOf
19+
import androidx.compose.runtime.remember
20+
import androidx.compose.runtime.setValue
21+
import androidx.compose.ui.Alignment
22+
import androidx.compose.ui.Modifier
23+
import androidx.compose.ui.graphics.Color
24+
import androidx.compose.ui.graphics.asComposeRenderEffect
25+
import androidx.compose.ui.graphics.graphicsLayer
26+
import androidx.compose.ui.layout.ContentScale
27+
import androidx.compose.ui.res.painterResource
28+
import androidx.compose.ui.tooling.preview.Preview
29+
import androidx.compose.ui.unit.dp
30+
import com.smarttoolfactory.tutorial1_1basics.R
31+
import com.smarttoolfactory.tutorial1_1basics.ui.components.StyleableTutorialText
32+
import com.smarttoolfactory.tutorial1_1basics.ui.components.TutorialHeader
33+
import com.smarttoolfactory.tutorial1_1basics.ui.components.TutorialText2
34+
import kotlin.math.roundToInt
35+
36+
@Preview
37+
@Composable
38+
fun Tutorial6_40Screen2() {
39+
TutorialContent()
40+
}
41+
42+
43+
@Composable
44+
private fun TutorialContent() {
45+
Column(modifier = Modifier.padding(8.dp)) {
46+
TutorialHeader(text = "RenderEffect")
47+
StyleableTutorialText(
48+
text = "Blue Composables using **RenderEffect.createBlurEffect** with varying values " +
49+
"and with different edgeTreatments.",
50+
bullets = false
51+
)
52+
53+
RenderEffectBlurSample()
54+
}
55+
}
56+
57+
@Preview
58+
@Composable
59+
private fun RenderEffectBlurSample() {
60+
61+
var blurRadiusX by remember {
62+
mutableFloatStateOf(10f)
63+
}
64+
65+
var blurRadiusY by remember {
66+
mutableFloatStateOf(10f)
67+
}
68+
69+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
70+
71+
Column(
72+
modifier = Modifier
73+
.fillMaxSize()
74+
.verticalScroll(rememberScrollState())
75+
.padding(8.dp),
76+
) {
77+
TutorialText2(
78+
text = "Shader.TileMode.MIRROR",
79+
modifier = Modifier.padding(vertical = 16.dp)
80+
)
81+
Image(
82+
modifier = Modifier
83+
.align(Alignment.CenterHorizontally)
84+
.width(260.dp)
85+
.border(2.dp, Color.Red)
86+
.graphicsLayer {
87+
renderEffect = RenderEffect.createBlurEffect(
88+
blurRadiusX, blurRadiusY,
89+
Shader.TileMode.MIRROR
90+
).asComposeRenderEffect()
91+
92+
},
93+
painter = painterResource(R.drawable.landscape10),
94+
contentDescription = null,
95+
contentScale = ContentScale.FillBounds
96+
)
97+
98+
TutorialText2(
99+
text = "Shader.TileMode.DECAL",
100+
modifier = Modifier.padding(vertical = 16.dp)
101+
)
102+
Image(
103+
modifier = Modifier
104+
.align(Alignment.CenterHorizontally)
105+
.width(260.dp)
106+
.border(2.dp, Color.Red)
107+
.graphicsLayer {
108+
renderEffect = RenderEffect.createBlurEffect(
109+
blurRadiusX, blurRadiusY,
110+
Shader.TileMode.DECAL
111+
).asComposeRenderEffect()
112+
113+
},
114+
painter = painterResource(R.drawable.landscape10),
115+
contentDescription = null,
116+
contentScale = ContentScale.FillBounds
117+
)
118+
119+
TutorialText2(
120+
text = "Shader.TileMode.CLAMP",
121+
modifier = Modifier.padding(vertical = 16.dp)
122+
)
123+
Image(
124+
modifier = Modifier
125+
.align(Alignment.CenterHorizontally)
126+
.width(260.dp)
127+
.border(2.dp, Color.Red)
128+
.graphicsLayer {
129+
renderEffect = RenderEffect.createBlurEffect(
130+
blurRadiusX, blurRadiusY,
131+
Shader.TileMode.CLAMP
132+
).asComposeRenderEffect()
133+
134+
},
135+
painter = painterResource(R.drawable.landscape10),
136+
contentDescription = null,
137+
contentScale = ContentScale.FillBounds
138+
)
139+
140+
TutorialText2(
141+
text = "Shader.TileMode.REPEAT",
142+
modifier = Modifier.padding(vertical = 16.dp)
143+
)
144+
Image(
145+
modifier = Modifier
146+
.align(Alignment.CenterHorizontally)
147+
.width(260.dp)
148+
.border(2.dp, Color.Red)
149+
.graphicsLayer {
150+
renderEffect = RenderEffect.createBlurEffect(
151+
blurRadiusX, blurRadiusY,
152+
Shader.TileMode.REPEAT
153+
).asComposeRenderEffect()
154+
155+
},
156+
painter = painterResource(R.drawable.landscape10),
157+
contentDescription = null,
158+
contentScale = ContentScale.FillBounds
159+
)
160+
161+
162+
Text("Blur radiusX: ${blurRadiusX.roundToInt()}")
163+
164+
Slider(
165+
modifier = Modifier.padding(horizontal = 16.dp),
166+
value = blurRadiusX,
167+
onValueChange = {
168+
blurRadiusX = it
169+
},
170+
valueRange = 0.01f..25f
171+
)
172+
173+
Text("Blur radiusY: ${blurRadiusY.roundToInt()}")
174+
175+
Slider(
176+
modifier = Modifier.padding(horizontal = 16.dp),
177+
value = blurRadiusY,
178+
onValueChange = {
179+
blurRadiusY = it
180+
},
181+
valueRange = 0.01f..25f
182+
)
183+
}
184+
}
185+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /