SkeletonView

الميزات • الأدلة • التثبيت • الاستخدام • متنوعة • المساهمة

؟ ReadMe متاح بلغات أخرى: ؟؟ . ؟ . ؟ . ؟ . ؟ . ؟

اليوم تقريبًا ، تحتوي جميع التطبيقات تقريبًا على عمليات غير متزامنة ، مثل طلبات API ، والعمليات طويلة المدى ، وما إلى ذلك. بينما تعمل العمليات ، عادةً ما تضع المطورين عرضًا للتحميل لإظهار المستخدمين أن هناك شيئًا ما يحدث.

تم تصور الهيكل العظمي لمعالجة هذه الحاجة ، وهي طريقة أنيقة لإظهار المستخدمين أن هناك شيئًا ما يحدث وأعدادهم أيضًا التي تنتظرها المحتويات.

استمتع بها! ؟

• ؟ سمات
• ؟ أدلة
• ؟ تثبيت
• ؟ الاستخدام
  • ؟ مجموعات
  • ؟ النصوص
  • ؟ مظهر
  • ؟ ألوان مخصصة
  • ؟ ‍♀ الرسوم المتحركة
  • ؟ التحولات
• متنوع
• ❤ المساهمة
• ؟ يذكر
• ؟ الرعاة
• ؟؟مؤلف
• ؟ رخصة

؟ سمات

• سهل الاستخدام
• جميع المقاييس هي الهيكل العظمي
• قابلة للتخصيص بالكامل
• Universal (iPhone & iPad)
• واجهة باني ودية
• بناء جملة سويفت بسيط
• قاعدة كود قابلة للقراءة خفيفة الوزن

؟ أدلة

أدلة الهيكل العظمي - البدء	كيفية إنشاء عرض تحميل مع عرض هيكل عظمي في Swift 5.2 بواسطة استوديو IKH4Ever	قم بإنشاء طريقة عرض تحميل هيكل عظمي في التطبيق (Swift 5) - Xcode 11 ، 2020 بواسطة أكاديمية iOS	cómo crear una animación de carga de datos en ios by mouredev

؟ تثبيت

• كوكوبودس:

 pod 'SkeletonView'

• قرطاج:

 github "Juanpe/SkeletonView"

• مدير الحزمة السريع:

dependencies: [
  . package ( url : " https://github.com/Juanpe/SkeletonView.git " , from : " 1.7.0 " )
]

مهم!

منذ الإصدار 1.30.0 ، يدعم SkeletonView Xcframeworks ، لذلك إذا كنت ترغب في تثبيته كجهاز Xcframework ، فيرجى استخدام هذا الريبو بدلاً من ذلك.

؟ الاستخدام

3 خطوات فقط اللازمة لاستخدام SkeletonView :

1⃣ استيراد الهيكل العظمي في المكان المناسب.

import SkeletonView

2⃣ الآن ، المجموعة التي ستكون وجهات النظر هي skeletonables . يمكنك تحقيق ذلك بطريقتين:

باستخدام الكود:

avatarImageView . isSkeletonable = true

باستخدام IB/القصص المصورة:

3⃣ بمجرد تعيين المشاهدات ، يمكنك إظهار الهيكل العظمي . للقيام بذلك ، لديك 4 خيارات:

 ( 1 ) view . showSkeleton ( )                 // Solid
( 2 ) view . showGradientSkeleton ( )         // Gradient
( 3 ) view . showAnimatedSkeleton ( )         // Solid animated
( 4 ) view . showAnimatedGradientSkeleton ( ) // Gradient animated

معاينة

صلب	التدرج	الرسوم المتحركة الصلبة	متحركة تدرج

مهم!

SkeletonView متكرر ، لذلك إذا كنت تريد إظهار الهيكل العظمي في جميع المشاهدات العظمية ، فأنت بحاجة فقط إلى استدعاء طريقة العرض في طريقة عرض الحاوية الرئيسية. على سبيل المثال ، مع UIViewControllers .

