ConstraintLayout - 自身宽度/高度的比例？

Question

我正在尝试使用约束布局实现以下行为：

1. 将一个视图放置在约束布局的中心
2. 使视图的宽度为父容器宽度的一半
3. 使视图的高度等于其宽度

（即-在中心放置一个正方形）

我尝试使用以下组合：

  android:layout_width="0dp"
  android:layout_height="0dp"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintDimensionRatio="2:1"

但是我不确定如何从这里继续

- dor506

Answer 1

你可以不用 Guideline，这很容易。

只需使用 app:layout_constraintWidth_percent="0.5"

它适用于版本 ConstraintLayout：1.1.0-beta5 及更高版本。

<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">

    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/dark_red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5" />

</android.support.constraint.ConstraintLayout>

- serg3z

---

感谢您的回答。然而，当我将此复制并粘贴到xml文本编辑器中时，预览显示正方形占据全部宽度，而不是一半宽度。我不明白为什么会这样。这只发生在我身上吗？ - dor506

@dor506 版本约束布局出现问题，我的版本是 implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta5'。 - serg3z

哦，我知道了。我正在使用1.0.2版本。谢谢！ - dor506

Answer 2

为了让您的子视图宽度为父视图宽度的一半，请使用 Guidelines：左侧为0.25％，右侧为0.75％。

然后将您的视图放置在这些 Guidelines 之间。

最后，将layout_constraintDimensionRatio设置为“1:1”：

<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.support.constraint.Guideline
        android:id="@+id/guideline_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25"/>

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

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="@id/guideline_left"
        app:layout_constraintRight_toRightOf="@id/guideline_right"
        app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

- repitch

---

感谢您的出色回答！您不觉得对于这样一个小请求使用3个元素有些过度了吗？我认为只需要使用视图元素和必需属性就能实现这个功能。 - dor506

@dor506 可以的。https://dev59.com/N1UL5IYBdhLWcg3w47g5#49648671 - serg3z

Answer 3

我不明白为什么要使用复杂的指导系统，当你可以使用以下方法：

app:layout_constraintWidth_percent="0.5"

宽度为父元素一半的

app:layout_constraintDimensionRatio="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"
    xmlns:tools="http://schemas.android.com/tools">

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5" />

</android.support.constraint.ConstraintLayout>

- leonheess

---

给app:layout_constraintDimensionRatio="1:1"点赞。 - ror

Answer 4

你可以使用指南(约束到指南)来实现这种行为。您应该设置两个百分比垂直指南线（第一个-25％和第二个-75％），这将使您获得父级宽度的一半。然后，您应该通过开始/结束将视图约束到这些指南线。此外，您应该将其约束到父级的顶部/底部，并将视图的尺寸比设置为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="match_parent">

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

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

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="@id/guideline2"
        app:layout_constraintStart_toStartOf="@id/guideline1"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

- Yurii Kyrylchuk