Android/Jetpack Compose Modifierに関するパラメータを紹介

どうも。どっことです。今回はJetpack ComposeのModifierについてチートシートを紹介したいと思います。

前回はTextコンポーサブルを紹介しましたが、「そもそも共通で設定するパラメータってどこで管理するねん」となりまして、調べたらModifierというオブジェクトがあることがわかりました。 今回はこのModifierについて、チートシートとして紹介したいと思います。

Modifierオブジェクトとは

Modifierは、コンポーサブルに対して設定可能な共通のパラメータを管理しているオブジェクトです。 AndroidViewがわかる人なら、Viewに対して設定できる項目くらいの理解で問題ないと思います。

Modifierを使うときのパラメータチートシート

Modifierで設定できるパラメータは（よく使うものは）以下です。

    // ****** 横幅指定関連 ****** // 
Modifier.width(20.dp)                    // 幅指定(layout_width)
    .fillMaxWidth()                      // 幅いっぱい（layout_width="match_parent"）
    .widthIn(20.dp, 20.dp)               // 最小・最大幅指定(minWidth,maxWidth)

    //****** 高さ指定関連 ******//
    .height(20.dp)                       // 高さ指定(layout_height)
    .fillMaxHeight()                     // 高さいっぱい（layout_height="match_parent"）
    .heightIn(20.dp, 20.dp)              // 最小・最大高さ指定（minHeight, maxHeight）
    
    //****** 縦横まとめて指定 ******//
    .size(20.dp)                         // 縦横指定(layout_width,layout_height) 
    .size(20.dp, 20.dp)                  // 縦横指定(layout_width,layout_height) 
    .fillMaxSize()                       // 縦横幅いっぱい (layout_width="match_parent"/layout_height="match_parent")
    .sizeIn(20.dp, 20.dp, 50.dp, 50.dp)  // 最小・最大縦横指定(minWidth, minHeight, maxWidth, maxHeight) 
    
    //****** background関連 ******//
    .background(Color.Red)               // 背景色指定(background)
    
    //****** padding関連 ******//
    .padding(top = 10.dp)                // 上部余白 (paddingTop)
    .padding(start = 10.dp)              // 左余白 (paddingStart)
    .padding(end = 10.dp)                // 右余白 (paddingEnd)
    .padding(bottom = 10.dp)             // 下部余白 (paddingBottom)
    .padding(horizontal = 10.dp)         // 左右余白 (paddingHorizontal)
    .padding(vertical = 10.dp)           // 上下余白 (paddingVertical)
    .padding(10.dp)                      // 上下左右余白 (padding)
    
    //****** 位置調整関連 ******//
    .align(Alignment.CenterHorizontally) // layout_gravity(左右位置, Columnコンポーネント内などで）
    .align(Alignment.CenterVertically)   // layout_gravity(上下位置, Rowコンポーネント内などで）
    
    //****** タップ処理関連 ******//
    .clickable { /** */ }                // タップ処理(setOnClickListener)
    
    //****** 枠線関連 ******//
    .border(BorderStroke(3.dp, Color.Blue)) // 枠線をつける(witdh, color)

    //****** 角丸関連 ******//
    .background(Color.Red, RoundedCornerShape(10.dp))                  // 角丸背景にする
    .border(BorderStroke(3.dp, Color.Blue), RoundedCornerShape(10.dp)) // 角丸枠線をつけるそ

その他

dimens.xmlに定義した値をpadding/marginの値として使いたい

dimensionResourceを使えばリソース定義を参照できます。以下、参考ページから転記。

// In the res/values/dimens.xml file
// <dimen name="padding_small">8dp</dimen>
// In your Compose code
val smallPadding = dimensionResource(R.dimen.padding_small)
Text(
    text = "...",
    modifier = Modifier.padding(smallPadding)
)

まとめ

今回はModifierオブジェクトで設定できるパラメータについてチートシートとして紹介しました。目を通してみると、角丸の実装がサポートされるようになったのは非常に嬉しいポイントだと思いました。この記事も参考になりそうな項目を見つけたら随時更新していく予定ですので、参考にしていただけますと幸いです。

次回やるとしたら、Imageコンポーネントについて同様に紹介しようと思います。

参考

• Compose のリソース  |  Jetpack Compose  |  Android Developers