※ あらかじめことわっておきます。どう考えても用法・用量を守っていない使い方を紹介しています。
Bottom Sheetとは?
Google Play Music使ってる自分はそうと知らずに無意識に使ってたこのコンポーネントのことをいいます。
DroidKaigi 2016で「そろそろSupport Libraryにいれるよー」ってGoogleの人が言われていたのですが、どうやらv23.2で実装されたのですね。Googleのブログでも紹介されています。
Bottom Sheetでメッセージフォーム?
私は普段、クラウドワークスって会社でアプリやってるんですが、「ある程度の長文も苦にならず打てるUIってどんなのだろうか」と考えて、ちょっと凝ったUIを設計・実装した経緯があります。
LINEとかFacebookとか、だいたいメッセンジャーアプリって、メッセージフォームが下固定じゃないですか。あれってたぶん、「短文で済ませたくなるUI」ですよね。それじゃだめなんです。
(たとえば、ブログ記事作成画面がこんなUIしてたら、多くの人は発狂して「PCでやる!」ってなりますよね?)
とはいえ、Gmailのように画面を全く分けちゃうのもそれはそれで課題があって、「相手のメッセージを見ながらレスをする」ことができないんですね。
これらを両立すべく、クラウドワークスアプリでは「引き出せるメッセージフォーム」を作りました。
が!
いかんせんめちゃくちゃ複雑なコードになってまして、たぶん私以外に誰もメンテができないんじゃないか、という漠然とした不安があり、「ライブラリに頼れるなら頼りたいなー」と思っていた所なのでした。
そこに現れたBottom Sheet。「なんか似たようなUIしてるなぁー」→「これ使えるんじゃね?」→「とりあえず触ってみよう!」→ からの今回の記事です。
試してみたもの
冒頭のgifアニメで動かしてたやつそのものなんですが、一応ソースコードも上げておきます。
https://github.com/YusukeIwaki/BottomSheetPlayground
結論からいうと、たったこれだけの変更量で、「引き出せるメッセージフォーム」が作れちゃうんですね。
ポイントとしては、非編集モード時には HIDDEN状態にしておき、
bottomSheet.setHideable(true);
bottomSheet.setState(BottomSheetBehavior.STATE_HIDDEN);
編集モードに入ったら、 hidden状態への遷移をしないようにしつつ 、COLLAPSEDやEXPANDEDの状態に遷移
bottomSheet.setState(BottomSheetBehavior.STATE_COLLAPSED);
bottomSheet.setHideable(false);
とすることです。こうすることで、 ビューを一切いじること無く ビヘイビアだけで「引き出せる」という要件が実装できちゃうんです。
我ながら、「こんな簡単でいいの??」ってかんじで割と感動しましたw
まとめ
とりあえず、BottomSheetを変な使い方しました。
メッセージフォームじゃなくても、下からニョキッと出てきたり引っ込んだりする系の画面をつくりたいなら、本当に簡単に作れると思います。
みなさん、一度は用法・用量を守らずSupport Libraryを使ってみてはいかがでしょうか?(違w