Android:以编程方式与预览方式之间的约束布局差异

时间:2018-10-26 15:14:36

标签: java android kotlin android-constraintlayout

我需要像这样的图片一样布置三个视图。

enter image description here

以下是相应的xml代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <View
        android:background="@android:color/holo_green_light"
        android:id="@+id/reference"
        android:layout_width="10dp"
        android:layout_height="100dp"

        android:layout_marginStart="25dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <View
        android:id="@+id/up"
        android:background="@android:color/holo_blue_dark"
        android:layout_width="50dp"
        android:layout_height="0dp"

        android:layout_marginBottom="10dp"

        android:layout_marginStart="10dp"
        app:layout_constraintStart_toEndOf="@id/reference"
        app:layout_constraintTop_toTopOf="@id/reference"
        app:layout_constraintBottom_toTopOf="@id/bottom" />

    <View
        android:id="@+id/bottom"
        android:background="@android:color/holo_red_dark"
        android:layout_width="50dp"
        android:layout_height="0dp"

        android:layout_marginTop="10dp"

        android:layout_marginStart="10dp"
        app:layout_constraintStart_toEndOf="@id/reference"
        app:layout_constraintBottom_toBottomOf="@id/reference"
        app:layout_constraintTop_toBottomOf="@id/up" />

</android.support.constraint.ConstraintLayout>

预期的行为是,如果绿色视图变大,则蓝色和红色将分别停留在顶部和底部,相差20dp。

在预览中设计视图时,这种方法很好用,但是当我尝试通过代码布局同一视图时,红色和蓝色视图会折叠

private inline fun <T: View> constructId(constructor: (Context) -> T,
                                         context: Context,
                                         id: Int): Pair<T,Int> {
    val view = constructor(context)
    view.id = id
    return Pair(view, id)
}

---------------------------------------------------------------
val set = ConstraintSet()
val verticalMargin = intDimen(R.dimen.vertical_margin_8dp)
val verticalGuideline = R.id.pub_container_vertical_guideline
val spaceMargin = intDimen(R.dimen.horizontal_margin_2dp)
set.create(verticalGuideline, ConstraintSet.VERTICAL_GUIDELINE)
set.setGuidelinePercent(verticalGuideline, 0.5f)

val (viewLeft, leftId) = constructId(::View, context, R.id.pub_container_1)
viewLeft.setBackgroundColor(ContextCompat.getColor(context, android.R.color.holo_red_dark))
set.constrainHeight(leftId, intDimen(R.dimen.vertical_icon_256dp))
set.connect(leftId, ConstraintSet.TOP, contentId, ConstraintSet.BOTTOM, verticalMargin)
set.connect(separatorId, ConstraintSet.TOP, leftId, ConstraintSet.BOTTOM, verticalMargin)
set.connect(
        leftId, ConstraintSet.START,
        ConstraintSet.PARENT_ID, ConstraintSet.START, spaceMargin
)
set.connect(
        leftId, ConstraintSet.END,
        verticalGuideline, ConstraintSet.END, spaceMargin
)

val (viewUp, upId) = constructId(::View, context, R.id.pub_container_2)
val (viewBottom, bottomId) = constructId(::View, context, R.id.pub_container_3)
viewUp.setBackgroundColor(ContextCompat.getColor(context, android.R.color.holo_red_dark))
viewBottom.setBackgroundColor(ContextCompat.getColor(context, android.R.color.holo_red_dark))

set.connect(upId, ConstraintSet.TOP, leftId, ConstraintSet.TOP)
set.connect(upId, ConstraintSet.BOTTOM, bottomId, ConstraintSet.TOP, spaceMargin)
set.connect(upId, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END)
set.connect(upId, ConstraintSet.START, verticalGuideline, ConstraintSet.START, spaceMargin)
set.constrainHeight(upId, ConstraintSet.MATCH_CONSTRAINT)

set.connect(bottomId, ConstraintSet.BOTTOM, leftId, ConstraintSet.BOTTOM)
set.connect(bottomId, ConstraintSet.TOP, upId, ConstraintSet.BOTTOM, spaceMargin)
set.connect(bottomId, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END)
set.connect(
        bottomId, ConstraintSet.START,
        verticalGuideline, ConstraintSet.START, spaceMargin
)
set.constrainHeight(bottomId, ConstraintSet.MATCH_CONSTRAINT)

this.addView(viewLeft)
this.addView(viewUp)
this.addView(viewBottom)
set.applyTo(this)

将寻求任何帮助。

0 个答案:

没有答案
相关问题