Scrollbare tabellen voor mobiele apps die data gebruiken

Gebruikers van mobiele apparaten verwachten altijd maximale informatie, maar dan wel op een zo gebruiksvriendelijk mogelijke manier. Echter, kleine schermformaten kunnen een compromis noodzakelijk maken. Ontwikkelaars van mobiele apps worden uitgedaagd om data, navigatie-elementen en ondersteunende informatie allemaal in een aantrekkelijke lay-out te integreren, anders riskeren ze gebruikers te frustreren, terwijl die gebruikers potentiële klanten, collega's of leidinggevenden kunnen zijn. MobileTogether 2.1 introduceert scrollende tabellen en andere innovatieve functies om ontwikkelaars te helpen apps te creëren die data op een elegante manier presenteren en op dezelfde manier werken op alle apparaten.

Scrollbare tabellen

MobileTogether 2.1 stelt ontwikkelaars in staat om tabellen te definiëren die horizontaal of verticaal kunnen worden gescrolld, waarbij een kop en voettekst op vaste posities blijven staan. Horizontaal scrollen maakt het mogelijk om meer kolommen van een brede tabel weer te geven zonder de tekst tot een onleesbare grootte te verkleinen. Verticaal scrollen kan ervoor zorgen dat belangrijke informatie altijd zichtbaar blijft op het scherm, wat de leesbaarheid verbetert.

Verticaal scrollen is vooral handig voor tabellen met herhalende rijen, omdat de ontwikkelaar op het moment van ontwerp niet weet hoeveel rijen data er uiteindelijk op het scherm van een gebruiker getoond kunnen worden. Hieronder staat een eenvoudig 4-kolommen tabel met herhalende rijen, gemaakt in de MobileTogether Designer:

In het dialoogvenster "Nieuwe tabel" hebben we het aantal kolommen, het aantal rijen (dat dynamisch kan worden aangepast) en de rijen voor de kop en voettekst gedefinieerd. Vervolgens hebben we labels toegevoegd aan de kolomkoppen, elementen aan de voettekst en eigenschappen gespecificeerd voor tekstgrootte en -kleur.

We kunnen verticale scrollbalken implementeren door de maximale hoogte van de tabel in te stellen via het hulpmenu "Stijlen en eigenschappen". Vervolgens kunt u kiezen of de hele tabel gescrolld wordt, of alleen de rijen tussen de kop en de voettekst. De maximale hoogte kan worden ingesteld als een percentage, een specifiek aantal pixels, of u kunt ervoor kiezen om de rest van het scherm automatisch te vullen.

Voor ontwikkelaars die de beschikbare ruimte op het scherm willen maximaliseren voor het weergeven van data, bevat MobileTogether 2.1 een nieuwe eigenschap "Pagina" waarmee de titelbalk van de pagina verborgen kan worden:

De lichtblauwe onderbalk van onze tabel bevat navigatie-elementen waarmee de gebruiker een andere maand of jaar kan selecteren. De kolom met het jaar in het midden van de onderbalk is gemaakt met behulp van de knop "Join" in de MobileTogether-werkbalk om kolom 2 en kolom 3 samen te voegen tot een bredere controle. U kunt kolommen horizontaal of verticaal samenvoegen, of ze later weer opsplitsen als u van gedachten verandert. U kunt zelfs een hele nieuwe tabel in een bestaande cel plaatsen om een hiërarchische tabel te creëren en zo de perfecte lay-out te ontwerpen voor complexe gegevens.

Verticale lijnen

MobileTogether 2.1 introduceert ook een nieuwe verticale lijnfunctie. Als u een verticale lijn tussen kolommen van een tabel wilt toevoegen, kunt u er eenvoudig een slepen vanuit het hulpmiddelvenster en deze op de gewenste positie plaatsen, zoals te zien is in de ontwerpweergave hieronder. De verticale lijn wordt geplaatst in een nieuwe kolom van de tabel, en u kunt de eigenschap "breedte" van de kolom instellen op "wrap_content" om de minimale ruimte te gebruiken.

De eigenschappen van verticale lijnen kunnen worden aangepast, net als die van horizontale lijnen. Het venster "Stijlen en eigenschappen" voor elke verticale lijn stelt u in staat om de lijndikte, stijl, kleur en de linker- en rechtermarge in pixels te specificeren.

MobileTogether stelt u in staat om de zichtbaarheid van elk component te bepalen op basis van de oriëntatie. De 6-kolommen tabel die hierboven wordt weergegeven, is een alternatieve versie die alleen wordt weergegeven in horizontale oriëntatie, zoals aangegeven door het horizontale icoon aan de linkerkant. Onze oorspronkelijke 4-kolommen tabel kan zo ingesteld worden dat deze alleen in verticale modus wordt weergegeven.

De onderstaande screenshot toont de uiteindelijke, geïnstalleerde applicatie voor scrollende tabellen, die draait op een Android-telefoon in horizontale positie. De gebruiker kan door de rijen met gegevens scrollen door verticaal te vegen binnen de tabel, terwijl de andere elementen op hun plaats blijven. De knoppen "-" en "+" in de footer zijn navigatiehulpmiddelen om de vorige of volgende maand te selecteren.

Een apparaat met een andere schermgrootte kan meer of minder rijen gegevens weergeven, maar de tabel vult nog steeds de maximale hoogte die we in procenten hebben gedefinieerd

De MobileTogether Designer is gratis te gebruiken, dus download vandaag nog een exemplaar en begin met het maken van scrollbare tabellen voor uw eigen, platformonafhankelijke mobiele applicatie!