لیست کشویی در سویفت

در این آموزش کوتاه یاد خواهیم گرفت که چگونه یک لیست با آیتم و زیر مجموعه بسازیم.

قبل از اینکه شروع کنیم شما می توانید مطالب قبلی را بخوانید:

http://vrgl.ir/HOR1C http://vrgl.ir/gfdiC

ایجاد پروژه در ایکس کد:

در اینجا اطلاعات خود را تکمیل کنید:

بعد از تکمیل اطلاعات، در صفحه بعدی single view application را انتخاب کنید و مسیر ذخیره پروژه را تعیین کنید؛ حالا اپلیکیشن شما آماده کدنویسی است:

به اِستوریبٌرد اصلی خود بروید:

از منوی پایین سمت راست، Table View را انتخاب کرده و به صورت دِرَگ و دِراپْ به داخل ویٌوکٌنْتٌرٌلِرْ خود بکشید:

بعد از تغییر اندازه و ست کردن constraint ها، تِیبِل ویو را انتخاب کنید و در منوی سمت راست، Prototype cells را از ۰ به عدد ۲ تغییر بدید.

حالا در تِیبِل ویو دو آیتم را مشاهده می کنید:


در قدم بعدی هر سِل را انتخاب کنید و به آن identifier بدهید:

در قدم بعدی استایل سِل ها را به basic تغییر بدهید:

نکته: در اینجا میتوان فقط از یک سِل هم استفاده کرد!

در قدم بعدی، با انتخاب کردن تِیبِل ویو، دیتاسورس و دلیگیت را با استفاده از دِرَگ و دِراپْ به ویٌوٌکٌنْتٌرٌلِرْ ارتباط بدهیم.

پس از انجام دادن این کار، با استفاده از دِرَگ و دِراپْ، تِیبِل ویوی خود را به ViewController.swift متصل می کنیم:

حال، با افزودن دلیگیت و دیتاسورس در ویوکنترلر کنترل تِیبِل ویو خود را به دست بگیرید!

متوجه اخطار ایکس کد می شوید که با افزودن متود های زیر، اخطار رفع می شود:

در اینجا ما دونوع داده داریم، یکی آیتم ها و یکی زیر مجموعه آیتم ها که می خواهیم آن ها را به صورت کشویی باز و بسته و نشان بدهیم!

پیش از هرکاری متود زیر را نیز اضافه کنید:

حالا نوبت این است که اطلاعات را نمایش بدهیم، در اینجا ممکن است اطلاعات مورد نظر ما هرچیزی باشد، اما برای ساده کردن، کلاسی برای دیتامٌدل خود می سازیم و اطلاعات را درون آن قرار می دهیم:

  • هر expandDataModel یک آیتم است.
  • هر آیتم دارای مقدار isExpanded می باشد که وضعیت باز بودن و یا بسته بودن آیتم را به ما نشان می دهد.
  • هر آیتم دارای یک عنوان است که آن را با sectionTitle مشخص می کنیم.
  • هر آیتم دارای تعدادی زیر مجموعه است که برای ساده کردن از رشته استفاده شده که آن را با sectionRows مشخص می کنیم.
  • در متود init، به هر پراپرتی یک مقدار می دهیم.

بر می گردیم به کلاس ویٌوکٌنْتٌرٌلِرْ خود و یک آرایه از دیتامٌدل خود به مقدار دلخواه می سازیم:

حالا در این قسمت ما می خواهیم تعداد زیر مجموعه ها در یک آیتم را مشخص کنیم:

در اینجا ما مقدار آیتم ها را برگشت می دهیم در صورتی که آن ها باز باشند.

نکته: برای جلوگیری از fatal error: Array index out of range در سویفت، ما مقدار برگشتی را همیشه در صورت باز بودن بعلاوه ۱ می کنیم!

در متود numberOfSections، مقدار آیتم های خودرا برمی گردانیم:

در متود cellForRowAt، مقادیر را در آیتم ها و زیر مجموعه ها پر می کنیم:

در اینجا ما ابتدا چک خواهیم کرد که آیا این یک section است یا row، در قدم بعدی اگر section بود با استفاده از indexPath.section مقدار section مورد نظر را بگیرد و اطلاعات را نمایش دهد! و اگر row بود، مقدار را با استفاده از indexPath.row -1 از section بگیرد و نمایش دهد!

نکته: در قسمت قبلی ما مقدار ایندکس را بعلاوه ۱ کردیم و حالا آن را در indexRow برای زیر مجموعه ها کم می کنیم.

حالا باید مشخص کنیم که وقتی یک آیتم انتخاب شد، در صورت باز بودن بسته و در صورت بسته بودن باز شود! و در این حال اگر زیر مجموعه انتخاب شد، عملی صورت نگیرد! به نظر خیلی پیچیده است اما در واقعیت نیست:

توضیحات: در این قسمت ابتدا نوع را تعیین کردیم که آیا section است یا row، در صورت section یا همان آیتم بودن وضعیت باز بودن و یا بسته بودن را با استفاده از isExpanded بررسی کند؛ در صورت باز یا بسته بودن با تغییر مقدار isExpanded آن را کنترل کند و در آخر، با دستور reloadSections، مقدار تغییر یافته را اعمال کند!

پروژه رو اجرا کنید:

😋
😋


همانطور که می بینید، برنامه به درستی کار می کند!

جمع بندی:‌ این نوع از آیتم ها بسیار کاربردی هستند و در مواردی مانند نمایش پست ها و نظرات مربوط به آن ها و... به کار می روند.

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

کد پروژه در گیتهاب 😍:

https://github.com/moeindev/ExpandableCell