标签: android-constraintlayout

我需要垂直移动 ConstraintLayout 中的一些视图，最好具有过渡效果（以避免“跳过”）。

该布局只是一个带有多个小部件（无层次结构）的约束布局，所有小部件都受到父级的约束。

我的布局文件：

<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:id="@+id/myLayout"
tools:context="com.example.quant.icarus.MainActivity">

<SurfaceView
    android:id="@+id/surfaceView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

<Button
    android:id="@+id/button1"
    android:layout_width="125dp"
    android:layout_height="48dp"
    android:alpha="0.5"
    android:background="@drawable/button_border"
    android:textColor="@color/ret_text"
    app:layout_constraintVertical_bias="0.97"
    app:layout_constraintHorizontal_bias="0.2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:text="some text" />

<Button
    android:id="@+id/button2"
    android:layout_width="125dp"
    android:layout_height="48dp"
    android:alpha="0.5"
    app:layout_constraintVertical_bias="0.97"
    app:layout_constraintHorizontal_bias="0.8"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:text="some text" />

<SeekBar
    android:id="@+id/prog_bar"
    android:layout_width="210dp"
    android:layout_height="40dp"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:thumb="@drawable/seekbar_thumb"
    android:max="100"
    android:progress="0"
    android:rotation="270" />

<TextView
    android:id="@+id/prog_text"
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    app:layout_constraintVertical_bias="0.1"
    app:layout_constraintLeft_toLeftOf="@+id/prog_bar"
    app:layout_constraintRight_toRightOf="@+id/prog_bar"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:text="some text"/>

<View
    android:id="@+id/viewToMove1" …

我正在尝试在Guideline我的约束布局下方添加一些空间，但由于某种原因它似乎没有被应用。有谁知道发生了什么以及如何在Guideline（纵向和横向）下方应用 5dp 的边距？

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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/lightgrey">
    <com.google.android.gms.maps.MapView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/map_townmap"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#09c"
        app:layout_constraintBottom_toBottomOf="@+id/guideline"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.9"/>

    <ImageView
        android:id="@+id/imageViewSun"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:src="@drawable/ic_sun_black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/switch"
        app:layout_constraintTop_toBottomOf="@+id/guideline"
        />

    <Switch
        android:id="@+id/switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="5dp"
        android:background="@android:color/transparent"
        android:theme="@android:style/Theme.Material.Light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageViewSun"
        app:layout_constraintRight_toLeftOf="@+id/imageViewMoon"
        app:layout_constraintTop_toBottomOf="@+id/guideline"/>

    <ImageView
        android:id="@+id/imageViewMoon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_moon_black"
        android:layout_marginBottom="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/switch"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guideline"/>
</android.support.constraint.ConstraintLayout>

纵向

纵向（特写）

横向

横向（特写）

我最近开始在 android studio 中使用 ConstraintLayout（稍后可能会在我的应用程序中使用它），我想创建一个布局，在一行中有 5 个按钮，并且有 10 行 5 个按钮。我做对了，只是我希望按钮在填充整行时全部调整为相同的宽度（按钮之间没有间隙）。

问题的一个例子：

我当前的 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="lotterynumbergenerator.johnferrazlopez.com.southafricanlotteryguide.other.SaveNumbers">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="01"
        android:textStyle="bold"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        tools:layout_editor_absoluteY="16dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="02"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/button"
        app:layout_constraintRight_toLeftOf="@+id/button3"
        tools:layout_editor_absoluteY="16dp" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="03"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/button2"
        app:layout_constraintRight_toLeftOf="@+id/button4"
        tools:layout_editor_absoluteY="16dp" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="04"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/button3"
        app:layout_constraintRight_toLeftOf="@+id/button5"
        tools:layout_editor_absoluteY="16dp" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="05"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/button4"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_editor_absoluteY="16dp" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="06" …

我目前正在开发一个小型 Android 应用程序并使用新的 ConstraintLayout。

我有一个 ImageView，它包含一个矢量图形图像，它应该根据其纵横比占用最大的可用空间。我让它与以下代码一起工作：

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_margin="@dimen/margin"
    android:src="@drawable/image"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />

现在，我想在确切位置放置多个自定义视图（按钮）。使用约束指南，我想出了以下内容：

<android.support.constraint.Guideline
    android:id="@+id/guideline_x"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.20"
    tools:layout_editor_absoluteX="..."
    tools:layout_editor_absoluteY="..."
    />

<android.support.constraint.Guideline
    android:id="@+id/guideline_y"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.20"
    tools:layout_editor_absoluteX="..."
    tools:layout_editor_absoluteY="..."
    />

<com.example.android.myCustomView
    android:id="@+id/myCustomView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="doSomething"
    app:layout_constraintLeft_toLeftOf="@+id/guideline_x"
    app:layout_constraintTop_toTopOf="@+id/guideline_y"
    />

这对于我最初测试的特定设备非常有用。但是：一旦设备尺寸发生变化，自定义视图就会放置在错误的位置。

我正在寻找一种方法来放置一个自定义视图 n% 相对于图像视图的 x 坐标。我已经尝试添加app:layout_constraintLeft_toLeftOf="@+id/imageView"到指南中，但这没有任何改变。您对我如何解决此问题有任何想法吗？非常感谢！

编辑：这里有 2 张图片说明了这个问题。

三星 Galaxy S8：

谷歌像素 XL：

小红方块应始终位于相对于 Android 图标完全相同的位置。

我有一个带有标题、5 个 TextView、5 个 Spinner 和 2 个按钮的屏幕，这导致第 5 组 TextView/Spinner 向底部移出屏幕。我已经搜索过在 ConstraintLayout 中有一个 ScrollView 并尝试了我发现的各种事情，将特定的高度和宽度设置为“0dp”并将约束添加到 ScrollView 本身，但仍然唯一发生的事情是出现了 5 个集合，但是仍然不可滚动。我看到了一个与此类似的问题，但它们的底部没有任何内容，因此它们限制在父级的底部。我需要限制在底部按钮的顶部，以便我的按钮保持原位，只有中间滚动，但是当我将底部约束设置为按钮顶部时，整个视图消失了。

这是我当前的 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="teamtriplej.com.lipidlator21.CardiolipinsActivity">

<Button
    android:id="@+id/btnSubmit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="30dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="16dp"
    android:background="@android:color/black"
    android:text="@string/Submit"
    android:textColor="@android:color/white"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.761"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

<Button
    android:id="@+id/btnBack"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="30dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="8dp"
    android:background="@android:color/black"
    android:text="@string/Back"
    android:textColor="@android:color/white"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.216"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

<TextView
    android:id="@+id/tvTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="35dp"
    android:text="@string/CLConfiguration"
    android:textAlignment="center"
    android:textColor="@android:color/black"
    android:textSize="24sp"
    android:textStyle="bold"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginStart="8dp" …

我正在尝试创建一个视图，它等于屏幕宽度的 50%，高度应与约束布局中的宽度相同

<android.support.v7.widget.CardView
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1:1"
        android:id="@+id/cardLayout"
        app:cardElevation="3dp"
        app:cardCornerRadius="50dp"
        app:cardBackgroundColor="@android:color/transparent"
        >

但是，这似乎不起作用。我也尝试将宽度更改为wrap_content. 这里需要解决什么问题？

目前使用约束布局来创建对话框并放置我的视图，但 0dp 的视图高度不起作用。

