プライバシーポリシー

ユーザー登録をする必要はありません。
第三者に個人を特定できる情報を提供することはありません。
本アプリが個人情報を収集・利用することはありません。
使用しているライブラリは個人情報を利用していません。

この記事は material-components 1.2.0 での内容になります

遭遇した問題

Snackbar の文言が複数行の時に上下の Padding が広すぎる気がする ?

Snackbar のガイドライン をみてもここまで上下に Padding は設定されていなさそう。

解決策

design_snackbar_padding_vertical_2lines のリソースをオーバーライドする

<dimen name="design_snackbar_padding_vertical_2lines">14dp</dimen>

原因

Snackbar の文言の上下の Padding は SnackbarContentLayout の内部で

• 1 行の時は 14dp (R.dimen.design_snackbar_padding_vertical)
• 複数行の時は 24dp (R.dimen.design_snackbar_padding_vertical_2lines)

が設定されるようになっていて、これが Padding が広い理由の原因のよう。
https://github.com/material-components/material-components-android/blob/f00cd57f133d394347baf3e75d5ba6cdb41bcf85/lib/java/com/google/android/material/snackbar/SnackbarContentLayout.java#L91-L94

SnackbarContentLayout へ直接アクセスが難しいので、Snackbar 周りを自分で実装しない限りはリソースのオーバーライドが回避策になりそうだが、ライブラリの方でリソース名がリネームされる可能性はある。

この値は FullWidth な Snackbar の時の名残なのかな?(個人的な解釈)

この記事を読んで習得できること

Flutterの画面作成で「画面いっぱいに要素を表示したい」っていう問題を解決する力（多分）

結論

・Expandedを使って要素を隙間いっぱいに大きくする

こんな感じ

とりあえず、書いてみる

main.dart

class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.blueAccent),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
          ),
        ],
      ),
    );
      ),
    );
  }
}

?

要素が吹っ飛んでしまった。
これは、高さが何も指定されてないためであり、仕方がないこと。

高さを指定してみる

なので、heightをContainerにつけてみる。

main.dart

class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        Container(
          decoration: BoxDecoration(color: Colors.blueAccent),
          height: 300,
        ),
        Container(
          decoration: BoxDecoration(color: Colors.greenAccent),
          height: 300,
        ),
      ],
    ));
  }
}

Containerが表示されるようになったが、高さ指定をしてしまっているので、
これだと不都合がことが起きる。

青いContainerを画面いっぱいに引き伸ばしてみる

上での問題を解消するために、ContainerをExpandedで囲ってみる。

main.dart

class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.blueAccent),
            ),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
            height: 200,
          ),
        ],
      ),
    );
  }
}

すると、いい感じに画面いっぱいに要素が表示されるようになる。
とりあえずやりたいことは終わり。

Expandedを複数入れると均等に要素を広げてくれる

一番上の画像のような要素表示は、以下のソースで行ってくれた。

main.dart

class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.orangeAccent),
            height: 100,
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.yellowAccent),
            ),
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.blueAccent),
            ),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
            height: 100,
          ),
        ],
      ),
    );
  }
}

複数のExpandedが要素内にあると、それらが均等の大きさになるように自動で調整してくれる。
こういうところが、Flutterの好きなところなんだよなあ…
（他のをあまり知らない）

最後に

この要素内に、Textとかを入れたりすると、要素の横幅がぶっ壊れてしまう。
これの解消方法はまた今度。

main.dart

class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.orangeAccent),
            height: 100,
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.yellowAccent),
              child: Text("test"),
            ),
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.blueAccent),
            ),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
            height: 100,
          ),
        ],
      ),
    );
  }
}

ソース

https://github.com/taichi6930/flutterstudyapp/tree/develop

はじめに

DatabindingしたViewModelから、クリックイベントなどをLiveDataでFragmentに通知するとき、privateなMutableLiveDataとpublicなLiveDataを作るの面倒だな〜と思ったことはありませんか？？
私はあります！！

class SampleViewModel : ViewModel() {
    private val _sampleButtonClick = MutableLiveData<Unit>()
    val sampleButtonClick: LiveData<Unit> = _sampleButtonClick
}

今回は、AndroidStudioのLiveTemplateを使うことにより簡単に書けることに気づいたのでそれを紹介します！
私は今までLiveTemplateは使うことはありつつ作ったことはなかったのですが、作るのもとても簡単でした！

LiveTemplateとは？

ライブ テンプレートにコード スニペットを入力し、コードの小さなチャンクをすばやく挿入して補完できます。ライブ テンプレートを挿入するには、テンプレートの短縮名を入力して Tab キーを押します。そうすると、テンプレートに関連付けられたコード スニペットがコードに挿入されます。
たとえば、短縮名 newInstance を入力して Tab キーを押すと、新しいフラグメント インスタンスのコードが引数プレースホルダとともに挿入されます。 また、fbc と入力すると、findViewById() メソッドがキャストおよびリソース ID 構文とともに挿入されます。
(AndroidDeveloperのコード生産性ページより)

ToastやnewInstance、java時代にはpsfsやpsfiにお世話になった人もいるのではないでしょうか。

実際の動き

変数名とクラスを入れるだけ！

作り方

AndroidStudioのPreferencesから作ることができます。
AndroidStudio > Preferences > Editor > Live Templates

今回はKotlinファイルに対して追加するので、AndroidKotlinを選択して、+ボタンで追加します。

下部のボックス呼び出し名や中身を設定します。

• Abbreviation
  • これが呼び出し名
• Description
  • 説明(なくてもOK。Preferencesで呼び出し名の右側に表示される)
• Template text
  • 本体
  • 変数は$$で囲むことで追加できます。
  • 画像から分かると思いますが、クラス名はフルパスで書きます。
    実行時にimportしてくれます。(書かないと自分でimportしなきゃいけないので注意)
• Reformat according to style
  • これにチェックを入れると、使用時にフォーマットを掛けてくれるのでオススメ
• Applicatable in Kotlin:
  • 適用する(補完が出てくる)箇所。これを指定しないと、LiveTemplateが出てきません。
  • 今回のlivedataはclassのフィールドで利用するので、classを選択しました。
    他にもTop-levelやCommentもあったりします。

コピペ用

private val _$name$ = androidx.lifecycle.MutableLiveData<$clazz$>()
val $name$: androidx.lifecycle.LiveData<$clazz$> = _$name$

すでにあるテンプレートの中も見られるので、参考になってとても助かりました。

おわりに

ViewModelからFragmentにクリックイベントをLiveDataで伝える場合は、消費できるEventクラス(I/Oのソース)を使っている人も多いかもしれません。
私はeventLiveDataというテンプレートも作っています。


何度も書いてるな・・・と思うコードがあれば、気軽にテンプレートに追加していくと良さそうです！