؟ مجموعات

SkeletonView متوافق مع UITableView و UICollectionView .

uitableview

إذا كنت ترغب في إظهار الهيكل العظمي في UITableView ، فأنت بحاجة إلى الامتثال لبروتوكول SkeletonTableViewDataSource .

 public protocol SkeletonTableViewDataSource : UITableViewDataSource {
    func numSections ( in collectionSkeletonView : UITableView ) -> Int // Default: 1
    func collectionSkeletonView ( _ skeletonView : UITableView , numberOfRowsInSection section : Int ) -> Int
    func collectionSkeletonView ( _ skeletonView : UITableView , cellIdentifierForRowAt indexPath : IndexPath ) -> ReusableCellIdentifier
    func collectionSkeletonView ( _ skeletonView : UITableView , skeletonCellForRowAt indexPath : IndexPath ) -> UITableViewCell ? // Default: nil
    func collectionSkeletonView ( _ skeletonView : UITableView , prepareCellForSkeleton cell : UITableViewCell , at indexPath : IndexPath )
}

كما ترون ، يرث هذا البروتوكول من UITableViewDataSource ، بحيث يمكنك استبدال هذا البروتوكول ببروتوكول الهيكل العظمي.

هذا البروتوكول لديه تطبيق افتراضي لبعض الطرق. على سبيل المثال ، يتم حساب عدد الصفوف لكل قسم في وقت التشغيل:

 func collectionSkeletonView ( _ skeletonView : UITableView , numberOfRowsInSection section : Int ) -> Int
// Default:
// It calculates how many cells need to populate whole tableview

مهم!

إذا قمت بإرجاع UITableView.automaticNumberOfSkeletonRows في الطريقة أعلاه ، فإنه يعمل مثل السلوك الافتراضي (أي أنه يحسب عدد الخلايا اللازمة لمشاهدة TableView بأكملها).

هناك طريقة واحدة فقط تحتاج إلى تنفيذها للسماح للهيكل العظمي بمعرفة معرف الخلية. لا تحتوي هذه الطريقة على التنفيذ الافتراضي:

 func collectionSkeletonView ( _ skeletonView : UITableView , cellIdentifierForRowAt indexPath : IndexPath ) -> ReusableCellIdentifier {
   return " CellIdentifier "
}

بشكل افتراضي ، تزيل المكتبة الخلايا من كل IndexPath ، ولكن يمكنك أيضًا القيام بذلك إذا كنت ترغب في إجراء بعض التغييرات قبل ظهور الهيكل العظمي:

 func collectionSkeletonView ( _ skeletonView : UITableView , skeletonCellForRowAt indexPath : IndexPath ) -> UITableViewCell ? {
    let cell = skeletonView . dequeueReusableCell ( withIdentifier : " CellIdentifier " , for : indexPath ) as? Cell
    cell ? . textField . isHidden = indexPath . row == 0
    return cell
}

إذا كنت تفضل ترك الجزء deque إلى المكتبة ، يمكنك تكوين الخلية باستخدام هذه الطريقة:

 func collectionSkeletonView ( _ skeletonView : UITableView , prepareCellForSkeleton cell : UITableViewCell , at indexPath : IndexPath ) {
    let cell = cell as? Cell
    cell ? . textField . isHidden = indexPath . row == 0
}

الى جانب ذلك ، يمكنك الهيكل العظمي لكل من الرؤوس والتذييلات. تحتاج إلى الامتثال لبروتوكول SkeletonTableViewDelegate .

 public protocol SkeletonTableViewDelegate : UITableViewDelegate {
    func collectionSkeletonView ( _ skeletonView : UITableView , identifierForHeaderInSection section : Int ) -> ReusableHeaderFooterIdentifier ? // default: nil
    func collectionSkeletonView ( _ skeletonView : UITableView , identifierForFooterInSection section : Int ) -> ReusableHeaderFooterIdentifier ? // default: nil
}

