Bài 3 – TableView

Nháy chuột phải vào folder baidau, new file

Chọn CoCoa Class, đặt tên là third, chuyển chuột xuống ô dưới để chữ Next hiện lên, Create. Các bước tương tự khi tạo class second.

Sửa import thành import UIKit sẽ hết lỗi đỏ

Bây giờ nháy vào Main.storyboard,

Ở dưới bên phải, chỗ Object library, nháy chuột phải vào view Controller, giữ, kéo nó vào trong storyboard, cứ để đè lên cái đang có cũng được.

Trên đỉnh của nó, bạn nháy chuột để cái chấm vàng ngoài cùng hiện màu xanh

Phía trên bên phải, tìm cái biểu tượng có tên identity inspector, chỗ ô class, nháy chấm xanh góc phải để nó xổ ra, tìm xuống dưới chọn class third.

Bây giờ quay về third.swift, copy lệnh viewDidLoad vào

override func viewDidLoad() {

        super.viewDidLoad()

}

Khai báo một tableView

var tableView: UITableView!

Tiếp theo, định vị, nhét vào view, đổ nền cho màn hình. Copy các dòng sau vào trong viewDidLoad.

let c = UIScreen.mainScreen().bounds.size.height

tableView = UITableView(frame: CGRect(x: 10, y: 20, width: 325, height: c-50))

let the = tableView

the.registerClass(UITableViewCell.classForCoder(), forCellReuseIdentifier: "iden")

 the.dataSource = self

  the.delegate = self

   view.backgroundColor = UIColor.whiteColor()

    view.addSubview(the)

Sẽ có lỗi đỏ hiện ra, bạn thêm các chữ sau lên đầu class third.

UITableViewDataSource, UITableViewDelegate

Copy mảng sau lên trên viewDidLoad

var qua=["Pear","Banana", "Cashew", "Orange", "Water melon", "Peach", "Grape", "Mango", "Plum" ]

Tạm thời sẽ có lỗi đỏ cạnh chữ class, kệ nó đấy đã.

Hãy xem code trước.

Dòng let c = UIScreen.mainScreen().bounds.size.height là để lấy chiều cao của màn hình, vì ta không rõ điện thoại người dùng loại nào nên ta dùng lệnh này lấy ra số c là chiều dài màn hình.

Ta dùng số c này để xác định chiều dài bảng trong chỉ số height trong dòng định vị ở dưới, bảng sẽ dài c-50 tức ngắn hơn màn hình một chút. Khoảng thừa ra ta sẽ để nút back quay về màn hình trước.

Copy các dòng sau vào trên ngoặc đóng cuối cùng

func numberOfSections(in tableView: UITableView) -> Int {

        return 1

    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return qua.count

    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCellWithIdentifier("iden", forIndexPath: indexPath)

       

        cell.textLabel?.text = qua[indexPath.row]

        cell.textLabel?.font = UIFont(name:"Futura", size:18)

        cell.textLabel?.textColor=UIColor.blueColor()

        //cell.accessoryType = .DisclosureIndicator

        return cell

    }

    func tableView(tableView: UITableView,

                   didSelectRowAtIndexPath indexPath: NSIndexPath) {

        let row = qua[indexPath.row]

        let so = indexPath.row

             

    }

override func prefersStatusBarHidden() -> Bool {

        return true

    }

Quay về ViewController.swift, sửa phương thức nutnext ở dưới thành let vc = third()

Bây giờ chạy thử để có màn hình tiếp theo như sau

Hãy nhìn vào code một chút.

Func numberOfSections là thủ tục, kệ nó.

Func tableView thứ nhất trả về qua.count tức số dòng của danh sách

Func tableView tiếp có các dòng

cell.textLabel?.text = qua[indexPath.row]

cell.textLabel?.font = UIFont(name:"Futura", size:18)

cell.textLabel?.textColor=UIColor.blueColor()

Dùng để set chữ trong mảng qua ra, định font, tô màu

Nếu muốn mỗi dòng có thêm cái mũi tên hướng ở cuối, ta thêm dòng sau vào

cell.accessoryType = .DisclosureIndicator

Func tableView tiếp theo có hai dòng

let row = qua[indexPath.row]

 let so = indexPath.row

Hai dòng này chưa dùng để làm gì, đây là chỗ ta sẽ code khi người dùng chạm vào dòng thì làm gì chẳng hạn.