这里 recyclerview 不可见。

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:bind="http://schemas.android.com/tools">
    <data>
        <variable
            name="passengerSeatViewModel"
            type="PassengerSeatViewModel" />
        <variable
            name="seatSelectionViewModel"
            type="SeatSelectionViewModel" />
    </data>
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorWhite">
        <android.support.constraint.Guideline
            android:id="@+id/guideline_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_begin="@dimen/_20dp" />
        <android.support.constraint.Guideline
            android:id="@+id/guideline_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_end="@dimen/_20dp" />
        <include
            android:id="@+id/header"
            layout="@layout/dialog_header"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toRightOf="@+id/guideline_left"
            app:layout_constraintRight_toLeftOf="@+id/guideline_right"
            bind:header="@{@string/text_seat_selected_for}"
            bind:onCancelClick="@{passengerSeatViewModel}" />
        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/tv_segment"
            style="@style/TextStyle_L_Black"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/_5dp"
            android:layout_marginLeft="@dimen/_5dp"
            android:drawableEnd="@drawable/green_filled_tick"
            android:drawableRight="@drawable/green_filled_tick"
            android:drawablePadding="@dimen/_5dp"
            android:gravity="center"
            android:text="@{seatSelectionViewModel.getSelectedSegment()}"
            app:layout_constraintLeft_toRightOf="@+id/guideline_left"
            app:layout_constraintTop_toBottomOf="@+id/header" />
        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_passengers"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="@dimen/_3dp"
            app:layout_constraintBottom_toTopOf="@+id/barrier_select_seats"
            app:layout_constraintLeft_toLeftOf="@+id/guideline_left"
            app:layout_constraintRight_toRightOf="@+id/guideline_right"
            app:layout_constraintTop_toBottomOf="@+id/tv_segment"
            bind:data="@{seatSelectionViewModel.passengerAdapterViewModel}"
            bind:passengerViewModel="@{passengerSeatViewModel}" />
        <android.support.constraint.Group
            android:id="@+id/group_copy" …

我有 2 个按钮彼此相邻（链接），并且应用程序中可能有 2 种状态，要么只有左按钮可见，在这种情况下它应该水平居中，或者两者都可见，在这种情况下它们都应该水平居中。这一切都有效，但是按钮中有多个单词，并且在小屏幕上，按钮都被剪裁而不是换行。要修复此设置，将两个按钮的宽度设置为 0dp 有效，但是在这种情况下，按钮会变得尽可能宽，因此在较大的屏幕上或只有一个按钮可见时，它看起来不正确。我的问题是如何在使用 ConstraintLayout 时将文字包裹在按钮中？我如何约束按钮，使它们正确包裹并且不会变得比它们需要的更宽？使用 LinearLayout 这一切都是开箱即用的，但我想使用 ConstraintLayout。我尝试在两个按钮上设置 app:layout_constrainedWidth="true" 但这不起作用，它只会包装第一个按钮，如果第二个按钮有足够长的文本，它将不存在。

更新：我将示例中的按钮文本更新为更长。

XML：

            <Button
                android:id="@+id/button1"
                style="@style/Widget.AppCompat.Button.Colored"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="8dp"
                android:layout_marginRight="8dp"
                android:text="Long text for first button"
                app:layout_constraintEnd_toStartOf="@+id/button2"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintHorizontal_chainStyle="packed"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/objectAboveButtons"
                app:layout_goneMarginEnd="0dp"
                app:layout_goneMarginRight="0dp" />

            <Button
                android:id="@+id/button2"
                style="@style/Widget.AppCompat.Button.Colored"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginTop="16dp"
                android:text="Long text for second button"
                android:visibility="gone"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/button1"
                app:layout_constraintTop_toBottomOf="@+id/objectAboveButtons" />

我正在使用 ConstraintLayout 2.0 来做一些 MotionLayout 动画。我从更新了我的ConstraintLayout 2.0alpha-3到beta-3现在编制，它的投诉时

src/main/res/xml/scene.xml:11: AAPT: 错误: 属性目标（又名 com.myapp:target）未找到。

我没有更改 MotionLayout 场景文件中的任何内容。以下是违规部分：

  <MotionScene
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto"> 
...
     <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="1000">

        <KeyFrameSet>
            <KeyPosition
                motion:target="@+id/accent_background" <<-- Here
                motion:framePosition="80"
                motion:percentX="1"
                motion:percentY="1" />

我查看了 MotionLayout 的文档，对我来说这并没有改变，但目标仍然是这样定义的。或者我错过了什么？

我确实清除了缓存并尝试重建，但没有帮助。

这种布局是我学习过程的一部分。所以请不要判断textview用于显示数据的用途。

问题是我无法滚动底部的整个数据textview。总是留下 2 组数据。如果我有 8 套，则scrollview最多显示 6 套。如果我有 4 套，它将显示 2 套并且根本不会滚动。我的有什么问题scrollview？

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".FireStoreNotes">

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editText_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/title" />

</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout2"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editText_description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/description" />

</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout3"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout2">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editText_priority"
        android:layout_width="match_parent" …