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

ใช้งาน 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 ตามนี้

เปิดไฟล์ ViewController.m

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

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

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

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

ลอง “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

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.