亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用Jetpack Compose實現(xiàn)翻轉卡片效果流程詳解

 更新時間:2023年05月08日 10:45:02   作者:Calvin880828  
Jetpack Compose 是一款基于 Kotlin 的聲明式 UI 工具包,可以方便地創(chuàng)建漂亮的用戶界面。使用 Compose 的動畫 API 和可繪制 API,可以輕松實現(xiàn)翻轉卡片效果。通過設置旋轉角度和透明度等屬性,可以使卡片沿著 Y 軸翻轉,并實現(xiàn)翻頁效果

如何使用 Jetpack Compose 創(chuàng)建翻轉卡片效果

介紹

在電子商務和銀行應用程序中輸入卡信息是很常見的情況。我認為讓用戶更輕松地處理這種情況并創(chuàng)建更吸引眼球的 UI 將很有用。大多數(shù)應用程序/網(wǎng)站都喜歡它。

執(zhí)行

在開發(fā)階段,您需要做的是打開一個 Android 項目并實施 Compose 庫。

如果我們繼續(xù)編碼,我們可以檢查以下 Compose 代碼。

您可以根據(jù)上面的設計在屏幕上創(chuàng)建您的卡片。

@Composable
fun AddCreditCard(backgroundColor: Color) {
    var rotated by remember { mutableStateOf(false) }
    val cardType =
        when (result.value?.organization) {
            "MasterCard" -> painterResource(R.drawable.mc)
            "VISA" -> painterResource(R.drawable.visa)
            else -> painterResource(R.drawable.ic_launcher_background)
        }
    val rotation by animateFloatAsState(
        targetValue = if (rotated) 180f else 0f,
        animationSpec = tween(500)
    )
    val animateFront by animateFloatAsState(
        targetValue = if (!rotated) 1f else 0f,
        animationSpec = tween(500)
    )
    val animateBack by animateFloatAsState(
        targetValue = if (rotated) 1f else 0f,
        animationSpec = tween(500)
    )
    Card(
        modifier = Modifier
            .height(220.dp)
            .fillMaxWidth()
            .padding(10.dp)
            .graphicsLayer {
                rotationY = rotation
                cameraDistance = 8 * density
            }
            .clickable {
                rotated = !rotated
            },
        shape = RoundedCornerShape(14.dp),
        elevation = 4.dp,
        backgroundColor = backgroundColor,
        contentColor = Color.White
    ) {
        if (!rotated) {
            Column(
                horizontalAlignment = Alignment.Start,
                verticalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.padding(start = 8.dp, end = 8.dp, bottom = 8.dp),
            ) {
                Row(horizontalArrangement = Arrangement.SpaceBetween) {
                    Icon(
                        painter = painterResource(R.drawable.ic_contactless),
                        contentDescription = "test",
                        modifier = Modifier
                            .width(50.dp)
                            .height(50.dp)
                            .padding(top = 6.dp, bottom = 6.dp, end = 20.dp)
                            .graphicsLayer {
                                alpha = animateFront
                            },
                        tint = Color.White
                    )
                    Spacer(modifier = Modifier.weight(1f))
                    Image(
                        painter = cardType,
                        contentDescription = "test",
                        modifier = Modifier
                            .width(50.dp)
                            .height(50.dp)
                            .graphicsLayer {
                                alpha = animateFront
                            }
                    )
                }
                result.value?.number?.let {
                    Text(
                        text = it,
                        modifier = Modifier
                            .padding(top = 16.dp)
                            .graphicsLayer {
                                alpha = animateFront
                            },
                        fontFamily = fontName,
                        fontWeight = FontWeight.Normal,
                        fontSize = 25.sp
                    )
                }
                Row(horizontalArrangement = Arrangement.SpaceBetween) {
                    Column(horizontalAlignment = Alignment.Start) {
                        Text(
                            text = "Card Holder",
                            color = Color.Gray,
                            fontSize = 9.sp,
                            fontWeight = FontWeight.Bold,
                            modifier = Modifier
                                .graphicsLayer {
                                    alpha = animateFront
                                }
                        )
                        Text(
                            text = "Mehmet Yozgatli",
                            color = Color.White,
                            fontSize = 15.sp,
                            fontWeight = FontWeight.Bold,
                            modifier = Modifier
                                .graphicsLayer {
                                    alpha = animateFront
                                }
                        )
                    }
                    Spacer(modifier = Modifier.weight(1f))
                    Column(horizontalAlignment = Alignment.Start) {
                        Text(
                            text = "VALID THRU",
                            color = Color.Gray,
                            fontSize = 9.sp,
                            fontWeight = FontWeight.Bold,
                            modifier = Modifier
                                .graphicsLayer {
                                    alpha = animateFront
                                }
                        )
                        result.value?.expire?.let {
                            Text(
                                text = it,
                                color = Color.White,
                                fontSize = 15.sp,
                                fontWeight = FontWeight.Bold,
                                modifier = Modifier
                                    .graphicsLayer {
                                        alpha = animateFront
                                    }
                            )
                        }
                    }
                }
            }
        } else {
            Column(
                modifier = Modifier.padding(top = 20.dp),
            ) {
                Divider(
                    modifier = Modifier
                        .graphicsLayer {
                            alpha = animateBack
                        }, color = Color.Black, thickness = 50.dp
                )
                Text(
                    text = "123",
                    color = Color.Black,
                    modifier = Modifier
                        .padding(10.dp)
                        .background(Color.White)
                        .fillMaxWidth()
                        .graphicsLayer {
                            alpha = animateBack
                            rotationY = rotation
                        }
                        .padding(10.dp),
                    fontSize = 15.sp,
                    textAlign = TextAlign.End
                )
                Text(
                    text = "Developed by Mehmet Yozgatli",
                    color = Color.White,
                    modifier = Modifier
                        .fillMaxWidth()
                        .graphicsLayer {
                            alpha = animateBack
                            rotationY = rotation
                        }
                        .padding(5.dp),
                    fontFamily = fontName,
                    fontWeight = FontWeight.Thin,
                    fontSize = 10.sp,
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

創(chuàng)建卡片后,將旋轉、animateFront 和 animateBack 值作為參數(shù)傳遞給組件時,就完成了動畫部分。

ML Kit銀行卡識別

通過使用華為機器學習服務的銀行卡識別服務,您可以為用戶提供極大的便利。

您可以按照官方文檔中的實施步驟進行操作。

https://developer.huawei.com/consumer/en/doc/development/hiai-Guides/dev-process-0000001050038076

輸出

卡片翻轉效果

使用機器學習套件獲取信息

結論

重要的是我們的應用程序要易于使用并讓事情變得簡單。

到此這篇關于使用Jetpack Compose實現(xiàn)翻轉卡片效果流程詳解的文章就介紹到這了,更多相關Jetpack Compose翻轉卡片內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • android 中使用TableLayout實現(xiàn)表單布局效果示例

    android 中使用TableLayout實現(xiàn)表單布局效果示例

    本篇文章主要介紹了android 中使用TableLayout實現(xiàn)表單布局效果示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • Listview中Button搶占焦點的解決方法

    Listview中Button搶占焦點的解決方法

    在程序開發(fā)中經(jīng)常見到listview button搶占焦點的問題,怎么回事什么原因呢?下面小編給大家?guī)砹薒istview中Button搶占焦點的解決方法,感興趣的朋友一起看下吧
    2016-08-08
  • Android基于socket實現(xiàn)的簡單C/S聊天通信功能

    Android基于socket實現(xiàn)的簡單C/S聊天通信功能

    這篇文章主要介紹了Android基于socket實現(xiàn)的簡單C/S聊天通信功能,結合實例形式分析了Android使用socket實現(xiàn)客服端與服務器端數(shù)據(jù)的發(fā)送與接收處理技巧,需要的朋友可以參考下
    2016-10-10
  • Android App中的多個LinearLayout嵌套布局實例解析

    Android App中的多個LinearLayout嵌套布局實例解析

    這篇文章主要介紹了Android App中的多個LinearLayout嵌套布局實例,利用線性布局來排列按鈕是安卓應用布局中的常用做法,需要的朋友可以參考下
    2016-04-04
  • Android嵌套滾動的傳統(tǒng)方法與思路

    Android嵌套滾動的傳統(tǒng)方法與思路

    Android嵌套滾動是在開發(fā)中經(jīng)常遇到的一個需求,這篇文章主要介紹了Android嵌套滾動的傳統(tǒng)方法與思路的相關資料,對各位Android開發(fā)者們具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-05-05
  • Flutter permission_handler 權限插件的使用詳解

    Flutter permission_handler 權限插件的使用詳解

    這篇文章主要介紹了Flutter permission_handler 權限插件的使用,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-04-04
  • 超簡單Android集成華為HMS Scankit 掃碼SDK實現(xiàn)掃一掃二維碼

    超簡單Android集成華為HMS Scankit 掃碼SDK實現(xiàn)掃一掃二維碼

    這篇文章主要介紹了超簡單Android集成華為HMS Scankit 掃碼SDK實現(xiàn)掃一掃二維碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03
  • android自定義Camera拍照并查看圖片

    android自定義Camera拍照并查看圖片

    這篇文章主要為大家詳細介紹了android自定義Camera拍照并查看圖片,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • Android控件之CheckBox、RadioButton用法實例分析

    Android控件之CheckBox、RadioButton用法實例分析

    這篇文章主要介紹了Android控件之CheckBox、RadioButton用法,以實例形式較為詳細的分析了CheckBox和RadioButton實現(xiàn)復選按鈕及單選按鈕功能的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-09
  • Android編程之界面跳動提示動畫效果實現(xiàn)方法

    Android編程之界面跳動提示動畫效果實現(xiàn)方法

    這篇文章主要介紹了Android編程之界面跳動提示動畫效果實現(xiàn)方法,實例分析了Android動畫效果的布局及功能相關實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-11-11

最新評論