RelativeLayout 使用時の android:id について調査した件(初心者向け 🔰 )


追記(2017.09.30)

記事内で使用されている PercentRelativeLayout は API レベル 26.0.0 から非推奨になったため ConstraintLayout の利用を検討してください。

Android での xml レイアウト作成について

つい最近までの思い込みで android:id="@+id/ok_button" のように先に android:id="@+id/" を書いている id しか android:layout_toLeftOfandroid:layout_above で指定できないと勘違いしていました
なので RelativeLayout でレイアウトを作成するときに、android:layout_toRightOfandroid:layout_below に指定したい id をそれよりも先に android:id="@+id/" で書かないといけない縛りでコーディングをしていたので困っていました

サンプル

以下は android:id= で必ず "@+/id" を記述する縛りで書いたレイアウトのコードです。配置するウィジェットは表示される順通り(左→中央→右)に書くことができていません

cell_pattern_1.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout 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="wrap_content">

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/left"
        android:layout_centerVertical="true"
        android:scaleType="centerCrop"
        app:layout_aspectRatio="100%"
        app:layout_widthPercent="20%" />
    <!-- 左端の正方形画像 -->

    <android.support.v7.widget.AppCompatCheckBox
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:checked="true" />
    <!-- 右端のチェックボックス -->

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignBottom="@id/left"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@id/right"
        android:layout_toRightOf="@id/left"
        android:gravity="left|center_vertical" />
    <!-- 中央のボタン -->
</android.support.percent.PercentRelativeLayout>

"@+id/" の + とは?

ある日のソースコードレビュー中に android:layout_alignBaseline="@+id/cancel_button" の様な書き方ができることを学びました
これをキッカケに、android:id+ について調べてみたところ Qiita の投稿を発見しました。android:id="@+id/"+ とは R.java に id を追加するという意味らしいです
なので android:id= で必ず "@+id/" とする必要はありません。

サンプル

以下は配置するウィジェットを順番通り(左→中央→右)に書いたレイアウトのコードです。上から順に見て最初に出現した id に + を付ければいいので、順番を気にせず自由にウィジェットを配置できるようになりました

cell_pattern_2.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout 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="wrap_content">

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/left"
        android:layout_centerVertical="true"
        android:scaleType="centerCrop"
        app:layout_aspectRatio="100%"
        app:layout_widthPercent="20%" />
    <!-- 左端の正方形画像 -->

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignBottom="@id/left"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/right"
        android:layout_toRightOf="@id/left"
        android:gravity="left|center_vertical" />
    <!-- 中央のボタン -->

    <android.support.v7.widget.AppCompatCheckBox
        android:id="@id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:checked="true" />
    <!-- 右端のチェックボックス -->
</android.support.percent.PercentRelativeLayout>

RecyclerView のセルに入れてみました