يعتبر Jetpack Compose الإطار الرسمي الذي تقدمه Google لتطوير واجهات المستخدم في تطبيقات Android، حيث يوفر طريقة حديثة لبناء الواجهات باستخدام لغة Kotlin مع تقليل حجم الكود وتحسين الأداء بشكل ملحوظ.

ومن بين التصاميم التي أصبحت منتشرة في التطبيقات الحديثة تصميم Fan Cards، والذي يعتمد على عرض مجموعة من البطاقات بشكل متداخل يشبه المروحة، مما يمنح التطبيق مظهرًا جذابًا ويُحسن تجربة المستخدم أثناء التنقل بين العناصر.

ويستخدم هذا النوع من التصميمات في تطبيقات البنوك، والمحافظ الإلكترونية، وبطاقات العضوية، وتطبيقات التسوق، وحتى تطبيقات المناسبات، حيث يساعد على عرض عدد كبير من البطاقات بطريقة أنيقة دون استهلاك مساحة كبيرة من الشاشة.

في هذا المقال سنتعرف على كيفية إنشاء Fan Cards في Jetpack Compose، مع شرح أهم المكونات المستخدمة، وكيفية تحسين الأداء، وأفضل الممارسات التي ينصح بها عند تنفيذ هذا التصميم داخل تطبيقات Android.

يوفر Jetpack Compose مرونة كبيرة عند تصميم واجهات المستخدم، ولذلك أصبح تنفيذ Fan Cards أسهل بكثير مقارنة بالطريقة التقليدية باستخدام XML.

ومن أهم المميزات التي يوفرها هذا التصميم:

ولهذا السبب أصبح تصميم Fan Cards من أكثر التصاميم استخدامًا داخل تطبيقات Android الحديثة.

تعتمد فكرة المشروع على إنشاء مجموعة من البطاقات يتم عرضها فوق بعضها البعض مع وجود إزاحة بسيطة لكل بطاقة.

وعند الضغط على إحدى البطاقات يمكن تحريكها أو تكبيرها أو تغيير ترتيبها باستخدام الرسوم المتحركة الخاصة بـ Jetpack Compose.

ويتم تنفيذ ذلك بالكامل باستخدام مكونات Compose دون الحاجة إلى استخدام مكتبات خارجية.

في البداية نقوم بإنشاء Data Class تمثل بيانات كل بطاقة.

data class FanCard(
    val id: Int,
    val title: String,
    val color: Color
)

يساعد هذا النموذج على تنظيم البيانات وجعل التعامل مع البطاقات أكثر سهولة داخل التطبيق.

بعد إنشاء نموذج البيانات نقوم بإضافة مجموعة من البطاقات التي سيتم عرضها داخل الواجهة.

val cards = listOf(
    FanCard(1, "Visa", Color.Blue),
    FanCard(2, "MasterCard", Color.Red),
    FanCard(3, "Premium", Color(0xFFFFC107))
)

يمكن استبدال هذه البيانات ببيانات قادمة من قاعدة بيانات أو API بسهولة.

يتم إنشاء كل بطاقة باستخدام مكون Card الموجود داخل Material 3.

Card(
    modifier = Modifier
        .fillMaxWidth()
        .height(180.dp)
)

كما يمكن تخصيص الحواف والألوان وإضافة الظلال بما يتناسب مع تصميم التطبيق.

للحصول على تأثير Fan Cards يتم استخدام Box مع تحريك كل بطاقة باستخدام Modifier.offset().

Box {
    cards.forEachIndexed { index, card ->
        Card(
            modifier = Modifier.offset(
                x = (index * 25).dp
            )
        ) {

        }
    }
}

ويؤدي ذلك إلى ظهور البطاقات فوق بعضها مع إظهار جزء من كل بطاقة.

يمكن تحسين المظهر بإضافة دوران بسيط لكل بطاقة باستخدام graphicsLayer.

Modifier.graphicsLayer {
    rotationZ = index * 4f
}

يعطي هذا التأثير إحساسًا بأن البطاقات موزعة على شكل مروحة حقيقية.

يسمح Jetpack Compose بإضافة Animations بسهولة كبيرة.

ويمكن استخدام animateFloatAsState لتحريك البطاقات عند الضغط عليها.

val rotation by animateFloatAsState(
    targetValue = if (expanded) 15f else 0f
)

وتجعل هذه الحركة تجربة الاستخدام أكثر احترافية وسلاسة.

في بعض الحالات قد تحتاج إلى إظهار البطاقة المحددة فوق جميع البطاقات الأخرى.

يمكن تنفيذ ذلك باستخدام zIndex.

Modifier.zIndex(10f)

وبذلك تصبح البطاقة النشطة أعلى من باقي العناصر.

إذا كان التطبيق يعرض عددًا كبيرًا من البطاقات فمن الأفضل استخدام LazyRow.

LazyRow {

}

تقوم LazyRow بتحميل العناصر الظاهرة فقط، مما يساعد على تقليل استهلاك الذاكرة وتحسين الأداء.

تضيف الظلال عمقًا للتصميم وتجعل البطاقات تبدو أكثر واقعية.

Modifier.shadow(
    elevation = 10.dp,
    shape = RoundedCornerShape(20.dp)
)

كما يمكن إضافة Gradient أو تغيير الشفافية أو استخدام ألوان Material 3 لإضفاء لمسة احترافية على التصميم.

يمكن استخدام هذا التصميم في العديد من التطبيقات المختلفة.

يعد تصميم Fan Cards في Jetpack Compose من أفضل الطرق لإنشاء واجهات مستخدم حديثة داخل تطبيقات Android، حيث يجمع بين المظهر الاحترافي وسهولة الاستخدام مع الحفاظ على أداء مرتفع.

كما يوفر Jetpack Compose جميع الأدوات اللازمة لبناء هذا النوع من الواجهات، مثل Card وModifier وgraphicsLayer وLazyRow وAnimations، مما يجعل عملية التطوير أسرع وأكثر مرونة مقارنة بالطريقة التقليدية.

ويمكن تطوير هذا التصميم مستقبلًا بإضافة إمكانية السحب والإفلات، أو تغيير ترتيب البطاقات ديناميكيًا، أو دمجه مع Pager وShared Element Transitions للحصول على تجربة استخدام أكثر احترافية داخل التطبيقات الحديثة.

data class FanCard(
    val id: Int,
    val title: String,
    val color: Color
)

@Composable
fun FanCards(cards: List<FanCard>) {

    Box {
        cards.forEachIndexed { index, card ->

            Card(
                modifier = Modifier
                    .offset(x = (index * 25).dp)
                    .graphicsLayer {
                        rotationZ = index * 4f
                    }
                    .shadow(
                        elevation = 10.dp,
                        shape = RoundedCornerShape(20.dp)
                    )
                    .fillMaxWidth()
                    .height(180.dp)
            ) {

                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {

                    Text(
                        text = card.title,
                        color = Color.White
                    )

                }

            }

        }
    }

}