[解決済み] 制約条件付きレイアウトでオーバーラップ/ネガティブマージンを実現するには？

質問

制約レイアウトで負のマージンをとってオーバーラップを実現することは可能でしょうか？ 画像をレイアウトの中央に配置し、テキストビューをx dpでオーバーラップするようにしようとしています。負のマージン値を設定しようとしましたが、うまくいきません。 これを達成する方法があれば、素晴らしいことです。

解決方法を教えてください。

更新情報 コンストレイントレイアウト バージョン 2.1.0-alpha2 で負の余白をサポートしました。単に状態

android:layout_marginTop="-25dp"

でマイナス25dpのマージン。(これは、ビューの上部に制約がある場合のみ機能します。マージンは コンストレイントレイアウト マージン側が拘束されていない場合)

明確化すること。 以下の回答は依然として有効ですが、いくつか明らかにしたいことがあります。元の解決策では、ビューに デファクト 負のオフセットは、他のビューを基準にして、図のようにレイアウトに表示されます。

もう一つの解決策は トランスレーションY プロパティは、Amir Khorsandiによって提案されました。 こちら . 私はこの解決策の方がシンプルで好きなのですが、1つだけ注意点があります。 ポストレイアウト そのため、ずらされたビューに拘束されているビューは、翻訳に従わない。

例えば、以下のXMLでは、2つの TextViews 画像のすぐ下にあります。各ビューは、すぐ上に表示されるビューと上から下へ制約を受ける。

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:tint="#388E3C"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_action_droid" />

    <TextView
        android:id="@+id/sayName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Say my name."
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintStart_toStartOf="@+id/imageView" />

    <TextView
        android:id="@+id/sayIt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Say it."
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintEnd_toEndOf="@+id/sayName"
        app:layout_constraintStart_toStartOf="@+id/sayName"
        app:layout_constraintTop_toBottomOf="@id/sayName" />
</androidx.constraintlayout.widget.ConstraintLayout>

では、"Say my name"を翻訳してみましょう。 テキストビュー によってアップします。 50dp を指定することで

android:translationY="-50dp"

これにより、以下のようになります。

The "Say my name" テキストビュー は予想通りシフトアップしましたが、"Say it" テキストビュー は期待したほどには追いついていない。これは、翻訳が発生する ポストレイアウト . ビューはポストレイアウトで移動しますが、新しい位置でクリックできるようにすることは可能です。

ということで、IMOでは 翻訳X と トランスレーションY のネガティブマージン用 ConstraintLayout 上記の注意事項がレイアウトに影響しない場合は スペース ウィジェットは、以下のようになります。

もう一つ注意点があります。 別の回答へのコメントでSalam El-Bannaが述べているように。 翻訳X というのも、レイアウトがRTLかLTRかに関係なく、翻訳の符号がシフトの方向（左／右）を決定してしまうからです。

オリジナル回答

ネガティブマージンには対応していないようですが ConstraintLayout しかし、利用可能でサポートされているツールを使って、この効果を実現する方法があります。以下は、画像のタイトルが重なっている画像です。 22dp を画像下部から表示させ、事実上 -22dp の余白になります。

を使用することで実現しました。 Space ウィジェットで、必要なオフセットに等しい底部余白があります。そのため Space ウィジェットは、その底が ImageView . さて、あとは TextView の下に、画像のタイトルを Space ウィジェットを使用します。また TextView の下に配置されます。 Space ビューでは、設定されたマージンは無視されます。

この効果を実現するXMLは以下のとおりです。ここでは Space は軽量でこのような用途を想定しているためですが、他のタイプの View を作成し、不可視化した。(おそらく調整が必要でしょうが。)また、このような場合にも View をゼロマージン、希望するインセットマージンの高さで設定し、その上部を拘束しています。 TextView の上端をインセット View .

さらに別のアプローチとして TextView の上に ImageView のように、上下左右を揃え、余白やパディングを適切に調整する。以下に示すアプローチの利点は、多くの計算をすることなく、負のマージンを作成できることです。以上、いくつかのアプローチ方法があることをお伝えしました。

更新してください。 このテクニックの簡単な説明とデモは、Google Developers Mediumを参照してください。 ブログ記事 .

のマイナスマージン ConstraintLayout XML

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher" />

    <android.support.v4.widget.Space
        android:id="@+id/marginSpacer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="22dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintLeft_toLeftOf="@id/imageView"
        app:layout_constraintRight_toRightOf="@id/imageView" />

    <TextView
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Say my name"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/marginSpacer" />
</android.support.constraint.ConstraintLayout>