kotlin 使用2个按钮创建ConstraintLayout,EditText以编程方式失败

klh5stk1  于 2023-06-24  发布在  Kotlin
关注(0)|答案(2)|浏览(187)

出于某种原因,我试图从XML到代码重新创建一个屏幕。这就是我想要的屏幕外观:

很简单:

  • 两边各有两个按钮(实际上应该是图像,但现在还不错)
  • 中间的EditText
  • EditText增长到多行时,按钮应该“粘”在EditText的顶部

使用我的代码,我的屏幕看起来像这样:

我也不知道是怎么回事。这是我的代码:

@Composable
fun ShowWrapped() {
    AndroidView(factory = { context ->
        createChat(context)
    })
}

fun createChat(context: Context): ConstraintLayout {
    val constraintLayout = ConstraintLayout(context).apply {
        id = View.generateViewId()
        layoutParams = ViewGroup.LayoutParams(
            MATCH_PARENT,
            MATCH_PARENT,
        )
    }
    val buttonA = ImageButton(context).apply {
        id = View.generateViewId()
        layoutParams = ViewGroup.LayoutParams(
            WRAP_CONTENT,
            WRAP_CONTENT,
        )
    }
    val buttonB = ImageButton(context).apply {
        id = View.generateViewId()
        layoutParams = ViewGroup.LayoutParams(
            WRAP_CONTENT,
            WRAP_CONTENT,
        )
    }
    val editText = EditText(context).apply {
        id = View.generateViewId()
        layoutParams = ViewGroup.LayoutParams(
            WRAP_CONTENT,
            WRAP_CONTENT,
        )
    }

    constraintLayout.addView(buttonA)
    constraintLayout.addView(buttonB)
    constraintLayout.addView(editText)

    buttonA.setImageResource(R.drawable.ic_launcher_foreground)
    buttonB.setImageResource(R.drawable.ic_launcher_foreground)

    val set = ConstraintSet()

    set.clone(constraintLayout)

    set.connect(buttonA.id, ConstraintSet.START, constraintLayout.id, ConstraintSet.START)
    set.connect(buttonB.id, ConstraintSet.END, constraintLayout.id, ConstraintSet.END)
    set.connect(editText.id, ConstraintSet.BOTTOM, constraintLayout.id, ConstraintSet.BOTTOM)
    set.connect(buttonA.id, ConstraintSet.TOP, editText.id, ConstraintSet.TOP)
    set.connect(buttonB.id, ConstraintSet.TOP, editText.id, ConstraintSet.TOP)
    set.connect(buttonA.id, ConstraintSet.END, editText.id, ConstraintSet.START)
    set.connect(buttonB.id, ConstraintSet.START, editText.id, ConstraintSet.END)

    set.applyTo(constraintLayout)

    return constraintLayout
}
ruarlubt

ruarlubt1#

  • EditText* 未被正确约束。需要添加起点约束和终点约束,以使其在布局中居中。(这是Remc4的答案的要点,也是你的问题的核心。
set.connect(editText.id, ConstraintSet.BOTTOM,ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM)
set.connect(editText.id, ConstraintSet.START,ConstraintSet.PARENT_ID, ConstraintSet.START)
set.connect(editText.id, ConstraintSet.END,ConstraintSet.PARENT_ID, ConstraintSet.END)

这将使您的视图处于正确的位置。您可能需要做一些额外的工作,例如引入一个水平链,以确保如果 EditText 增长到足以将按钮推离屏幕时,所有内容都保持对齐。
您没有发布您的工作XML,所以我不能评论XML和您的代码之间的任何差异。

mkshixfv

mkshixfv2#

将所有元素的高度设置为MATCH_PARENT,并将editText的宽度设置为0,以占用剩余的空间。如果您不希望按钮的高度与editText相同,则可以将所有高度设置为WRAP_CONTENT,并将两个按钮的顶部和底部连接到editText的顶部和底部。

val constraintLayout = ConstraintLayout(context).apply {
    id = View.generateViewId()
    layoutParams = ViewGroup.LayoutParams(
        MATCH_PARENT,
        MATCH_PARENT,
    )
}
val buttonA = ImageButton(context).apply {
    id = View.generateViewId()
    layoutParams = ViewGroup.LayoutParams(
        WRAP_CONTENT,
        MATCH_PARENT,
    )
}
val buttonB = ImageButton(context).apply {
    id = View.generateViewId()
    layoutParams = ViewGroup.LayoutParams(
        WRAP_CONTENT,
        MATCH_PARENT,
    )
}
val editText = EditText(context).apply {
    id = View.generateViewId()
    layoutParams = ViewGroup.LayoutParams(
        0, //0 means match_constraints (take up the remaining space)
        MATCH_PARENT,
    )
}

...

set.connect(buttonA.id, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START)

set.connect(editText.id, ConstraintSet.START, buttonA.id, ConstraintSet.END)
set.connect(editText.id, ConstraintSet.END, buttonB.id, ConstraintSet.START)

set.connect(buttonB.id, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END)

相关问题