それがいいことの序章です

楽しいことならいっぱい夢見ることならめいっぱい

potatotips #68 参加していました！

android event

参加した回はこちら。
ブログ枠での参加でしたが、大変遅れてしまって申し訳ないです、書いていきます！

potatotipsはAndroid/iOSの入り乱れた勉強会で、全部で10個以上のLTが！
1つは5分と短いですが、Tipsの所感を掴むのにもってこいです。
Android開発者としては、普段は聞かないiOSのつらみや解決策を聞けるのも良いです！

Androidの発表はこちら！

今日からはじめるGithub Actions

ワークフローを網羅的に説明していてもはやバイブル！
Github ActionsはGitHubのさまざまなイベントをフックにできるので触っていて楽しい！

実際にリリースノートを自動化していて素敵でした。

Navigation Componentのデータ受け渡しのつまづき

Nested Graphのときのデータ受け渡しのTipsでした！
Nested Graphを使う場合はactionタグにargumentタグを追加で解決とのこと。
これはハマりそう…知見…

複雑になった画面をリファクタした話

複雑になりがちなメッセージング画面をリファクタリングした話でした。
こういう実プロダクトでの課題解決は本当に聞いていて面白いですね。

1Activity&1Fragment -> 1Activity&2Fragment にして、責務によって階層を分けるという解決策でした。
メッセージング画面、すごい知見の宝庫だと思うので各社の実装方法でわいわい議論するの楽しそう。。

ViewBindingで手軽にView操作

ViewBindingはだいぶ浸透してきたという肌感。お手軽で便利なので個人でも使っていきたい！
DataBindingライブラリを使うまでもないけどfindViewByIdもKotlin Android Extensionもなあ〜ってときはすぐ使える。

スライドにもあるように、メモリリークにも注意しましょう。
最近個人的には、極力onViewCreatedの中でbindingを使って完結させられるように意識してます。（なかなかそうはいかない）

Flutter (Dart) と Platform (Android/iOS)- 相互呼び出しのMethodChannelについて -

Flutterのお話。
ネイティブの機能を使うandよいライブラリがなければやはり自前実装になりますが、そのつなぎをどうやるかという発表。

Flutterは最近少し触っていますが、非常に開発者体験がよいです！
いざというときにネイティブの知識を持っているのは強みだな〜と感じてます。

ML Complete Features(Flutter)

続きましてもFlutterの話、ですが、ML Completeというコード補完のお話。

実験的機能ですが、変数が補完されるのかなり嬉しいかも…変数めちゃめちゃ悩みますよね…
未来は簡単な変数名ならエディタが考えてくれる時代を感じました。

Badging for Tabs and Bottom Navigation

Material Components 1.1.0でのBottomNavigationViewでバッヂがつけれるように！

ドットにしたりマックス値以上は+で表現したり、基本的なユースケースは満たしてくれそうで素敵。

AndroidのSkeletonプロジェクト作ってみてる

android

個人プロジェクトだったり検証用サンプルだったり、作り始めるときに毎回書いているコードないですか。
Timberの初期化だったりモノによってはDaggerだったり。

そんなときにクローンしてパッケージ変えて使えるの作ってみてます🙋🏻‍♂️
github.com

気が向いたときに少しずつ整えていきたいし、自分用にメンテもしていきたい。
実プロダクト向けではないのでどんどんalpha版/beta版つっこんでいくぞ！

蛇足

スケルトン作るぞって思ってちょこちょこ作業してたけど、なぜかTODOぽいものを作ろうとしてしまう自分がいて、それはTodoサンプルや…と自分と戦いながら最終的には不要なコードが散見される感じになってしまったw
とはいえアーキテクチャ的に参考になる部分は含めたいのでまたちょこちょこアップデートしたい。なにがいるかな？

コードの間違いやアドバイスは大歓迎なのでスターください！（？）

Toolbarを使うときのtheme設定

android tech

Toolbarにメニューを表示するとよく引っかかるのがアイコンの色の定義。
特に、独自で設定したメニューアイコンと、オーバーフローメニューのアイコンの色がうまく合わないというパターン。
今回はここを解決するひとつの方法をメモ。

前提

  • MDC Library ver1.2.0-alpha05

実装

Toolbar用のThemeOverlayに以下の2つが用意されていた

  • ThemeOverlay.MaterialComponents.Toolbar.Primary
  • ThemeOverlay.MaterialComponents.Toolbar.Surface
<style name="ThemeOverlay.MaterialComponents.Toolbar.Primary" parent="">
  <item name="colorControlNormal">?attr/colorOnPrimary</item>
  <item name="actionMenuTextColor">?attr/colorOnPrimary</item>
</style>
<style name="ThemeOverlay.MaterialComponents.Toolbar.Surface" parent="">
  <item name="colorControlNormal">@color/material_on_surface_emphasis_medium</item>
  <item name="actionMenuTextColor">@color/material_on_surface_emphasis_medium</item>
</style>

@color/material_on_surface_emphasis_mediumは、colorOnSurfaceの60%透過色です。

