របៀបបង្កើត TableView សំរាប់កម្មវិធីរបស់ iOS

Support Us

ដំបូងយើងត្រូវបើកកម្មវិធី Xcode រួចហើយបង្កើត SimpleTableView Project។ សូមជ្រើសរើសយក Single View Appication។

Screen Shot 2013-12-31 at 2.10.16 PMសូមចុច Next ដើម្បីបន្តទៅមុខទៀត។ បន្ទាប់មកយើងនឹងឃើញផ្ទាំងថ្មីមួយទៀតដើម្បីអោយយើងបំពេញពត៌មានមួយចំនួនរបស់ Project យើង។

Screen Shot 2013-12-31 at 2.11.22 PMសូមចុច Next ដើម្បីបន្តទៅមុខទៀត។ Xcode នឹងសួរអ្នកថាតើត្រូវរក្សាទុក “SimpletTableView” project នៅកន្លែងណា។ សូមជ្រើសរើសកន្លែងសំរាប់រក្សាទុក រួចចុច Create ដើម្បីបន្តទៅមុខទៀត។

បន្ទាប់មកផ្ទាំងការងារនឹងចេញមក។ ដើម្បីដាក់ Object ទៅក្នុង View យើងត្រូវចូលទៅកាន់ SimpleTableViewViewController.xib។ បន្ទាប់មកទាញ Table View មកទំលាក់ចូលក្នុង View។

Screen Shot 2013-12-31 at 2.18.48 PMបន្ទាប់ពីយើងដាក់ Table View ចូលទៅក្នុង View នោះ ពេលដែលយើង Run​ ជាលើកដំបូង យើងនឹងឃើញលទ្ធផលដូចខាងក្រោម៖

Screen Shot 2013-12-31 at 2.15.58 PMយើងត្រូវបង្កើតទំនាក់ទំនង Table View របស់យើងទៅកាន់ Method ពីរដែលយើងនឹងបង្កើតដើម្បីអោយ Table View មានទិន្នន័យសំរាប់បង្ហាញ។ ដើម្បីភ្ជាប់ទំនាក់ទំនងយើងត្រូវទៅកាន់ SimpleTableViewViewController.xib រួចហើយចុច Control key នៅលើ Keyboard អោយជាប់ រួចចុចទាញ Table View រូចទំលាក់លើ File’s Owner។ បន្ទាប់មកប្រលែងនៅលើប៊ូតុងដែលលេចចេញទាំងពីរ​(dataSource & delegate។

Screen Shot 2013-12-31 at 2.19.16 PM

ចូលទៅក្នុង SimpleTableViewViewController.m រួចប្រកាសអថេរសំរាប់ផ្ទុកទិន្នន័យសំរាប់ TableView

នៅក្នុង viewDidLoad Method យើងត្រូវដាក់ Code  ដូចខាងក្រោម៖

យើងត្រូវដាក់បញ្ចូល Datasource methods ពីរគឺ tableView:numberOfRowInSection និង tableView:cellForRowAtIndexPath។

បន្ទាប់មកយើងនឹងបានលទ្ធផលដូចខាងក្រោម៖

Screen Shot 2013-12-31 at 2.57.24 PMបន្ទាប់មកយើងនឹងបង្ហាញពីរបៀបដាក់ Thumbnail ទៅក្នុង Table View។ ដំបូងយើងត្រូវដាក់រូបភាពចូលទៅក្នុង Project របស់យើង។ យើងត្រូវចុចRight click នៅកន្លែងដែលយើងចង់ផ្ទុករូបភាពនោះ រួចជ្រើសយក Add Files to “SimpleTableView”…

Screen Shot 2013-12-31 at 2.59.23 PMជ្រើសរើសរូបភាពដែលយើងត្រូវការ បន្ទាប់ចុច Add

Screen Shot 2013-12-31 at 2.59.35 PMដើម្បីដាក់ Thumbnail ចូលក្នុង TableView យើងត្រូវដាក់ Code ខាងក្រោម

នេះជាលទ្ធផលជាចុងក្រោយ

Screen Shot 2013-12-31 at 3.00.43 PM

Source code: https://github.com/puthrith/SimpleTableView