เอ้าดึง!! วิธีกำหนด Status bar ใน iOS 7 ให้ไม่ทับหน้าแอพใน PhoneGap 3

PhoneGap 3 สามารถทำออกมาเป็นแอพพลิเคชั่นได้หลากหลายระบบ iOS 7 ก็ไม่พ้นพลังอำนาจนี้ครับ (ก็แน่ล่ะสิ มันเปิดเว็บได้นี่)

เพียงแต่ถ้าเราทำการเพิ่ม iOS เป็น platform สำหรับ web project ของเราแล้ว จะพบว่าใน iOS 7 มันมีอะไรไม่ชอบมาพากล!?

ทำไมแอพเรามันเลื่อนลงไปซ้อนใต้ Status bar จั๋งซี่!!! (กระอักเลือกอ้อกๆ)

iOS 7 Status bar overlap problem in phonegap 3

ต้นเหตุของปัญหา

พวกเราบางคนอาจคิดว่าเราสร้าง bug เข้าให้แล้ว แต่ไม่ใช่ครับ! เพราะไม่ว่าใช้ PhoneGap แบบผม (ที่นี่)​ หรือเขียนด้วย Native (Objective-C) (เหยื่อ 1, เหยื่อ 2) ก็เงิบกันเป็นแถบๆ นั่นเพราะเป็นค่าเริ่มต้นที่กำหนดมาใน iOS 7 SDK นั่นเอง

วิธีการแก้ไข

แน่นอนว่าทาง PhoneGap Team เขาก็ไม่ได้นิ่งนอนใจ ออก plugin พิเศษ ชื่อ Status bar ครับ ชื่อตรงมาก ซึ่งผมคาดว่ามันคงจะกลายเป็น plugin สามัญไปในเร็วๆ นี้ เพราะถ้าใครใช้ PhoneGap ทำแอพ iOS 7 ก็คงต้องเพิ่ม plugin นี้เข้าไปใน project กันทุกคน (ยกเว้นคนที่อาจเขียน CSS กันระยะเผื่อเอาไว้แล้ว ซึ่งบางแอพผมก็ใช้วิธีนี้นะ)

1. ติดตั้ง status bar plugin ให้กับ PhoneGap project

ขั้นแรกต้องติดตั้ง Status bar plugin  ก่อน ซึ่งใช้การเชื่อมต่อ internet และใช้เวลาในการติดตั้งเล็กน้อยนะครับ เอาล่ะ ให้เปิด Command prompt (Windows) หรือ Terminal (OS X) ที่ folder ของ phonegap application ของเรา เพื่อรันคำสั่งต่อไปนี้ครับ

OS X

cordova plugin add org.apache.cordova.statusbar

Windows

cordova plugin add org.apache.cordova.statusbar

2. เรียกใช้ status bar plugin ใน function device ready

จากนั้นให้เราเรียกคำสั่งด้านล่างในส่วนของ function device ready เจ้าประจำของเราครับ

 StatusBar.overlaysWebView(false);

 

3. ทดสอบ

จากนั้นให้ทดสอบแอพของเราใน iOS Simulator หรือใครมีเครื่อง (พร้อมลงทะเบียนเสียเงิน $99 เรียบร้อย) ก็เสียบสายทดสอบแอพกันเลยครับ

Fix ios 7 status bar overlap phoengap 3

ก่อนไป

ขึ้นชื่อว่าการเขียน code ย่อมมาพร้อมกับ bug และความคิดใหม่ๆ เสมอ ถ้าใครติด ทำส่วนนี้ไม่ผ่าน comment คุยกันด้านล่างได้ครับ หรือถ้าใครคิดว่า status bar plugin ตัวนี้น่าจะทำอะไรได้เพิ่ม ก็ comment คุยกันด้านล่างได้เช่นกัน

กด like กด share ให้เพื่อนๆ ได้ตามสะดวกครับ แล้วอย่าลืมตาม YouTube, Fan page, และ Vimeo Channel ของผมกันนะ 🙂

สนใจเรื่อง Web Design, Adobe for Web, และ PhoneGap ฝาก Email รับบทความใหม่ๆ จากผมได้ที่นี่ครับ

ดูเนื้อหารวมเรื่อง PhoneGap ได้ที่ nextflow.in.th/phonegap

[sc:Promo-below-post ]

1 Comment. Leave new

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Menu