كيفية تطبيق تخطيطات علامات التبويب التي تشبه نظام Android في نظام التشغيل iOS باستخدام swift 3

توجد علامات التبويب التقليدية في نظام iOS في الجزء السفلي من شاشتك ، وعلى تطبيقات أندرويد من ناحية أخرى ، توجد علامات التبويب في الجزء العلوي. اليوم سأكتب تعليميًا خطوة بخطوة حول كيفية تحقيق الإصدار الذي يشبه نظام Android على تطبيق iOS باستخدام مكتبة مفتوحة المصدر تسمى XLPagerTabStrip.

فيما يلي صور لما نحاول تحقيقه.

المقدمة.

XLPagerTabStrip هو "وحدة التحكم في طريقة عرض الحاوية" التي تتيح لنا التبديل بسهولة بين مجموعة من أجهزة التحكم في طريقة العرض. يمكن استخدام إيماء عموم للانتقال إلى وحدة تحكم العرض التالية أو السابقة. يعرض مؤشرًا تفاعليًا لوحدات التحكم في العرض الحالية والسابقة والتابعة للطفل.

بشكل أساسي ، لتحقيق التصميم ، سيكون لدينا وحدة تحكم مشاهدة أولية تضم 2 أو أكثر من أجهزة عرض الأطفال. توفر المكتبة 4 طرق مختلفة لإظهار وحدات التحكم في عرض الأطفال ، ولكننا نركز اليوم على الأكثر شعبية ، زر Button ، يجب أن تكون قد صادفتها إذا كنت تستخدم تطبيقات مثل instagram و youtube و skype وغيرها الكثير ( انظر الصور أعلاه).

قم بإعداد مشروع Xcode

إذا كنت تدمج في مشروع حالي ، فيمكنك تخطي هذه الخطوة.

  • إنشاء مشروع xcode جديد
  • حدد تطبيق عرض واحد
  • اسم المشروع الخاص بك ، واستكمال الحقول المتبقية

التركيب

سنقوم بتثبيت XLPagerTabStrip عبر cocopods.

  • أولاً ، قم بإنهاء XCode تمامًا وافتح الجهاز
  • من المحطة ، انتقل إلى دليل المشروع الخاص بك ، وقم بتشغيل:
جراب الحرف الأول
  • الآن ، إذا نظرت داخل ملف المشروع الخاص بك ، يجب أن تشاهد ملف podfile ، مفتوح مع أي محرر نصوص
uncomment the use_frameworks! وأضف ppod 'XLPagerTabStrip'،: git => 'https://github.com/KelvinJin/XLPagerTabStrip'،: branch => 'swift3'

إذا بدأت بمشروع جديد ، فيجب أن يبدو ملف podfile الخاص بك هكذا.

# uncomment هذا الخط لتحديد منصة عالمية لمشروعك
# النظام الأساسي: ios ، "8.0"
# uncomment هذا الخط إذا كنت تستخدم Swift
use_frameworks!
الهدف "AndroidTabs"
pod 'XLPagerTabStrip'،: git => 'https://github.com/KelvinJin/XLPagerTabStrip'،: branch => 'swift3'
النهاية
  • حفظ الملف ، والعودة إلى محطة وتشغيل
تثبيت جراب
  • بعد رسالة "pod مثبتة" ناجحة من الجهاز ، ارجع إلى دليل المشروع ، سترى ملف "Your-project-name.xcworkspace". قم بتشغيل مشروعك بالنقر المزدوج على هذا الملف.
  • ملاحظة: بعد تشغيل ملف .xcworkspace ، واجهت التحويل إلى أحدث إصدار من إصدارات swift ، وانقر فوق تحديث ، ودع xcode يقوم بعمله. فقط تأكد من تنظيف مجلد المشروع ، وسيعود كل شيء إلى طبيعته
Alt + Shift + Cmd + K

إعداد وحدة التحكم الأصل.

  • إذا بدأت بمشروع فارغ ، تابع وحذف ملف ViewController.swift ، لذلك نبدأ من جديد.
  • قم بالتبديل إلى لوحة العمل الخاصة بك ، ويجب أن يكون لديك VC فارغ ، إذا لم تقم بسحب واحدة على لوحة العمل ، فسوف نجعل هذا هو Parent ViewController.
  • إنشاء ملف جديد: ParentViewController فئة فرعية UIViewController.
  • تحرير المحتوى بحيث يكون لديك:
