Hoe maak je een pop-upvenster in een app

Tijdens Ontwikkeling van mobiele applicaties Vaak wil een ontwikkelaar dat de gebruiker snel een bepaalde actie uitvoert, of wil een bericht weergeven bovenop de huidige app-weergave – dit wordt ook wel een pop-upvenster genoemd. Dit is handig om de eindgebruiker een proces te laten voltooien of een bericht te laten zien, zonder dat dit de voortgang in de app onderbreekt.

MobileTogether maakt het eenvoudig om pop-upvensters van elke gewenste grootte te configureren. Laten we eens kijken hoe dat werkt.

Wat is een pop-upvenster

Pop-upvensters in apps zijn ideaal om een korte melding weer te geven of de gebruiker de mogelijkheid te bieden om informatie in te voeren, zonder dat het hele scherm van het apparaat wordt overgenomen. Zodra de taak in het pop-upvenster is voltooid, wordt de gebruiker teruggebracht naar dezelfde plek in hun oorspronkelijke workflow, zodat ze verder kunnen werken in de app.

Pop-upvensters worden ook wel modale vensters genoemd, omdat ze tijdelijk interactie met de hoofdweergave van de app blokkeren. Ze zijn bijvoorbeeld ideaal om een melding weer te geven of iets anders dat de normale werking van een applicatie kan onderbreken.

In MobileTogether kunnen app-ontwikkelaars elke subpagina instellen als een pop-upvenster via de actie "Ga naar subpagina" in het actievenster.

Vink eenvoudig het vakje aan naast "Subpagina weergeven als modale dialoog" en geef de gewenste hoogte en breedte in voor uw pop-upvenster. Hier heb ik de pop-up zo ingesteld dat deze 75% van de schermbreedte inneemt met een hoogte van 65%. Het gebruik van percentages zorgt ervoor dat het modale venster goed wordt weergegeven op elk iOS-, Android- of Windows-apparaat.

U kunt indien gewenst ook afzonderlijke waarden definiëren voor portret- en landschapsmodus.

Het is eenvoudig om uw pop-up te testen met behulp van de ingebouwde simulator in MobileTogether Designer. Deze simulator stelt u in staat om uw pop-up op alle besturingssystemen en apparaten te testen.

U kunt het zelfs testen op uw eigen apparaat, direct vanuit de ontwerper, door op de knop Voorbeeld uitvoeren op apparaat in de werkbalk te klikken.

Hieronder ziet u hoe het pop-upvenster dat ik hierboven heb beschreven, er op mijn telefoon uitziet:

Ontdek hoe eenvoudig het is om pop-upvensters en talloze andere geavanceerde app-functies te definiëren door een app te ontwikkelen in de gratis MobileTogether Designer.