Showkaseを使用したUI要素の可視化

AirbnbのShowkaseを紹介し、Jetpack Componentを使用してAndroidアプリケーションを開発するライブラリです.
Showkase github
Showkaseは、Jetpack ComponentのUI要素を視覚化および取得するライブラリであり、設計要素で発生する可能性のある問題を事前に発見し、再使用するのに役立ちます.
以下の手順でご紹介します.

はいい話のようですが、何を言っていますか.

は実際にどのように応用され、使用されていますか?

いい話のようですが、何を言っていますか。

Jetpack Componentでは、@Previewを使用してUI要素をプレビューできます.
次の構成可能な関数を定義します.

@Composable
fun DotsIndicator(
    totalDots : Int,
    selectedIndex : Int,
    selectedColor: Color,
    unSelectedColor: Color,
){
...
}

次に、次のようにPreviewを作成します.

@Preview(widthDp = 100, heightDp = 20, showBackground = true, name = "선택 1")
@Composable
fun DotsIndicatorPreview() {
    DotsIndicator(3, 0, md_theme_light_primary, colorToneDown)
}

@Preview(widthDp = 100, heightDp = 20, showBackground = true, name = "선택 2")
@Composable
fun DotsIndicatorSelectedPreview1() {
    DotsIndicator(3, 1, md_theme_light_primary, colorToneDown)
}

@Preview(widthDp = 100, heightDp = 20, showBackground = true, name = "선택 3")
@Composable
fun DotsIndicatorSelectedPreview2() {
    DotsIndicator(3, 2, md_theme_light_primary, colorToneDown)
}

アプリケーションのデザイン要素をすぐに表示します.

適用可能なデザイン要素を集約して見ることができますか?検索できるなら?

新設計要素の設計検収
*設計要素への直接アクセスは、検索よりもコストがかかります.

既存の設計要素

を再使用
*確認後に適用します.

Showkaseを使ってみましょうか?
@ShowkaseComposableの使用
Basic Example、Dark Mode、RTL、font scaled x 2、display scaled x 2のプレビューが自動的に生成されます.

@ShowkaseComposable(name="첫 번째 인디게이터", group="인트로 화면")
@Preview(widthDp = 100, heightDp = 20, showBackground = true, name = "선택 1")
@Composable
fun DotsIndicatorPreview() {
    DotsIndicator(3, 0, md_theme_light_primary, colorToneDown)
}

2.実際にどのように使うか。

注意:Showkase github
Step 1. 依存関係の追加

def showkase_version = "1.0.0-beta12"
implementation "com.airbnb.android:showkase:$showkase_version"
kapt "com.airbnb.android:showkase-processor:$showkase_version"

gradle command 실행

./gradlew clean build -i -PuseKsp=true

Step 2. UI要素へのコメントの追加
@Componentableに@Previewまたは@ShowkaseComponentableを追加

@ShowkaseComposable(name="첫 번째 인디게이터", group="인트로 화면")

@ShowkaseColorをColorに追加

@ShowkaseColor(name = "LightPrimary", group = Constants.MATERIAL_DESIGN_COLOR)
val md_theme_light_primary = Color(0xFF005ac3)

TextStyleへ@ShowkaseTyplographyを追加

@ShowkaseTypography(name = "displayLarge", group = "Material Design Style")
val displayLarge = TextStyle(
	fontFamily = Roboto,
	fontWeight = FontWeight.W400,
	fontSize = 57.sp,
	lineHeight = 64.sp,
	letterSpacing = (-0.25).sp,
	color = md_theme_light_secondaryContainer,
)

Step 3. ShowkaseRootModuleの追加

@ShowkaseRoot
class RootModule: ShowkaseRootModule

Step 4. アクティビティの開始

startActivity(Showkase.getBrowserIntent(context))

実行画面

は現在、Jetpack Componentが開発したすべてのプロジェクトに適用されています.

デバッグメニューにstartActivityを追加します.

プロジェクトの参加者.