ConstraintLayout最大宽度百分比

Question

我一直在尝试使用ConstraintLayout，是否有一种方法可以将视图的最大宽度设置为父布局的百分比（高度为匹配约束，尺寸比为1:1）？

以下是不使用最大宽度的代码：

<?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="wrap_content">

   <FrameLayout
      android:id="@+id/frameLayout3"
      android:layout_width="0dp"
      android:layout_height="259dp"
      android:layout_marginEnd="8dp"
      android:layout_marginStart="8dp"
      android:background="@android:color/black"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_bias="0.0"
      app:layout_constraintStart_toEndOf="@+id/imageView"
      app:layout_constraintTop_toTopOf="parent"/>

   <ImageView
      android:id="@+id/imageView"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:src="@android:drawable/ic_menu_add"
      app:layout_constraintBottom_toBottomOf="@+id/frameLayout3"
      app:layout_constraintDimensionRatio="1:1"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintWidth_percent="0.3"/>

</android.support.constraint.ConstraintLayout>

这是结果：

平板电脑：

手机：

- Hyhage

---

请尝试点击此链接。 - Cagri Yalcin

我更倾向于避免使用PercentLayout，因为它已经被ConstraintLayout所取代。 - Hyhage

然后您可以使用 LinearLayout。 - Cagri Yalcin

请检查我的答案，希望能有所帮助。 - Cagri Yalcin

抱歉如果我表达不清楚，实际上我并不想使用宽度/高度的百分比，我只想让视图受到百分比的限制。使用百分比（使用权重或指南）在手机上看起来像这样：https://i.imgur.com/4fjmryf.png 这很好，但在平板电脑上就不行了：https://i.imgur.com/27F39Lq.png。ImageView 不应该比右侧的 FrameLayout 更大。 - Hyhage

Answer 1

我使用了两个属性来实现最大宽度百分比：

app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.4" 

例子：

<TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="Helo world"
    android:textAlignment="viewStart"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_max="wrap"
    app:layout_constraintWidth_percent="0.4" />

如果内容超出父级容器的宽度限制，文本的宽度将增加到父级容器的40%并进行换行。

- Thomson Varghese

---

这是一个很好的提示。它有效了，应该被接受为答案。 - fiipi

干得好！你能解释一下 layout_constraintWidth_max="wrap" 到底是什么意思吗？ - momvart

非常好用，只有当android:text=""时，视图会占用最大的宽度百分比，尽管我希望它为0dp（或接近0dp）。我的解决方法是在需要设置空字符串时设置一个空格。 - z3ntu

非常有用，对我很有效！记得在水平链中的两个视图上都设置0dp，并将链样式设置为spread_inside。 - reavcn

感谢@reavcn，对于两个视图都应该使用水平链。如果不是这样，它将始终设置宽度为0.4。 - RoShan Shan

Answer 2

如果我正确理解了您的问题，那么您已经接近成功了。我认为您给frameLayout设置了静态高度，这就是为什么在平板电脑上无法得到适当的结果，因为您根据手机预览设置了高度。您需要做的是使frameLayout的高度相对于imageView而定。这样，当imageView增大时，frameLayout也会随之增大。

我认为您应该这样做：

<?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="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@android:drawable/ic_menu_add"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.3" />    

    <FrameLayout
        android:id="@+id/frameLayoutTwo"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/black"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="parent" /> 

</android.support.constraint.ConstraintLayout>

我已经检查过了，这在手机和平板电脑上得到的结果是相同的。如果我误解了你的问题，请纠正我。

- Somesh Kumar

Answer 3

没有，我认为我们应该提交一个功能请求。我很确定PercentRelativeLayout也没有这个功能。(此答案适用于ConstraintLayout 1.1)

- androidguy

Answer 4

您可以将LinearLayout或其他ViewGroup设置为精确百分比的width，并将您的wrap_content视图放置在此布局中。

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/image_place_holder"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:scaleType="centerCrop"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <!-- This LinearLayout will have exact 80% of parent width-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintWidth_percent="0.8">

                
                <!-- This MaterialCardView will get a wrap_content width, 
                with a max width of his parent LinearLayout, which is 80% -->
                <com.google.android.material.card.MaterialCardView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/half_activity_horizontal_margin"
                    android:layout_marginTop="@dimen/half_activity_vertical_margin"
                    android:layout_marginEnd="@dimen/half_activity_horizontal_margin"
                    android:layout_marginBottom="@dimen/half_activity_vertical_margin"
                    android:backgroundTint="?attr/colorPrimary">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:maxLines="1"
                        android:paddingStart="@dimen/half_activity_horizontal_margin"
                        android:paddingEnd="@dimen/half_activity_horizontal_margin"
                        android:text="Lorem ipsum"
                        android:textAppearance="?attr/textAppearanceCaption" />

                </com.google.android.material.card.MaterialCardView>

            </LinearLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

- Osvel Alvarez Jacomino