مهم!

1⃣ إذا كنت تستخدم خلايا قابلة للتشكيل ( tableView.rowHeight = UITableViewAutomaticDimension ) ، فسيحدد الإلزامي estimatedRowHeight .

2⃣ عند إضافة عناصر في UITableViewCell يجب عليك إضافتها إلى contentView وليس إلى الخلية مباشرة.

 self . contentView . addSubview ( titleLabel ) ✅         
self . addSubview ( titleLabel ) 

uicollectionview

ل UICollectionView ، تحتاج إلى الامتثال لبروتوكول SkeletonCollectionViewDataSource .

 public protocol SkeletonCollectionViewDataSource : UICollectionViewDataSource {
    func numSections ( in collectionSkeletonView : UICollectionView ) -> Int  // default: 1
    func collectionSkeletonView ( _ skeletonView : UICollectionView , numberOfItemsInSection section : Int ) -> Int
    func collectionSkeletonView ( _ skeletonView : UICollectionView , cellIdentifierForItemAt indexPath : IndexPath ) -> ReusableCellIdentifier
    func collectionSkeletonView ( _ skeletonView : UICollectionView , supplementaryViewIdentifierOfKind : String , at indexPath : IndexPath ) -> ReusableCellIdentifier ? // default: nil
    func collectionSkeletonView ( _ skeletonView : UICollectionView , skeletonCellForItemAt indexPath : IndexPath ) -> UICollectionViewCell ?  // default: nil
    func collectionSkeletonView ( _ skeletonView : UICollectionView , prepareCellForSkeleton cell : UICollectionViewCell , at indexPath : IndexPath )
    func collectionSkeletonView ( _ skeletonView : UICollectionView , prepareViewForSkeleton view : UICollectionReusableView , at indexPath : IndexPath )
}

ما تبقى من العملية هو نفسه UITableView

؟ النصوص

عند استخدام عناصر مع نص ، يرسم SkeletonView خطوطًا لمحاكاة النص.

يمكنك تعيين بعض الخصائص لعناصر متعددة.

ملكية	يكتب	تقصير	معاينة
LastLineFillPercent	CGFloat	70
Linescornerradius	Int	0
الهيكل العظمي	CGFloat	10
الهيكل العظمي	UIEdgeInsets	.zero
الهيكل العظمي	SkeletonTextLineHeight	.fixed(15)
الهيكل العظمي	SkeletonTextNumberOfLines	.inherited

لتعديل النسبة المئوية أو نصف القطر باستخدام الكود ، قم بتعيين الخصائص:

descriptionTextView . lastLineFillPercent = 50
descriptionTextView . linesCornerRadius = 5

أو ، إذا كنت تفضل استخدام IB/لوحة العمل :

كيف تحدد عدد الخطوط؟

بشكل افتراضي ، يكون عدد الخطوط هو نفس قيمة خاصية numberOfLines . وإذا تم ضبطه على الصفر ، فسوف يحسب عدد الخطوط اللازمة لملء الهيكل العظمي بالكامل ورسمه.

ومع ذلك ، إذا كنت ترغب في تعيين عدد محدد من خطوط الهيكل العظمي ، فيمكنك القيام بذلك عن طريق تعيين خاصية skeletonTextNumberOfLines . تحتوي هذه الخاصية على قيمتان محتملين ، inherited يرجعان إلى قيمة numberOfLines و custom(Int) والتي تُرجع العدد المحدد للخطوط المحددة كقيمة مرتبطة.

على سبيل المثال:

label . skeletonTextNumberOfLines = 3   // .custom(3)

️ إهمال!

تم إهمال usefontlineheight . يمكنك استخدام الهيكل العظمي textlineheight بدلاً من ذلك:

descriptionTextView . skeletonTextLineHeight = . relativeToFont

مهم!

يرجى ملاحظة أنه بالنسبة للمسافات التي لا توجد بها خطوط متعددة ، سيتم اعتبار السطر المفرد السطر الأخير.

؟ مظهر

الهياكل العظمية لها مظهر افتراضي. لذلك ، عندما لا تحدد خصائص اللون أو التدرج أو المتعدد المنحدات ، SkeletonView يستخدم القيم الافتراضية.

القيم الافتراضية:

• tintcolor : UIColor
  • الافتراضي: .skeletonDefault (مثل .clouds ولكن تتكيف مع الوضع المظلم)
• التدرج : الهيكل العظمي
  • الافتراضي: SkeletonGradient(baseColor: .skeletonDefault)
• multilineHeight : CGFloat
  • الافتراضي: 15
• Multiplinespacing : CGFloat
  • الافتراضي: 10
• multilinelastlinefillpercent : Int
  • الافتراضي: 70
• MultilineCornerradius : Int
  • الافتراضي: 0
• CGFloat العظمي
  • الافتراضي: 0

للحصول على هذه القيم الافتراضية ، يمكنك استخدام SkeletonAppearance.default . باستخدام هذه الخاصية ، يمكنك تعيين القيم أيضًا:

 SkeletonAppearance . default . multilineHeight = 20
SkeletonAppearance . default . tintColor = . green

️ إهمال!

تم إهمال usefontlineheight . يمكنك استخدام TextLineHeight بدلاً من ذلك:

 SkeletonAppearance . default . textLineHeight = . relativeToFont

؟ ألوان مخصصة

يمكنك أن تقرر لون الهيكل العظمي الذي ملون به. تحتاج فقط إلى تمرير كمعلمة اللون أو التدرج الذي تريده.

باستخدام ألوان صلبة

view . showSkeleton ( usingColor : UIColor . gray ) // Solid
// or
view . showSkeleton ( usingColor : UIColor ( red : 25.0 , green : 30.0 , blue : 255.0 , alpha : 1.0 ) )

باستخدام التدرجات

 let gradient = SkeletonGradient ( baseColor : UIColor . midnightBlue )
view . showGradientSkeleton ( usingGradient : gradient ) // Gradient

الى جانب ذلك ، يتميز الهيكل العظمي 20 لونًا مسطحًا ؟؟

UIColor.turquoise, UIColor.greenSea, UIColor.sunFlower, UIColor.flatOrange ...

الصورة التي تم التقاطها من موقع الويب https://flatuicolors.com

؟ ‍♀ الرسوم المتحركة

يحتوي SkeletonView على اثنين من الرسوم المتحركة المدمجة ، ونبض للهياكل العظمية الصلبة والانزلاق للتدرجات.

علاوة على ذلك ، إذا كنت ترغب في القيام بالرسوم المتحركة الخاصة بك في الهيكل العظمي ، فهذا أمر سهل حقًا.

يوفر الهيكل العظمي وظيفة showAnimatedSkeleton الذي يحتوي على إغلاق SkeletonLayerAnimation حيث يمكنك تحديد الرسوم المتحركة المخصصة الخاصة بك.

 public typealias SkeletonLayerAnimation = ( CALayer ) -> CAAnimation

يمكنك استدعاء الوظيفة مثل هذه:

view . showAnimatedSkeleton { ( layer ) -> CAAnimation in
  let animation = CAAnimation ( )
  // Customize here your animation

  return animation
}

إنه متوفر SkeletonAnimationBuilder . إنه منشئ لصنع SkeletonLayerAnimation .

اليوم ، يمكنك إنشاء رسوم متحركة انزلاقية للتدرجات ، وتحديد الاتجاه وتحديد مدة الرسوم المتحركة (افتراضي = 1.5s).

// func makeSlidingAnimation(withDirection direction: GradientDirection, duration: CFTimeInterval = 1.5) -> SkeletonLayerAnimation

let animation = SkeletonAnimationBuilder ( ) . makeSlidingAnimation ( withDirection : . leftToRight )
view . showAnimatedGradientSkeleton ( usingGradient : gradient , animation : animation )

