https://github.com/intuit/truffle-shuffle

An Android data-driven, percentage-based UI Card Gallery Library
https://github.com/intuit/truffle-shuffle

android android-ui data-visualization kotlin library mobile ui

Last synced: 10 days ago
JSON representation

An Android data-driven, percentage-based UI Card Gallery Library

Host: GitHub
URL: https://github.com/intuit/truffle-shuffle
Owner: intuit
License: apache-2.0
Created: 2019-03-27T01:13:07.000Z (over 6 years ago)
Default Branch: main
Last Pushed: 2023-01-06T04:30:35.000Z (over 2 years ago)
Last Synced: 2025-06-21T23:42:23.495Z (3 months ago)
Topics: android, android-ui, data-visualization, kotlin, library, mobile, ui
Language: Kotlin
Homepage:
Size: 26.5 MB
Stars: 150
Watchers: 7
Forks: 45
Open Issues: 8
Metadata Files:
- Readme: README.ar.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

[![All Contributors](https://img.shields.io/badge/all_contributors-15-orange.svg?style=flat-square)](#contributors-)

Truffle Shuffle عبارة عن مكتبة لمعرض بطاقة مكون Android UI مع رسوم متحركة ممتعة. يمكن تخصيص المعرض بسهولة وهو يعتمد على البيانات بناءً على عدد العناصر في المصفوفة والمحتوى الموجود داخل تلك الكائنات. يستخدم معرض البطاقات نظام Android ViewGroup المخصص مع سمات عرض مخصصة لتحديد حجم البطاقات الفردية كنسبة مئوية من حجم ViewGroup. يُستخدم معرض البطاقات هذا في تطبيق TurboTax للجوّال في تشكيلة المنتجات. Truffle Shuffle مكتوب بنسبة 100٪ بلغة Kotlin!

TurboTax cards
Text content video
Text content with margins video
Text content with 3 cards video
Text content with titles video

# بداية سريعة

لتشغيل مشروع المثال ، قم باستنساخ الريبو وتشغيل تطبيق Android من خلاله[بيئة تطوير أندرويد](https://developer.android.com/studio/)على المحاكي.
يمكنك اللعب مع المثال من خلال

- تغيير التخطيط داخل البطاقات في app / src / main / res / layout / card_layout.xml
- تغيير عدد البطاقات في المصفوفة في getCardDetails () في app / src / main / kotlin / com / intuit / truffle / shuffle / MainActivity.kt
- تغيير النسب المئوية لمجموعة العرض في app / src / main / res / القيم / card_view_group_percentages.xml

للمساهمة في هذا المشروع ، تأكد من أن الكود الملتزم به يطابق معايير تنسيق هذا المشروع.

لإعادة التنسيق أو التحقق من توافق التعليمات البرمجية الملتزمة ، اتبع أحد الخيارات التالية:

#### استخدم مهام Gradle (موصى به -[مستندات ktlint](https://ktlint.github.io/)):

- `./gradlew ktlint`

Use this command to check the formatting rules are covered

- `/gradlew ktlintFormat`

Use this command to re-format code that is not compliant with this project's formatting rules.

#### استخدم محرك ktlint ([مستندات ktlint](https://ktlint.github.io/)):

- `ktlint`

Use this command to check the formatting rules are covered

- `ktlint "src/**/*.kt" "!src/**/*Test.kt"`

Check only certain locations (prepend ! to negate the pattern)

- `ktlint -F`

Use this command to re-format code that is not compliant with this project's formatting rules.
(if some errors cannot be fixed automatically they will be printed to stderr)

- `ktlint -F "src/**/*.kt"`

Use this command to re-format certain locations (prepend ! to negate the pattern) .
(if some errors cannot be fixed automatically they will be printed to stderr)

- `ktlint --install-git-pre-commit-hook`

Install git hook to automatically check files for style violations on commit.

# باستخدام Truffle Shuffle

لإضافة هذا إلى تطبيق Android الخاص بك ، أكمل الخطوات التالية:

1. أضف التبعية إلى ملف build.gradle الخاص بمشروعك ضمن التبعيات:

dependencies {
implementation 'com.intuit.truffleshuffle:truffleshuffle:1.0.0'
}

وتأكد من إضافة jcenter () إلى تطبيق build.gradle

repositories {
jcenter()
}

2. أضف com.intuit.truffleshuffle.CardViewGroup إلى ملف xml حيث تريد معرض البطاقات ، مثل app / src / main / res / layout / activity_main.xml
- أضف النسب المئوية التي تريدها إلى السمات المخصصة لـ CardViewGroup في ملف xml
- custom: dashboardCardHeightPercentage ، مخصص: widthPercentage ، مخصص: topSpacingPercentage ، custom: bottomSpacingPercentage
3. أضف تنسيق xml (card_layout.xml) لمحتويات بطاقاتك المشابهة لـ app / src / main / res / layout / card_layout.xml
4. قم بإنشاء بطاقة مجلد معرض مع ملفين:
- CardContent similar to app/src/main/kotlin/com/intuit/truffle/shuffle/cardGallery/CardContent.kt
- هذا هو كائن البيانات الخاص بك لمحتويات البطاقة
- CustomizeAdapter مشابه لـ app / src / main / kotlin / com / intuit / truffle / shuffle / cardGallery / CustomizeAdapter.kt
- يجب أن يأخذ المنشئ ArrayListويجب أن يوسع CardContentAdapter
- تجاوز وظيفة getViewContent () لتعيين محتوى البيانات في CardContent إلى طرق العرض في card_layout.xml ، على سبيل المثال. ضبط النص في عرض النص
5. في النشاط حيث ستستخدم مكون واجهة المستخدم هذا:
- قم بإنشاء CustomizeAdapter الذي حددته للتو وقم بتمرير قائمة صفيف لمحتويات البطاقة ومعرف المورد داخل البطاقة أي. R.layout.card_layout
- استدعاء setupAdapter () على CustomizeAdapter الذي أنشأته للتو باستخدام CardViewGroup باستخدام findViewById ()
6. الآن عنصر TruffleShuffle UI جاهز للاستخدام!

# التواصل والمساهمة

- اذا أنت**تحتاج مساعدة**، افتح مشكلة وضع علامة باسم`help wanted`.
- اذا أنت**وجدت خطأ**، افتح مشكلة وضع علامة باسم`bug`.
- اذا أنت**طلب ميزة**، افتح مشكلة وضع علامة باسم`feature`.
- اذا أنت**تريد المساهمة**، يرجى الرجوع إلى وثائق المساهمة وإرسال طلب سحب.
- من أجل تقديم طلب سحب ، يرجى تفرع هذا الريبو وإرسال بيان عام من الريبو المتشعب الخاص بك.
- احصل على رسالة مفصلة حول ما يصلح / يعزز / يضيف علاقاتك العامة.
- يجب أن تحصل كل علاقات عامة على موافقة قبل أن ندمج.

## المساهمون ✨

الشكر يذهب إلى هؤلاء الأشخاص الرائعين ([مفتاح الرموز التعبيرية](https://allcontributors.org/docs/en/emoji-key)):

_{Katie Levy}
💻

_{Rocio Montes}
📖

_{monicamiyasato}
📖

_cfsnsalazar
💻

_MathiasX1
💻

_{Anthony Baer}
📖

_{Alec Dilanchian}
💻

_{Angela Hwang}
💻

_henry398
💻

_{Sanchi Rastogi}
💻

_{Adrishyantee Maiti}
💻

_{Kerin Pithawala}
📖

_{Okonkwo Rita}
💻

_{Amy Rathore}
💻

_{Anusha Bandekar}
💻