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

باسل بارقبهمنذ 6 سنوات

 

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

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

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

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

 

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

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

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

 

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

 

Demo.gif.c8654f6f420f6f6047e0ed6992b69484.gif

 

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

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

 

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

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

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

 

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

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

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

 

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

hereditary.png.072446ed1b20eb06152be451f44c51f7.png

 

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

 

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

 

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

 

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

 

Storyboard.thumb.png.188de31acd8eef3a1dad823c6a3de798.png

 

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

 

BigStackView:

BigStackView.png.3b86417af4c92aafaac621683fcbcefd.png

 

profileImage: (الصورة)

profileImage.png.a1bb2abf13018e76e8c1db74ffd449ed.png

NameLable: (النص)

NameLable.png.368a052960e7e905ec6bc11c827cb9ed.png

FollowImage: (الزر)

FollowImage.png.311f62d0c8bf28aabebb9cc1b9257004.png

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

59c34f5dd51ef_UIViewBehindbigStackView.png.59627b56f41e2045dbd1ba150f2d6ee0.png

TableView: (الجدول)

TableView.png.781796b03616580f67055867ecdc15cf.png

 

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

 

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

 

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

 

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

 

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

progile-Width-Hight.thumb.gif.769a99e26f0c43080f85209d5265c06e.gif

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

 

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

 

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

 

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


 


    var lastContentOffset: CGFloat = 0

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

 

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


 


  func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {         self.lastContentOffset = scrollView.contentOffset.y     }

 

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

 

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


 


 func scrollViewDidScroll(_ scrollView: UIScrollView) {  
if (self.lastContentOffset < scrollView.contentOffset.y) { 
// السحب الى اعلى ، افعل امراً ما     
 } else if (self.lastContentOffset > scrollView.contentOffset.y) {
  //  السحب الى اسفل ، افعل امراً ما} }

 

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

 

نضيف التالي :

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


 


UIView.animate(withDuration: 0.5,animations: {

// صغرنا الصورة بتغير قيودها 
self.progileHight.constant = 45 
self.profileWidth.constant = 45

 // حولنا الى وضع افقي  bigStackView 
self.bigStackView.axis = .horizontal  

// حولنا الى وضع افقي StackView
self.StackView.axis = .horizontal    

// غيرنا المسافة بين الصورة والنص الى ١٥  
self.StackView.spacing = 15            

// صغرنا ارتفاع الـ bigstackview                                 
self.StackViewHight.constant = 60                          

// طلبنا بتحديث القيود   
self.view.layoutIfNeeded()  
})

 

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


UIView.animate(withDuration: 0.5,animations: {

// ارجاع حجم الصورة الى حجمها الاصلي  
self.progileHight.constant = 100     
self.profileWidth.constant = 100    

// ارجاع وضعهم الى الوضع العامودي 
self.bigStackView.axis = .vertical   
self.StackView.axis = .vertical      

// ارجاع المسافة المسافة الاصلية                          
self.StackView.spacing = 5                          

// ارجاع ارتفاع الـ bigStackView    
self.StackViewHight.constant = 160 

// طلب تحديث القيود        
self.view.layoutIfNeeded()      
})

 

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

 

 


import UIKit

class ViewController: UIViewController , UITableViewDelegate , UITableViewDataSource {
    
    @IBOutlet weak var bigStackView: UIStackView!
    
    @IBOutlet weak var StackView: UIStackView!
    
    @IBOutlet weak var StackViewHight: NSLayoutConstraint!
   

    @IBOutlet weak var progileHight: NSLayoutConstraint!
    
    
    @IBOutlet weak var profileWidth: NSLayoutConstraint!
    
    
    
    var rowsNames = ["Row 0", "Row 1", "Row 2", "Row 3", "Row 4", "Row 5",
                  "Row 6", "Row 7", "Row 8", "Row 9", "Row 10", "Row 11",
                  "Row 12", "Row 13", "Row 14", "Row 15", "Row 16", "Row 17",
                  "Row 18", "Row 19", "Row 20", "Row 21", "Row 22", "Row 23",
                  "Row 24", "Row 25", "Row 26", "Row 27", "Row 28", "Row 29", "Row 20"]

    
    
    var lastContentOffset: CGFloat = 0

    
    
    override func viewDidLoad() {
        super.viewDidLoad()

    
    }

    
    // MARK: - UITableViewDataSource
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return rowsNames.count

    }

     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        
        cell.textLabel?.text = rowsNames[indexPath.row]
        
        return cell
    }
 
    
        func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        self.lastContentOffset = scrollView.contentOffset.y
    }
        func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if (self.lastContentOffset < scrollView.contentOffset.y) {                        

                    UIView.animate(withDuration: 0.5,
                                   animations: {
                                    
                                                                        
                                    self.progileHight.constant = 45
                                    self.profileWidth.constant = 45

                self.bigStackView.axis = .horizontal
                                    
                                    self.StackView.axis = .horizontal
                                                                   self.StackView.spacing = 15
                                                                        self.StackViewHight.constant = 60

                                    

                                    self.view.layoutIfNeeded()
            
                    })
                
            
            
        } else if (self.lastContentOffset > scrollView.contentOffset.y) {            
            
            UIView.animate(withDuration: 0.5,
                           animations: {
                       

                            self.progileHight.constant = 100
                            self.profileWidth.constant = 100

                            
                            self.bigStackView.axis = .vertical

                            self.StackView.axis = .vertical
                                                        self.StackView.spacing = 5
                            self.StackViewHight.constant = 160


           self.view.layoutIfNeeded()
                            
                             })

        }
    }




}

 

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

Demo.gif.c8654f6f420f6f6047e0ed6992b69484.gif

 

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

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

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

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