GradientDirection هو التعداد ، مع أطروحات الحالات:

اتجاه	معاينة
.Leftright
.Rightleft
.Topbottom
.bottomtop
.topleftbottomright
.bottomrighttopleft

حيلة!

توجد طريقة أخرى لإنشاء رسوم متحركة منزلق ، فقط باستخدام هذا الاختصار:

 let animation = GradientDirection . leftToRight . slidingAnimation ( )

؟ التحولات

الهيكل العظمي لديه تحولات مدمجة لإظهار أو إخفاء الهياكل العظمية بطريقة أكثر سلاسة ؟

لاستخدام الانتقال ، ما عليك سوى إضافة معلمة transition إلى دالة showSkeleton() أو hideSkeleton() مع وقت الانتقال ، مثل هذا:

view . showSkeleton ( transition : . crossDissolve ( 0.25 ) )     //Show skeleton cross dissolve transition with 0.25 seconds fade time
view . hideSkeleton ( transition : . crossDissolve ( 0.25 ) )     //Hide skeleton cross dissolve transition with 0.25 seconds fade time

القيمة الافتراضية هي crossDissolve(0.25)

معاينة

لا أحد	عبور الذوبان

متنوع

تَسَلسُل

نظرًا لأن SkeletonView متكرر ، ونريد أن يكون الهيكل العظمي فعالًا للغاية ، فإننا نريد إيقاف التكرار في أقرب وقت ممكن. لهذا السبب ، يجب عليك تعيين طريقة عرض الحاوية على أنها Skeletonable ، لأن الهيكل العظمي سيتوقف عن البحث عن عروض هيكلية skeletonable بمجرد أن لا يكون العرض قابلاً للهيكل العظمي ، ثم يكسر العودية.

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

في هذا المثال ، لدينا UIViewController مع ContainerView و UITableView . عندما يكون العرض جاهزًا ، نعرض الهيكل العظمي باستخدام هذه الطريقة:

 view.showSkeleton()

isSkeletonable = ☠

إعدادات	نتيجة

وجهات النظر الهيكل العظمي

في بعض الأحيان ، قد لا يناسب تخطيط الهيكل العظمي تخطيطك لأن حدود عرض الوالدين قد تغيرت. على سبيل المثال ، تدوير الجهاز.

يمكنك نقل وجهات نظر الهيكل العظمي مثل:

 override func viewDidLayoutSubviews ( ) {
    view . layoutSkeletonIfNeeded ( )
}

مهم!

يجب ألا تسمي هذه الطريقة. من الإصدار 1.8.1 ، لا تحتاج إلى استدعاء هذه الطريقة ، فإن المكتبة تعمل تلقائيًا. لذلك ، يمكنك استخدام هذه الطريقة فقط في الحالات التي تحتاج فيها إلى تحديث تصميم الهيكل العظمي يدويًا.

تحديث الهيكل العظمي

يمكنك تغيير تكوين الهيكل العظمي في أي وقت مثل لونه ، والرسوم المتحركة ، وما إلى ذلك مع الطرق التالية:

 ( 1 ) view . updateSkeleton ( )                 // Solid
( 2 ) view . updateGradientSkeleton ( )         // Gradient
( 3 ) view . updateAnimatedSkeleton ( )         // Solid animated
( 4 ) view . updateAnimatedGradientSkeleton ( ) // Gradient animated

إخفاء المشاهدات عندما تبدأ الرسوم المتحركة

في بعض الأحيان تريد إخفاء بعض العرض عند بدء تشغيل الرسوم المتحركة ، لذلك هناك خاصية سريعة يمكنك استخدامها لتحقيق ذلك:

view . isHiddenWhenSkeletonIsActive = true  // This works only when isSkeletonable = true

لا تعدل تفاعل المستخدم عندما يكون الهيكل العظمي نشطًا

