カテゴリー:
Compose を用いた Android アプリ開発の基礎 ／ ユニット 1: 初めての Android アプリ
閲覧数:8 配信日:2024-10-28 13:40
アプリに画像を表示するには、画像を表示する場所が必要です。
Text コンポーザブルを使用してテキストを表示する場合と同じようにして、Image コンポーザブルを使用して画像を表示できます。
このタスクでは、Image コンポーザブルをアプリに追加し、ダウンロードした画像をアプリの画像に設定して、その画像のサイズと位置を画面内に収まるように調整します。
画像を追加するためにコンポーズ可能な関数を追加する
1.MainActivity.kt ファイルで、GreetingText() 関数の後にコンポーズ可能な関数 GreetingImage() を追加します。
2.GreetingImage() 関数に 2 つの String パラメータを渡します。一つは誕生日祝いのメッセージの message、もう一つは署名の from です。
@Composable
fun GreetingImage(message: String, from: String) {
}
3.すべてのコンポーズ可能な関数は、オプションの Modifier パラメータを受け入れる必要があります。
修飾子は、UI 要素に対して親レイアウト内での配置、表示、動作を指示します。
GreetingImage() コンポーザブルで別のパラメータを追加します。
@Composable
fun GreetingImage(message: String, from: String, modifier: Modifier = Modifier) {
}
Jetpack Compose のリソース
リソースとは、コードが使用する追加のファイルと静的コンテンツであり、ビットマップ、ユーザー インターフェース文字列、アニメーション命令などがあります。
Android のリソースについて詳しくは、アプリのリソースの概要 をご覧ください。
画像や文字列などのアプリリソースは必ずコードとは別にする必要があります。
それにより、コードとは独立して管理できるようになります。
実行時に、Android は現在の設定に基づいて適切なリソースを使用します。た
とえば、画面サイズごとに異なる UI レイアウトや言語設定ごとに異なる文字列を指定できます。
リソースのグループ化
リソースは種類ごとにプロジェクトの res/ ディレクトリの対応するサブディレクトリに保存する必要があります。
たとえば、単純なプロジェクトのファイル階層の例を次に示します。
MyProject/
src/
MyActivity.kt
res/
drawable/
graphic.png
mipmap/
icon.png
values/
strings.xml
この例では、res/ ディレクトリのサブディレクトリにすべてのリソースが保存されていて、画像リソースは drawable/ ディレクトリ、ランチャー アイコンは mipmap/ ディレクトリ、文字列リソースは values/ ディレクトリに入ります。
アプリリソースの使用方法、形式、構文の詳細については、リソースタイプの概要をご覧ください。
リソースへのアクセス
Jetpack Compose は、Android プロジェクトで定義されたリソースにアクセスできます。
リソースにアクセスするには、プロジェクトの R クラスで生成されたリソース ID を使用します。
R クラスは、Android によって自動生成されたクラスであり、プロジェクト内のすべてのリソースの ID を含むクラスです。
ほとんどの場合、リソース ID はファイル名と同じになります。
たとえば、前のファイル階層の画像にアクセスするには、次のコードを使用します。
R.drawable.graphic
次のタスクでは、前のタスクに追加した画像ファイル androidparty.png を使用します。
1.GreetingImage() 関数の中で、image という名前の val プロパティを宣言します。
2.androidparty リソースを渡して painterResource() 関数を呼び出します。その戻り値を image 変数に代入します。
val image = painterResource(R.drawable.androidparty)
アプリをコンパイルするには関数をインポートする必要があるため、Android Studio は painterResource コードをハイライト表示します。
3.Android Studio でハイライト表示されている .painterResource をクリックします。
4.ポップアップで [Import] をクリックし、androidx.compose.ui.res.painterResource のインポートを追加します。
painterResource() 関数は、ドローアブル画像リソースを読み込みます。引数としてリソース ID（この場合は R.drawable.androidparty）を取ります。
5.painterResource() 関数の呼び出しの後に、Image コンポーザブルを追加し、painter という名前付きの引数として image を渡します。
Image(
painter = image
)
アプリをコンパイルするには関数をインポートする必要があるため、Android Studio は Image コードをハイライト表示します。
この警告を解決するには、MainActivity.kt ファイルの先頭に次のインポートを追加します。
import androidx.compose.foundation.Image
最初の警告は解決されましたが、Android Studio で単語 Image にカーソルを合わせると、[None of the following functions can be called with the arguments supplied] という新しい警告が表示されます。これは、提供された引数が Image 関数シグネチャのいずれとも一致しないためです。
アプリのユーザー補助対応を確認する
ユーザー補助を意識したコーディング習慣に従うことで、障がいを持つユーザーを含めた、すべてのユーザーがアプリ内の移動やアプリの操作を簡単に行えるようになります。
注: Android ではユーザー向けにさまざまなツールが用意されています。たとえば、TalkBack は Android デバイスに組み込まれている Google 製のスクリーン リーダーです。TalkBack により、画面を見ずにデバイスを使用できるよう音声フィードバックが提供されます。ユーザー補助機能について詳しくは、ユーザーが利用しやすいアプリを作成するをご覧ください。
Android Studio により、アプリのユーザー補助機能を強化するためのヒントと警告が提供されます。コンテンツの説明を使って UI 要素の目的を定義することで、TalkBack でアプリを利用しやすくなります。
しかし、このアプリの画像は装飾目的のみで使用されています。この場合は、画像にコンテンツの説明を追加すると TalkBack で利用しにくくなります。読み上げられるコンテンツの説明を設定するのではなく、画像の contentDescription 引数を null に設定すれば、TalkBack が Image コンポーザブルをスキップするようにできます。
Image コンポーザブルに、contentDescription という名前付き引数を追加し、その値は null に設定します。
Image(
painter = image,
contentDescription = null
)
Image コンポーザブルをプレビューする
このタスクでは、画像コンポーザブルをプレビューし、アプリをエミュレータまたはデバイスで実行します。
1.BirthdayCardPreview() 関数内の GreetingText() 関数の呼び出しを GreetingImage() 関数の呼び出しに置き換えます。
関数は次のコード スニペットのようになります。
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
HappyBirthdayTheme {
GreetingImage(
message = "Happy Birthday Sam!",
from = "From Emma"
)
}
}
2.[Design] ペインは自動更新されます。更新されない場合は、[609ccb451d05cf6b.png] をクリックしてビルドします。
すると、テキストが表示されなくなります。これは、新しい関数には Image コンポーザブルがあるだけで、Text コンポーザブルがなくなっているためです。
▼MainActivity.kt
package com.example.happybirthday
import android.os.Bundle
import android.text.Layout
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextAlign.Companion.Center
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.happybirthday.ui.theme.HappyBirthdayTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
HappyBirthdayTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) { GreetingText(
message = "Happy Birthday Sam!",
from = "From Emma",
modifier = Modifier.padding(8.dp)) }
}
}
}
}
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
Column(
verticalArrangement = Arrangement.Center,
modifier = modifier
) {
Text(
text = message,
fontSize = 100.sp,
lineHeight = 116.sp,
textAlign = TextAlign.Center,
)
Text(
text = from,
fontSize = 36.sp,
modifier = Modifier
.padding(16.dp)
.align(alignment = Alignment.End)
)
}
}
@Composable
fun GreetingImage(message: String, from: String, modifier: Modifier = Modifier) {
val image = painterResource(R.drawable.androidparty)
Image(
painter = image,
contentDescription = null
)
}
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
HappyBirthdayTheme {
GreetingImage(
message = "Happy Birthday Sam!",
from = "From Emma"
)
}
}