• 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

  • Test Post


    Hell world