Share
Bij het ontwikkelen van mobiele applicaties zijn er tijden dat een volledige webbrowser nodig is, maar het is geen optie om uw gebruiker toe te staan uw applicatie te verlaten. In deze zelfstudie leert u hoe u een WebKit-instantie insluit in uw toepassing, zodat de gebruiker de app niet hoeft te verlaten om door een website te bladeren..
De Corona gebruiken inheems klasse en de showWebPopup () methode, zullen we een browserinstantie insluiten en een knop weergeven om terug te gaan naar de inhoud van de app.
Het eerste dat u hoeft te doen, is het platform selecteren waarop u uw app wilt uitvoeren, op deze manier kunt u de grootte kiezen voor de afbeeldingen die u wilt gebruiken.
Het iOS-platform heeft deze kenmerken:
Omdat Android een open platform is, zijn er veel verschillende apparaten en resoluties. Een paar van de meest voorkomende schermkenmerken zijn:
In deze zelfstudie concentreren we ons op het iOS-platform, dat zich specifiek ontwikkelt voor distributie naar een iPhone / iPod touch.
We zullen een basisinterface maken met een knop die de webweergave zal oproepen wanneer deze wordt ingedrukt. We zullen ook werken met tekst die als feedback zal dienen.
Afhankelijk van het apparaat dat u hebt geselecteerd, moet u de afbeeldingen in de aanbevolen PPI exporteren, u kunt dit doen in uw favoriete foto-editor.
Ik gebruikte de Grootte aanpassen ... functie in de Preview-app in Mac OS X.
Vergeet niet om de afbeeldingen een beschrijvende naam te geven en deze in uw projectmap op te slaan.
Tijd om onze applicatie te schrijven!
Open de gewenste Lua-editor (elke teksteditor werkt, maar u hoeft geen syntax te markeren) en bereid u voor op het schrijven van uw geweldige app.
Eerst verbergen we de statusbalk, dit is de balk bovenaan het scherm met de tijd, het signaal en andere indicatoren.
display.setStatusBar (display.HiddenStatusBar)
Nu voegen we de achtergrond van de app toe.
Accentsconagua
lokale achtergrond = display.newImage ("background.png") Deze regel maakt de lokale variabele achtergrond en gebruikt de tonen API om de opgegeven afbeelding aan het werkgebied toe te voegen. Standaard wordt de afbeelding toegevoegd aan 0,0 met de linkerbovenhoek als referentiepunt.
Herhaal het proces met het logo, plaats het in het midden van het podium.
lokaal logo = display.newImage ("logo.png", 20, 20) De volgende regels maken de tekst in het midden van het werkgebied, normaal hebben we slechts één TextField nodig, maar blijkbaar werkt het teken newline (\ n) niet met de tekst. newText methode op dit moment.
local aboutText = display.newText ("", 0, 0, native.systemFontBold, 13) aboutText: setReferencePoint (display.CenterReferencePoint) aboutText.x = display.contentWidth * 0.5 aboutText.y = display.contentHeight * 0.5 - 30 aboutText: setTextColor (238, 238, 238) - #EEEEEE aboutText.text = "Bedankt voor het gebruik van MobileTuts +!" local aboutText2 = display.newText ("", 0, 0, native.systemFontBold, 13) aboutText2: setReferencePoint (display.CenterReferencePoint) aboutText2.x = display.contentWidth * 0.5 aboutText2.y = aboutText.y + 17 aboutText2: setTextColor ( 238, 238, 238) - #EEEEEE aboutText2.text = "Bezoek voor meer informatie en updates:" local link = display.newText ("", 0, 0, native.systemFontBold, 13) link: setReferencePoint (display.CenterReferencePoint ) link.x = display.contentWidth * 0.5 link.y = aboutText2.y + 30 link: setTextColor (229, 175, 6) - # E5AF06 link.text = "http://mobile.tutsplus.com/app" Deze knop roept de webweergave aan, deze code voegt deze toe aan het podium.
local goButton = display.newImage ("goButton.png") goButton: setReferencePoint (display.CenterReferencePoint) goButton.x = display.contentWidth * 0.5 goButton.y = link.y + 50 Wanneer de gebruiker de webweergave activeert, wordt onder in het scherm een balk weergegeven. Deze balk bevat een knop die de webweergave verwijdert en de app-inhoud weergeeft.
De volgende code voegt de onderste balk toe en maakt deze standaard verborgen.
local bottomBar = display.newImage ("bottomBar.png", 0, 436) bottomBar.isVisible = false De terugknop die de webweergave verwijdert (standaard ook verborgen).
local back = display.newImage ("backButton.png", 286, 448) back.isVisible = false Deze functie wordt uitgevoerd met de knop Terug. Het verbergt de onderste balk en terug knop en het verwijdert ook de pop-up.
functie terug: tik op (e) bottomBar.isVisible = false back.isVisible = false native.cancel WebPopup () einde
Deze code roept de pop-up op en maakt de onderste balk en terugknop zichtbaar voor de gebruiker.
functie goButton: tik op (e) native.showWebPopup (0, 0, 320, 436, "http://mobile.tutsplus.com/author/carloz-yanez/") - Terugknoppen zichtbaarheid bottomBar.isVisible = true back. isVisible = true end
De web-popup-methode heeft de volgende parameters:
De volgende regels voegen de vereiste luisteraars toe aan de schermknoppen.
goButton: addEventListener ("tap", goButton) terug: addEventListener ("tik op", terug) 
Als alles werkt zoals verwacht, zijn we bijna klaar om onze app te bouwen voor apparaattesten. Nog een ding: het pictogram van de toepassing.
Met behulp van de afbeeldingen die u hebt gemaakt voordat u een mooi en goed uitziend pictogram kunt maken, is de pictogramgrootte voor het iPhone-pictogram 57x57px (114x114px voor het retina-display van iPhone 4), maar de iTunes Store gebruikt een 512x512px-versie, dus het is beter om uw pictogram te maken in deze maat.
Het hoeft niet de afgeronde hoeken of de transparante schittering te hebben, iTunes en de iPhone zullen dat voor je doen.
Door webinhoud weer te geven vanuit uw applicatie, kunnen uw app-gebruikers uw app niet verlaten om toegang te krijgen tot een website en ontstaat over het algemeen een aangenamere gebruikerservaring. Bedankt voor het lezen van deze tutorial. Ik hoop dat je het nuttig hebt gevonden!
