Prosty design aplikacji mobilnej

User avatar Wojciech Charkiewicz

W tym artykule przedstawię jak prosto jest stworzyć sztywny design aplikacji mobilnej, w której jest monitorowany czas snu.
Warto dodać, że przedstawiony design został wykonany przy użyciu darmowej paczki od MDB, którą możecie pobrać tutaj

Przygotowanie

Podstawowym działaniem będzie pobranie paczki, wypakowanie jej w dowolnym dla nas miejscu.
Jeśli mamy już to zrobione - otwieramy plik index.html oraz style.css w folderze css. Oba te pliki otwieramy za pomocą dowolnego programu tekstowego, osobiście używam Visual Studio Code.
Po otwarciu plików przechodzimy do index.html i usuwamy wszystko, co znajduje się pomiędzy "Start your project here" i "End your project here". Plik nasz powinien wyglądać jak na grafice poniżej.

1- Preparation

Jak widzimy do elementu body jest dodana klasa .special-color-dark. Odpowiada ona za kolor tła. Wszystkie klasy znajdziemy tutaj.


Przejdźmy do działania

Tworzymy div, który będzie ramką naszego smartfona.

2a- Div creation

Mamy nadane następują klasę: .mdb-color darken-3 - jest to klasa wybrana z palety, link był podany przy kolorze tła.
Natomiast klasa .main_div_class to nasz własny wytwór.
Nasza klasa powinna znajdować się w pliku style.css i wyglądać następująco:

2b- Div class

Już wyjaśniam

  • width odpowiada za szerokość naszego elementu, wartość podana w pikselach.
  • height odpowiada za wysokość naszego elementu, wartość podana w pikselach.
  • border jest to określenie szerokości, stylu, koloru ramki wokół naszego elementu.
  • border-radius odpowiada za zaookrąglenie rogów ramki wokół naszego elementu.
  • margin margines zewnętrzny, w przypadku auto będzie powodował, że nasz element będzie się ustawiał na środku.
  • color kolor czcionki w elemencie.
  • overflow wartość hidden bedzie powodowała, że to, co znajduje się w elemencie nie "wypłynie" na zewnątrz.
  • background-image ustawienie obrazka jako tło.
  • background-size ustalenie w jaki sposób ma być tło pokryte obrazkiem.
  • background-blend-mode wartość multiply spowoduje wyrównanie kolorów tła, spowoduje to również, że w połączeniu z wcześniejszą klasą tło będzie przyciemnione.


Pierwsze efekty

Po otwarciu pliku index.html za pomocą dowolnej przeglądarki możemy zobaczyć pierwsze efekty.

3- What happend

Nawigacja w aplikacji

Przejdźmy do ustalenia jak będzie wyglądała nawigacja w aplikacji, użyjemy tutaj nawigacji dostępnej w dokumentacji MDB.
Jeżeli już wybraliśmy, możemy go wkleić na samej górze naszego div'a, nic więcej nie musimy robić, nawigacja sama się dostosuje do oferowanej szerokości i będzie wyglądać jak na urządzneiu mobilnym.

4a- Navbar

Na zdjęciu możemy zobaczyć przy jednym z elemetów klasę .active - odpowiada ona za tło elementu, aby wyglądał jakby był obecnie aktywny.
Dodajemy klasę oraz definicję koloru białego dla linków w nawigacji, tak jak na obrazku poniżej.

4b- Navbar classes

Grid

Będziemy teraz działać na gridzie (więcej informacji tutaj.)
Tworzymy element main bezpośrednio po nav, następnie działamy zgodnie z instrukcją i tworzymy div'a z klasą container - to w nim będzie znajdował się cały grid
W utworzonym wcześniej elemencie tworzymy trzy rzędy, widzimy je na obrazku pod klasą .row, do dwóch ostatnich dodajemy styl z marginesem zewnętrznym górnym o wysokości 20 pikseli, spowoduje to, że powstaną ładne odsętpy poziome.

5a- grid creation

Dodajemy kolumny z klasą .col-6, która odpowada za szerokość kolumny oraz .white-text, która odpowiada za kolor tekstu w kolumnie.

5b- grid creation part 2

Zawartość kolumn

W odpowiednich kolumnach tworzymy elementy z klasami .text_align_center, nasza własna klasa. W utworzonych elementach będziemy działać na dwóch paragrafach, do pierwszego dodajemy klasę .font_big oczywiście to też jest nasza własna klasa.

6a- fields

Nasze klasy w pliku style.css

6b- fields classes

Wyjaśnię nowe wartości

  • padding-top marginew wewnętrzny, odpowiada za 20% wysokości elementu.
  • text-align pozycjonowanie tekstu, w moim przypadku jest to wyśrodkowanie
  • background-color kolor tła elementu podany w rgba, wartość 0.3 przedstawia tylko 30% widoczności koloru tła, co powoduje, że staje się przezroczysty.
  • font-size rozmiar czcionki, wartość podana w pikselach.


Kolejne efekty naszej pracy

Otwórzmy nasz plik index.html ponownie, jeżeli zrobiliśmy wszystko poprawnie to powinien nam ukazać się taki efekt:

7- first effects

Brakuje tylko wykresu

Brakuje nam tylko wykresu prezentującego nam czas wstawania.
Zatem stwórzmy go teraz, w pierwszym rzędzie naszego grida.

8a- chart creation

Z tworzenia elementów to tyle, resztę zrobi za nas skrypt.


Skrypt wykresu

Nasz skrypt umieszczamy zgodnie z zasadami działania na paczce MDB, na samym dole elementu body przed jego zamknięciem, jak i jednocześnie pod wszystkimi już umieczonymi skryptami.

8b- chart script

Krótko opiszę całość działania, więcej dla zainteresowanych na stronie MDB tutaj lub w dokumentacji chart.js tutaj
Funkcja formatTime() widoczna na górze odpowiada za formatowanie sekund na czas godzinowy, ponieważ będziemy operować na wartościach sekundowych. Niestety nie da się na osi Y zaprezentować czasu tak jak a osi X, zwyczajnie twórcy nie przewidzieli takiej opcji.
Poniżej widzimy zapis naszego wykresu, opiszę główne elementy.

  • labels zapis w tablicy odpowaidający za wartości osi X czyli osi poziomej.
  • data są to wartości zapisane w postaci sekund, które będą wyświetlane na osi Y.
  • borderColor kolor lini jaka będzie prezentowana na danych.
  • borderWidth grubość linii.


A oto i efekt końcowy!

Po zapisaniu całej pracy, możemy przejść do podziwiania całej pracy.

Pełny kod źródłowy znajdziecie pod tym adresem.

O autorze
User avatar

Jestem uczniem technikum informatycznego, interesuję się programowaniem stron, mechaniką samochodową. W wolnym czasie lubię jeździć na rowerze.

Najnowsze artykuły

MDB Youth

MDB Youth to organizacja stworzona przez młodych ludzi, których celem jest wspólna nauka programowania, technologii i przedsiębiorczości.

Dowiedz się więcej i dołącz do nas.

Dołącz do MDB Youth