بسم الله الرحمن الرحیم.

حتما تا الآن شده که وقتی یه کالکشن ویو رو توی برنامتون استفاده می کنید میخواید توی آیفون ها و آیپد های مختلف تعداد سلول هاش متناسب با صفحه گوشی کم و زیاد بشه.

ما همیشه توی کالکشن ویو ها دو حالت داریم. 

۱. همیشه قصد داریم در همه گوشی ها تعداد سلول ها در هر سطر برابر عدد خاصی (مانند ۲) باشد

۲. میخواهیم برای یک سلول سایز مشخصی را در نظر بگیریم و متناسب با صفحه گوشی تعداد سلول هایی که در هر سطر جا میشوند را محاسبه کنیم.

چیزی که امشب قراره یاد بگیریم اینه که شما اندازه یک سلول رو داشته باشید و به نسبت صفحه گوشی یا تبلت تعداد سلول ها رو بدست بیارید.

در ابتدا باید بدونید که هر موقع میخواید با اندازه سلول ها و هر مبحث دیگه ای که مربوط به سایز و اندازه میشه باید پروتکل  UICollectionViewDelegateFlowLayout رو توی کلاستون implement کنید تا توابع مربوطه رو بازنویسی کنید.

قبل از ادامه دادن آموزش در قسمت کد بهتره یه سر به استوری بردتون بزنید و روی کالکشن ویو کلیک کنید از سمت راست Size Inspector رو کلیک کنید و حالا میتونید سایز سلول فاصله افقی سلول ها از یکدیگه (Min Spacing For Cell) و همچنین فاصله بین سطر ها (Min Spacing For Lines) رو  تنظیم کنید

همه اینا رو از توی کد هم میتونید با محاسبات تعیین کنید اما اگر تابع مربوطه رو بازنویسی نکنید از همین سایز داخل IB میخونه (IB مخفف Interface Builder)

پس فاصله بین سطر و خود سلول ها رو از اینجا تنظیم کنید و همچنین سایز خود سلول رو هم تنظیم کنید.

حالا برنامه رو اجرا کنید.

می بینید که همه چیز همونی شده که ما میخواستیم (درصورتی که سایز درستی به سلول خودمون داده باشیم)

وقتی گوشی رو به حالت افقی در میارید میبینید که تعدادش به صورت پیشفرض زیاد میشه بدون نوشتن حتی یه خط کد اما مشکلی که خیلی تو چشم هست اینه که فاصله ها زیاد میشن و شاید ما بخوایم آیتم ها در وسط صفحه قرار بگیرن و فاصله شون از اطراف جوری باشه که درست ۳ تا آیتم در یک سطر در وسط صفحه قرار بگیره پس:

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        let b = collectionView.frame.width / 160
        let totalCellWidth = (collectionView.frame.width / b) * CGFloat(Int(b))
        let totalSpacingWidth = CGFloat(10 * (Int(b) - 1))

        let leftInset = ((collectionView.frame.width - CGFloat(totalCellWidth + totalSpacingWidth)) / 2)
        let rightInset = leftInset
        return UIEdgeInsets(top: 15, left: leftInset, bottom: 10, right: rightInset)
    }

در کد بالا ۱۶۰ عرض یک سلول هست در خط سوم کد بالا ما عرض یک سلول رو در تعداد سلول هایی که در هر سطر میتونه جا بگیره ضرب میکنیم تا مقدار کل عرض سلول ها در یک سطر (وقتی بهم چسبیده فرض کنیم) بدست میاد. حالا یه فاصله هم در نظر میگیریم براشون و در نهایت مجموع اندازه عرض سلول ها و فاصله ها رو از عرض کل کالکشن کم میکنیم و مقدار نهایی رو بر دو تقسیم میکنیم حالا این عدد رو برای فاصله چپ و راست کالکشن ویو تنظیم میکنیم تا آیتم ها وسط قرار بگیرن.

اون ۱۰ که توی خط چهارم میبینید همون فاصله سلول ها از همدیگه است که توی Size Inspector تنظیم کردید.

اعداد ۱۵ و ۱۰ که در خط آخر میبینید فاصله ای هست که آیتم اول و آخر در سطر اول و آخر از بالا و پایین کالکشن ویوتون میگیرن.

در صورتی که میخواید سایز سلول شما به نسبت صفحه بزرگ بشه باید تابع زیر رو بازنویسی کنید

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
      
        return CGSize(width: collectionView.frame.width / 3, height: collectionView.frame.width / 3)
    }

تابع بالا اندازه سلول ما رو برابر با یک سوم مقدار کل عرض کالکشن ویو قرار میده (همینطور ارتفاع رو هم همین مقدار میزاره که یه مربع از سلول ما ساخته میشه)

اما کد بالا در صورتی استفاده میشه که میخواید سایز سلولتون متناسب با اندازه صفحه آیفون یا آیپد باشه و همیشه تعداد سلول ها در سطر توی هر صفحه نمایش برابر با ۳ میشه.

امیدوارم استفاده ببرید از آموزش ها

موفق باشید

یاعلی