شاشة البحث

شاشة البحث (Search Screen) المطورة بالكامل لتطبيقات الأندرويد باستخدام Jetpack Compose ولغة Kotlin.

تم تصميم وبناء هذه الشاشة لتوفر للمستخدم آلية بحث مرنة وسريعة جداً للوصول للمحتوى، حيث تتيح له تحديد سياق البحث (Search Criteria) مباشرة قبل أو أثناء الكتابة، مع عرض النتائج والتصنيفات في شبكة متجاوبة وجذابة بصرياً تتبع المظهر الداكن (Dark Mode).

?️ الجانب الهندسي ومنطق عمل الشاشة (Search Logic & Stack):

آلية البحث المتقدم (Multi-Criteria Search): الشاشة مصممة لذكاء تصفح أعلى؛ حيث تم دمج فلاتر علوية (Categories, Countries, Ingredients) تتيح للمستخدم الفلترة وتحديد نوع المحتوى الذي يبحث عنه. بمجرد النقر على فلتر معين، تتغير حالة الواجهة (State) فوراً لتهيئ حقل البحث والشبكة بالأسفل لعرض المحتوى المتوافق مع الفلتر النشط.

تحسين أداء حقل البحث (Search Optimization): حقل البحث مهيأ برمجياً داخل الـ ViewModel للتعامل مع الـ Streams باستخدام Kotlin Flows، مع إمكانية تطبيق تقنية الـ debounce لتقليل استهلاك موارد الجهاز والشبكة، بحيث لا يبدأ التطبيق بالفلترة الفورية إلا بعد ثوانٍ بسيطة من توقف المستخدم عن الكتابة.

عرض النتائج بكفاءة (Grid Layout): تم استخدام LazyVerticalGrid لعرض نتائج البحث وبطاقات التصنيفات في عمودين متناسقين، مما يضمن كفاءة عالية في استهلاك الذاكرة وسلاسة فائقة أثناء التمرير والتصفح (Smooth Scrolling).

معالجة وتخزين الصور: تعتمد الشاشة على مكتبة Coil لتحميل صور الأطباق والتصنيفات بشكل غير متزامن (Asynchronous) مع دعم المظهر الدائري واحتواء كاش (Caching) لتسريع تجربة المستخدم عند فتح الشاشة مجدداً.

? تفاصيل المكونات البرمجية (UI Components Breakdown):

TopAppBar: شريط علوي يحمل سهم العودة وعنوان الشاشة الأساسي "Search" بخلفية ملونة تضفي حيوية على المظهر الداكن.

Search Input Field: حقل إدخال مخصص (OutlinedTextField) يحتوي على أيقونة البحث (Magnifying Glass) ونص تلميحي للمستخدم مع حواف دائرية عصرية.

Search Filters Row: شريط أفقي تفاعلي للتنقل بين خيارات ومجالات البحث؛ يظهر فيه الفلتر النشط (مثل Categories) بلون متباين ومبهج ليوضح للمستخدم سياق البحث الحالي، بينما تظل الفلاتر الأخرى في الحالة غير النشطة حتى يتم الضغط عليها.

Result Cards: بطاقات النتائج المعروضة بدقة عالية مع تدرج ظلي أسفل كل بطاقة (Gradient Overlay) لضمان وضوح نصوص العناوين البيضاء فوق الصور بمختلف ألوانها.