شرح طريقة عمل Menu مشابه للمدرج في تطبيق Telegram
البعض اخبرني بأنه يرغب بأمثله في الـ Animation وليس فقط شرح الأساسيات
لذلك قررت اشرح مثال لعمل Menu مشابه للمدرج في تطبيق Telegram
الفكرة باختصار هي إضافة زر بدلاَ من النص في الـ Navigation bar
ومن ثم تغير موقع الـ View عند الضغط على الزر
اذا لنبدأ في الشرح
أولا نقوم بإضافة الـ Navigation Controller
عن الطريق تطبيق اتباع الصورة التالية :
ومن ثم نضيف View اسفل الـ Navigation bar
بحجم عرض 375 وارتفاع 50
طبعا يعتمد على الابعاد الي انت تبغاها انا استخدمت هذه الابعاد
نضيف القيود التالية :
ومن ثم نضيف 3 ازرار
احجام الايقونات كانت متفاوتة ، لكن اعتمدت على حجم 60 في 60
او اصغر بقليل بالنسبة لأحجام ايقونات الـ x2
الخاصة بحجم iPhone 7 و iPhone SE
الان سوف نحتاج نستخدم الـ Stack View
لأنه سوف يسهل علينا جعل الايقونات بمسافة متساوية !
قم بتحديد جميع الايقونات في أنٍ واحد
ومن ثم ثم باتباع الصورة التالية :
سوف تلاحظ تلاصق الايقونات مع بعض
قوم بالذهاب الى خصائص الـ Stack View
واجعل المسافة Spacing بـ 60
كما في الصورة التالية :
واجعل الايقونات في منتصف الـ View
الان قم بإضافة قيود الى الـ Stack View:
لاحظ باني اضفت القيود بشكل يدوي
لجعله الـ Stack View
ياخد حجم الـ View الذي خلفه
عند التعامل مع الـ Stack View يتوجب عليك استخدام القيود لتغير ابعاده
لاحظ الفرق
قبل القيود كان بالشكل التالي :
بعد إضافة القيود اصبح بالشكل التالي :
الان سوف تلاحظ بان الازرار والـ View متناسبة مع جميع احجام الاجهزة
أيضا لاحظ بأنه عند استخدام الـ Stack View
تكون لست بحاجة الى وضع قيود لكل زر على حدى !
كل ما عليك هو وضع القيود على نفس الـ Stack View فقط
هذه هي قوة الـ Stack View
سوف تحتاج الى استخدامه بكثره وخاصة عند عمل الـ Animation
الان نعود للدرس
قبل ان نبدأ تأكد بأن الـ Stack View
بداخل الـ View الذي اضفناها لأننا سوف نضيف الـ View فقط الى ملف الاكواد !
يمكن التأكد بمشاهده الترتيب
الـ Stack يكون بداخل الـ View الذي اضفناه سابقا
كما في الصورة التالية:
الان نقوم بإضافة الـ View الى ملف الاكواد
ونجعله باسم Menu View
وأيضا نضيف قيد الـ top الخاص بـ View
ونجعله اسم menuTop
يصبح ملف الاكواد بالشكل التالي
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var menuTop: NSLayoutConstraint!
@IBOutlet weak var menuView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
}
الان نقوم بإضافة الاكواد التالية في الـ ViewDidLoad
override func viewDidLoad() {
super.viewDidLoad()
menuTop.constant = -65
let button = UIButton(type: .custom)
button.frame = CGRect(x: 0, y: 0, width: 200, height: 40)
button.setTitle("Menu", for: .normal)
button.addTarget(self, action: #selector(self.menuButton), for: .touchUpInside)
self.navigationItem.titleView = button
menuView.layer.borderWidth = 0.5
menuView.layer.borderColor = UIColor.gray.cgColor
}
في البداية جعلنا الـ View مخفي بجعل القيمة -65 وبالتالي يصبح الـ View
في الأعلى خلف الـ Navigation bar
ومن ثم انشأنا زر من نوع .custom
اعطينا ابعاد له وهيا
عرض 200 وارتفاع 40
العرض تستطيع تغيره
انا جعلته 200 لأنه في حال وجود زر في اليمين واليسار لن يغطي عليه
اما الارتفاع فهو 40
ارتفاع الـ Navigation bar
بدون شريط الساعة
هو 44 لذلك حجم 40 يعتبر مناسب
ومن ثم اضفنا عنوان للزر باسم Menu
وبعدها اضفنا Target
الي هو جعل الزر يستجيب للضغط
طبعا اضفنا اسم للـ Function وهو menuButton
سوف نضيفه لاحقا
اخيراً قمنا بإضافة الزر بداخل العنوان الـ Navigation bar
في الأسفل اضفنا الحدود حولينا الـ view
وغيرنا لون الحدود الى اللون الرصاصي
الان نضيف Function الزر
باضافة التالي :
func menuButton(button: UIButton) {
}
الان سوف نضيف الـ Aniamtion
الفكره باختصار
عند الضغط على الزر لأول مره نغير القيود الى 0
ليظهر الـ View
لماذا 0 ؟
لانه عند اضافة الـ Navigation bar
تصبح المسافه اسفله بقيمة 0
بالنسبة الى القيود
فين حين بدون الـ Navigation bar
تكون المسافة اسفل شريط الساعه هي الـ 0
وعند الضغط على الزر للمره الثانية نغير القيود الى -65
وبالتالي يختفي الـ View
كيف نعلم بأمر الـ Menu هو ظاهر او مختفي ؟
الطريقة هي باستخدام متغير من نوع bool
يكون true وتعني بانه مخفي
ويصبح false
اذا كان غير مخفي
لذلك نضيف متغير في خارج الـ Function وأيضا بخارج الـ ViewDidLoad
باسم
var check = true
ومن ثم نضيف التالي في الـ menuButton
func menuButton(button: UIButton) {
if check == true {
UIView.animate(withDuration: 0.5, animations: {
self.menuTop.constant = 0
self.view.layer.layoutIfNeeded()
self.check = false
})
}else {
UIView.animate(withDuration: 0.5, animations: {
self.menuTop.constant = -65
self.view.layer.layoutIfNeeded()
self.check = true
})
}
}
الذي قمنا به هو عمل if
وقبنا بالتشيك اذا كان القيمة true فهو مخفي لذلك سوف نظهره
واذا كان غير مخفي سوف نخفيه
صورة بالنتيجة النهائية :
اذا كنت تتسأل كيف غيرت لون الـ Navigation Bar
فقم باتباع الخطوات التالية :
يمكن تحميل الكود من هنا
التعليقات (0)
عرض المزيد.. جديد مقالاتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !