イースターエッグ機能（隠れ処理機能）の実装してみた #Android

はじめに

「イースターエッグってなんやねん。」

って初めてこの単語に出会ったときに思いました。
そもそもこの単語と出会ったのは、業務で

「デフォルトでは何も表示されてないけど、この部分を押すとある単語が表示されるようにしてくれ〜」

というお達しを受けたのがきっかけでした。

「簡単やん」

そう思いました。
TextViewを用意してvisibility属性をView.INVISIBLEに設定して、そのTextViewにクリックイベントのonClick属性を紐付けてそのメソッドでvisibility属性をView.VISIBLEに再設定する。

これだけでできると思っていました。

ちなみに、View.INVISIBLEとView.GONEの違いはなんとなくしかわかっていませんでした。なので、次にまとめます。

Constant	Description
visible	画面に表示される。デフォルト値。
invisible	画面に表示はされないが、レイアウト中には考慮される（スペースは残される）。
gone	ビューが追加されていないかのように完全に非表示になる。

出典: Android Developers

なるほど、やはりINVISIBLEで良さそうだ。
以下のコードで実装してみました。
（※コードは分かる範囲で大いに割愛しています。）

<layout>
    ...
    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/easter_egg"
　　　　 ...
        android:text="イースターエッグ発動！！！"
        android:visibility="@{vm.isShown.booleanValue() ? View.VISIBLE : View.INVISIBLE}"
        android:onClick="@{() -> vm.tapped()}" />
</layout>

class MainViewModel {
    var isShown = MutableLiveData(false)
    ...
    fun tapped() {
        isShown.value = !isShown.value!!
    }
}

しかし！！！

「クリックできんがや！！！」

やはりINVISIBLEではクリックイベントは取得できないのか・・・と思い、
[ android invisible clickable ] などの検索ワードで調べてみました。

すると、stack over flowで「Easter egg」の単語に出会いました。調べました。

イースターエッグとは

イースター・エッグ（Easter egg）とは、コンピュータのソフトウェア・書籍・CDなどに隠されていて、本来の機能・目的とは無関係であるメッセージや画面の総称である。
出典: Wikipedia

ふむ。
こういう隠れ機能のことをイースターエッグっていうのか。

ということで、こんな経緯で出会いました。

さて、まだ問題は解決していません。
それから、先程のキーワードで調べてみたところ、様々な解決策が見つかりました。

どうやら、同一のViewにonClick属性とvisibility属性を設定している場合、visibility属性がView.INVISIBLEに設定しているとクリックイベントは発動しないことがわかった。

じゃあ、どうするか。

解決策
(1)親レイヤにonclick属性を設定し、その子レイヤにvisibility属性を設定する。
(2)visibility属性を使用せずに、テキストの色やボタンの背景などを透明にする。

この２パターンで解決するはず！！！

いざ実装！

(1)親レイヤにonclick属性を設定し、その子レイヤにvisibility属性を設定する。

<layout>
    ...
    <androidx.constraintlayout.widget.ConstraintLayout
        ...
        android:onClick="@{() -> vm.tapped()}" >

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/easter_egg"
　　　　     ...
            android:text="イースターエッグ発動！！！"
            android:visibility="@{vm.isShown.booleanValue() ? View.VISIBLE : View.INVISIBLE}" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

class MainViewModel {
    var isShown = MutableLiveData(false)
    ...
    fun tapped() {
        isShown.value = !isShown.value!!
    }
}

(2)visibility属性を使用せずに、テキストの色やボタンの背景などを透明にする。

<layout>
    ...
    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/easter_egg"
　　　　 ...
        android:text="イースターエッグ発動！！！"
        android:textColor="@{vm.isShown.booleanValue() ? @android:color/black : @android:color/transparent}"
        android:onClick="@{() -> vm.tapped()}" />
</layout>

class MainViewModel {
    var isShown = MutableLiveData(false)
    ...
    fun tapped() {
        isShown.value = !isShown.value!!
    }
}

めでたし。

おわりに

同一のViewにonClick属性とvisibility属性を設定している場合、visibility属性をView.INVISIBLEに設定しているとクリックイベントは発動しない!!!ので工夫が必要でした。