Przewijane tabele do aplikacji mobilnych opartych na danych

Użytkownicy urządzeń mobilnych zawsze oczekują jak największej ilości informacji w jak najbardziej wygodnej formie, ale mały rozmiar ekranu może wymuszać kompromisy. Twórcy aplikacji mobilnych muszą znaleźć sposób, aby umieścić dane, elementy nawigacji i dodatkowe informacje w estetycznym układzie, w przeciwnym razie ryzykują frustrację użytkowników, którzy mogą być klientami, współpracownikami lub menedżerami wyższego szczebla. MobileTogether 2.1 wprowadza przewijane tabele i inne nowe, przydatne funkcje, które pomagają programistom tworzyć aplikacje prezentujące dane w elegancki sposób i działające w ten sam sposób na wszystkich urządzeniach.

Tabele z możliwością przewijania

MobileTogether 2.1 umożliwia programistom definiowanie tabel, które można przewijać poziomo lub pionowo, a przy tym nagłówek i stopka pozostają w stałych pozycjach. Przewijanie poziome pozwala programistom wyświetlać więcej kolumn szerokiej tabeli, nie zmniejszając jednocześnie rozmiaru tekstu do nieczytelnego. Przewijanie pionowe może umożliwić wyświetlanie ważnych informacji w stałym miejscu na ekranie, co poprawia czytelność.

Przewijanie wertykalne jest szczególnie przydatne w przypadku tabel z powtarzającymi się wierszami, ponieważ programista nie wie podczas projektowania, ile wierszy danych może ostatecznie zostać wyświetlonych na ekranie każdego użytkownika. Poniżej znajduje się prosty, czterokolumnowy przykład tabeli z powtarzającymi się wierszami, utworzony w programie MobileTogether Designer:

W oknie dialogowym "Nowa tabela" zdefiniowaliśmy liczbę kolumn, liczbę wierszy (dynamiczną), oraz wiersze nagłówka i stopki. Następnie dodaliśmy etykiety do kolumny nagłówka, elementy sterujące do stopki, oraz zdefiniowaliśmy właściwości dotyczące rozmiarów i kolorów tekstu.

Możemy włączyć przewijanie w pionie, definiując maksymalną wysokość tabeli w oknie pomocniczym "Style i właściwości", a następnie wybierając, czy cała tabela ma być przewijana, czy tylko wiersze znajdujące się między nagłówkiem a stopką. Maksymalna wysokość może być wyrażona w procentach, w konkretnej liczbie pikseli, lub można wybrać opcję automatycznego wypełnienia pozostałej części ekranu.

Dla programistów, którzy chcą zmaksymalizować powierzchnię ekranu przeznaczoną do prezentacji danych, wersja 2.1 programu MobileTogether zawiera nową właściwość "Page", która pozwala ukryć pasek tytułowy strony:

Dolny pasek tabeli, w kolorze jasnoniebieskim, zawiera elementy nawigacyjne, które pozwalają użytkownikowi wybrać inny miesiąc lub rok. Kolumna z rokiem, znajdująca się na środku dolnego paska, została utworzona za pomocą przycisku "Połącz" w pasku narzędzi MobileTogether, który łączy kolumny 2 i 3 w jeden, szerszy element sterowania. Można łączyć kolumny zarówno poziomo, jak i pionowo, a także później je rozdzielić, jeśli zmieni się zdanie. Można nawet umieścić wewnątrz istniejącej komórki całą nową tabelę, aby stworzyć tabelę hierarchiczną i zaprojektować idealny układ dla złożonych danych.

Linie pionowe

Wersja 2.1 MobileTogether wprowadza również nowe narzędzie do tworzenia linii pionowych. Jeśli chcesz dodać linię pionową między kolumnami dowolnej tabeli, po prostu wybierz ją z okna pomocniczego "Kontrolki" i przeciągnij w wybrane miejsce, jak pokazano na poniższym obrazku w widoku projektowania. Linia pionowa zostanie umieszczona w nowej kolumnie tabeli, a można ustawić właściwość szerokości kolumny na "wrap_content", aby zająć minimalną przestrzeń.

Właściwości linii pionowych można dostosowywać w taki sam sposób, jak właściwości linii poziomych. Okno "Style i właściwości" dla każdej linii pionowej umożliwia określenie szerokości linii, stylu, koloru oraz marginesów lewego i prawego, wyrażonych w pikselach.

MobileTogether umożliwia definiowanie widoczności każdego elementu w zależności od orientacji urządzenia. Tabela składająca się z 6 kolumn, pokazana powyżej, to alternatywna wersja, która będzie wyświetlana tylko w trybie poziomym, jak wskazuje ikona trybu poziomego po lewej stronie. Nasza oryginalna tabela składająca się z 4 kolumn może być skonfigurowana do wyświetlania tylko w trybie pionowym.

Zrzut ekranu poniżej przedstawia działającą aplikację wyświetlającą tabelę z możliwością przewijania, uruchomioną na telefonie z systemem Android, trzymanym w pozycji poziomej. Użytkownik może przewijać wiersze danych, przesuwając palcem w pionie wewnątrz tabeli, a pozostałe elementy pozostają na swoim miejscu. Elementy "+" i "-" znajdujące się w stopce służą jako narzędzia nawigacyjne do wyboru poprzedniego lub następnego miesiąca.

Urządzenie o innym rozmiarze ekranu może wyświetlać więcej lub mniej wierszy danych, ale tabela nadal zajmuje maksymalną wysokość, którą zdefiniowaliśmy w procentach

Program MobileTogether Designer jest dostępny za darmo, więc pobierz go już dziś i zacznij tworzyć aplikacje mobilne działające na różnych platformach, wykorzystując interaktywne tabele!