شرح كيفية عمل Animation للـ StackView !

 

مرة فترة طويلة على تدوينات المتعلقة بالـ Animation !

اليوم اقدم لكم مفهوم جديد في تجربة المستخدم وواجهة المستخدم وكيفية عمله =)

شرح التدوينة في سطر واحد سوف يكون The Power of StackView !

كيف الاستفادة من الـ StackView في عمل Animation
في اقل عدد من الاسطر وبنتيجة رائعة =)

 

لأول مره سوف اعمل الـ Animation مع الـ TablwView

في هذا الـ Animation سوف نستفيد من ميزة السحب للأعلى وللأسفل

الموجوده في الـ TableView  ، (أيضا يمكنك عملها مع الـ ScrollingView)

 

النتيجة النهائية سوف تكون بالشكل التالي :

 

ماذا سوف تحتاج ؟

أولا : سوف نحتاج الى إضافة UIView
في الجزء العلوي

 

(سبب إضافة هذا الـ UIView

لان الـ StackView لا تستطيع إضافة لون خلفية له

واسهل حل يكون إضافة UIView خلفه واضافة اللون الى UIView)

 

ثانيا : نقوم بإضافة الاوبجكت بنفس ترتيب الموجود في هذه الصورة
ثالثا : نقوم بتحديد كل من الصورة + النص واضافاتهم معا كـ StackView

سوف نطلق عليه (StackView)
رابعا : نحدد الـ StackView السابق + الزر وندمجهم كـ StackView اخر

سوف نطلق عليه (BigStackView)

 

هيكل الواجهة سوف يكون بهذا الشكل :

 

 

لاحظ بأني جعلت الـ View الذي باسم Color
غير مرتبط بأي View اخر

 

السبب الفعلي هو لاني اضفته بعد ما انتهيت من تنفيذ المشروع !

 

وأيضا سابقا واجهة مشكله عند جعل الـ StackView بداخل الـ UIView
الازار لم استطع الضغط عليها ، لذا يفضل جعله بالشكل السابق

 

شكل الـ Storyboard سوف يكونب الشكل التالي :

 

 

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

 

BigStackView:

profileImage: (الصورة)

 

NameLable: (النص)

 

FollowImage: (الزر)

 

 (الفيو سوف نضيف قيود وأيضا لا تنسى إعطائه لوناً)UIView:

 

TableView: (الجدول)

 

لا نحتاج الى إضافة قيود الى الـ StackView الصغير (الذي يحتوي على الصورة والنص)

 

بداية سوف تقوم بإضافة بيانات الجدول كما تريدها

 

ومن ثم سوف تقوم بإضافة كل من StackView
و bigStackView الى ملف الاكواد

 

وأيضا سوف نقوم بإضافة قيود الـ profileImage التي وضعناها سابقا
Height و Width

 

اذا لا تعلم كيف تضيفها فشاهد هذه الصورة لكيفية إضافة قيد الـ Height :

 

وطبق نفس الامر لإضافة قيد الـ Width

 

أيضا سوف نضيف قيد الـ Height الخاص بـ bigStackView الى ملف الاكواد لكي نستطيع تصغير حجمه عند السحب الى اعلى وأيضا ارجاعه الى حجمه الاساسي عند السخب الى أسفل

 

ومن ثم سوف نضيف الاكواد الإضافة التالية :

 

نضيف المتغير في بداية ملف الاكواد

 

 

وضيفة هذا المتغير تحديد ما اذا كان المستخدم يسحب الجدول للاعلى او الأسفل (عندما يكون بقيمة 0 هذا يعني بانه لم تتم أي عملية سحب سواء للاعلى او الأسفل )

 

ومن ثم نضيف الـ Function التالي :

 

 

 

هذا الـ Function
وظيفته ما اذا تمت عملية سحب سوا للأعلى او للأسفل ويتم تخزين القينة في متغير lastContentOffset

 

ومن ثم نستخدم هذا الـ Function
لتحديد اذا كان القيمة اعلى من القيمة المخزنة في متغير lastContentOffset  معناه تم السحب الى الأعلى
ولكن اذا كان القيمة اصغر من القيمة المخزنة في متغير lastContentOffset معناه السحب الى الأسفل

 

 

 

الان نبدا في المهم

 

نضيف التالي :

اسفل اقواس الـ // السحب الى اعلى ، افعل امراً ما

 

 

ومن ثم سوف نضيف الاكواد التالية اسفل سطر
//  السحب الى اسفل ، افعل امراً ما

 

 

ملف الاكواد النهائي سوف يكون بالشكل التالي التالي :

 

 

 

 

النتيجة النهائية :

 

 

Add a Comment

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