Ultimate magazine theme for WordPress.

تصميم للمطورين – مقدمة لنماذج Xamarin

7

تتيح لنا نماذج Xamarin قدرًا كبيرًا من التحكم في تصميم واجهة المستخدم. تعرف على أنواع الصفحات والتخطيط وعناصر التحكم في الرسوم.

من أهم الأشياء عند تطوير تطبيق ما هو تصميم واجهة المستخدم (إلى جانب الوظائف بالطبع). التصميم هو الصوت الأول لتطبيقنا – يعلم الجميع أن الانطباع الأول هو الأهم ، لأنه من الصعب تغييره بمجرد إجرائه. هذا هو السبب في أنه من الأفضل إيلاء اهتمام خاص للتصميم منذ بداية تطويرنا.

في هذه المقالة ، سنتعلم المفاهيم الأساسية وترتيب التسلسل الهرمي الذي نحتاج إلى معرفته حتى نتمكن من بدء تصميم في نماذج Xamarin! من المهم عمل قائمة بجميع الموضوعات التي يجب أن نتعلمها عندما نبدأ باستخدام أداة جديدة ، لذا يرجى تدوين الملاحظات! 🗒

لنبدأ!

من أفضل الممارسات في نماذج Xamarin أن تقوم دائمًا بتصميم واجهة المستخدم (FrontEnd) بتنسيق هXشد أتطبيق مأركوب إلعذاب (XAML). لبدء تصميم أي شاشة باستخدام XAML ، هناك بنية نحتاج إلى اتباعها لتنظيم المكونات التي سنستخدمها. في الصورة التالية يمكننا أن نرى بسرعة هذا الهيكل:

من الأوسع إلى الأضيق: الصفحة والتخطيط وعناصر التحكم الرسومية

كما هو موضح أعلاه ، كل جزء من واجهة مستخدم نماذج Xamarin له استخدام محدد ويبسط عملية البناء. دعونا نتعلم ما هم وما يقدمونه ، واحدًا تلو الآخر.

1. الصفحات

الصفحة هي الحاوية الرئيسية للشاشة. هناك أنواع صفحات مختلفة توفر وظائف مختلفة حسب النوع المحدد.

أعلم أن الصورة تساوي ألف كلمة ، دعنا نرى!

تتضمن أنواع الصفحات المحتوى والتفاصيل الرئيسية والتنقل والمبوبة والقوالب والعرض الدائري

تعلم المفاهيم!

يعيّن خاصية المحتوى إلى طريقة عرض واحدة. يدير جزأين من المعلومات (الخاصية الرئيسية والتفاصيل). يدير التنقل بين الصفحات الأخرى باستخدام بنية قائمة على التكديس. يسمح بالتنقل بين الصفحات الفرعية باستخدام علامات التبويب. يعرض محتوى بملء الشاشة باستخدام قالب تحكم يسمح بالتنقل بين الصفحات الفرعية من خلال تمرير الإصبع
<ContentPage></ContentPage> <MasterDetailPage></MasterDetailPage> <NavigationPage></NavigationPage> <TabbedPage></TabbedPage> <TemplatePage></TemplatePage> <CarouselPage></CarouselPage>

إذا كنت ترغب في قراءة المزيد من المعلومات حول الصفحات ، يمكنك العثور عليها هنا.

2. التخطيطات

بمجرد تحديد نوع الصفحة التي سنستخدمها ، يتعين علينا تحديد التصميم الصحيح! في الأساس ، التخطيط عبارة عن حاوية تشير إلى كيفية تنظيم عناصر التحكم في الرسوم على الشاشة. هناك أنواع مختلفة من التخطيطات لجعل تجربة التصميم لدينا رائعة!

تتضمن أنواع التخطيط تخطيط المكدس والتخطيط المطلق والتخطيط النسبي والشبكة وعرض التمرير

تعلم المفاهيم!

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

إذا كنت تريد قراءة المزيد من المعلومات حول التخطيطات ، يمكنك العثور عليها هنا.

3. ضوابط الرسم

داخل التصميم المحدد ، لدينا عناصر التحكم في الرسوم. هذه هي ما يجعل الاتصال بين المستخدم والتطبيق ممكنًا ، لأنها ما يستقبل تفاعلات المستخدم مباشرة.

هناك العديد من أنواع التحكم مثل: أزرار ، ملصقات ، ListViews ، من بين أمور أخرى. يمكنك استخدام أيهما تحتاجه. دعونا نرى في الصورة!

تشمل عناصر التحكم الرسومية ActivityIndicator و BoxView و Button و DatePicker و Editor و Entry و Image و Label و ListView و Map و OpenGLView و Picker و ProgressBar و SearchBar و Slider و Stepper و Switch و TableView و TimePicker و WebView و EntryCell و ImageCell و SwitchCell و TextCell ، ViewCell

لكن … كيف يمكننا البدء في الممارسة؟ 🤔

عندما نتعلم أي شيء ، من المهم جدًا أن نطبق ما نتعلمه. لهذا السبب أوصي بما يلي:

  • ابحث عن الصفحات التي تحتوي على قوالب التطبيق لإعادة إنتاج تصميم واجهة المستخدم. سيساعدك هذا على فهم أفضل لهدف كل مكون موضح أعلاه. فمثلا: https://pttrns.com

  • ابحث عن نماذج قوالب التطبيق التي تستخدم مكونات رسومية مختلفة وحاول إعادة إنتاجها! هذه الصفحة جيدة جدًا لهذا: https://www.snppts.dev


شكرا للقراءة!!! 💚


Source link

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.