جلسه هشتم آموزش iOS: حذف سطر UITableView - کلیک سایت

چطور می توانیم یک سطر را از UITableView حذف کنیم؟

این کار خیلی ساده تر از آن چیزی هست که فکر می کنید! اما قبل از این که وارد بخش کدنویسی شویم، بهتر است ابتدا شناختی از مدل Model-View-Control داشته باشیم، که یکی از الگوهای طراحی پرطرفدار، برای برنامه نویسی رابط کاربری می باشد.

اگر در یادگیری برنامه نویسی iOS جدی باشید، شما نمی توانید از یادگیری Model-View-Control (به صورت اختصار MVC) رد شوید. MVC فقط محدود به برنامه نویسی iOS نمی باشد، بلکه به طور متداول در سایر زبان های برنامه نویسی مانند Java نیز کاربرد دارد. اگر زمینه ذهنی از سایر زبان های برنامه نویسی داشته باشید، MVC برای شما چیز جدیدی نخواهد بود.

آشنایی با Model-View-Control

مهم نیست که چه زبان برنامه نویسی را یاد می گیرید، یک مفهوم مهمی که شما را به یک برنامه نویس بهتر تبدیل می کند،

Separation of Concerns (SoC)

می باشد. این مفهوم بسیار ساده است. Concern ها جنبه های مختلف از عملکرد نرم افزار می باشند. این مفهوم ، توسعه دهندگان را تشویق می کند تا یک خصیصه یا برنامه بزرگ را به چندین ناحیه تقسیم کنند؛ به طوری که هر ناحیه مسئولیت خاص خود را داشته باشد. یک مثال نمونه از SoC، مربوطه به آموزشی است که ما در جلسه اول دوره آموزش برنامه نویسی iOS ارائه کردیم.

 model-view-controller مثال دیگری از SoC می باشد. ایده اصلی MVC ، جداسازی شفاف رابط کاربری به سه ناحیه (یا گروهی از اشیاء) می باشد که هر ناحیه، مسئول عملکرد خاصی است. همان طور که از نام این متد، مشخص است، MVC رابط کاربر را به سه ناحیه تفکیک می کند:

Model: model ، مسئول نگهداری داده ها یا هر عملیاتی که بر روی داده ها اعمال می شود، است. مدل می تواند به اندازه یک شیء از آرایه که تمام داده های جدول را ذخیره می کند، ساده باشد. add، edit و delete مثالهایی از عملیاتهایی هستند که بر روی داده ها انجام می شوند. در واقع، عملیاتها به عنوان business rules (قوانین تجاری) شناخته می شوند.

View: view نمایش اطلاعات بصری را مدیریت می کند. به عنوان مثال، UITableView اطلاعات را در فرمت table view نشان می دهد.

Controller: controller پل بین Model و View می باشد. وظیفه کنترلر ترجمه تعامل کاربر از حالت view (برای مثال ضربه زدن) به انجام عمل مناسب در model می باشد. برای مثال، کاربر کلید حذف را در view  انتخاب می کند، به دنبال آن، controller، باعث انجام عملیات حذف در model می شود. سپس کنترلر، از view درخواست می کند تا خود را برای بازتاب به روزرسانی انجام شده در model داده، رفرش نماید.

برای فهم بهتر MVC، اپ Simple Table  را به عنوان مثال به کار می بریم. اپ ، یک لیستی از دستور پخت ها در table view نمایش می دهد. اگر مفاهیم را بخواهیم به صورت یک نمودار نشان دهیم، شکل زیر به خوبی می تواند گویای مفاهیم فوق و نحوه نمایش اطلاعات table view باشد:

اطلاعات دستور پخت در آرایه جداگانه ای که همان Model است، ذخیره می شود. هر ردیف جدول، به یک عنصر از آرایه دستور پختها، نگاشت می شود. شیء UITableView، بخش View می باشد که همان رابطی است که توسط کاربر مشاهده می شود. همه مسئولیت های بصری (مانند رنگ ردیف های جدول، اندازه و نوع قلم) بر عهده بخش view می باشد. TableViewController به عنوان بخش کنترلر عمل کرده و پلی بین TableView و مدل داده Recipe می سارد. وقتی که اطلاعات جدول نمایش داده می شود، UITableView از Controller درخواست نمایش داده ها را می کند، کنترلر نیز داده ها را از model استخراج می کند.

نحوه حذف یک ردیف از UITableView

امیدواریم تا اینجا درک بهتری در مورد Model-View-Controller کسب کرده باشید. اکنون بیایید به سراغ بخش کدنویسی رفته و ببینیم به چه نحوی می توانیم یک ردیف را از UITableView حذف کنیم. برای سادگی کار، از ورژن ساده اپ Simple Table که در جلسه اول آموزش برنامه نویسی iOS ساختیم، استفاده خواهیم کرد.

اگر مدل MVC را کاملاً درک کرده باشید، احتمالاً چند ایده در مورد چگونگی حذف یک ردیف از جدول را در ذهن دارید. سه کار مهم وجود دارد که باید انجام شود:

1. نوشتن کد برای تغییر وضعیت به edit mode برای حذف ردیف.
2. حذف داده مربوطه به جدول از بخش model
3. بارگذاری مجدد table view برای انعکاس دادن تغییرات اعمال شده در داده های جدول.

گام اول: نوشتن کد برای تغییر وضعیت به edit mode برای حذف ردیف.

در اپ iOS، کاربر به طور معمول به اندازه طول یک ردیف انگشت خود را روی صفحه نمایش می کشد ، تا دکمه حذف را ببیند. به یاد دارید که ما در نوشت اپ خود، از پروتکل UITableViewDataSource پیروی کردیم. اگر به مستند API مراجعه کنید،

متدی با نام  tableView:commitEditingStyle:forRowAtIndexPath خواهید یافت. عملکرد این متد به این صورت می باشد که وقتی کاربر در یک ردیف swipe می کند (انگشت خود را می کشد)، table view اجرای این متد را بررسی می کند. اگر متد اجرا شده باشد، table view به طور خودکار، دکمه ‘Delete’ را نشان خواهد داد.

به راحتی، کد زیر را به اپ table view خود اضافه می کنیم.

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
 
}

حتی اگر این متد خالی باشد و چیزی انجام نشده باشد، وقتی که در یک ردیف swipe شود، دکمه ‘Delete’ مشاهده خواهد شد.

گام دوم: حذف داده مربوطه جدول از model

مرحله بعد، افزودن کد به متد و حذف داده واقعی جدول می باشد. مانند سایر متدهای table view، این متد نیز indexPath را به عنوان پارامتر ارسال می کند که بیان کننده شماره ردیفی است که باید حذف شود. با استفاده از این اطلاعات، عنصر متناظر از آرایه جدول حذف می شود.

در کد اصلی اپ Simple Table، ما از NSArray برای ذخیره سازی داده های جدول (که همان model است) استفاده کردیم. مشکل  NSArray غیرقابل ویرایش بودن آن می باشد. به این معنا است که نمی توانیم بعد از این که آرایه مقداردهی اولیه شد، عملیات add/remove را بر روی محتوای آن اعمال کنیم. برای حل این مشکل، NSArray را با NSMutableArray جایگزین می کنیم تا بتوانیم عملیات درج و حذف را بر روی داده های آن انجام دهیم.

@implementation SimpleTableViewController
{
    NSMutableArray *tableData;
}
 
- (void)viewDidLoad
{
    [super viewDidLoad];
 // Initialize table data
    tableData = [NSMutableArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];
}

در متد tableView:commitEditingStyle، کد زیر را برای حذف داده واقعی از آرایه، اضافه می کنیم. ساختار متد باید مانند کد زیر باشد:

	- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Remove the row from data model
    [tableData removeObjectAtIndex:indexPath.row];
}

NSMutableArray چندین عملیات را برای دستکاری محتوای یک آرایه، فراهم می کند. در اینجا ما از متد “removeObjectAtIndex” برای حذف یک مورد خاص از آرایه استفاده می کنیم. اکنون اپ را اجرا می کنیم و سعی می کنیم یک ردیف از جدول را حذف کنیم. وای! همان طور که انتظار می رفت، اپ کار نکرد!

این اتفاق یک bug نیست. اپ، آیتم موردنظر را از آرایه حذف می کند. دلیل این که آیتم حذف شده هنوز در اپ نمایان است، این است که view برای انعکاس دادن به روزرسانی انجام شده در مدل، refresh نشده است.

گام سوم: بارگذاری مجدد table view

بنابراین، هنگامی که داده موردنظر حذف شد، نیاز داریم متد “reloadData” را برای درخواست رفرش شدن table view فراخوانی کنیم. کد به روزرسانی شده مطابق زیر است:

	- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Remove the row from data model
    [tableData removeObjectAtIndex:indexPath.row];
    
    // Request table view to reload
    [tableView reloadData];
}

تست اپ و حذف یک ردیف

سعی می کنیم دوباره اپ را اجرا کنیم و برای حذف یک ردیف swipe  می کنیم. باید بتوانیم ردیف موردنظر را حذف کنیم:

از این که ما را در این مقاله همراهی کردید، سپاسگذاریم!