ArabicKit Android - معاينة تفاعلية

كيفية استخدام ArabicKit

مكتبة Jetpack Compose جاهزة للتطبيقات العربية RTL-first

دليل سريع

ما هو ArabicKit Android؟

مجموعة مكونات Jetpack Compose مبنية من الصفر للتطبيقات العربية. كل مكوّن يدعم RTL تلقائياً بمجرد تغليف تطبيقك بـ ArabicKitTheme. لا حاجة لإعدادات إضافية - الأرقام العربية، الخطوط، والاتجاه كلها جاهزة.

١

نسخ المجلد إلى مشروعك

انسخ مجلد arabickit/ إلى داخل app/src/main/java/ في مشروعك.

app/src/main/java/
  ├── com/yourapp/
  │   └── arabickit/          ← انسخه هنا
  │       ├── theme/
  │       ├── components/
  │       └── utils/

٢

غلّف تطبيقك بـ ArabicKitTheme

في MainActivity.kt أو أي Composable جذري، استخدم الثيم:

// MainActivity.kt
setContent {
    ArabicKitTheme(
        isArabic = true,          // RTL تلقائي
        numeralStyle = NumeralStyle.Arabic,
    ) {
        MyApp()
    }
}

٣

استخدم المكونات مباشرة

كل المكونات تبدأ بـ Ak - اكتبها واضغط Tab لإكمالها تلقائياً في Android Studio.

AkButton(
    label = "تسجيل الدخول",
    onClick = { /* ... */ },
    variant = ButtonVariant.Filled,
)

AkTextField(
    value = name,
    onValueChange = { name = it },
    label = "الاسم الكامل",
)

AkPrice(amount = 249.99, currency = "ر.س")
// الناتج: ر.س ٢٤٩.٩٩ (أرقام عربية)

٤

أضف الخطوط إلى مشروعك

ضع ملفات الخط في app/src/main/res/font/ - الملفات مرفقة في المجلد المشتراة.

ibm_plex_arabic_regular.ttf ibm_plex_arabic_medium.ttf ibm_plex_arabic_bold.ttf noto_naskh_arabic_regular.ttf

ما يشمله المنتج

٤٢ مكوّن

Buttons · Inputs · Cards · Nav · Dialogs · Lists · Typography

RTL-First

كل مكوّن يعكس اتجاهه تلقائياً - لا حاجة لـ Modifier.rtl

أرقام عربية

ArabicUtils يحوّل الأرقام والعملات والتاريخ الهجري

الأزرار - AkButton

تفاعل مع كل زر لاختبار حالاته

5 أنواع

الأنواع الأساسية - variant

AkButton(label="تأكيد", onClick={}, variant=ButtonVariant.Filled)
AkButton(label="إلغاء", onClick={}, variant=ButtonVariant.Ghost)
AkButton(label="حذف",  onClick={}, variant=ButtonVariant.Destructive)

الأحجام - size

مع أيقونة + حالة التحميل - اضغط "حفظ" لترى التسلسل

عرض كامل - fullWidth

AkButton(
    label = "تسجيل الدخول",
    onClick = { viewModel.login() },
    fullWidth = true,
    loading = uiState.isLoading,  // مؤشر تحميل تلقائي
)

أزرار الأيقونات - AkIconButton

حقول الإدخال - AkTextField

كل الحقول RTL - اكتب فيها لاختبار الحالات

4 أنواع

الحقول الأساسية مع التحقق الفوري

الاسم الكامل

حرفان على الأقل

البريد الإلكتروني

كلمة المرور

٨ أحرف على الأقل

رقم الجوال

حقل البحث - AkSearchField

حقل نصي متعدد الأسطر - minLines/maxLines

ملاحظات الطلب ٠ / ٢٠٠ حرف

AkTextField(
    value = note, onValueChange = { note = it },
    label = "ملاحظات الطلب",
    singleLine = false,
    minLines = 3, maxLines = 6,
)

البطاقات - AkCard

مرّر فوق البطاقات لرؤية التأثيرات

4 أنواع

بطاقات KPI - AkStatCard

إجمالي المبيعات

١٢٬٤٥٠

▲ ٨.٣٪ هذا الشهر

الطلبات الجديدة

٣٤٨

▲ ١٢٪

نسبة الرضا

٩٤٪

▲ ٢٪

الأنواع الثلاثة - Elevated · Outlined · Filled

Elevated

بطاقة مرفوعة

تظهر ظلاً عند التمرير

Outlined

بطاقة محددة

حدود بدون ظل

Filled

بطاقة ممتلئة

خلفية سطحية

بطاقة محتوى - AkContentCard

👨‍💻

أحمد الغامدي

مطور Android · الرياض

٥ سنوات خبرة في Jetpack Compose وتطوير تطبيقات RTL

