Skip to content

Jetpack Compose を使用したコンテンツカード

このリファレンス記事では、Android または FireOS アプリケーションの Jetpack Compose を使用したコンテンツカード統合について説明します。

Android では、ContentCardsList()を使用して Compose アプリケーションにコンテンツカードフィードを追加できます。以下はその例です。

1
2
3

setContent {
    ContentCardsList()
}

コンテンツカードのスタイリング

2つの方法のいずれかでスタイルを適用できます。1つ目は、次の例のようにContentCardListStylingとContentCardStylingをContentCardsList()に渡します。

1
2
3
4
5
6
7
8
9
10
11
12
13

ContentCardsList(
    style = ContentCardListStyling(listBackgroundColor = Color.Red),
    cardStyle = ContentCardStyling(
        titleTextStyle = TextStyle(
            fontFamily = fontFamily,
            fontSize = 25.sp
        ),
        shadowRadius = 10.dp,
        shortNewsContentCardStyle = BrazeShortNewsContentCardStyling(
            shadowRadius = 15.dp
        )
    )
)

2つ目は、次の例のように、BrazeStyleを使用して Braze コンポーネントのグローバルスタイルを作成することです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

BrazeStyle(
    contentCardStyle = ContentCardStyling(
        textAnnouncementContentCardStyle = BrazeTextAnnouncementContentCardStyling(
            cardBackgroundColor = Color.Red,
            descriptionTextStyle = TextStyle(
                fontFamily = fontFamily,
                fontSize = 25.sp,
            )
        ),
        titleTextColor = Color.Magenta
    )
) {
    // Your app here, including any ContentCardsList() in it
}

さらなるカスタマイズ

カードのクリックを処理する

カードのクリックを処理するには、Cardを受け取り、Booleanを返す関数をonCardClickedに渡します。trueが返された場合、Braze は分析用にログを取る以外に、クリックに対して何も処理しません。falseが返された場合、Braze はクリックを処理します。

1
2
3
4
5
6
7
8
9
10
11

ContentCardsList(
    onCardClicked = { card ->
        if (card.extras.containsKey("mySpecialKey")) {
            // handle the click here
            true
        } else {
            // Let Braze handle the click
            false
        }
    }
)

却下の通知を有効にする

カードが却下されたときに通知を受けるには、onCardDismissed関数に関数を渡します。

1
2
3
4
5

ContentCardsList(
    onCardDismissed = { card ->
        // Do what you need with the card
    }
)
Github   GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!