Simple Popover


ตัวอย่างนี้เราจะมาทำ Popover แบบง่ายๆกันนะครับ

 

ภาพตัวอย่างตอนเร็จแล้ว

Simulator Screen Shot Dec 21, 2558 BE, 3.15.41 PM

 

สร้างโปรเจคใหม่ขึ้นมา

Screen Shot 2558-12-21 at 3.18.47 PM

 

Screen Shot 2558-12-21 at 3.19.34 PM

 

Popover จะทำทำงานเฉพาะ iPad เท่านั้นนะครับ ถ้าใน iPhone มันจะแค่เด่งขึ้นมาบังเฉยๆ

ฉนั้นเลยตั้งให้เป็น iPad App ซะเลย

Screen Shot 2558-12-21 at 3.20.46 PM

 

 

วางปุ่มไปหนึ่งปุ่ม เราจะให้ Popover จากปุ่มนี้

Screen Shot 2558-12-21 at 3.42.23 PM

 

Screen Shot 2558-12-21 at 3.42.45 PM

 

 

Screen Shot 2558-12-21 at 3.46.11 PM

 

Screen Shot 2558-12-21 at 3.46.50 PM

 

จะได้โค้ดหน้าตาประมาณนี้

Screen Shot 2558-12-21 at 3.47.20 PM

 

จากนั้น คลิ๊กขวาที่ navigation ด้านซ้าย เลือก New file… เพื่อสร้าง view ใหม่สำหรับ popover

Screen Shot 2558-12-21 at 3.50.08 PM

Screen Shot 2558-12-21 at 3.50.29 PM

Screen Shot 2558-12-21 at 3.50.51 PM

 

Screen Shot 2558-12-21 at 3.53.38 PM

 

แก้ขนาดของ view เป็น 320 x 216

Screen Shot 2558-12-21 at 3.54.23 PM

Screen Shot 2558-12-21 at 3.55.16 PM

 

เพิ่มโค้ดใน ViewController

 


@IBAction func tapOnButton(sender: UIButton) {
        
        
        let myPopover = PopupViewController(nibName: "PopupViewController", bundle: nil)
        myPopover.modalPresentationStyle = .Popover
        
        
        
        let pop:UIPopoverPresentationController = myPopover.popoverPresentationController!
        
        //แสดงใน view ไหน
        pop.sourceView = self.view
        
        
        //ตำแหน่งที่จะให้ลูกศรชี้
        let rect:CGRect = self.view.convertRect(sender.bounds, fromCoordinateSpace: sender)
        pop.sourceRect = rect
        
        
        
        //แสดง
        self.presentViewController(myPopover, animated: true, completion: nil)
        
    }




Screen Shot 2558-12-21 at 4.01.59 PM

 

ทดลอง RUN จะได้ผลลัพธ์ตามรูป จะเห็นว่าขนาดของ Popover จะผิดอยู่

 

Simulator Screen Shot Dec 21, 2558 BE, 4.04.49 PM

 

แก้ไขได้ด้วยการใส่โค้ด

 


self.preferredContentSize = CGSizeMake(320, 216)

 

 

ใน PopupViewController.swift

Screen Shot 2558-12-21 at 4.08.41 PM

 

ทดลอง RUN ดูอีกครั้งก็จะเห็นว่าเราไปด้ popover ขนาดที่เราต้องการแล้ว

 

Simulator Screen Shot Dec 21, 2558 BE, 4.11.20 PM

 

 

ต่อไปเราจะใส่ datePicker ลงไปใน Popover เมื่อเลือกเสร็จก็จะให้แสดงเป็น title ในปุ่ม

 

Screen Shot 2558-12-21 at 4.15.05 PM

Screen Shot 2558-12-21 at 4.15.19 PM

Screen Shot 2558-12-21 at 4.16.19 PM

Screen Shot 2558-12-21 at 4.16.48 PM

จะได้หน้าตาประมาณนี้

Screen Shot 2558-12-21 at 4.17.21 PM

 

เราจะใช้ Closures ในการบอกว่า user เลือกวันที่อะไร

 


var callback:(NSDate)->Void = {(sender:NSDate) -> Void in }

 

Screen Shot 2558-12-21 at 4.26.29 PM

Screen Shot 2558-12-21 at 4.26.37 PM

 

Screen Shot 2558-12-21 at 4.26.43 PM

 

เพิ่มฟังก์ชัน init ใหม่โดยให้ส่ง Closures มาตอน init เลย

 


init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: NSBundle?, Handle handel:(NSDate)->Void) {
        super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
        
        
        self.callback = handel
    }

 

Screen Shot 2558-12-21 at 4.29.09 PM

 

ไปแก้โค้ดที่ ViewController.swift ด้วย

จาก

Screen Shot 2558-12-21 at 4.32.06 PM

เป็น


let myPopover = PopupViewController(nibName: "PopupViewController", bundle: nil) { (sender) -> Void in
            
            print(sender)
        }

 

 

Screen Shot 2558-12-21 at 4.32.45 PM

 

ทดลอง RUN จะเห็นว่าเมื่อเราเปลี่ยนวันที่บน DatePicker มันก็จะ print ออกมา

Screen Shot 2558-12-21 at 4.36.24 PM

 

 

ที่เหลือก็ทำต่อเองลยคราบ ฮาฮา

Final Project