Home / Developer  / เขียนแอพฯ iPhone กับ Xcode5 iOS7 ทำหน้า Slide View เลื่อนด้านข้าง

เขียนแอพฯ iPhone กับ Xcode5 iOS7 ทำหน้า Slide View เลื่อนด้านข้าง

สำหรับเขียนแอพฯ iPhone บน XCode5 และ iOS7 รอบนี้ จะเป็นการสอนวิธีสร้างหน้า Slide View แบบง่าย สำหรับทำหน้า Tutorial บน Apps ครับ

สำหรับการทำหน้า Slide นั้นหลายๆ แอพฯ ใช้เป็นหน้าจอแนะนำการใช้งานเบื้องต้นหรือเอาง่ายๆ ให้สังเกต UI ตัวใหม่ของ แอพพลิเคชัน Twitter สำหรับ Mobile เวอร์ชันใหม่ก็ได้ครับ

มาเข้าเรื่องกันเลยดีกว่า

Screen Shot 2556-12-18 at 11.33.14 PM

ก่อนอื่นให้ทำการเปิด XCode5 ขึ้นมาครับ สร้าง Single View Application ขึ้นมาใหม่ ตั้งค่าให้เรียบร้อย

Screen Shot 2556-12-18 at 11.33.37 PM

ตั้งค่าให้เรียบร้อย ชื่อตัวอย่างก็ SlideView ครับ ต่อมาให้เปิด MainStoryBoard ขึ้นมา ให้สร้าง ViewController ตัวใหม่มาวางรอไว้ และคราวนี้ให้เลือกใช้ Page View Controller มาวางไว้

Screen Shot 2556-12-18 at 11.35.04 PM

ลากเจ้า Page View Controller มาวางไว้บน MainStoryBoard

Screen Shot 2556-12-18 at 11.35.28 PM

ต่อมาเราต้องวางแผน แบ่ง StoryBoard ID ของ Page View Controller และ ViewController ธรรมดาๆ ขึ้นมาก่อน สำหรับ Page View Controller ให้สร้าง ID ชื่อว่า “PageViewController” และ ViewController ตั้งชื่อว่า “PageContentViewController” ครับ

Screen Shot 2556-12-18 at 11.36.57 PM

อีกตัวก็

Screen Shot 2556-12-18 at 11.46.39 PM

ลาก UIImage และ UILabel มาวางตกแต่งหน้า ViewController หรือ “PageContentViewController” ครับ

Screen Shot 2556-12-18 at 11.45.30 PM

สำหรับ Page View controller นั้นให้ปรับ Action ของมันตามรูปครับ เป็น “Scroll”

Screen Shot 2556-12-18 at 11.37.24 PM

ให้ไป Add New File ขึ้นมาใหม่ใน Project ของเรา

Screen Shot 2556-12-18 at 11.45.54 PM

ตั้งชื่อว่า “PageContentViewController” ครับ

Screen Shot 2556-12-18 at 11.46.04 PM

ให้ทำการ Add class ของ PageContentViewController เข้ากับหน้า ViewController ให้เรียบร้อยครับ

Screen Shot 2556-12-18 at 11.46.52 PM

เปิดไฟล์ PageContentViewController.h ขึ้นมา แล้วลาก Object จาก ViewController ไป Link กัน สร้าง IBOutlet ใหม่ตามนี้

Screen Shot 2556-12-18 at 11.47.48 PM

ตั้ง UIImage กับ BGImg

Screen Shot 2556-12-18 at 11.48.06 PM

ส่วน UILabel ก็เชื่อมกับ TitleText

ต่อมาเปิด หน้า ViewController.h ขึ้นมา แล้วเอาหน้าแรก สร้างปุ่มเชื่อม IBAction ขึ้นมาใหม่ ตั้งชื่อว่า Slider()

Screen Shot 2556-12-18 at 11.48.58 PM

เปิดไฟล์ PageContentViewController.h ขึ้นมา ทำการเพิ่ม Code ให้เป็นแบบนี้

เช็ค ViewDidLoad() ของ PageContentViewController.m เข้าไปตามนี้

ต่อมาเปิดไฟล์ ViewController.h ขึ้นมา Import ไฟล์ PageContentViewController.h เข้าไป แก้ไข IBAction ของ Slider() เหมือนข้างล่าง

หารูปประกอบ สัก 3 รูป เข้าไปวางไว้ใน Project ของเรา

Screen Shot 2556-12-18 at 11.53.31 PM

เปิดไฟล์ ViewController.m ขึ้นมา เพิ่ม Code เข้าไปใน ViewDidLoad() ดังนี้เพื่อเอาภาพ และข้อความไปโชว์แบบง่ายๆ ก่อน

เพิ่ม code สำหรับ Control เจ้า PageViewController ให้เก็บ Index ก่อน

ตามด้วย การเรียกแสดงผลของ PageContentViewController ให้เก็บเป็น Index ปรกติ

ฟังก์ชัน เล็กน้อยในการ เตรียมพร้อมสำหรับการส่งค่า Index ของหน้า แบบ Recursive ครับ

จัดาร IBAction เล็กน้อย

เมื่อใส่ครบแล้ว คราวนี้มาปรับในส่วนของ PageIndicator หรือ เจ้า วงกลม เล็กๆ ที่จะแสดงจำนวนหน้า ว่าตำแหน่งปัจจุบันนี้เราอยู่หน้าไหน ใน PageViewController ครับ ให้เข้าไปแก้ที่ AppDelegate.m ส่วนของ ฟังก์ชันเมธอด didFinishLaunchingWithOptions()

ทดสอบการรัน แอพพลิเคชันของเราดูให้ ลองปาดนิ้วไปทาง ขวา และ ซ้าย จะเป็นการเลื่อน View ครับ

iOS Simulator Screen shot Dec 19, 2556 BE, 12.01.07 AM

ปาดซ้าย

iOS Simulator Screen shot Dec 19, 2556 BE, 12.01.03 AM

Screen Shot 2556-12-19 at 12.01.21 AM

หวังว่าคงจะช่วยเหลือหลายๆ คนที่อยากทำหน้า Tutorial ได้บ้างนะครับ

อ้างอิง: http://www.appcoda.com/

Comments

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: