拉伸 ConstraintLayout 及其内容

Question

我构建了一个片段（使用 ConstraintLayout），它看起来像这样： Fragment image 我想重复使用它，例如将它加载（添加到 fragmentManager）到 Activity 的 "fragment holder"，但是如果这个容器太小，图像会相互覆盖。看到这个： Image problem 所以，图片不会调整大小...有什么办法可以实现自动调整大小？

谢谢，佐尔坦

Answer 1

将您的每个 ImageViews 放在他们自己的 ConstraintLayout 中。 ImageViews的layout_width和layout_height应该是wrap_content。他们的parentConstraintViews的layout_width和layout_height应该分别是match_parent和wrap_content。

将左侧 ConstraintView 锚定到 parent 的顶部和开始，将右侧 ConstraintView 锚定到顶部并使用 layout_constraintTop_toTopOf、layout_constraintStart_toStartOf, 和 layout_constraintEnd_toEndOf.

同时使用 layout_marginTop 和 layout_marginLeft 为左侧添加边距 parent ConstraintViews； layout_marginTop 和 layout_marginRight 为右边。

接下来，创建一个 vertical Guideline 作为片段的 child。将其 layout_constraintGuide_percent 设置为 0.5。给它一个 @+id/guideline 的 id。

左边ConstraintView'slayout_constraintRight_toLeftOf设为@+id/guideline，右边ConstraintView'slayout_constraintLeft_toRightOf设为@+id/guideline

如果片段不是那么宽，这应该会缩小 ImageViews 尺寸。

如果你希望两张图片之间有一个最小的差距，你可以在左边ConstraintView加上layout_marginRight，在右边ConstraintView加上layout_marginLeft .将每个设置为 2dp 将给出最小间隙 4dp.

这是一个示例布局文件。编辑容器 ConstraintLayout's layout_width 以查看其运行情况：

<?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/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.constraint.ConstraintLayout
    android:layout_width="100dp"
    android:layout_height="300dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:background="#333333">

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        app:layout_constraintGuide_percent="0.5"
        android:orientation="vertical"/>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="16dp"
        app:layout_constraintRight_toLeftOf="@+id/guideline"
        android:layout_marginRight="2dp"
        android:background="#FF0000">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:srcCompat="@mipmap/ic_launcher"
            tools:layout_editor_absoluteY="0dp"
            tools:layout_editor_absoluteX="0dp"/>
    </android.support.constraint.ConstraintLayout>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintLeft_toRightOf="@+id/guideline"
        android:layout_marginLeft="2dp"
        android:background="#00FF00">


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:srcCompat="@mipmap/ic_launcher"
            tools:layout_editor_absoluteY="0dp"
            tools:layout_editor_absoluteX="0dp"/>
    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

拉伸 ConstraintLayout 及其内容

Stretching ConstraintLayout and its content

android

android-fragments

android-constraintlayout