约束布局纵横比 [英] ConstraintLayout aspect ratio

问题描述

考虑以下布局文件:

<android.support.constraint.ConstraintLayoutandroid:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"机器人:背景=#FF0000"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizo​​ntal_margin"android:paddingRight="@dimen/activity_horizo​​ntal_margin"android:paddingTop="@dimen/activity_vertical_margin"><图像视图android:layout_width="0dp"android:layout_height="0dp"机器人:背景=#0000FF"机器人:填充=16dp"应用程序:layout_constraintBottom_toBottomOf="parent"应用程序:layout_constraintTop_toTopOf="父"应用程序:layout_constraintLeft_toLeftOf="parent"app:layout_constraintDimensionRatio="H,3:1"工具:layout_editor_absoluteX="16dp"/></android.support.constraint.ConstraintLayout></RelativeLayout>

我不确定 app:layout_constraintDimensionRatio 是如何工作的.我的理解是比例永远是宽度:高度.所以 3:1 总是会使 ImageView 看起来比高度宽 3 倍.前缀 H 或 W 告诉 ConstraintLayout 哪个维度应该遵守比例.如果是 H 则意味着宽度将首先根据其他约束计算，然后根据纵横比调整高度.然而，这是布局的结果:

高度是宽度的 3 倍，这是出乎意料的.谁能向我解释一下如何根据 app:layout_constraintDimensionRatio 设置计算尺寸?

解决方案

您对 app:layout_constraintDimensionRatio 工作方式的理解是正确的.如果你设置 app:layout_constraintDimensionRatio="H,3:1" 那么这意味着宽度将首先根据其他约束计算，然后根据纵横比调整高度.您实现的唯一问题是您将 app:layout_constraintBottom_toBottomOf="parent" 添加到 ImageView，因此它导致 app:layout_constraintDimensionRatio 被忽略.

以下是按 3:1 纵横比调整 ImageView 大小的布局:

Consider the following layout file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FF0000"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#0000FF"
            android:padding="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintDimensionRatio="H,3:1"
            tools:layout_editor_absoluteX="16dp" />

    </android.support.constraint.ConstraintLayout>

</RelativeLayout>
I am not sure how the app:layout_constraintDimensionRatio works. My understanding is the ratio will always be width:height. So 3:1 will always make the ImageView appear 3 times wider than height. The prefix H or W tells ConstraintLayout which dimension should respect the ratio. If it is H then it means width will be first computed from other constraints and then height will be adjusted according to the aspect ratio. However this is the result of the layout:



The height is 3 times larger than width which is unexpected. Can anyone explain to me how the dimensions are computed with respect to app:layout_constraintDimensionRatio setting?
解决方案
Your understanding for the way app:layout_constraintDimensionRatio works is correct. If you set app:layout_constraintDimensionRatio="H,3:1" then it means width will be first computed from other constraints and then height will be adjusted according to the aspect ratio. The only problem with your implementation is that you added app:layout_constraintBottom_toBottomOf="parent" to the ImageView, so that it caused app:layout_constraintDimensionRatio to be ignored.

Here's the layout to size your ImageView in 3:1 aspect ratio:
<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:background="#FF0000">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:background="#0000FF"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintDimensionRatio="H,3:1" />

</android.support.constraint.ConstraintLayout>
and here's the result view:



                        
这篇关于约束布局纵横比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！