android - 子项与 Constraintlayout 中的约束不匹配

Question

我必须将现有的复杂布局转换为 flat ConstaintLayout。所以我设计了一个，它在 android studio 预览窗口中完美对齐

xml 是

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/linearLayout13"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
tools:layout_editor_absoluteY="25dp">

<TextView
    android:id="@+id/tv_on"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:background="@drawable/text_view_on_selector"
    android:gravity="center"
    android:text="ON"
    android:textColor="@drawable/text_color_on"
    app:layout_constraintBaseline_toBaselineOf="@+id/tv_off"
    app:layout_constraintBottom_toTopOf="@id/guidelineOnOff"
    app:layout_constraintEnd_toStartOf="@+id/tv_off"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/tv_off"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginEnd="8dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/text_view_off_selector"
    android:gravity="center"
    android:text="OFF"
    android:textColor="@drawable/text_color_off"
    app:layout_constraintBottom_toTopOf="@id/guidelineOnOff"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/tv_on"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.constraint.Guideline
    android:id="@+id/guidelineOnOff"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="45dp" />

<ImageView
    android:id="@+id/ivIntensityIncrement"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:src="@drawable/ic_add_black"
    android:visibility="visible"
    app:layout_constraintEnd_toEndOf="@+id/sb_intensity"
    app:layout_constraintStart_toStartOf="@+id/sb_intensity"
    app:layout_constraintTop_toBottomOf="@id/guidelineOnOff"
    app:layout_constraintVertical_chainStyle="packed" />

<ImageView
    android:id="@+id/ivWCIncrement"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:src="@drawable/ic_add_black"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@id/sb_warmCool"
    app:layout_constraintEnd_toEndOf="@+id/sb_warmCool"
    app:layout_constraintStart_toStartOf="@+id/sb_warmCool"
    app:layout_constraintTop_toBottomOf="@id/guidelineOnOff"
    app:layout_constraintVertical_chainStyle="packed" />

<com.samsung.lighting.presentation.ui.custom_views.VerticalSeekBar
    android:id="@+id/sb_intensity"
    style="@style/intensitySeekBar"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:max="100"
    android:progress="30"
    android:thumb="@drawable/seek_thumb_gray"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/ivIntensityDecrement"
    app:layout_constraintEnd_toStartOf="@id/cp_rgb"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/ivIntensityIncrement"
    app:rotate_angle="90" />

<ImageView
    android:id="@+id/ivIntensityDecrement"
    android:layout_width="wrap_content"
    android:layout_height="22dp"
    android:src="@drawable/ic_remove_black"
    app:layout_constraintBottom_toTopOf="@+id/btnFanOff"
    app:layout_constraintEnd_toEndOf="@+id/sb_intensity"
    app:layout_constraintStart_toStartOf="@+id/sb_intensity" />

<com.samsung.lighting.rgb.ColorPicker
    android:id="@+id/cp_rgb"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginTop="8dp"
    android:focusableInTouchMode="false"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/sb_warmCool"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@id/sb_intensity"
    app:layout_constraintTop_toBottomOf="@+id/guidelineOnOff" />

<com.samsung.lighting.presentation.ui.custom_views.VerticalSeekBar
    android:id="@+id/sb_warmCool"
    style="@style/warmSeekBar"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:max="100"
    android:progress="30"
    android:thumb="@drawable/seek_thumb_gray"
    app:layout_constraintBottom_toTopOf="@id/ivWCDecrement"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/cp_rgb"
    app:layout_constraintTop_toBottomOf="@+id/ivWCIncrement"
    app:rotate_angle="-90" />

<ImageView
    android:id="@+id/ivWCDecrement"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_remove_black"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/btnFanOff"
    app:layout_constraintEnd_toEndOf="@+id/sb_warmCool"
    app:layout_constraintStart_toStartOf="@+id/sb_warmCool"
    app:layout_constraintTop_toBottomOf="@+id/sb_warmCool" />