これをToolbarのテーマに適用させると楽そう。（Toolbar単体で使うとき）

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.MaterialComponents.Toolbar.Primary" />

あるいは、各プロジェクトのテーマに応じて独自のThemeOverlayを作るのも良さそう

<!-- アイコンカラーをPrimarySurfaceに -->
<style name="ThemeOverlay.AppName.Toolbar.PrimarySurface" parent="">
  <item name="colorControlNormal">?attr/colorOnPrimarySurface</item>
  <item name="actionMenuTextColor">?attr/colorOnPrimarySurface</item>
</style>

さらに、ToolbarのアイコンカラーはcolorControlNormalで決まるので、 アイコン側にも?attr/colorControlNormalのtintをかけるといい感じになりそう。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="?attr/colorControlNormal"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FF000000"
        android:pathData="M17.6,11.48 ..." />
</vector>

他のやり方

いい感じにしたくてthemeを漁ったりしてみてやったぜって言ってたけど、menuのアイコンカラーを変えるだけならapp:iconTintを使ってmenuファイル側でできるのであった…

<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >

    <item
        android:id="@+id/menu_id"
        android:icon="@drawable/ic_android"
        android:title="@string/menu_label"
        app:iconTint="?attr/colorOnPrimarySurface"
        app:showAsAction="always"
        />

</menu>

Buttonにスタイルを設定する

android tech

そりゃそうだよねって感じではあるんだけど、あれこれどうするっけ…
ってよく調べなおすので自分で書いて覚えよう選手権を開催します。

よくあるシーン

ボタンに背景色つけるぞ！ボタンの文字色も変えるぞ！
ちゃんとenabledを設定して制御するぞ！

困った！enabled=falseなのに背景色も文字色も変わらん！OMG！

解決策

ColorStateListでボタンの状態に応じた色を背景色・文字色に設定しよう！
せっかくだし、スタイルで定義しちゃおう！

ColorStateList

たとえば、 enabled=falseのときの色は別で！なときは res/color/background_primary.xmlのようなファイルを作って

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/darker_gray" android:state_enabled="false"/>
    <item android:color="@color/colorPrimary"/>
</selector>

としてあげるだけ。便利！

スタイルに設定してあげる

これを文字色も同じように作ってあげて、

<!-- Buttonのスタイル -->
<style name="Material.RadiusButton" parent="Widget.MaterialComponents.Button.UnelevatedButton">
    <item name="backgroundTint">@color/background_primary</item>
    <item name="rippleColor">@color/colorAccent</item>
    <item name="android:layout_height">@dimen/button_height_base</item>
    <item name="cornerRadius">@dimen/button_radius_base</item>
    <item name="android:textColor">@color/button_text</item>
</style>

ボタンにスタイルを適用する

<android.support.design.button.MaterialButton
    android:id="@+id/button"
    style="@style/Material.RadiusButton"
    android:layout_width="match_parent"
    android:enabled="@{!viewModel.executing}"
    android:onClick="@{() -> viewModel.onClick()}"
    android:text="@string/button_text"/>

とすれば、管理が楽ですね！めっちゃ説明を端折りました！

まとめ

書いたらきっと思い出せる！便利！

ioschedのToolbar周りを見てみた

android tech

iosched 2018が公開されましたね！知見たっぷり🎉
Tooblar`周りをどうしようか悩んでいたので抜粋。

BottomNavigationViewを使ったときのあれ。

ioschedではActivityでToolbarを持つ形ではないようでした。個人的に先入観もありビックリ。

結論から言うと、FragmentでAppBarLayoutを持たせる感じでした。 スケジュールタブの場合は

<AppBarLayout>
    <FrameLayout  app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
        <ImageView  android:layout_gravity="center_vertical|start"/>
        <TextView  android:textAppearance="@style/TextAppearance.IOSched.ToolbarTitle"/>
    </FrameLayout>
    <TabLayout/>
</AppBarLayout>

といった具合です。ガッツリImageViewもTextViewも位置指定してました。

ちょっと気になってToolbarのUseageを探してみたところ、ファイルとしてはtoolbar.xmlはあるものの
これどこも使ってないように見受けられます(違ったら教えてほしい！)

UpNavigationが気になる。

ここで気になるのがスケジュール等の詳細のUpNavigation周りになってきます。
Toolbarではなく普通にImageViewでした。わお。

<ImageButton
    android:id="@+id/up"
    android:layout_width="?actionBarSize"
    android:layout_height="?actionBarSize"
    android:layout_gravity="start|top"
    android:background="?selectableItemBackgroundBorderless"
    android:contentDescription="@string/navigate_up"
    app:srcCompat="@drawable/ic_arrow_back" />

こんな具合です。知らなかった。。
スクロールに応じて見えなくなったりもしていたのでてっきりToolbarかと思ってました。
この挙動についてはPushUpScrollListenerで定義されているようです。

感想

Material studiesを見ていると、Toolbar周りの自由度がグッと上がった気がしていて
勝手にToolbarを拡張と考えていましたが、結構筋肉で実装していく感じになるのかな？