我需要像这样的图片一样布置三个视图。
以下是相应的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)
将寻求任何帮助。