Viewを突き出して表示させたい Part2

#初めに

Viewを突き出して表示させたい　

前回こちらの記事で
FrameLayoutやLinearLayoutで使える
Viewを凸出して表示させる方法を書きました

今回はConstraintLayoutを使って　Viewを突き出して表示させていきたいと思います

#コードでxmlに書いていく
前回と同じように　Viewが突き出しているこ事を確認できるように、色のついたViewを用意しました

<androidx.constraintlayout.widget.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">

  <FrameLayout
    android:id="@+id/teal_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="50dp"
    android:background="@color/teal_200" />

  <FrameLayout
    android:id="@+id/purple_view"
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:layout_gravity="center_horizontal"
    android:background="@color/purple_200"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

前回との違いは本題の通り大元のViewがConstraintLayoutである事と、親子の関係ではなくそれぞれで独立するViewである事です
(それぞれ見やすいように真ん中に配置する為layout_constraintやlayout_marginの設定をしています)

<androidx.constraintlayout.widget.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">

  <FrameLayout
    android:id="@+id/teal_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="50dp"
    android:background="@color/teal_200" />

  <FrameLayout
    android:id="@+id/purple_view"
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:layout_gravity="center_horizontal"
    android:background="@color/purple_200"
    app:layout_constraintTop_toTopOf="@+id/teal_view"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/teal_view"/>

</androidx.constraintlayout.widget.ConstraintLayout>

purple_viewの自身の上辺と下辺にteal_viewの上辺をの制約を設定します

Viewを突き出して表示することができました！

#注意
Viewのコードの順番に違和感があったかもしれませんが、ConstraintLayoutでは下に書いたViewが高さでは上に表示され　

同じような制約の設定を行っても　Viewが半分見切れた状態になってしまいますので注意が必要です！

#最後に
今回は"突き出して表示する"と言うよりも、ConstraintLayouの特徴をいかした"Viewを重ねて表示する"といった表現の方が正しいかもしれませんね
前回に続いてViewを突き出して表示する方法について記事を書きましたが、今回の方法を知った時には自分の視野の狭さを実感しました。
また、違った方法を見つけましたら記事にしていこうと思います。