ConstraintLayout - 与自身成比例 width/height？

Question

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

在 ConstraintLayout 父级的中心放置一个视图
使视图宽度为父视图宽度的一半
使视图高度等于其宽度

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

我试过使用这个组合：

  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"

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

Answer 1

您可以使用指南(Constraint to a guildeline) 实现此行为。您应该设置两个带百分比的垂直参考线（第一个 - 25% 和第二个 - 75%），这将为您提供 parent 宽度的一半。然后，您应该通过 start/end 将您的观点限制在这些准则中。此外，您应该通过 top/bottom 将其限制为 parent 并将视图的尺寸比率设置为 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>

Answer 2

要使 child 的宽度是 parent 的一半，请使用指南：左边是 0.25%，右边是 0.75

然后，将您的观点置于这些准则之间。

最后，将 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>

Answer 3

没有指南你也可以很容易。

只需使用 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>

Answer 4

我不明白为什么你必须使用复杂的指南系统，而你也可以只使用：

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>

ConstraintLayout - 与自身成比例 width/height？

ConstraintLayout - proportional width/height to self?

android

android-constraintlayout