كيفية عمل 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

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

 

الان نقوم بإضافة الاكواد التالية في الـ ViewDidLoad

 

في البداية جعلنا الـ View مخفي بجعل القيمة -65 وبالتالي يصبح الـ View
في الأعلى خلف الـ Navigation bar

ومن ثم انشأنا زر من نوع .custom

اعطينا ابعاد له وهيا
عرض 200 وارتفاع 40

العرض تستطيع تغيره
انا جعلته 200 لأنه في حال وجود زر في اليمين واليسار لن يغطي عليه

اما الارتفاع فهو 40
ارتفاع الـ Navigation bar
بدون شريط الساعة
هو 44 لذلك حجم 40 يعتبر مناسب

ومن ثم اضفنا عنوان للزر باسم Menu

وبعدها اضفنا Target
الي هو جعل الزر يستجيب للضغط
طبعا اضفنا اسم للـ Function وهو menuButton

سوف نضيفه لاحقا

اخيراً قمنا بإضافة الزر بداخل العنوان الـ Navigation bar

في الأسفل اضفنا الحدود حولينا الـ view
وغيرنا لون الحدود الى اللون الرصاصي

الان نضيف Function الزر

باضافة التالي :

الان سوف نضيف الـ Aniamtion

الفكره باختصار

عند الضغط على الزر لأول مره نغير القيود الى 0
ليظهر الـ View

لماذا 0 ؟

لانه عند اضافة الـ Navigation bar
تصبح المسافه اسفله بقيمة 0
بالنسبة الى القيود
فين حين بدون الـ Navigation bar
تكون المسافة اسفل شريط الساعه هي الـ 0

وعند الضغط على الزر للمره الثانية نغير القيود الى -65
وبالتالي يختفي الـ View

كيف نعلم بأمر الـ Menu هو ظاهر او مختفي ؟

الطريقة هي باستخدام متغير من نوع bool

يكون true وتعني بانه مخفي
ويصبح false
اذا كان غير مخفي

لذلك نضيف متغير في خارج الـ Function وأيضا بخارج الـ ViewDidLoad

باسم

 

 

ومن ثم نضيف التالي في الـ menuButton

 

الذي قمنا به هو عمل if
وقبنا بالتشيك اذا كان القيمة true فهو مخفي لذلك سوف نظهره
واذا كان غير مخفي سوف نخفيه

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

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

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

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

 

One Comment

Add a Comment

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