【androidJava】rarativelayoutを使って画像を重ねる

前回は、linearlayoutを使って画像を横に揃えて表示するプログラムを載せました。

今回は、ralativerayoutを使って画像を重ねるところまで紹介していきます。

ralativerayoutとは、アクティビティに必要な部品を相対的に並べることで、デバイスが縦横してもデザイン崩れすることなく表示できるのが特徴です。

ある一つの部品を軸にすることで、周りのパーツを相対的に並べることで見やすいアプリを作ることができます。

ralativelayoutを使ったソースがこちらです↓

<pre><RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"

    >

<ImageView
    android:id="@+id/apple"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/apple"
    android:layout_alignParentBottom="true"
    tools:ignore="MissingConstraints"/>

<ImageView
    android:id="@+id/banana"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/banana"
    android:layout_alignParentBottom="true"
    tools:ignore="MissingConstraints"/></pre>
<pre></RelativeLayout></pre>

この中で重要な役割を担っているのが

<span style="display: inline !important; float: none; background-color: transparent; color: #333333; cursor: text; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">android:layout_alignParentBottom="true"</span>

このコードは、配置する下辺ビューを、親の下辺ビューに揃うように配置してくださいという意味を持っています。

これを応用すれば、ボタンの上からテキストや画像を重ねることも簡単にできます。

ralativerayoutを上手に使えば、モバイルアプリでは致命的なデザイン崩れも防ぐことができるので、これからiosやandroidでアプリを作ってみたいというかたはぜひともマスターしておきたいところですね！

自分もレイアウトは見様見真似だったので引き続きレイアウトの勉強も欠かさずしていきたいと思います。