มาจัด Layout และระบุที่อยู่ให้กับ MapView กับ Xcode 8 กันเถอะ

 

วันนี้เราจะนำวิธีการจัด Layout มาประยุกต์ใช้ในการจัด Layout ให้กับ MapView เพื่อสร้างแอปพลิเคชันที่ใช้ในการระบุที่อยู่กันค่ะ โดยใช้ภาษา Swift 3.0 ใน Xcode 8 

ลองมาดูภาพตัวอย่างหน้าตาแอปพลิเคชันที่เราจะสร้างกันนะคะ

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

        เนื่องจากแอปพลิเคชันของเราจะต้องมีการทำงานของ Map เราจึงต้องมีการเชื่อม Framework ซึ่งเราจะต้องเข้ามาเพิ่ม Framework ในหน้า General ของโปรเจคที่เราพึ่งสร้างมา โดยการเข้าไปกดที่เครื่องหมาย + ในหัวข้อ Linked Freameworks and Libraries แล้วเข้าไปค้นหา Framework ที่มีชื่อว่า MapKit.framework แล้วกด Add เข้ามาในโปรเจคของเราได้เลยค่ะ 

จากนั้นเราจะเข้าไป Main.storyboard แล้วนำ Object ที่มีชื่อว่า Map Kit View ลากมาที่ View Controller  จากนั้นกำหนดขนาดของ Map View ตามที่ต้องการให้แสดงบนหน้าจอได้เลยค่ะ

จากนั้นเราจะมาลองจัด Layout กันนะคะ โดยจากภาพจะเห็นว่าเราต้องการให้ MapView มีขนาดเต็มหน้าจอ ซึ่งใน Xcode8 นี้เราสามารถใช้การจัดตำแหน่งแบบ Autosizing Mask ไปพร้อมๆ กับการจัดแบบ Constraints ดังนั้นเราจะเลือกจัด Layout โดยการกำหนดระยะในแบบ Constraints ตามภาพค่ะ เมื่อได้ขนาดตามที่ต้องการแล้ว ก็กดที่ Add Constraints ค่ะ

ต่อไปเราจะมาเขียนโค้ดกันนะคะ ในส่วนของการระบุที่อยู่ใน Map 

โดยจะเริ่มจากการ  ประกาศ Outlet ให้กับ MapView 

เราจะมากำหนดสถานที่ที่เราต้องการระบุให้แสดงใน MapView กันค่ะ 

จะกำหนดโดยการใช้ละติจูดและลองจิจูดของสถานที่นั้น

ต่อไปจะเป็นการกำหนดระยะและ Center ของสถานที่ที่จะแสดงบน MapView ค่ะ

และสุดท้ายเราจะมาปักหมุดกำหนด Title และ Subtitle ให้กับหมุดบน MapView

และนี่คือหน้าตาของแอปพลิเคชันในวันนี้ค่ะ 

ไม่ยากเลยใช่ไหมคะ กับ Xcode 8 ยังไงก็นำไปประยุกต์ใช้ดูนะคะ <3