LoginSignup
14
15

More than 5 years have passed since last update.

Android Support Design 23.2で追加されたBottomSheetでメッセージ送信フォームを作ってみる

Posted at

※ あらかじめことわっておきます。どう考えても用法・用量を守っていない使い方を紹介しています。

test

Bottom Sheetとは?

Google Play Music使ってる自分はそうと知らずに無意識に使ってたこのコンポーネントのことをいいます。
Slice 1.png

DroidKaigi 2016で「そろそろSupport Libraryにいれるよー」ってGoogleの人が言われていたのですが、どうやらv23.2で実装されたのですね。Googleのブログでも紹介されています。

Bottom Sheetでメッセージフォーム?

私は普段、クラウドワークスって会社でアプリやってるんですが、「ある程度の長文も苦にならず打てるUIってどんなのだろうか」と考えて、ちょっと凝ったUIを設計・実装した経緯があります。

LINEとかFacebookとか、だいたいメッセンジャーアプリって、メッセージフォームが下固定じゃないですか。あれってたぶん、「短文で済ませたくなるUI」ですよね。それじゃだめなんです。
(たとえば、ブログ記事作成画面がこんなUIしてたら、多くの人は発狂して「PCでやる!」ってなりますよね?)

従来のUI

とはいえ、Gmailのように画面を全く分けちゃうのもそれはそれで課題があって、「相手のメッセージを見ながらレスをする」ことができないんですね。

従来のUI2
 
 

これらを両立すべく、クラウドワークスアプリでは「引き出せるメッセージフォーム」を作りました。
CrowdWorks AndroidApp

が!

いかんせんめちゃくちゃ複雑なコードになってまして、たぶん私以外に誰もメンテができないんじゃないか、という漠然とした不安があり、「ライブラリに頼れるなら頼りたいなー」と思っていた所なのでした。

そこに現れた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

14
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
15