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

# 追記（2017.09.30）

記事内で使用されている [`PercentRelativeLayout`](https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html) は API レベル [`26.0.0`](https://developer.android.com/about/versions/oreo/index.html) から非推奨になったため [`ConstraintLayout`](https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html) の利用を検討してください。

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

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

## サンプル :one:

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

``` 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"` の様な書き方ができることを学びました :memo: 
これをキッカケに、`android:id` の `+` について調べてみたところ [Qiita の投稿](http://qiita.com/kamedon39/items/71986649f1a884e912cb)を発見しました。`android:id="@+id/"` の `+` とは R.java に id を追加するという意味らしいです :bulb:
なので `android:id=` で必ず `"@+id/"` とする必要はありません。

## サンプル :two: 

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

``` 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](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html) のセルに入れてみました :camera:

<img src="https://qiita-image-store.s3.amazonaws.com/0/6881/9e13eb4e-e697-b8f9-4a71-190770e171be.png" width="350px" />