Android: ContraintLayoutでネガティブマージンを実現する

Created at Wed, Jul 25, 2018

ConstraintLayoutはネガティブマージンに対応していないため、少しテクニックを使う必要があります。 この記事ではSpaceを使ったネガティブマージンの実現について説明します。

例

ネガティブマージンと同等の大きさを持ったSpaceを定義して、そこにConstraintを設定するだけです。

<androidx.constraintlayout.widget.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:padding="80dp">

  <Space
      android:id="@+id/negative"
      android:layout_width="15dp"
      android:layout_height="15dp"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <ImageView
      android:id="@+id/icon"
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:contentDescription="icon"
      app:layout_constraintBottom_toBottomOf="@id/negative"
      app:layout_constraintEnd_toEndOf="@id/negative"
      tools:src="@tools:sample/avatars" />
</androidx.constraintlayout.widget.ConstraintLayout>

簡単に説明すると、Spaceに15pxを指定して、bottom, endに対してconstraintを指定することで、ネガティブマージンを達成しています。 上記の例だと、

と同等の振る舞いをしています。

まとめ

ConstraintLayoutではネイティブでネガティブマージンに対応していないため、Spaceを使った、ややテクニカルな方法で実現するのが良いと思われます。

Written by