phonegap - หน้าจอเริ่มต้นสำหรับแอป Android


84

ใครช่วยแนะนำวิธีเพิ่มหน้าจอสแปลชลงในแอพ Android ที่ใช้ HTML5 Phonegap ฉันแค่ต้องการให้แสดงเป็นเวลา 5 วินาทีเมื่อโหลด นอกจากนี้ - ใครสามารถให้คำแนะนำได้ว่าควรมีขนาดเท่าใด


2
เพียงแค่คำแนะนำที่เป็นมิตรไม่ควรใส่หน้าจอสแปลชลงในแอปมือถือไม่ว่าในกรณีใด ๆ จะทำให้ผู้ใช้ของคุณโกรธมาก
Kurtis Nusbaum

37
ฉันขอโทษ Kurtis ฉันไม่แน่ใจว่าคุณกำลังสนับสนุนอะไร มีแอพมือถือยอดนิยมมากมายที่แสดงหน้าจอสแปลชในขณะที่กำลังโหลดโดยไม่สร้างความรำคาญให้กับผู้ใช้ iOS ยังมีภาพที่เกิดจาก Default.png เพื่อจุดประสงค์นี้โดยเฉพาะ
Devgeeks

6
@Devgeeks ฉันเห็นด้วยกับ Kurtis Nusbaum สำหรับกรณีที่คุณกำลังแสดงหน้าจอเริ่มต้นสำหรับสิ่งนี้ หากแอปพลิเคชันของคุณใช้เวลาในการเริ่มต้นใช้งานนานหน้าจอเริ่มต้นที่มีตัวบ่งชี้กิจกรรมน่าจะดีกว่าไม่มีอะไรเลยซึ่งอาจเป็นเหตุผลสำหรับแอปพลิเคชันยอดนิยมที่คุณกำลังพูดถึง มิฉะนั้นจะมีแอพมือถือยอดนิยมจำนวนเท่ากัน (หรือมากกว่า) ที่ไม่แสดงหน้าจอเริ่มต้น โดยพื้นฐานแล้วให้ผู้ใช้เข้าสู่แอปพลิเคชันโดยเร็วที่สุด หน้าจอเริ่มต้น 5 วินาทีทุกครั้งเป็นความคิดที่ไม่ดีเนื่องจากจะทำให้ผู้ใช้หงุดหงิดในระยะยาว
Kinjal Dixit

1
ได้โปรด ... อย่าทำ! Splashscreen ไม่ใช่ความคิดที่ดี :) ถูกแล้วที่แอปยอดนิยมบางตัวมี แต่ไม่ได้หมายความว่าเป็นความคิดที่ดี;)
ŠtěpánVíteček

1
ฉันคิดว่าหน้าจอสแปลชเป็นเรื่องของรสนิยม / การออกแบบ แน่นอนว่าคน UX ส่วนใหญ่จะไม่แนะนำให้ใช้ แต่ฉันไม่เห็นด้วยกับพวกเขา หน้าจอเริ่มต้น 1 วินาทีจะไม่ทำอันตรายใด ๆ แต่จะเพิ่ม "บุคลิกภาพ" และกำหนด "ธีม" ให้กับแอปของคุณทำให้โดดเด่นกว่าแอป "bootstrapish" หลายพันรายการ ในอุปกรณ์ของฉันแอปที่ใช้ประจำวันมากกว่า 70% มีหน้าจอเริ่มต้น :)
numediaweb

คำตอบ:


176

เพื่อให้มีหน้าจอในโปรแกรมประยุกต์ PhoneGap Android คุณจะต้องใส่ของsplash.pngไฟล์ลงres/drawable-ldpi, res/drawable-mdpi, ,res/drawable-hdpi res/drawable-xhdpiโดยที่ไดเร็กทอรีเหล่านั้นแสดงถึงจุดต่อนิ้วต่ำกลางสูงและใหญ่เป็นพิเศษ คุณจะต้องปรับขนาด splash.png (ชื่อไฟล์มีความสำคัญที่นี่) สำหรับแต่ละไดเร็กทอรีมิฉะนั้น Android จะขยายให้คุณ

ขนาดของแต่ละภาพควรเป็น:

  • xlarge (xhdpi): อย่างน้อย 960 x 720
  • ขนาดใหญ่ (hdpi): อย่างน้อย 640 x 480
  • ปานกลาง (mdpi): อย่างน้อย 470 x 320
  • เล็ก (ldpi): อย่างน้อย 426 x 320

จากนั้นในคลาส Java หลักของคุณคลาสที่ขยาย DroidGap คุณจะต้องเพิ่มหนึ่งบรรทัดและแก้ไขอีกบรรทัด เพิ่มครั้งแรก:

super.setIntegerProperty("splashscreen", R.drawable.splash);

บรรทัดนี้ควรจะแสดงขึ้นภายใต้แต่ก่อนsuper.onCreate super.loadUrlจากนั้นคุณจะต้องแก้ไขวิธี loadUrl ของคุณเพื่อหยุดชั่วคราวเป็นเวลา 5 วินาทีก่อนที่จะโหลดหน้าหลัก จะมีลักษณะดังนี้:

super.loadUrl("file:///android_asset/www/index.html", 5000);

ที่ควรทำเพื่อคุณ

ฉันเพิ่งได้อัปเดตการทำงานของ SplashScreen บน PhoneGap Android ตอนนี้แอปหลักโหลดในขณะที่กำลังแสดงหน้าจอเริ่มต้น นี่เป็นการปรับปรุงครั้งใหญ่เมื่อเทียบกับการโทรหน้าจอเริ่มต้นที่บล็อก อ่านข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลงในบล็อกของฉัน


1
สวัสดีฉันเพิ่งได้รับข้อผิดพลาดที่ระบุว่า 'แอปพลิเคชันหยุดทำงานกะทันหันเมื่อใช้งานข้างต้น
นักเต้น

2
ดูเหมือนจะมีปัญหาในการใช้พารามิเตอร์การหมดเวลาใน PhoneGap 1.2 ดูstackoverflow.com/questions/8100219/…
Paul Beusterien

1
หากฉันลบการหมดเวลา 5 วินาทีออกไปแอปจะรวบรวมและแสดงผลสั้น ๆ เมื่อโหลด - ดังนั้นดูเหมือนว่าการรวมข้างบนกับการแก้ไขการหมดเวลาจะใช้งานได้ดี .. ไชโยสำหรับความช่วยเหลือของคุณ
Dancer

6
การให้ผู้ใช้รอ 5 วินาทีเป็นคำแนะนำที่แย่มาก
grahamparks

1
@BallisticPugh คุณต้องการใช้ภาพ 9 แพทช์เพื่อให้คุณสามารถควบคุมสิ่งที่ยืดได้
Simon MacDonald


3

ในแอป Phonegap เวอร์ชัน Android ของฉันดีบักเกอร์ Eclipse จะแสดงอารมณ์ฉุนเฉียวหากคุณตั้งค่าหน้าจอเริ่มต้นหรือแม้แต่กล่องโต้ตอบ "กำลังโหลด" ก่อนที่จะเรียก loadUrl

ทั้งสองอย่างจะทำงานในแอปจริงที่ติดตั้งบนอุปกรณ์ แต่จะทำให้การแก้ไขข้อบกพร่องของคุณเสียหาย ดังนั้นฉันจึงวางมันไว้ข้างหลัง loadUrl ซึ่งพวกเขาไม่สามารถทำอันตรายใด ๆ และยังแสดงได้ดีต่อหน้าแอป

public class App extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.loadUrl("file:///android_asset/www/index.html",5000);
    super.setStringProperty("loadingDialog", "Starting your app...");
    super.setIntegerProperty("splashscreen", R.drawable.splash);
    ...
}...

3

ฉันประสบปัญหานี้ใน phonegap android ด้วย .. แต่ตอนนี้ฉันได้วิธีแก้ปัญหาแล้ว

super.setIntegerProperty("splashscreen", R.drawable.splash);(find image under drawable folder named splash,so put splash.png under drawable folder)
super.loadUrl("file:///android_asset/www/index.html",15000);(splash screen will show 15 sec.

โปรดแก้ไขไฟล์ java หลักของคุณภายใต้โฟลเดอร์ src ในไดเรกทอรีโครงการของคุณ

public class radiobiafra extends DroidGap
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
         super.onCreate(savedInstanceState);

         super.setIntegerProperty("splashscreen", R.drawable.splash);
         super.loadUrl("file:///android_asset/www/index.html",15000);
     }
}

1
สามารถพบได้ตามปกติ:platforms/android/src/com/[your app name]/[Your App Name.java
Ian Jamieson

ฉันไม่พบไฟล์. java ในเส้นทางดังกล่าว
Prak

0

สิ่งนี้อาจตอบสนองความต้องการของคุณ ช่วยให้คุณปรับแต่งและเพิ่มการตั้งค่า config.xml รูปภาพและ Splashscreens ที่เกี่ยวข้องทั้งหมดในอินเทอร์เฟซที่ใช้งานง่าย

ขอแนะนำให้ดาวน์โหลดไฟล์และติดตั้งด้วยตนเอง ดูเหมือนว่าโปรแกรมติดตั้งอากาศบนเว็บจะไม่ทำงาน

http://aj-software.com/configap/index.html


0

การใช้ Cordova> = 3.6 และสร้างแอปของคุณด้วย Cordova Command-Line Interface คุณสามารถกำหนดค่าหน้าจอเริ่มต้นจากconfig.xmlไฟล์ได้ นี่คือตัวอย่างสำหรับ Android:

<platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
<preference name="SplashScreenDelay" value="10000" />

นอกจากนี้ยังมีปลั๊กอินเฉพาะสำหรับแสดง / ซ่อนหน้าจอเริ่มต้นโดยใช้โปรแกรม

ดูเอกสาร Cordovaสำหรับข้อมูลเพิ่มเติม

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.