Android Tips #37 RelativeLayout の子の View の width を 50% にする

RelativeLayout ではパーセント指定的なことができない

RelativeLayout は View を相対的に配置するレイアウトです。View と View の位置関係をプロパティで指定してレイアウトします。 レイアウトを相対的に配置することで、さまざまな画面サイズでも良い感じにレイアウトすることができます。最新の ADT でもAndroid プロジェクトを作成すると自動生成される Activity のレイアウトに使われています。柔軟性が高いことから最も使用頻度の高いレイアウトと言えるでしょう。
しかしこの RelativeLayout では LinearLayout でよく使う android:layout_weight がないのでパーセント指定的なことができません。さて、そういったときにはどのように実装すれば良いでしょう？実装時のメモとして残しておきたいと思います。

android:alignLeft と android:alignRight を活用する

結論から言うと android:alignLeft と android:alignRight で実現することが可能です！これらは指定した View を起点にレイアウトしてくれるプロパティです。以下のように実装します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <!-- 空の View -->
    <View 
        android:id="@+id/center_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerInParent="true"
        />
    
    <!-- Left -->
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignRight="@+id/center_view"
        android:text="Left"
        />
    
    <!-- Right -->
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:layout_alignLeft="@+id/center_view"
        android:text="Right"
        />

</RelativeLayout>

ポイントは空の View を中心に置くところです。android:layout_width と android:layout_height は 0dp なので実際には表示されません。左側に置く View の場合 android:layout_alignRight に中心に置いた View の id を指定し android:layout_alignParentLeft を true にして親から見て左寄せにします。すると親の左端から中心までが width になります。つまり 50% になります。またこのようにレイアウトするときは android:layout_width は指定する必要がなくなるので、余計な計算が走らないように 0dp にしておきます。

左側だけ表示する

もちろん左側の View だけ配置することもできます。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    
    <View 
        android:id="@+id/center_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerInParent="true"
        />
    
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignRight="@+id/center_view"
        android:text="Left"
        />

</RelativeLayout>

height を 50% にする

以下のようにすると height を 50% にすることもできます。横が縦になっただけですね。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    
    <View 
        android:id="@+id/center_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerInParent="true"
        />
    
    <Button 
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:layout_alignBottom="@+id/center_view"
        android:text="Top"
        />
    
    <Button 
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_alignTop="@+id/center_view"
        android:text="Bottom"
        />

</RelativeLayout>

まとめ

今回紹介したのは RelativeLayout だけを使って width を 50% でレイアウトする方法でした。もちろん LinearLayout をネストして android:layout_weight で指定する方法もありますが、パフォーマンス面も考えるとネストは少ないほうがいいですよね。今回の実装はあくまで半分ずつにしか表示できないので、実際にはパーセント指定のようにはできないのでご了承を。他に良さそうな実装方法があればぜひご教示ください！