「条件によってボタンを差し替える」…ように見せる

入社2年目、システム開発部　中嶋です。

今回は「条件によってボタンを差し替える」…ように見せる実装方法です。
ボタンのStyleリソースを用意していれば、「setBackgroundResource」で条件によってスタイルを変更することができます。
しかし、Styleリソースを使わずに行う方法もあります。
用意するのが面倒くさい時など使える場面は限られるかもしれませんが、知っておいて損はないと思うのでご紹介します。

■動作イメージ
・「中①」ボタンを押下すると、「中①」ボタンが「中②」ボタンに変化
・「中②」ボタンを押下すると、「中②」ボタンが「中①」ボタンに変化
・「A」ボタンを押下すると、「A」ボタンが「B」ボタンに変化
・「B」ボタンを押下すると、「B」ボタンが「A」ボタンに変化

■XMLレイアウト

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/buttonLeft"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="左" />

        <Button
            android:id="@+id/buttonCenter1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="中①" />

        <Button
            android:id="@+id/buttonCenter2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="中②" />

        <Button
            android:id="@+id/buttonRight"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="右" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

        <Button
            android:id="@+id/buttonA"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="A" />

        <Button
            android:id="@+id/buttonB"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="B" />
    </LinearLayout>

</LinearLayout>

■Javaソース（一部）
※setVisibilityのパラメタの説明
VISIBLE:表示
INVISIBLE:非表示
GONE:無かったことにする

onCreate内

  // 初期は「中②」を非表示にする
  buttonCenter2.setVisibility(View.GONE);

  // 初期は「B」を非表示にする
  buttonB.setVisibility(View.GONE);

onClick内

  // 「中①」押下時
  if (v == buttonCenter1) {
   buttonCenter1.setVisibility(View.GONE);
   buttonCenter2.setVisibility(View.VISIBLE);
  }

  // 「中②」押下時
  if (v == buttonCenter2) {
   buttonCenter1.setVisibility(View.VISIBLE);
   buttonCenter2.setVisibility(View.GONE);
  }

  // 「A」押下時
  if (v == buttonA) {
   buttonA.setVisibility(View.GONE);
   buttonB.setVisibility(View.VISIBLE);
  }

  // 「B」押下時
  if (v == buttonB) {
   buttonA.setVisibility(View.VISIBLE);
   buttonB.setVisibility(View.GONE);
  }

■もう少し説明
【View.GONE】で片方が消えた後、
【layout_weight】の動きによって幅が自動的に調整されます。
ユーザーは片方のボタンずつしか目にしないので、
「同じ位置にあるボタン」が「刺し変わっているように見える」はずです。