Add StackView spacing

This commit is contained in:
Shadowfacts 2019-06-27 19:27:44 -04:00
parent c5280143b0
commit e92bcd81cb
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
4 changed files with 64 additions and 7 deletions

View File

@ -20,7 +20,7 @@ class TestCacaoScreen: CacaoScreen() {
init { init {
addWindow(Window().apply { addWindow(Window().apply {
val stack = addView(StackView(Axis.VERTICAL, StackView.Distribution.CENTER).apply { val stack = addView(StackView(Axis.VERTICAL, StackView.Distribution.CENTER, spacing = 4.0).apply {
backgroundColor = Color.WHITE backgroundColor = Color.WHITE
}) })
val red = stack.addArrangedSubview(TextureView(Texture(Identifier("textures/block/birch_log_top.png"), 0, 0, 16, 16)).apply { val red = stack.addArrangedSubview(TextureView(Texture(Identifier("textures/block/birch_log_top.png"), 0, 0, 16, 16)).apply {

View File

@ -42,13 +42,13 @@ class DialogView(
override fun wasAdded() { override fun wasAdded() {
background = addSubview(NinePatchView(NinePatchTexture.PANEL_BG).apply { zIndex = -1.0 }) background = addSubview(NinePatchView(NinePatchTexture.PANEL_BG).apply { zIndex = -1.0 })
hStack = addSubview(StackView(Axis.HORIZONTAL, StackView.Distribution.LEADING)) hStack = addSubview(StackView(Axis.HORIZONTAL, StackView.Distribution.LEADING, spacing = 8.0))
if (iconTexture != null) { if (iconTexture != null) {
iconView = hStack.addArrangedSubview(TextureView(iconTexture)) iconView = hStack.addArrangedSubview(TextureView(iconTexture))
} }
vStack = hStack.addArrangedSubview(StackView(Axis.VERTICAL)) vStack = hStack.addArrangedSubview(StackView(Axis.VERTICAL, spacing = 4.0))
vStack.addArrangedSubview(Label(ChatFormat.BOLD.toString() + title, shadow = false).apply { vStack.addArrangedSubview(Label(ChatFormat.BOLD.toString() + title, shadow = false).apply {
textColor = Color(0x404040) textColor = Color(0x404040)
@ -79,7 +79,7 @@ class DialogView(
centerXAnchor equalTo window.centerXAnchor centerXAnchor equalTo window.centerXAnchor
centerYAnchor equalTo window.centerYAnchor centerYAnchor equalTo window.centerYAnchor
widthAnchor greaterThanOrEqualTo 150 widthAnchor greaterThanOrEqualTo 175
background.leftAnchor equalTo leftAnchor - 8 background.leftAnchor equalTo leftAnchor - 8
background.rightAnchor equalTo rightAnchor + 8 background.rightAnchor equalTo rightAnchor + 8

View File

@ -19,7 +19,11 @@ import java.util.*
* @param distribution The mode by which this stack lays out its children along the axis perpendicular to the * @param distribution The mode by which this stack lays out its children along the axis perpendicular to the
* primary [axis]. * primary [axis].
*/ */
class StackView(val axis: Axis, val distribution: Distribution = Distribution.FILL): View() { class StackView(
val axis: Axis,
val distribution: Distribution = Distribution.FILL,
val spacing: Double = 0.0
): View() {
// the internal mutable, list of arranged subviews // the internal mutable, list of arranged subviews
private val _arrangedSubviews = LinkedList<View>() private val _arrangedSubviews = LinkedList<View>()
@ -75,10 +79,10 @@ class StackView(val axis: Axis, val distribution: Distribution = Distribution.FI
val previous = arrangedSubviews.getOrNull(index - 1) val previous = arrangedSubviews.getOrNull(index - 1)
val next = arrangedSubviews.getOrNull(index + 1) val next = arrangedSubviews.getOrNull(index + 1)
if (next != null) { if (next != null) {
arrangedSubviewConnections.add(index, anchor(TRAILING, view) equalTo anchor(LEADING, next)) arrangedSubviewConnections.add(index, anchor(TRAILING, view) equalTo (anchor(LEADING, next) + spacing))
} }
if (previous != null) { if (previous != null) {
arrangedSubviewConnections.add(index - 1, anchor(TRAILING, previous) equalTo anchor(LEADING, view)) arrangedSubviewConnections.add(index - 1, anchor(TRAILING, previous) equalTo (anchor(LEADING, view) - spacing))
} }
} }
} }

View File

@ -191,4 +191,57 @@ class StackViewLayoutTests {
assertEquals(100.0, three.rightAnchor.value) assertEquals(100.0, three.rightAnchor.value)
} }
@Test
fun testVerticalLayoutWithSpacing() {
val stack = window.addView(StackView(Axis.VERTICAL, spacing = 10.0))
val one = stack.addArrangedSubview(View().apply {
intrinsicContentSize = Size(50.0, 50.0)
})
val two = stack.addArrangedSubview(View().apply {
intrinsicContentSize = Size(75.0, 75.0)
})
val three = stack.addArrangedSubview(View().apply {
intrinsicContentSize = Size(50.0, 50.0)
})
window.solver.dsl {
stack.topAnchor equalTo 0
}
window.layout()
assertEquals(0.0, abs(one.topAnchor.value)) // sometimes -0.0, which fails the assertion but is actually ok
assertEquals(50.0, one.bottomAnchor.value)
assertEquals(60.0, two.topAnchor.value)
assertEquals(135.0, two.bottomAnchor.value)
assertEquals(145.0, three.topAnchor.value)
assertEquals(195.0, three.bottomAnchor.value)
assertEquals(195.0, stack.heightAnchor.value)
}
@Test
fun testHorizontalLayoutWithSpacing() {
val stack = window.addView(StackView(Axis.HORIZONTAL, spacing = 10.0))
val one = stack.addArrangedSubview(View().apply {
intrinsicContentSize = Size(50.0, 50.0)
})
val two = stack.addArrangedSubview(View().apply {
intrinsicContentSize = Size(75.0, 75.0)
})
val three = stack.addArrangedSubview(View().apply {
intrinsicContentSize = Size(50.0, 50.0)
})
window.solver.dsl {
stack.leftAnchor equalTo 0
}
window.layout()
assertEquals(0.0, abs(one.leftAnchor.value)) // sometimes -0.0, which fails the assertion but is actually ok
assertEquals(50.0, one.rightAnchor.value)
assertEquals(60.0, two.leftAnchor.value)
assertEquals(135.0, two.rightAnchor.value)
assertEquals(145.0, three.leftAnchor.value)
assertEquals(195.0, three.rightAnchor.value)
assertEquals(195.0, stack.widthAnchor.value)
}
} }