// استيراد المكتبة
استيراد XLPagerTabStrip
// حذف UIViewController وتوسيع // ButtonBarPagerTabStripViewController بدلاً من ذلك
الفئة ParentViewController: ButtonBarPagerTabStripViewController {
  ..
}
  • إقران VC في لوحة العمل مع ParentViewController.
  • اسحب UIScrollView على VC ، اتركه يشغل VC بالكامل.

إضافة قيود ، يجب أن تكون أعلى 64 ، يمين -0 ، أسفل -0 ، يسار -0.

  • حدد ScrollView وانقر بزر الماوس الأيمن ، واسحب منفذ مرجع جديد إلى ViewController لتوصيل منفذ viewView بالحاوية مع عرض التمرير.
  • اسحب CollectionView أعلى العرض (احذف الخلية المرفقة به) ، بنفس مستوى ScrollView ، لكن أعد ترتيبها حتى يصبح CollectionView في المقدمة.
  • ضبط القيود 0 اليسار ، 0 أعلى ، 0 يمين ، ارتفاع 64.
  • إقران CollectionView مع ClassBarView Class
  • حدد ContainerView وانقر بزر الماوس الأيمن ، واسحب منفذ مرجع جديد إلى ViewController للاتصال buttonBarView مخرج مع ContainerView على النحو الوارد أعلاه ، وتعيينه أيضًا إلى الوحدة النمطية: XLPagerTabStrip
  • افتح الملف ParentViewController.swift ، وقم بإعداد الشكل والمظهر لـ buttonBar.
اسمحوا purpleInspireColor = UIColor (أحمر: 0.13 ، أخضر: 0.03 ، أزرق: 0.25 ، ألفا: 1.0)
تجاوز func viewDidLoad () {
// تغيير لون الشريط المحدد
settings.style.buttonBarBackgroundColor = .white
settings.style.buttonBarItemBackgroundColor = .white
settings.style.selectedBarBackgroundColor = purpleInspireColor
settings.style.buttonBarItemFont = .boldSystemFont (ofSize: 14)
settings.style.selectedBarHeight = 2.0
settings.style.buttonBarMinimumLineSpacing = 0
settings.style.buttonBarItemTitleColor =. أسود
settings.style.buttonBarItemsShouldFillAvailiableWidth = true
settings.style.buttonBarLeftContentInset = 0
settings.style.buttonBarRightContentInset = 0
changeCurrentIndexProgressive = {[ضعيف النفس] (oldCell: ButtonBarViewCell؟، newCell: ButtonBarViewCell؟، progressPercentage: CGFloat، changeCurrentIndex: Bool، animated: Bool) -> Void in
guard changeCurrentIndex == true else {return}
oldCell؟ .label.textColor =. أسود
newCell؟ .label.textColor = self؟ .purpleInspireColor
}
super.viewDidLoad ()
}

إعداد الأطفال

  • قم بإنشاء 2 عناصر تحكم ViewView جديدة (يمكنك إنشاء أكبر عدد تريده ولكننا سنلتزم بـ 2 هنا) ، واسحب إلى لوحة العمل ، وقم بإنشاء ملفات مقابلة (ChildViewController1.swift ، و ChildViewController2.swift) ، وربط مربعات ViewControllers في StoryBoard بالفئات المناسبة .
  • أيضا ، أعطهم storyboardId. أنا باستخدام child1 ، child2
  • يمكنك القيام بأي شيء تفعله عادةً مع وحدات التحكم هذه ، ولكن من أجل هذا البرنامج التعليمي ، سأقوم فقط بسحب UILabel إلى VC لمجرد التمييز.
  • لإعداد طريقة عرض تابعة: قم باستيراد XLPagerTabStrip ، وقم بتوسيع IndicatorInfoProvider ، وقم بتنفيذ وظيفة واحدة لتتوافق مع البروتوكول.
  • تقوم الطريقة بإرجاع العنوان الخاص بهذا الطفل ، ليتم استخدامه على ButtonBar من الأصل.
  • نفس الشيء بالنسبة لملف ChildController2.swift
  • ارجع إلى ParentViewController.swift لربط وحدات التحكم التابعة بوحدات التحكم الأصل.
تجاوز func viewControllers (for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
واسمحوا child_1 = UIStoryboard (الاسم: "الرئيسي" ، الحزمة: لا شيء) .InstantiateViewController (withIdentifier: "child1")
اسمحوا child_2 = UIStoryboard (الاسم: "الرئيسي" ، الحزمة: لا شيء) .InstantiateViewController (withIdentifier: "child2")
إرجاع [child_1، child_2]
}

إليكم ملف ParentViewController.swift الكامل.

المضي قدما وتشغيل التعليمات البرمجية ، وهنا هي النتيجة.