جلسه 21 ام آموزش iOS :ایجاد Static Table View با مثال

اگر آموزش های ما را در جلسات قبل ، دنبال کرده باشید ، شما اکنون ، باید درک اولیه نسبت به static table view ، داشته باشید. با این حال ، مباحثی که ما در خصوص table views ، تحت پوشش قرار داده ایم ، مربوط به محتواهای پویا می باشند. از سوی دیگر کنترلر “Add Note” ، که در جلسه قبل ساختیم ، کاربردیا از static table view  می باشد. اگر شما با static table view مشکل دارید ، این آموزش ، مختص شماست. ما نشان خواهیم داد که چگونه static table view را با استفاده از Storyboard بسازیم.

برای این که به شما نشان دهیم ، چگونه به آسانی می توان ، با استفاده از Storyboard ، یک static table view ، را پیاده سازی کرد ، یک صفحه تنظیمات ساده (simple Setting screen) خواهیم ساخت. static table view ها ، برای شرایطی مناسب هستند که یک تعداد اقلام داده از پیش تعیین شده داریم که باید نمایش داده شوند. یک صفحه تنظیمات ، نمونه ای بارز از کاربرد static table view می باشد.

ایجاد پروژه Xcode

برای شروع ، Xcode را راه اندازی کرده و یک پروژه جدید ، با استفاده از تمپلت Single View Application می سازیم.

نام پروژه را “StaticTableDemo” قرار می دهیم و فراموش نمی کنیم که “Storyboard” را در تنظیمات پروژه انتخاب نماییم.

طراحی Static Table View

در Storyboard ، ابتدا view controller پیش فرض را حذف کرده ، و یک Table View Controller از Object Library درگ می کنیم.

به طور پیش فرض ، Xcode ، ساختار table view را برای محتوای پویا ، تنظیم می نماید. به سادگی می توانیم table view را از حالت پویا به سلول های استاتیک تغییر دهیم. این کار را می توانیم با تغییر در خصیصه content ، انجام دهیم. هنگامی که تغییر انجام شد ، یک table view ، خواهیم داشت که سه سلول خالی استاتیک دارد.

برای داشتن view دلخواه از صفحه Setting ، باید style جدول را از “Plain” به “Grouped” ، در بخش Attributes inspector ، از table view ، تغییر  دهیم. دو روش ، برای تغییر تعداد سطرهای جدول از 3 به 2 داریم. ساده ترین راه این است که ، یکی از ردیف های جدول را انتخاب کرده و کلید delete را برای حذف ردیف موردنظر ، فشار دهیم.  به طور جایگزین ، می توانیم Table View Section را در document navigator ، انتخاب کرده و تعداد ردیف آن را تغییر  دهیم.

می توانیم از header و footer ، برای نمایش اطلاعات اضافی در جدول table section ، استفاده کنیم. header و footer را مطابق تصویر بالا ، تنظیم می کنیم.

در ادامه ، یک table view cell ، با مراحل زیر ، طراحی خواهیم کرد:

• یک شیء label ، به داخل table view cell ، درگ کرده و اندازه آن را به 17 ، تنظیم کرده و عنوان آن را “Mobile Notification” ، قرار می دهیم.
• شیء label دیگر ، به table view cell ، درگ کرده و آن را در زیر برچسب قبلی قرار می دهیم. اندازه آن را به 10 تنظیم می کنیم و عنوان برچسب را “Do you want to receive push notification?” ، قرار می دهیم.
• یک شیء Switch ، به داخل table view cell درگ می کنیم.
• مراحل فوق را برای پیاده سازی سلول “Email Notification” ، تکرار می کنیم.

ما ، اولین بخش جدول را طراحی کرده ایم. برای افزودن دومین بخش ، Table View ، را انتخاب کرده و مقدار “Sections” در Attributes inspector ، را به 2 ، تغییر می دهیم. به محض اعمال به روز رسانی در تعداد بخش ها ، Xcode  یک بخش جدید اضافه کرده و به طور خودکار ، محتوای مشابه بخش اول را در آن کپی می کند.

به سادگی ، مطابق تصویر زیر ، section و سلول های جدول را تغییر می دهیم:

برای تکمیل چیدمان صفحه Setting ، کنترلر table view controller را در یک navigation controller جاسازی می کنیم. table view controller را انتخاب می کنیم. سپس ، بخش Editor > Embed in > Navigation Controller را از منوی Xcode ، انتخاب می کنیم.

کامپایل و اجرا نمودن اپ

کار انجام شد! در نهایت به کامپایل و اجرای اپ ، در شبیه ساز می رسیم. صفحه Setting ، باید شبیه تصویر زیر باشد:

خلاصه

در این آموزش کوتاه ، ما نحوه ایجاد یک static table view ، با استفاده از Storyboard  را نشان دادیم. با این که می توانیم از جدول پویا (dynamic table) ، برای نمایش داده ها از data source  استفاده کنیم ؛  static table view ، یک راهکار عالی برای نمایش مقدار محدودی از داده هایی است که از پیش تعریف شده اند.