5. 不透明度を変更し、画像を拡大縮小する

このタスクでは、アプリの見栄えを良くするために画像が全画面に表示されるようにします。そのために、ContentScale パラメータを使用します。

1.コンテンツのサイズを調整する

アプリに画像を追加して、画像の位置設定を行いました。次は、画像のスケーリングの種類（画像のサイズの調整方法）を設定して、画像が全画面に表示されるようにします。

ContentScale には多数の種類が用意されています。ここでは ContentScale.Crop パラメータを使用し、画像の幅と高さが、それぞれ画面の幅と高さと等しいかそれ以上になるように、アスペクト比を維持しながら均等に画像を拡大します。

Image に ContentScale の名前付き引数を追加します。

2.Android Studio にプロンプトが表示されたら、androidx.compose.ui.layout.ContentScale インターフェースをインポートします。
3.[Design] ペインを確認します。
すると、次のスクリーンショットのように、画像がプレビュー画面全体に表示されます。

不透明度の変更

アプリのコントラストを向上させるには、背景画像の不透明度を変更します。
alpha パラメータを Image コンポーザブルに追加し、0.5F に設定します。

Image(

    painter = image,

    contentDescription = null,

    contentScale = ContentScale.Crop,

    alpha = 0.5F

)

画像の不透明度が変更されます。

大量のコードになりましたが、その結果をプレビューしましょう。

アプリを実行する

デバイスまたはエミュレータでアプリを実行します。

レイアウト修飾子

修飾子は、Jetpack Compose UI 要素の装飾や、その動作の追加に使用されます。たとえば、行やテキスト、ボタンに、背景やパディング、動作を追加できます。このような設定をするには、コンポーザブルまたはレイアウトが修飾子をパラメータとして受け取る必要があります。

前回の Codelab で修飾子について説明した際には、パディング修飾子（Modifier.padding）を使用して、Text コンポーザブルの周囲に空白を追加しました。修飾子には多くの機能がありますが、それらは今回と以降で説明します。

たとえば、次の Text コンポーザブルには背景を緑色にする Modifier 引数があります。

// Example

Text(

    text = "Hello, World!",

    // Solid element background color

    modifier = Modifier.background(color = Color.Green)

)

上記の例と同様に、引数と引数修飾子をレイアウトに追加することで、Arrangement プロパティと Alignment プロパティを使用して子要素を配置できます。

Row 内の子の位置を設定するには、horizontalArrangement 引数と verticalAlignment 引数を設定します。Column の場合は、verticalArrangement 引数と horizontalAlignment 引数を設定します。

Arrangement プロパティは、レイアウトのサイズが子の合計よりも大きい場合に、子要素を配置するために使用されます。

たとえば、Column のサイズが子のサイズの合計よりも大きい場合、verticalArrangement を指定して Column 内の子の位置を定義できます。以下に、さまざまな垂直配置の図を示します。

同様に、Row のサイズが子のサイズの合計よりも大きい場合は、horizontalArrangement を指定して Row 内の子の位置を定義できます。以下に、さまざまな水平配置の図を示します。

Alignment プロパティは、子要素をレイアウトの先頭、中央、末端に配置するために使用されます。

▼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.Box

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.layout.ContentScale

import androidx.compose.ui.layout.ContentScale.Companion.Crop

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

                ) {

                    GreetingImage(

                        message = "Happy Birthday Sam!",

                        from = "From Emma"

                    )

                }

            }

        }

    }





}



@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)

    Box(modifier) {

        Image(

            painter = image,

            contentDescription = null,

            contentScale = Crop,

            alpha = 0.5F

        )

        GreetingText(

            message = message,

            from = from,

            modifier = Modifier

                .fillMaxSize()

                .padding(8.dp)

        )

    }

}





@Preview(showBackground = true)

@Composable

fun BirthdayCardPreview() {

    HappyBirthdayTheme {

        GreetingImage(

            message = "Happy Birthday Sam!",

            from = "From Emma"

        )

    }

}