ConstraintLayout纵横比 [英] ConstraintLayout aspect ratio

问题描述

考虑以下布局文件:

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

我不确定app:layout_constraintDimensionRatio的工作方式.我的理解是比率将始终是宽度:高度.因此3:1将始终使ImageView出现的宽度是高度的3倍.前缀H或W告诉ConstraintLayout哪个尺寸应遵守该比率.如果为H，则意味着将首先根据其他约束条件计算宽度，然后根据宽高比调整高度.但这是布局的结果:

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:

高度是宽度的3倍，这是意外的.谁能向我解释关于app:layout_constraintDimensionRatio设置如何计算尺寸?

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?

推荐答案

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

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.

以下是用于以3:1宽高比调整ImageView大小的布局:

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>

这是结果视图:

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