55
56

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

MaterialDesignでよく使うサイズのまとめ

Posted at

MaterialDesignの特徴の1つとして、全てのコンポーネントが8dp四方のグリッドに沿ってデザインされています。
MaterialDesign: Layout > Metrics & keylines

とりわけ余白は重要視されていて、適切な余白を設定することでいろんなことを表現しようとしているようです。

その中でも、特によく使うサイズをまとめてみました。またAndroidアプリ開発では、そのような固定値はdimens.xmlファイルにまとめることが推奨されているので、実装例として作ってみました。

<resources>
    <!-- リストアイテムの余白 -->
    <dimen name="list_item_first_left_margin">16dp</dimen>
    <dimen name="list_item_second_left_margin">72dp</dimen>
    <dimen name="list_item_right_margin">16dp</dimen>

    <!-- リストの余白 -->
    <dimen name="list_vertical_margin">8dp</dimen>

    <!-- リストの高さ -->
    <dimen name="list_sigle_line_height">48dp</dimen>
    <dimen name="list_icon_and_text_height">56dp</dimen>
    <dimen name="list_two_line_height">72dp</dimen>
    <dimen name="list_three_line_height">88dp</dimen>

    <!-- ボタンの大きさ -->
    <dimen name="button_height">36dp</dimen>
    <dimen name="button_minimum_width">88dp</dimen>

    <!-- CardViewのコンテンツの余白 -->
    <dimen name="card_contens_padding">24dp</dimen>

    <!-- SnackBarの大きさ -->
    <dimen name="snackbar_single_line_height">48dp</dimen>
    <dimen name="snackbar_multi_line_height">80dp</dimen>
</resources>

ビジュアル的に確認するのは、公式のガイドラインを見た方が早いです。
Componentsにまとまってます。よく使うのはこの辺りだと思います。

ちなみにフォントサイズについてはAppCompatにたくさん定義されているので、それを使うのが良さそうです。
フォントサイズは、@dimen/abc_text_size_xxxでいろいろありますし、スタイルとしても@style/TextAppearance.AppCompat.xxxxでたくさん定義があります。

55
56
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
55
56

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?