style指定時の「@style/~」と「?attr/~」の違いについて

Material Componentsを導入しボタンを配置しようとしていたのですが、style指定の箇所で不明な点があったので質問させていただきました。

https://material.io/develop/android/components/buttons/

上記のサイトを参考にボタンを配置していたのですがText buttonとOutlined buttonのstyleの指定方法に違いがあることに気づきました。

Text buttonの場合は@style/~と指定しているのに対してOutlined buttonは?attr/~と指定しています。
styleを指定する時にこのような記述の違いにはどのような意味があるのでしょうか？

xml
1<Button
2    android:id="@+id/textButton"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:text="Text button"
6    style="@style/Widget.MaterialComponents.Button.TextButton"
7/>

xml
1<Button
2    android:id="@+id/outlinedButton"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:text="Outlined button"
6    style="?attr/materialButtonOutlinedStyle"
7/>

試したこと

自分なりに調べて、style、attrがどのようなものについてかは以下のような認識です。

・style : あらかじめ色やサイズなどを定義しておいて使い回せる。コード量が減り見易くもなる。

・attr : カスタムビュー作成時に独自の属性を作れる。?attr/~でテーマで指定された値を参照でき、テーマ内の値が変われば参照している箇所を一括で変えることができる。

また、?attr/materialButtonOutlinedStyleを⌘Bで追ってみるとvalues.xmlが開かれ以下のような記述が見つかりました。

xml
1<attr format="reference" name="materialButtonOutlinedStyle"/>

そして同じファイル内に以下のような記述があったのですが、結局?attr/materialButtonOutlinedStyleは@style/Widget.MaterialComponents.Button.OutlinedButtonを指しているということだと思うのですが合ってますでしょうか？（違ってたら教えて下さい）

xml
1<item name="materialButtonOutlinedStyle">@style/Widget.MaterialComponents.Button.OutlinedButton</item>

試しに、Outlined buttonに関して以下のように@style/~と記述しても正常に動作しました。対して、Text buttonには?attr/~なる記述は無さそうでした。

xml
1<Button
2    android:id="@+id/outlinedButton"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:text="Outlined button"
6    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
7/>

質問内容をまとめると以下の2点です。

なぜOutlined buttonは@style/~ではなく?attr/~と指定して記述するようになっているのか？（?attr/materialButtonOutlinedStyleは結局@style/~を指してるっぽいので遠回りしているように見える）
なぜOutlined buttonは<attr format="reference" name="materialButtonOutlinedStyle"/>という記述があるのに対してText buttonにはこのような記述が無いのか？（このような設計にどのような意味があるのか）

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

なぜOutlined buttonは<attr format="reference" name="materialButtonOutlinedStyle"/>という記述があるのに対してText buttonにはこのような記述が無いのか？（このような設計にどのような意味があるのか）

まずこちらについては、Text buttonのドキュメントに ?attr/borderlessButtonStyle があると書かれています。これはappcompatライブラリ内で定義されている属性で、MaterialComponents系テーマを適用した際に該当する既存のButtonのstyleも上書きされることになります。一方でOutlined buttonはMaterialComponentsで新規に登場した種類のボタンなので、新しく?attr/materialButtonOutlinedStyle属性が定義されています。

なぜOutlined buttonは@style/~ではなく?attr/~と指定して記述するようになっているのか？（?attr/materialButtonOutlinedStyleは結局@style/~を指してるっぽいので遠回りしているように見える）

上記のように別のテーマを適用した際にstyleを差し替えられることを考えると、レイアウト上のstyleはattr経由で指定した方がより柔軟なUIとなります。MaterialComponentsを継承した新たなUIライブラリが登場した場合にも、テーマを変更するだけで既存のOutlined buttonの見た目も上書きされます。

あくまで推測になりますが、Text buttonの方でattrを指定していないのは、すでにアプリ側のテーマで ?attr/borderlessButtonStyle を上書きしている可能性があるからだと思います。特に支障がなければ、Text buttonもattrで指定しておいた方がのちのち便利かもしれません。

投稿2020/03/24 05:01