شرح كيفية عمل 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 الى ملف الاكواد لكي نستطيع تصغير حجمه عند السحب الى اعلى وأيضا ارجاعه الى حجمه الساسي عند السخب الى أسفل
ومن ثم سوف نضيف الاكواد التالية :
نضيف المتغير في بداية ملف الاكواد
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()
})
}
}
}
النتيجة النهائية :
التعليقات (0)
عرض المزيد.. جديد مقالاتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !