DeveloperFeaturediOS DeveloperObjective CProgramming Language

ใช้งาน Web Server และ UISearchBar ร่วมกับ UITableView

วิธีการเขียนแอพพลิเคชันบน iPhone ใช้งาน Web Server และ UISearchBar ร่วมกับ UITableView ให้ค้นหาข้อมูลในตารางด้วยช่องค้นหาในแอพพลิเคชันของเราร่วมกับ JSON

แอพพลิเคชันของเรานั้น จะต้องมีฟังก์ชันค้นหาข้อมูล และดึงข้อมูลจาก Web Service มาแสดงผลในหน้า UITableView เป็นชั้นข้อมูลผ่านการเรียกตัวแปรต่างๆ ใน JSON และในบทเรียนนี้จะมีการเรียก UISearchBar มาช่วยในการทำงานด้านการค้นหาข้อมูลครับ

Screen Shot 2557-02-12 at 2.16.13 PM

ก่อนจะเข้าใจ และศึกษาบทเรียนนี้จำเป็นที่จะต้องรู้เรื่องโครงสร้าง JSON และการเรียกข้อมูลมาแสดงผลบน UITableView ก่อนผ่านบทความนี้ครับ Xcode5 (GM Seed) กับการดึง Web Service มาลงบน UITableViewCell

หากว่าเข้าใจแล้วก็มาเริ่มบทเรียนนี้กันเลย

ทำการ New Project ขึ้นมาใหม่เป็น Single View Application ครับ

UI ที่เราจะใช้ในบทเรียนนี้คือ UITableView และ UISearchBar นำมาวางใน MainStoryBoard เลยครับ

โครงสร้างของ JSON จะเป็นดังนี้ผมเรียกผ่าน http://www.gooruism.com/?feed=json

Screen Shot 2557-02-12 at 12.43.10 PM

ต่อมาลาก Object UI มาวางบน ViewController ครับ

Screen Shot 2557-02-12 at 12.29.27 PM

ลาก  UISearchBar มาวางข้างบน

Screen Shot 2557-02-12 at 12.29.55 PM

ตามด้วย UITableView

ตกแต่งหน้าจอแอพพลิเคชันของเราครับ

Screen Shot 2557-02-12 at 12.30.12 PM

ทำการ Delegate และ DataSource ตัว UITableView ครับ

Screen Shot 2557-02-12 at 12.30.49 PM

เช่นกันครับ ทำการ Delegate ตัว  UISearchBar ด้วย

Screen Shot 2557-02-12 at 12.33.53 PM

เปิดไฟล์ ViewController.h ขึ้นมา ทำการ Link IBOutlet ของ UITable และเพิ่ม Code ตามนี้

#import 

@interface ViewController : UIViewController
@property (strong, nonatomic) IBOutlet UITableView *tableData;

@end

เปิดไฟล์ ViewController.m

ประกาศ Header เล็กน้อย

@interface ViewController ()
{
NSMutableArray *allObject;
NSMutableArray *displayObject;
// A dictionary object
NSDictionary *dict;
// Define keys
NSString *provinceid;
NSString *provincename;
}
@end

แก้ไข เมธอด ViewDidLoad() หน่อยครับ

- (void)viewDidLoad
{
[super viewDidLoad];
// Define keys
provinceid = @"id";
provincename = @"title";
// Create array to hold dictionaries
allObject = [[NSMutableArray alloc] init];
NSData *jsonData = [NSData dataWithContentsOfURL:
[NSURL URLWithString:@"http://www.gooruism.com/?feed=json"]];
id jsonObjects = [NSJSONSerialization JSONObjectWithData:jsonData options:NSJSONReadingMutableContainers error:nil];
// values in foreach loop
for (NSDictionary *dataDict in jsonObjects) {
NSString *strProvinceID = [dataDict objectForKey:@"id"];
NSString *strProvinceName = [dataDict objectForKey:@"title"];
dict = [NSDictionary dictionaryWithObjectsAndKeys:
strProvinceID, provinceid,
strProvinceName, provincename,
nil];
[allObject addObject:dict];
}
displayObject =[[NSMutableArray alloc] initWithArray:allObject];
// Do any additional setup after loading the view, typically from a nib.
}

ต่อมาเป็นการ ทำให้ UITableView เรียกข้อมูล JSON ไปโชว์ใน Cell ของTable

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return displayObject.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
// Use the default cell style.
cell = [[UITableViewCell alloc] initWithStyle : UITableViewCellStyleSubtitle
reuseIdentifier : CellIdentifier];
}
NSDictionary *tmpDict = [displayObject objectAtIndex:indexPath.row];
NSString *cellValue = [tmpDict objectForKey:provincename];
cell.textLabel.text = cellValue;
return cell;
}

เพิ่ม เมธอดใหม่สำหรับ UISearchBar ให้ทำการกรอง ศัพท์ หรือ Keywords เพื่อเรียกแสดงผล UITableView ใหม่

- (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString
{
if([searchString length] == 0)
{
[displayObject removeAllObjects];
[displayObject addObjectsFromArray:allObject];
}
else
{
[displayObject removeAllObjects];
for(NSDictionary *tmpDict in allObject)
{
NSString *val = [tmpDict objectForKey:provincename];
NSRange r = [val rangeOfString:searchString options:NSCaseInsensitiveSearch];
if(r.location != NSNotFound)
{
[displayObject addObject:tmpDict];
}
}
}
return YES;
}

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {
searchBar.text=@"";
[searchBar setShowsCancelButton:NO animated:YES];
[searchBar resignFirstResponder];
}

ลอง “Run” ตัวแอพพลิเคชันครับ

iOS Simulator Screen shot Feb 12, 2557 BE, 12.44.44 PM

ลองทดสอบแอพฯ

iOS Simulator Screen shot Feb 12, 2557 BE, 12.45.04 PM

ใส่ Keywords ลงไป

iOS Simulator Screen shot Feb 12, 2557 BE, 12.44.54 PM

ทดสอบอีกรอบนึง

ไม่ยากใช่ไหมครับ ว่าแล้วก็ลองไปเขียนกันดูนะครับ สำหรับ สายโหลด แกะ รีวืว และคนมักง่าย ก็ ดาวน์โหลดที่นี่ครับ

http://adf.ly/dSd86

ผมอาจจะขอโฆษณาหาเงิน เล็กน้อยๆ บ้างเวลาโหลดนะครับ ต้องขออภัย:D
Ref: Thaicreate, Ray Wenderich

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน