Android Basic with ComposeのUnit1で学んだことをまとめてみる - Resource/Modifier
はじめに
こんにちは、某SIerでSEをやっているnekorush14です。
この記事は絶賛再*n入門しているAndroid開発について、Google公式のLearning Courseを通して学んだことをアウトプットするシリーズです。
Jetpack Composeに関するCourseのUnit1で得た知見を話します。
今回はUnit1の残りの部分、Resource(Drawable含む)、Modifierについてまとめてみます。
前回の記事はこちら👇
Resource
ResourceはBitmap、UIに描画するString、Animationなどのコードで使用される追加のファイルとStaticなコンテンツのことです。詳しくは公式のApp resources overviewに記載されています。
画像や文字などアプリで使用するリソースはコードから分離し、独立して管理する必要があります。Androidは実行時に現在のアプリケーションの構成に基づき適切なリソースを自動的に使用します。
例えば以下のようなケースがあります。
- 画面サイズに基づいて異なるUIレイアウトを表示する
- 言語設定に基づいて異なる文字列を表示する
Resourceはプロジェクトのres/ディレクトリ配下の特定サブディレクトリに配置する必要があり、以下のように役割ごとにディレクトリが別れています。
-
drawable/は画像リソース -
minimap/はランチャーのアイコンリソース -
values/は文字列などの値リソース
アプリリソースの使用法・形式・構文の詳細はResource types overviewに記載されています。
コードから分離したリソースをコードから呼び出す際、Jetpack ComposeではプロジェクトのR classで生成されたリソースIDを経由します。
R.drawable.graphicのようにアクセスします。これは以下の要素で構成されています。
-
R: 自動生成されたRクラス -
drawable:resディレクトのサブディレクトリ -
graphic: リソースID (たいていはファイル名と同一名称)
また、実際にUI上に描画するためPainterResource Composableを使用し、引数にR classで生成されたリソースIDを指定します。
実装ではPainterResource(R.drawable.graphic)でDrawableリソースを取得します。
画像などを描画する際、話題に挙がるのはアクセシビリティです。
Unit1ではAndroidに標準搭載されているアクセシビリティの1つであるTalkBackを取り上げています。
TalkBackは、画面を見ずにAndroidデバイスを操作できるアクセシビリティ機能です。Androidには、他にも様々なアクセシビリティ機能が用意されています。
TalkBackを有効にしているユーザーを考慮せず、必須だからと言って画像に説明を追加すると特定の状況でTalkBackの使用が困難になることがあります。
例えば、装飾用の画像に詳細な説明を追加すると、TalkBackがそれを読み上げてしまい、ユーザーにとって重要な情報が埋もれてしまう可能性があります。
この場合はコンテンツの説明を追加する引数contentDescriptionにnullを指定するとTalkBackがImage Composableの読み上げをスキップします。
Image(
painter = painterResource(id = R.drawable.my_image),
contentDescription = null
)
Drawable
Drawableとは、Androidアプリ内で描画される画像や、画像の形状や色などを定義するXMLリソースのことです。
Androidではアプリ内に存在するローカルの描画対象はres/drawableで管理します。
Android StudioのProject - Android表示
Androidデバイスは、iOSデバイスと比べて画面サイズやピクセル密度が多種多様です。よって、ピクセル密度を考慮せずに画像を表示しようとすると、Androidのシステム内で画像が拡大や縮小されてしまう可能性があります。
この結果、ぼやけた表示、メモリの過剰消費、不適切な画像サイズに繋がります。また、Androidで処理可能なサイズを超えて画像サイズを変更すると、Out-of-memory errorが発生します。
そのため、Androidでは、アプリ内に存在するローカルの写真・背景画像などは、drawable-nodpiディレクトリに配置します。 Android Studioで画像をインポートする際にQualifier typeをDensity、ValueをNo Densityとすると、自動的にこのディレクトリへ配置されます。 このディレクトリに配置されているDrawableは、アプリ内で描画しようとしてもサイズ変更は行われません。これにより、前述のような意図しない問題の発生を抑制できます。
Android StudioのProject - Project表示
Activity内で表示するIconは通常Material Iconを使用します。Material Icon用のComposableが存在するので、それを使用して描画します。
表示するIconはIcons.<ICON_STYLE>.<ICON_NAME>の形式で指定します。ICON_STYLEには、Filled、Outlined、Roundedなどがあります。
Icon(
imageVector = Icons.Filled.AccountCircle,
contentDescription = stringResource(R.string.social_media_account),
)
アクセシビリティ確保のため、Image Composableと同様に、Icon ComposableでもcontentDescriptionは必須パラメータとなります。
Modifier
ModifierはComposableの外観や動作を変更するための修飾子です。様々なModifierが存在しますが、今回はUnit1で扱ったPadding、FontSize、Sizeについてまとめます。
👆Modifierの一覧
PaddingはそのModifierを指定したComposableの上下左右(top, bottom, start, end)に指定したdp分の余白を開けるModifierです。ここで、dpとはDensity independent Pixelsのことで、コンポーネントのサイズを測るための単位のことです。
前述の通り、Androidでは多種多様なサイズのデバイスが存在するため、Pixel単位でサイズを指定すると意図しないサイズ変更が発生します。そのため、dpを用いてコンポーネントサイズを指定します。Androidは指定されたdpを内部で自身のデバイスサイズに変換して描画します。
(という理解です。間違っていたらコメントお願いします🙏)
Unit1のCodelabsによると、このPaddingは4.dp 単位で使用すると良いとのことです。
FontSizeはその名の通り、描画されるテキストのフォントサイズを調整するModifierです。TextComposableのフォントサイズを変更する際に使用します。サイズの指定は前述のdpではなくsp(Scalable Pixel)を使用します。Androidでは、画面要素のサイズ指定にdpを、テキストのサイズ指定にspを使用します。またデフォルトではdpとspは同一のサイズです。
Text(
text = R.string.sample_text,
style = TextStyle(
fontSize = 18.sp,
),
)
まとめ
今回はUnit1で扱われたResource、Drawable、そしてModifierについてまとめてみました。
前回のComposeに引き続き、Jetpack Composeの基礎(と思っている)的な概念について解説されていた印象でした。
UIカスタマイズにおいてModifierは重要かつ基本的な機能だと感じました。
Modifierの種類が多いですが、リファレンスを活用しつつ適切に使っていきたいです。
次回はUnit2になります。Unit2は状態管理をメインに扱っています。
内容が盛りだくさんなのでお楽しみに。
Discussion