Bây giờ copy phương thức toast xuống dưới.

    func toast(t:String){

        let toastLabel = UILabel(frame: CGRectMake(view.frame.size.width/2 - 150, 150, 300, 35))

        toastLabel.backgroundColor = UIColor.blackColor()

        toastLabel.textColor = UIColor.whiteColor()

        toastLabel.textAlignment = NSTextAlignment.Center;

        self.view.addSubview(toastLabel)

        toastLabel.text = t

        toastLabel.alpha = 1.0

        toastLabel.layer.cornerRadius = 10;

        toastLabel.clipsToBounds  =  true

        UIView.animateWithDuration(4.0, delay: 0.5, options: .CurveEaseOut, animations: {

            toastLabel.alpha = 0.0

        }, completion: nil)

    }

Thêm dòng sau vào func tableView cuối cùng

toast("Bạn vừa chạm vào dòng "+row)

Chạy thử để thấy màn hình phản ứng khi ta dùng chuột chạm vào dòng

Bây giờ thay chữ row trong lệnh toast("Bạn vừa chạm vào dòng "+row) thành toast("Bạn vừa chạm vào dòng "+String(so))

Chạy thử xem ra cái gì, bạn sẽ thấy nó hiện số dòng không đúng, vì đó là chỉ số mảng, để đúng thì cần cộng thêm 1 vào.

Bây giờ giả sử ta muốn xoá một dòng thì sao, copy đoạn sau vào

func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [UITableViewRowAction]?

    {

        let delete = UITableViewRowAction(style: UITableViewRowActionStyle.Default, title: "Xoá"){(UITableViewRowAction,NSIndexPath) -> Void in

           

            self.qua.removeAtIndex(indexPath.row)

            //xoá rồi load lại bảng

            tableView.reloadData()

            

        }

        let edit = UITableViewRowAction(style: UITableViewRowActionStyle.Normal, title: "Sửa"){(UITableViewRowAction,NSIndexPath) -> Void in

            //làm gì đó

        }

    

        edit.backgroundColor = UIColor.blackColor()

        return [delete,edit]

    }

Chạy thử, di chuột vào dòng trượt sang trái, bạn sẽ thấy hai chữ sửa, xoá hiện ra. Ấn sửa không có gì vì ta chưa code, ấn xoá sẽ mất dòng.

Chú ý là vì ta xoá nhưng mảng danh sách vẫn thế, nên lần sau khi bật ra nó vẫn cứ đủ cả như ban đầu. Muốn xoá mà lần sau mở lại mất đi thì ta phải can thiệp vào danh sách, để lần sau chỉ load cái còn lại thôi. Tôi sẽ hướng dẫn bạn ở các bài nâng cao sau này.

Bây giờ ta thêm cái nút Quit xuống dưới danh sách.

Trên dòng override, copy vào

var bu1:UIButton!

Trong viewDidLoad, copy vào các dòng định vị, đặt tên, tô màu chữ.

bu1 = UIButton(frame: CGRect(x:100, y: c-35, width: 100, height: 32))

        bu1.setTitle("Quit",forState: .Normal)

        bu1.setTitleColor(UIColor.blueColor(), forState: .Normal)

        bu1.backgroundColor = UIColor.lightGrayColor()

        view.addSubview(bu1)

Copy hàm điều khiển nút xuống dưới

func nut(sender: UIButton){

        self.dismissViewControllerAnimated(true, completion: nil)

    }

Thêm dòng gắn nút với phương thức vào trong viewDidLoaD

bu1.addTarget(self, action: #selector(third.nut(_:)), forControlEvents: UIControlEvents.TouchUpInside)

Chạy thử để thấy cái nút đã hoạt động nhưng chưa vào giữa. Thử xem bạn có cách nào cho nó vào đúng giữa không?

Gợi ý, dùng dòng sau để lấy chiều rộng màn hình.

let r = view.frame.size.width, giá trị x sẽ dùng r để căn chỉnh cùng với độ rộng của nút.

Như vậy bài này ta đã làm một danh sách để hiển thị các chữ ta muốn trong mảng.

Ta cũng học cách xoá dòng, lấy chiều dài, rộng dựa trên kích thước iphone người dùng.

Làm trong code rất đơn giản, bạn không cần quan tâm storyboard nữa.

Nếu co kéo bảng trong storyboard, sẽ rất phức tạp với các trò sắp xếp, kết nối, chỉnh constraint.

Nếu thích hình thức, bạn có thể vẽ vời trong cách trình bày ứng dụng. Còn khi làm bên trong thì nên hướng đến cái đơn giản và hiệu quả.