<Button
    android:id="@+id/btnFanOff"
    style="@style/buttonFanKnob"
    android:layout_width="40dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:text="@string/_0"
    app:layout_constraintBottom_toTopOf="@+id/cb_allDevice"
    app:layout_constraintEnd_toStartOf="@+id/btnSpeedLow"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/btnSpeedLow"
    style="@style/buttonFanKnob"
    android:layout_width="40dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:text="@string/_1"
    app:layout_constraintBottom_toTopOf="@+id/cb_allDevice"
    app:layout_constraintEnd_toStartOf="@+id/btnSpeedMedium"
    app:layout_constraintStart_toEndOf="@+id/btnFanOff" />

<Button
    android:id="@+id/btnSpeedMedium"
    style="@style/buttonFanKnob"
    android:layout_width="40dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:text="@string/_2"
    app:layout_constraintBottom_toTopOf="@+id/cb_allDevice"
    app:layout_constraintEnd_toStartOf="@+id/btnSpeedHigh"
    app:layout_constraintStart_toEndOf="@+id/btnSpeedLow" />

<Button
    android:id="@+id/btnSpeedHigh"
    style="@style/buttonFanKnob"
    android:layout_width="40dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:text="@string/_3"
    app:layout_constraintBottom_toTopOf="@+id/cb_allDevice"
    app:layout_constraintEnd_toStartOf="@+id/imgRotateClockWise"
    app:layout_constraintStart_toEndOf="@+id/btnSpeedMedium" />


<ImageView
    android:id="@+id/imgRotateClockWise"
    android:layout_width="25dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:src="@drawable/right_up_arrow"
    app:layout_constraintBottom_toTopOf="@+id/cb_allDevice"
    app:layout_constraintEnd_toStartOf="@+id/swhSwing" />

<Switch
    android:id="@+id/swhSwing"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    app:layout_constraintBottom_toTopOf="@+id/cb_allDevice"
    app:layout_constraintEnd_toStartOf="@+id/imgRotateCounterClockWise" />

<ImageView
    android:id="@+id/imgRotateCounterClockWise"
    android:layout_width="25dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:src="@drawable/left_up_arrow"
    app:layout_constraintBottom_toTopOf="@+id/cb_allDevice"
    app:layout_constraintEnd_toEndOf="parent" />

<CheckBox
    android:id="@+id/cb_allDevice"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="8dp"
    android:padding="10dp"
    android:text="All Devices"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/ll_cancel"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/ll_ok"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginBottom="8dp"
    android:drawablePadding="10dp"
    android:gravity="center"
    android:padding="10dp"
    android:text="@string/ok1"
    android:textColor="@color/blue"
    android:textSize="15sp"
    android:visibility="visible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/ll_cancel" />

<TextView
    android:id="@+id/ll_reset"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerInParent="true"
    android:layout_gravity="center"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="8dp"
    android:gravity="center"
    android:padding="10dp"
    android:text="@string/alert.button.reset"
    android:textColor="@color/blue"
    android:textSize="15sp"
    android:visibility="visible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/ll_cancel"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/ll_cancel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerInParent="true"
    android:layout_gravity="center"
    android:layout_marginBottom="8dp"
    android:gravity="center"
    android:padding="10dp"
    android:text="@string/alert.button.cancel"
    android:textColor="@color/blue"
    android:textSize="15sp"
    android:visibility="visible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/ll_ok"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/ll_reset" />

<TextView
    android:id="@+id/tv_intensity"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:visibility="gone" />

<TextView
    android:id="@+id/tv_warmCool"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:visibility="gone" />

问题VerticalSeekbar是没有对齐，如图所示。

垂直搜索栏

  @Override
protected final void onDraw(@NonNull final Canvas c) {
    c.rotate(ROTATION_ANGLE_270);
    c.translate(-getHeight(), 0);
    super.onDraw(c);
}

视图的可见性由动态设置。因此，某些视图在某些时候可能可见或不可见。如果按钮不可见，则搜索栏必须增加高度。但它没有发生。搜索栏高度始终为 0dp。它违反了匹配约束属性。

标签： androidandroid-layoutandroid-constraintlayout