约束布局中的图像行答案

【问题标题】：Image Rows in Constraint Layout约束布局中的图像行
【发布时间】：2017-11-05 05:11:15
【问题描述】：

在ConstraintLayout 中使用约束，我创建了如下布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    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="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="4dp"
    app:cardUseCompatPadding="true">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="4dp"
        >

        <ImageView
            android:id="@+id/post_photo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:srcCompat="@drawable/ic_photo"
            />

        <ImageButton
            android:id="@+id/create_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            app:layout_constraintTop_toBottomOf="@+id/post_photo"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/share_button"
            app:srcCompat="@drawable/ic_action_share"
            android:scaleType="fitCenter"
            />


        <ImageButton
            android:id="@+id/share_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            app:layout_constraintTop_toBottomOf="@+id/post_photo"
            app:layout_constraintLeft_toRightOf="@+id/create_button"
            app:layout_constraintRight_toRightOf="parent"
            app:srcCompat="@drawable/ic_action_share"
            android:scaleType="fitCenter"
            />

    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

我的问题是，只要ImageView 中图像的高度大于其宽度，就不会显示较低的ImageButtons。如果我们在ConstraintLayout 上硬编码一个高度（某种足够的），那么按钮可以根据ImageView 的高度获得一些高度。我相信问题是当View Bounds 调整为ImageView. 我该如何克服这种情况？

【问题讨论】：

标签： android imageview android-constraintlayout

【解决方案1】：

wrap_content 仅要求小部件测量自身，但不会限制其针对最终约束的扩展

将以下属性添加到您的 ImageView 中，当父约束布局设置为 wrap_content 时会使用该属性，然后会出现高度测量问题，因此请克服该问题

app:layout_constraintHeight_default="wrap"

并将 ImageView 高度设置为 0dp

 <ImageView
            android:id="@+id/post_photo"
            android:layout_width="0dp"
            app:layout_constraintHeight_default="wrap"
            android:layout_height="0dp"
            android:layout_marginTop="4dp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:srcCompat="@drawable/ic_photo"
            />

对于信息，我们可以在宽度问题中使用相同的方法只需将宽度替换为 0dp 和以下属性

app:layout_constraintWidth_default="wrap"

【讨论】：

【解决方案2】：

如果要防止这种情况，需要定义percent或(dp)值。

1 - 您可以在 ConstraintLayout 上使用 maxWidth / maxHeight，例如

 <ImageView
        ...
        android:maxHeight="192dp"
        />

2 - 您也可以像

一样使用 Guideline

<Guideline
       id="guideLineMaxHeightOfImage"
       guideLinePercent="0.4"
       orientation="horizontal"
       >

图像视图

<ImageView
        ...
        app:layout_constraintTop_toTopOf="@+id/guideLineMaxHeightOfImage"
        />

【讨论】：