شرح طريقة عمل Menu مشابه للمدرج في تطبيق Telegram

باسل العموديمنذ 3 سنوات



البعض اخبرني بأنه يرغب بأمثله في الـ Animation وليس فقط شرح الأساسيات

 
لذلك قررت اشرح مثال لعمل Menu مشابه للمدرج في تطبيق Telegram

 

 

الفكرة باختصار هي إضافة زر بدلاَ من النص في الـ Navigation bar

ومن ثم تغير موقع الـ View عند الضغط على الزر


اذا لنبدأ في الشرح

 

أولا نقوم بإضافة الـ Navigation Controller


عن الطريق تطبيق اتباع الصورة التالية :
 

 

11111.thumb.gif.77d51f064419593ee809cec5698d827f.gif

 


ومن ثم نضيف View اسفل الـ Navigation bar


بحجم عرض 375 وارتفاع 50

طبعا يعتمد على الابعاد الي انت تبغاها انا استخدمت هذه الابعاد

نضيف القيود التالية :

 

5911b2b3ca8f2_ScreenShot2017-05-09at1_53_50PM.thumb.png.f120f6e58e8e164663c3d03827dc71b8.png
 


ومن ثم نضيف 3  ازرار


احجام الايقونات كانت متفاوتة  ، لكن اعتمدت على حجم 60 في 60
او اصغر بقليل بالنسبة لأحجام ايقونات الـ x2
الخاصة بحجم iPhone 7 و iPhone SE

الان سوف نحتاج نستخدم الـ Stack View
لأنه سوف يسهل علينا جعل الايقونات بمسافة متساوية !
 

قم بتحديد جميع الايقونات في أنٍ واحد

ومن ثم ثم باتباع الصورة التالية :
 

 

222.thumb.gif.3ec4ebb95517293560aedc382633c3b7.gif

 




سوف تلاحظ تلاصق الايقونات مع بعض

قوم بالذهاب الى خصائص الـ Stack View

واجعل المسافة Spacing بـ 60


كما في الصورة التالية :

 

5911b7e5d2e5c_ScreenShot2017-05-09at2_08_38PM.thumb.png.cd2bfe18f57f39843ba9356c2bbb256c.png

 



واجعل الايقونات في منتصف الـ View

الان قم بإضافة قيود الى الـ Stack View:
 

5911b385a64bd_ScreenShot2017-05-09at2_13_39PM.thumb.png.f20b344007f517349e059e3bf21c9003.png



لاحظ باني اضفت القيود بشكل يدوي
لجعله الـ Stack View
ياخد حجم الـ View الذي خلفه

عند التعامل مع الـ Stack View يتوجب عليك استخدام القيود لتغير ابعاده

لاحظ الفرق

قبل القيود كان بالشكل التالي :
 

 

5911b3acb94a9_ScreenShot2017-05-09at2_17_11PM.png.74c69464136b0d579ef1adddbc024291.png



بعد إضافة القيود اصبح بالشكل التالي :
 

 

5911b3c9cd89d_ScreenShot2017-05-09at2_17_24PM.png.4172851855731e27530001484884b90d.png

 



الان سوف تلاحظ بان الازرار والـ View متناسبة مع جميع احجام الاجهزة

أيضا لاحظ بأنه عند استخدام الـ Stack View

تكون لست بحاجة الى وضع قيود لكل زر على حدى !

كل ما عليك هو وضع القيود على نفس الـ Stack View فقط

هذه هي قوة الـ Stack View

سوف تحتاج الى استخدامه بكثره وخاصة عند عمل الـ Animation

 

الان نعود للدرس

 

قبل ان نبدأ تأكد بأن الـ Stack View
بداخل الـ View الذي اضفناها لأننا سوف نضيف الـ View فقط الى ملف الاكواد !

 

يمكن التأكد بمشاهده الترتيب

الـ Stack يكون بداخل الـ View الذي اضفناه سابقا

كما في الصورة التالية:
 

5911b427a4e1c_ScreenShot2017-05-09at2_27_25PM.png.9bf18ef6e321894af931f243ca362b94.png

 



الان نقوم بإضافة الـ View الى ملف الاكواد
ونجعله باسم Menu View

وأيضا نضيف قيد الـ top  الخاص بـ View

ونجعله اسم menuTop

5911b44e7ee67_ScreenShot2017-05-09at2_28_47PM.png.8ca092f5e228343f5aa8eb5fc59c25e3.png



يصبح ملف الاكواد بالشكل التالي

 


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 فهو مخفي لذلك سوف نظهره
واذا كان غير مخفي سوف نخفيه

صورة بالنتيجة النهائية :

 

demo.gif.4f2fdd6be4239cac3a31eb8f8aa2a2c6.gif

 




اذا كنت تتسأل كيف غيرت لون الـ Navigation Bar

فقم باتباع الخطوات التالية :
 

Screen_Shot_2017-05-09_at_2_50_11_PM.thumb.png.8822bbbeec0df9c417912f08a457f1b5.png




يمكن تحميل الكود من هنا 

كلمات دليلية:
2
إعجاب
1647
مشاهدات
0
مشاركة
0
متابع
متميز
محتوى رهيب

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !