在Kotlin Anko中使用ConstraintLayout

时间:2018-09-22 21:20:12

标签: kotlin anko android-constraintlayout

我在玩ContraintLayout support in Anko时遇到一个问题,使我无法获得最简单的示例来正常工作。

我在constraintLayout的屏幕顶部水平放置了两个按钮,它们是一个链,使它们在水平方向居中。

我做的第一件事是使用良好的旧xml布局和Android Studio,这样我就可以看一下生成的代码。

这是我的非Anko xml布局

<?xml version="1.0" encoding="utf-8"?>

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="First"
    app:layout_constraintEnd_toStartOf="@+id/button5"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
     />

<Button
    android:id="@+id/button5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Second"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button4"
    />

这将产生如下所示的正确布局

what I expect

现在下面是我认为应该等效的Kotlin Anko代码,以产生相同的结果。

constraintLayout {

                id = R.id.constraintRoot
                val first : Button = button("First"){
                    id = R.id.firstButton
                    width = wrapContent
                    height = wrapContent

                }.lparams{
                    //topToTop = ConstraintSet.PARENT_ID
                    startToStart = PARENT_ID
                    endToStart = R.id.secondButton
                    horizontalChainStyle = spread
                    editorAbsoluteY = 16
                    horizontalBias = 0.5f
                }

                val second : Button = button("Second"){
                    id = R.id.secondButton
                    width = wrapContent
                    height = wrapContent
                }.lparams{
                    startToEnd = R.id.firstButton
                    endToEnd = PARENT_ID
                    editorAbsoluteY = 16
                    horizontalBias = 0.5f
                }
            }

但是由于某种原因,它会产生以下结果。

wrong

如您所见,按钮在视图内部的分布不均且水平居中。

我有什么需要的吗?还是Anko的ConstraintLayout尚未准备好用于生产?

谢谢!

2 个答案:

答案 0 :(得分:0)

所以我最终使用了指南来给我想要的结果。

constraintLayout {

                id = R.id.constraintRoot
                val first : Button = button("First"){
                    id = R.id.firstButton
                    width = wrapContent
                    height = wrapContent
                }.lparams{
                    endToStart = R.id.verticalGuideline
                    startToStart = ConstraintSet.PARENT_ID
                }

                val gl : Guideline = guideline {
                    id = R.id.verticalGuideline
                }.lparams {
                    orientation = ConstraintLayout.LayoutParams.VERTICAL
                    guidePercent = 0.5f
                }

                val second : Button = button("Second"){
                    id = R.id.secondButton
                    width = wrapContent
                    height = wrapContent
                }.lparams{
                    startToEnd = R.id.verticalGuideline
                    endToEnd = ConstraintSet.PARENT_ID
                }
            }

答案 1 :(得分:0)

按钮的宽度和高度应为lparams(在lparams主体中或作为lparams()的参数。我不确定这是否可以解决问题。