Skip to content
This repository was archived by the owner on Dec 27, 2024. It is now read-only.

Commit ebd4eec

Browse files
camaeloncamaelon
authored
Add support for circular constraint in the DSL (#352)
Also added examples in test4.kt
1 parent 8f5994d commit ebd4eec

File tree

2 files changed

+277
-0
lines changed
  • constraintlayout/compose/src/main/java/androidx/constraintlayout/compose
  • projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout

2 files changed

+277
-0
lines changed

‎constraintlayout/compose/src/main/java/androidx/constraintlayout/compose/ConstraintLayout.kt

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1104,6 +1104,16 @@ class ConstrainScope internal constructor(internal val id: Any) {
11041104
linkTo(anchor, anchor)
11051105
}
11061106

1107+
/**
1108+
* Set a circular constraint relative to the center of [other].
1109+
* This will position the current widget at a relative angle and distance from [other].
1110+
*/
1111+
fun circular(other: ConstrainedLayoutReference, angle: Float, distance: Dp) {
1112+
tasks.add { state ->
1113+
state.constraints(id).circularConstraint(other.id, angle, state.convertDimension(distance).toFloat())
1114+
}
1115+
}
1116+
11071117
internal companion object {
11081118
val verticalAnchorFunctions:
11091119
Array<Array<ConstraintReference.(Any, LayoutDirection) -> ConstraintReference>> =

‎projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/test4.kt

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
package com.example.constraintlayout
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.*
5+
import androidx.compose.material.Button
6+
import androidx.compose.material.MaterialTheme
7+
import androidx.compose.material.Text
8+
import androidx.compose.runtime.*
9+
import androidx.compose.ui.Modifier
10+
import androidx.compose.ui.graphics.Color
11+
import androidx.compose.ui.layout.layoutId
12+
import androidx.compose.ui.res.stringResource
13+
import androidx.compose.ui.tooling.preview.Preview
14+
import androidx.compose.ui.unit.dp
15+
import androidx.constraintlayout.compose.*
16+
17+
@Preview(group = "new5")
18+
@Composable
19+
public fun ExampleLayout2() {
20+
ConstraintLayout(
21+
ConstraintSet {
22+
val center = createRefFor("center")
23+
val h1 = createRefFor("h1")
24+
val h2 = createRefFor("h2")
25+
val h3 = createRefFor("h3")
26+
val h4 = createRefFor("h4")
27+
val h5 = createRefFor("h5")
28+
val h6 = createRefFor("h6")
29+
val h7 = createRefFor("h7")
30+
val h8 = createRefFor("h8")
31+
val h9 = createRefFor("h9")
32+
val h10 = createRefFor("h10")
33+
val h11 = createRefFor("h11")
34+
val h12 = createRefFor("h12")
35+
constrain(center) {
36+
centerTo(parent)
37+
}
38+
constrain(h1) {
39+
circular(parent, 30f, 100.dp)
40+
}
41+
constrain(h2) {
42+
circular(parent, 60f, 100.dp)
43+
}
44+
constrain(h3) {
45+
circular(parent, 90f, 100.dp)
46+
}
47+
constrain(h4) {
48+
circular(parent, 120f, 100.dp)
49+
}
50+
constrain(h5) {
51+
circular(parent, 150f, 100.dp)
52+
}
53+
constrain(h6) {
54+
circular(parent, 180f, 100.dp)
55+
}
56+
constrain(h7) {
57+
circular(parent, 210f, 100.dp)
58+
}
59+
constrain(h8) {
60+
circular(parent, 240f, 100.dp)
61+
}
62+
constrain(h9) {
63+
circular(parent, 270f, 100.dp)
64+
}
65+
constrain(h10) {
66+
circular(parent, 300f, 100.dp)
67+
}
68+
constrain(h11) {
69+
circular(parent, 330f, 100.dp)
70+
}
71+
constrain(h12) {
72+
circular(parent, 0f, 100.dp)
73+
}
74+
},
75+
modifier = Modifier
76+
.fillMaxSize()
77+
) {
78+
Text(modifier = Modifier.layoutId("center"), text = "C")
79+
Text(modifier = Modifier.layoutId("h1"), text = "1")
80+
Text(modifier = Modifier.layoutId("h2"), text = "2")
81+
Text(modifier = Modifier.layoutId("h3"), text = "3")
82+
Text(modifier = Modifier.layoutId("h4"), text = "4")
83+
Text(modifier = Modifier.layoutId("h5"), text = "5")
84+
Text(modifier = Modifier.layoutId("h6"), text = "6")
85+
Text(modifier = Modifier.layoutId("h7"), text = "7")
86+
Text(modifier = Modifier.layoutId("h8"), text = "8")
87+
Text(modifier = Modifier.layoutId("h9"), text = "9")
88+
Text(modifier = Modifier.layoutId("h10"), text = "10")
89+
Text(modifier = Modifier.layoutId("h11"), text = "11")
90+
Text(modifier = Modifier.layoutId("h12"), text = "12")
91+
}
92+
}
93+
94+
@Preview(group = "new2")
95+
@Composable
96+
public fun ExampleLayout3() {
97+
ConstraintLayout(modifier = Modifier
98+
.fillMaxSize()){
99+
val (center, h1, h2, h3, h4, h5, h6, h7, h8, h9, h10, h11, h12) = createRefs()
100+
101+
Text(modifier = Modifier.constrainAs(center) {
102+
centerTo(parent)
103+
}, text = "C")
104+
Text(modifier = Modifier.constrainAs(h1) {
105+
circular(parent, 30f, 100.dp)
106+
}, text = "1")
107+
Text(modifier = Modifier.constrainAs(h2) {
108+
circular(parent, 60f, 100.dp)
109+
}, text = "2")
110+
Text(modifier = Modifier.constrainAs(h3) {
111+
circular(parent, 90f, 100.dp)
112+
}, text = "3")
113+
Text(modifier = Modifier.constrainAs(h4) {
114+
circular(parent, 120f, 100.dp)
115+
}, text = "4")
116+
Text(modifier = Modifier.constrainAs(h5) {
117+
circular(parent, 150f, 100.dp)
118+
}, text = "5")
119+
Text(modifier = Modifier.constrainAs(h6) {
120+
circular(parent, 180f, 100.dp)
121+
}, text = "6")
122+
Text(modifier = Modifier.constrainAs(h7) {
123+
circular(parent, 210f, 100.dp)
124+
}, text = "7")
125+
Text(modifier = Modifier.constrainAs(h8) {
126+
circular(parent, 240f, 100.dp)
127+
}, text = "8")
128+
Text(modifier = Modifier.constrainAs(h9) {
129+
circular(parent, 270f, 100.dp)
130+
}, text = "9")
131+
Text(modifier = Modifier.constrainAs(h10) {
132+
circular(parent, 300f, 100.dp)
133+
}, text = "10")
134+
Text(modifier = Modifier.constrainAs(h11) {
135+
circular(parent, 330f, 100.dp)
136+
}, text = "11")
137+
Text(modifier = Modifier.constrainAs(h12) {
138+
circular(parent, 0f, 100.dp)
139+
}, text = "12")
140+
}
141+
}
142+
143+
@Preview(group = "new4")
144+
@Composable
145+
public fun ExampleLayout4() {
146+
ConstraintLayout(
147+
ConstraintSet("""
148+
{
149+
center: {
150+
center: 'parent'
151+
},
152+
h1: { circular: ['center', 30, 100] },
153+
h2: { circular: ['center', 60, 100] },
154+
h3: { circular: ['center', 90, 100] },
155+
h4: { circular: ['center', 120, 100] },
156+
h5: { circular: ['center', 150, 100] },
157+
h6: { circular: ['center', 180, 100] },
158+
h7: { circular: ['center', 210, 100] },
159+
h8: { circular: ['center', 240, 100] },
160+
h9: { circular: ['center', 270, 100] },
161+
h10: { circular: ['center', 300, 100] },
162+
h11: { circular: ['center', 330, 100] },
163+
h12: { circular: ['center', 0, 100] }
164+
}
165+
"""),
166+
modifier = Modifier
167+
.fillMaxSize()
168+
) {
169+
Text(modifier = Modifier.layoutId("center"), text = "C")
170+
Text(modifier = Modifier.layoutId("h1"), text = "1")
171+
Text(modifier = Modifier.layoutId("h2"), text = "2")
172+
Text(modifier = Modifier.layoutId("h3"), text = "3")
173+
Text(modifier = Modifier.layoutId("h4"), text = "4")
174+
Text(modifier = Modifier.layoutId("h5"), text = "5")
175+
Text(modifier = Modifier.layoutId("h6"), text = "6")
176+
Text(modifier = Modifier.layoutId("h7"), text = "7")
177+
Text(modifier = Modifier.layoutId("h8"), text = "8")
178+
Text(modifier = Modifier.layoutId("h9"), text = "9")
179+
Text(modifier = Modifier.layoutId("h10"), text = "10")
180+
Text(modifier = Modifier.layoutId("h11"), text = "11")
181+
Text(modifier = Modifier.layoutId("h12"), text = "12")
182+
}
183+
}
184+
185+
@Preview(group = "new2")
186+
@Composable
187+
public fun ExampleLayout5() {
188+
ConstraintLayout(modifier = Modifier
189+
.fillMaxSize()){
190+
val center = createRef()
191+
Text(modifier = Modifier.constrainAs(center) {
192+
centerTo(parent)
193+
}, text = "C")
194+
for (i in 0 until 12) {
195+
var h = createRef()
196+
Text(modifier = Modifier.constrainAs(h) {
197+
circular(parent, 30f + i * 30f, 100.dp)
198+
}, text = "${i+1}")
199+
}
200+
}
201+
}
202+
203+
@Preview(group = "new6")
204+
@Composable
205+
public fun ExampleLayout6() {
206+
ConstraintLayout(modifier = Modifier
207+
.fillMaxSize()){
208+
val center = createRef()
209+
Text(modifier = Modifier.constrainAs(center) {
210+
centerTo(parent)
211+
}, text = "C")
212+
for (i in 0 until 12) {
213+
var h = createRef()
214+
Text(modifier = Modifier.constrainAs(h) {
215+
circular(parent, 30f + i * 30f, 100.dp)
216+
}, text = "${i+1}")
217+
}
218+
}
219+
}
220+
221+
@Preview(group = "new7")
222+
@Composable
223+
public fun ExampleLayout7() {
224+
var baseConstraintSet = """
225+
{
226+
Variables: {
227+
angle: { from: 0, step: 10 },
228+
rotation: { from: 'startRotation', step: 10 },
229+
distance: 100,
230+
mylist: { tag: 'box' }
231+
},
232+
Generate: {
233+
mylist: {
234+
width: 200,
235+
height: 40,
236+
circular: ['parent', 'angle', 'distance'],
237+
pivotX: 0.1,
238+
pivotY: 0.1,
239+
translationX: 225,
240+
rotationZ: 'rotation'
241+
}
242+
}
243+
}
244+
"""
245+
246+
ConstraintLayout(
247+
ConstraintSet("""
248+
{
249+
Variables: {
250+
list: { from: 1, to: 12, prefix: 'h' },
251+
angle: { from: 0, step: 30 }
252+
},
253+
Generate: {
254+
list: { circular: ['parent', 'angle', 100] }
255+
},
256+
center: { center: 'parent' }
257+
}
258+
"""),
259+
modifier = Modifier.fillMaxSize()){
260+
Text(modifier = Modifier.layoutId("center"), text = "C")
261+
262+
for (i in 0 until 12) {
263+
Text(modifier = Modifier.layoutId("h${i+1}"),
264+
text = "${i+1}")
265+
}
266+
}
267+
}

0 commit comments

Comments
 (0)