代码之家 › 专栏 › 技术社区 › dor506

ConstraintLayout-与自身成比例的宽度/高度?

android-constraintlayout android

dor506 · 技术社区 · 6 年前

我试图找出如何使用约束布局实现以下行为:

将视图放置在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"

但我不知道如何从这里继续

4 回复 | 直到 6 年前

serg3z 6 年前

你可以不用指南这很简单。

仅使用 应用程序:layout\u constraintWidth\u 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>

repitch 6 年前

要使孩子的宽度为家长宽度的一半,请使用指导原则:左侧为0.25%,右侧为0.75

然后,将您的视图放在这些准则之间。

最后,将layout\u 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>

leonheess 6 年前

我不明白你为什么要使用复杂的指南系统,而你也可以使用:

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>

Yurii Kyrylchuk 6 年前

您可以使用指导原则实现此行为( Constraint to a guildeline )。你应该设置两条垂直的指导线,其百分比(第一条为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>