تطبيق استنساخ Instagram Clone App باستخدام SwiftUI و GraphQL – HomeView
سنواصل اليوم في الجزء الرابع من تطبيق استنساخ Instagram مع GraphQL تعلم بعض واجهة مستخدم SwiftUI، وبناء طريقة العرض الرئيسية.
في مقالاتنا السابقة، تعلمنا في مقالاتنا السابقة كيفية تسجيل مستخدم وكيفية تسجيل دخول مستخدم وإنشاء طريقة عرض الملف الشخصي مع واجهات المستخدم ذات الصلة في تطبيقنا المستنسخ من Instagram. سنقوم اليوم بإعادة استخدام بعض تلك الشيفرة وإنشاء شيء مشابه لـ UIScrollView مع الكثير من المحتوى.
اربطوا أحزمة الأمان ودعونا نبدأ!
لتتعلم بشكل أفضل، قم بتنزيل مشروع استنساخ انستجرام iOS مع شيفرة المصدر.
Contents
- 1 هل تريد بداية سريعة؟
- 2 ما الذي سنقوم ببنائه بالضبط
- 3 مكونات واجهة المستخدم لدينا
- 4 الشريط العلوي
- 5 شريط التاريخ
- 6 الشريط السفلي
- 7 إضافة بعض التعقيد
- 8 الخلاصة
- 9 المرجع
- 10 ما هو المفتاح في بناء العرض الرئيسي لتطبيق Instagram Clone App؟
- 11 ما هو استخدام GeometryReader؟
- 12 هل يستحق الأمر إنشاء نسخ طبق الأصل من Instagram باستخدام SwiftUI؟
هل تريد بداية سريعة؟
استنسخ هذا التطبيق من مركزنا وابدأ باستخدامه دون أي متاعب!
ما الذي سنقوم ببنائه بالضبط
سنقوم ببناء العرض التالي:
كما رأينا سابقًا، تجعل SwiftUI من السهل حقًا بناء مثل هذه الواجهات المعقدة حيث يمكنك إعادة استخدام الكثير من المكونات بسهولة شديدة. الكلمة هنا هي “إعادة الاستخدام”.
هل تذكر أننا قمنا بالفعل بترميز هذا الشريط السفلي؟ سنعيد استخدامه لهذا. كل شيء آخر جديد.
لن أتطرق إلى VStacks و HStacks مجددًا، لذا إن فاتك هذا الجزء، فراجعه هنا.
مكونات واجهة المستخدم لدينا
ستتكون هذه الشاشة بشكل أساسي من أربعة مكونات:
- الشريط العلوي (مع الكاميرا، وسلسلة Back4Gram، وأيقونة المنزل، وأيقونة الطائرة الورقية)
- شريط التاريخ (مع أيقونات التواريخ)
- عرض الجدول الزمني التفصيلي (مع المنشورات الفعلية)
- الشريط السفلي (الذي سنعيد استخدامه)
لنبدأ في بناء هذه!
الشريط العلوي
يتكون الشريط العلوي من خمسة مكونات
- زر الكاميرا
- سلسلة Back4Gram
- فاصل
- زر المنزل
- زر الطائرة الورقية
أضف أيقونات الأزرار كما تعلمت بالفعل، ولنبدأ البرمجة.
أنشئ ملف HomeView.swift الخاص بك ودعنا نضيف قارئ هندسي حتى نتمكن من تغيير حجم كل شيء بشكل جيد:
وكما في البرنامج التعليمي السابق، دعنا نضيف VStack لأن كل شيء سيظهر في محور عمودي:
سيكون شريطنا العلوي عبارة عن مجموعة من المكوّنات المحاذاة أفقيًا، لذا دعنا نضيف HStack لإنشائه:
وأخيرًا نضيف عناصر التحكم التي سنستخدمها:
كيف يبدو ذلك؟
نحن ذاهبون إلى أماكن!
الآن دعونا نناقش قليلاً عن
شريط التاريخ
شريط التاريخ هو بحد ذاته مكون معقد. إنه يشبه تمامًا UIScrollView من UIKit القديم، ولكن بداخله لدينا عنصر تحكم مكون من صورة ونص أسفلها (يُعرف أيضًا باسم VStack). لننشئ هذه البنية
وضع ذلك في VStack الرئيسي لدينا سهل مثل إضافة ScrollView. ولجعلها أجمل، دعنا نجعلها قابلة للتمرير أفقيًا فقط ونخفي مؤشرات التمرير:
وأخيرًا نضيفه إلى VStack الرئيسي لدينا:
التحقق من المظهر:
والآن، دعنا نقفز إلى الأمام ونضيف أولاً
الشريط السفلي
الآن دعنا نستمتع بكل قابلية إعادة الاستخدام. ما عليك سوى إضافته من ملف BottomBar.swift الخاص بنا إلى شيفرتنا:
وكودنا الكامل
ألم يكن ذلك سهلاً؟ كيف يبدو الأمر؟
سويفت
إضافة بعض التعقيد
سيكون الجزء الأكثر تعقيدًا في طريقة العرض هذه هو طريقة العرض التفصيلي للخط الزمني.
لنحافظ على اتساقه مع ما فعلناه في TimelineView، دعنا ننشئ ملفًا جديدًا باسم TimlineDetailView.swift وننشئ فيه بنية جديدة ستحتفظ بالبيانات تمامًا كما في TimelineView.
تذكر أن لدينا بالفعل بنية معاينة معلنة في TimelineView، لذا دعنا نعيد استخدامها أيضًا.
ستتلقى البنية معاينة حتى نتمكن من استرداد الصورةUrl لاحقًا:
وبعد الانتهاء من ذلك، دعنا نضيف طريقة العرض نفسها:
سيكون المحتوى الرئيسي أيضًا في VStack:
وسيحتوي هذا VStack على أربعة مكونات:
- كومة HStack مع الشعار والنصوص وزر ثلاث نقاط
- صورة المنشور
- A HStack يحتوي على زر القلب وزر التعليق وزر الطائرة الورقية وزر العلم
- VStack يحتوي على النصين “أعجبني ..” و “شاهد جميع التعليقات”
لنبدأ بإضافة HStack الأول:
وإضافة عناصر التحكم بداخله
ثم الصورة
ثم HStack الثاني مع جميع الأزرار:
وضوابطها
وأخيرًا وليس آخرًا نصوصنا VStack:
والآن، داخل TimelineDetailView الخاص بنا، دعنا نرمز بعض المعاينات
وأخيرًا قم بتكرار إضافة معاينةDetailViews الخاصة بنا إلى ScrollView:
أخيرًا، دعنا نضيف ذلك إلى HomeView الخاص بنا:
وأخيرًا، دعنا نرى النتائج:
كم هذا رائع!
الخلاصة
إعادة الاستخدام هو المفتاح في SwiftUI.
لقد تعلمت اليوم كيفية إعادة استخدام BottomView و بنية المعاينة من مقالاتنا السابقة.
لقد حان الوقت لبعض الوظائف وبالكاد يمكنني انتظارها.
ابقوا معنا!
المرجع
- الجزء 1 من هذه السلسلة هو تطبيق استنساخ Instagram.
- الجزء 2 هو Swift Instagram Clone.
- الجزء 3 هو ملف تعريف Instagram.
- الجزء 4 هو Instagram Homeview.
- قم بتنزيل مشروع استنساخ Instagram Clone لنظام iOS مع شفرة المصدر وابدأ في استخدام Back4App.
قم بالتسجيل الآن في Back4App وابدأ في إنشاء تطبيق Instagram Clone الخاص بك.
ما هو المفتاح في بناء العرض الرئيسي لتطبيق Instagram Clone App؟
سيبقى مفتاح النجاح دائمًا هو إمكانية إعادة الاستخدام. سنعيد استخدام المكونات لتطوير الواجهة الرئيسية لتطبيقات Instagram. تُعدّ إمكانية إعادة الاستخدام العامل الأساسي في SwiftUI.
ما هو استخدام GeometryReader؟
أثناء تطوير النسخة، وبعد إضافة الأزرار، هذه هي الخطوة الأولى في البرمجة. نحتاج إلى إنشاء ملف HomeView.swift وإضافة GeometryReader إليه. سيساعد هذا في تغيير حجم كل عنصر بشكل مثالي.
هل يستحق الأمر إنشاء نسخ طبق الأصل من Instagram باستخدام SwiftUI؟
نعم، الأمر يستحق العناء تمامًا. كانت تجربة Swift رائعة. بنينا النسخة بطريقة مرنة للغاية. استخدمنا بعض المكونات مرة أخرى. سهولة إعادة الاستخدام وتنسيق المكونات، والترميز الدقيق والمُحدد، كل ذلك ساهم في نجاحه. لذا، أنصح بشدة باستخدام SwiftUI.
