web-dev-qa-db-ja.com

ConstraintLayoutアスペクト比

次のレイアウトファイルを検討してください。

<?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の場合、最初に幅が他の制約から計算され、次に縦横比に従って高さが調整されることを意味します。ただし、これはレイアウトの結果です。

enter image description here

高さは幅の3倍であり、予想外です。 app：layout_constraintDimensionRatio設定に関してディメンションがどのように計算されるかを誰かが説明できますか？

androidandroid-layoutscaleaspect-ratioandroid-constraintlayout
52
darklord

app:layout_constraintDimensionRatioの動作についてのあなたの理解は正しいです。 app:layout_constraintDimensionRatio="H,3:1"を設定すると、最初に幅が他の制約から計算され、次に縦横比に従って高さが調整されます。実装の唯一の問題は、app:layout_constraintBottom_toBottomOf="parent"をImageViewに追加したため、app:layout_constraintDimensionRatioが無視されることです。

ImageViewを3：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: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>

結果ビューは次のとおりです。

ImageView in 3:1 aspect ratio

78
Eugene Brusov

基本的には、

layout_constraintDimensionRatio(width:height)

例

<!-- button which have width = it's content and height = 1/2 width -->
<Button
        Android:layout_width="wrap_content"
        Android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent" <!-- I still think that we don't need this attribute but I when I don't add this, constraint not working -->
        Android:text="Button TEST RATIO 1"
        app:layout_constraintDimensionRatio="2:1" />

出力
enter image description here

<!-- button which have width = it's content and height = 1/2 width -->
<Button
        Android:layout_width="wrap_content"
        Android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        Android:text="Button TEST RATIO 2"
        app:layout_constraintDimensionRatio="2" /> <!-- 2 here <=> 2:1 <=> 2/1 (1:1 <=> 1, 1/2 <=> 0.5, ....) ->

出力
enter image description here

<!-- button which have width = match_parent and height = 1/2 width -->
<Button
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:text="Button TEST RATIO 3"
        app:layout_constraintDimensionRatio="2" />

出力
enter image description here

<!-- button which have width = match constraint and height = 1/2 width -->
<Button
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:text="Button TEST RATIO 4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintDimensionRatio="2" />

出力
enter image description here

デモ： https://github.com/PhanVanLinh/AndroidConstraintLayoutRatio

11
Phan Van Linh

これらのImageViewプロパティを見てください。

    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"

これらのプロパティはlayout_constraintDimensionRatioをオーバーライドします。これにより、ImageViewはメインの親の下部、上部、および左側に制約され、メインの左、上部、および下部をViewが占有します。画面。

    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"

これが1つの解決策になります。ビューを上部に表示する場合、またはその逆を表示する場合は、layout_constraintBottom_toBottomOfを省略できます。 上記のすべての制約をすべて削除するが、おそらく最もよいlayout_constraintDimensionRatioを除いて推奨であることが最善でしょう。

7
Siddharth Srinivasan