طلب #٢٠٢٤-٠٠١٢

٣ منتجات · بانتظار الموافقة

انتظار

المجموع ر.س ٢٤٩.٩٩

التنقل - Navigation

اضغط على أيقونات الـ Bottom Nav لتبديل الشاشات

RTL أصيل

AkBottomNavBar - محاكاة هاتف حقيقية

٩:٤١ 📶 🔋

أهلاً بك

أحمد 👋

الطلبات

١٢

المفضلة

٧

آخر النشاطات

• اشترى منتج جديد
• أضاف تقييم ⭐⭐⭐⭐⭐
• حدّث بيانات الحساب

المتجر

ArabicKit

ر.س ٢٤٩

Suwar Pack

ر.س ١٨٩

👤

أحمد الغامدي

ahmed@example.com

الوضع الليليمفعّل

الإشعارات٣ جديدة

الإصدار v1.0.0

AkTopBar

تفاصيل الطلب

#٢٠٢٤-٠٠١٢

AkTopBar(
    title = "تفاصيل الطلب",
    subtitle = "#٢٠٢٤-٠٠١٢",
    navigationIcon = Icons.Back,
    onNavigationClick = { navController.popBackStack() },
)

AkBottomNavBar(
    items = navItems,
    selectedIndex = currentTab,
    onItemSelected = { currentTab = it },
)

الطباعة - ArabicKitTypography

IBM Plex Arabic للعناوين · Noto Naskh للنص الطويل

١٥ نمط

مقياس النصوص الكامل

displayLarge57sp · Bold

مرحباً

headlineLarge32sp · SemiBold

عنوان رئيسي

headlineMedium28sp · SemiBold

عنوان القسم

titleLarge22sp · SemiBold

عنوان البطاقة

titleMedium16sp · Medium

عنوان العنصر

bodyLarge16sp · Noto Naskh

نص عادي للقراءة - خط Noto Naskh للمحتوى الطويل والمقالات

bodyMedium14sp · Noto Naskh

وصف مختصر أو محتوى ثانوي للعنصر

labelMedium12sp · Medium

ملصق · تسمية · وصف حقل

AkPrice - عرض الأسعار بأرقام عربية

SAR

ر.س ٢٤٩.٩٩

AED

د.إ ٣٤٥.٠٠

مخفّض

ر.س ١٤٩.٠٠ ر.س ٢٤٩

AkPrice(amount=249.99, currency="ر.س")  // → ر.س ٢٤٩.٩٩
AkNumber(value=12450)              // → ١٢٤٥٠

القوائم والشرائح

اضغط على عناصر القائمة · بدّل الشرائح

AkListItem · Chips

AkListItem - قابل للنقر مع تأثير hover

👨‍💻

أحمد الغامدي

مطور Android · ٥ سنوات خبرة

الرياض

👩‍🎨

نورة العتيبي

مصممة UI/UX · Material Design

جدة

📊

محمد الزهراني

محلل بيانات · Python/Kotlin

الدمام

🚀

سارة الشمري

مدير منتج · B2B SaaS

أبوظبي

Chips - اختيار فردي ومتعدد

اختيار فردي - Filter

اختيار متعدد - Multi-select

الأرقام العربية - ArabicUtils

تحويل تلقائي بين الأرقام الغربية والعربية-الهندية

أداة مدمجة

أمثلة الأرقام والعملات والتاريخ

١٢٬٤٥٠

أرقام مع فاصل آلاف

12,450

Western (LTR mode)

ر.س ٢٤٩.٩٩

تنسيق العملة

١٥ رمضان ١٤٤٦ هـ

التاريخ الهجري

محوّل فوري - جرّب الكتابة

-

// ArabicUtils.kt
"١٢٣٤٥".toWesternNumerals()   // → "12345"
"12345".toArabicNumerals()     // → "١٢٣٤٥"
12345.toArabicString()         // → "١٢٬٣٤٥"
249.99.formatArabicCurrency()  // → "ر.س ٢٤٩.٩٩"
gregorianToHijri(2025,3,15)    // → HijriDate(15,9,1446)

التنبيهات والحوارات

اضغط الأزرار لرؤية Dialog وBottomSheet حقيقيين

3 أنواع

AkAlert - 4 مستويات

✓تم حفظ التغييرات بنجاح - ستظهر في التطبيق خلال لحظات.

⚠سيتوقف دعم هذه الواجهة في v2.0. يُرجى الترحيل قبل يونيو.

✕فشل الاتصال بالخادم. تحقق من اتصال الإنترنت وأعد المحاولة.

ℹتحديث جديد متاح - ArabicKit v1.1.0 يضيف DatePicker هجري.

AkAlertDialog - اضغط لفتح النافذة

AkBottomSheet - اضغط لفتح الشريحة