بشكل افتراضي ، يتم تعطيل تفاعل المستخدم للعناصر الهيكلية ، ولكن إذا كنت لا ترغب في تعديل مؤشر تفاعل المستخدم عندما يكون الهيكل العظمي نشطًا ، يمكنك استخدام خاصية isUserInteractionDisabledWhenSkeletonIsActive :

view . isUserInteractionDisabledWhenSkeletonIsActive = false  // The view will be active when the skeleton will be active.

لا تستخدم ارتفاع خط الخط لخطوط الهيكل العظمي في الملصقات

كاذبة لتعطيل الهيكل العظمي إلى تعديل تلقائي إلى ارتفاع الخط ل UILabel أو UITextView . بشكل افتراضي ، يتم تعديل ارتفاع خطوط الهيكل العظمي إلى ارتفاع الخط ليعكس النص بشكل أكثر دقة في الملصق المستقيم بدلاً من استخدام المربع المحيط.

label . useFontLineHeight = false

تأخر العرض الهيكل العظمي

يمكنك تأخير عرض الهيكل العظمي إذا تحديث المشاهدات بسرعة.

 func showSkeleton ( usingColor : UIColor ,
                  animated : Bool ,
                  delay : TimeInterval ,
                  transition : SkeletonTransitionStyle ) 

 func showGradientSkeleton ( usingGradient : SkeletonGradient ,
                          animated : Bool ,
                          delay : TimeInterval ,
                          transition : SkeletonTransitionStyle )

تصحيح

لتسهيل مهام التصحيح عندما لا يعمل شيء ما بشكل جيد. SkeletonView لديه بعض الأدوات الجديدة.

أولاً ، يمتلك UIView خاصية مع معلومات الهيكل العظمي:

 var sk . skeletonTreeDescription : String

علاوة على ذلك ، يمكنك تنشيط وضع التصحيح الجديد. يمكنك فقط إضافة SKELETON_DEBUG متغير البيئة وتنشيطه.

ثم ، عندما يظهر الهيكل العظمي ، يمكنك رؤية التسلسل الهرمي للعرض في وحدة التحكم Xcode.

 { 
  "type" : "UIView", // UITableView, UILabel...
  "isSkeletonable" : true,
  "reference" : "0x000000014751ce30",
  "children" : [
    {
      "type" : "UIView",
      "isSkeletonable" : true,
      "children" : [ ... ],
      "reference" : "0x000000014751cfa0"
    }
  ]
}

إصدارات OS & SDK المدعومة

• iOS 9.0+
• TVOS 9.0+
• سويفت 5.3

❤ المساهمة

هذا مشروع مفتوح المصدر ، لذلك لا تتردد في المساهمة. كيف؟

• افتح مشكلة.
• إرسال الملاحظات عبر البريد الإلكتروني.
• اقترح الإصلاحات الخاصة بك والاقتراحات وفتح طلب سحب مع التغييرات.

انظر جميع المساهمين

لمزيد من المعلومات ، يرجى قراءة الإرشادات المساهمة.

؟ يذكر

• iOS Dev Weekly #327
• القرصنة بالمقالات السريعة
• أفضل 10 مقالات سريعة نوفمبر
• 30 مكتبات IOS Swift Amaze (V2018)
• AppCoda Weekly #44
• Newsletter IOS Cookies #103
• النشرة الإخبارية Swift Developments #113
• iOS Goodies #204
• Swift Weekly #96
• جوز الهند
• Awesome IOS Newsletter #74
• أخبار سريعة #36
• أفضل مقالات iOS وأدوات جديدة وأكثر

؟ الرعاة

لا يمكن للمشاريع المفتوحة المصدر العيش لفترة طويلة دون مساعدتك. إذا وجدت هيكل عظمي مفيد ، فيرجى التفكير في دعم هذا المشروع من خلال أن يصبح راعياً.

كن راعياً من خلال رعاة Github ❤

؟؟مؤلف

خوانب كاتالان

؟ رخصة

 MIT License

Copyright (c) 2017 Juanpe Catalán

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.