Ćwiczenie 3.2 - Android - Kalkulator BMI

Szczegóły: Kategoria: Programy; Odsłon: 956

KALKULATOR WSKAŹNIKA MASY CIAŁA (BMI)

Informacje ogólne

Wskaźnik masy ciała (ang. BMI) jest wartością, która służy do oceny kategorii wagowej (grubości-szczupłości) osoby. BMI definiuje się jako stosunek masy (kg) do kwadratu wzrostu (m):

Tabela 1. Kategorie BMI

Po obliczeniu wskaźnika BMI, do oceny kategorii wagowej osoby wykorzystuje się dane zamieszczone w Tabeli 1.

W ramach ćwiczenia należy opracować i uruchomić na emulatorze aplikację pełniącą rolę kalkulatora BMI. W ramach ćwiczenia nauczymy się odczytywać dane wprowadzane przez użytkownika aplikacji, wykonywać obliczenia w kodzie źródłowym programu (JAVA) i wyświetlać wyniki obliczeń na ekranie emulatora urządzenia mobilnego.

Dodawanie i pozycjonowanie elementów TextView (pól tekstowych)

Aby obliczyć wskaźnik BMI w opracowanej aplikacji, oczywiście potrzebujemy danych wejściowych dotyczących masy ciała i wzrostu. Nasz kod Java obliczy wskaźnik BMI z podanego wcześniej wzoru, a następnie określi kategorię "wagową" zgodnie z Tabelą 1.

Najpierw należy opracować interfejs użytkownika aplikacji. Korzystając z Android Studio tworzymy nowy projekt o nazwie „Kalkulator BMI” i zapisujemy go na komputerze. Wybieramy platformę sprzętową „Telefon i tablet” z minimalnym dostępnym pakietem SDK. Dzięki temu aplikacja będzie miała największy zestaw urządzeń mobilnych, na których będzie mogła być zainstalowana.

Domyślny układ widoku wybieramy jako „Pusta Aktywność” (Empty Activity), przy czym główną klasą jest „MainActivity.java” (klasa domyślna podczas tworzenia projektu w Android Studio), a plik układu ekranu jako „activity_main.xml”. Nie usuwamy domyślnego widoku tekstu „Hello World”, abyśmy mogli go zmodyfikować tak, aby wyświetlał tytuł naszej aplikacji. Klikamy na niego, a gdy zostanie wybrany zmieniamy jego tekst na Kalkulator BMI, ustawiamy rozmiar czcionki na 24sp i pogrubiamy tekst, jak wskazują prostokąty oznaczone liczbami 1, 2 i 3 na rysunku 1.

Ustawmy pole tekstowe z tytułem tak, aby było umieszczone na środku w poziomie i miało odległość około 50 ~ 60dp od góry (dp to skrót od Density Independent Pixel, który jest automatycznie dostosowywany po zmianie rozdzielczości wyświetlania). W tym celu klikamy opcję [Wyświetl wszystkie właściwości], jak pokazano na rysunku 1 (pole oznaczone cyfrą 4) i ustalamy pozycję widoku [TextView], jak pokazano na rysunku 2. Należy zwrócić uwagę, że pozioma środkowa linia prowadząca jest wyświetlana automatycznie, dzięki czemu możemy przesuwać ten widżet po tej linii co pomoże nam utrzymać go pośrodku w poziomie. Podczas przesuwania widżetu należy obserwować parametr o nazwie [layout_marginT], który wskazuje jego odległość od góry. Ustawiamy go na 60dp.

Weźmiemy dane dotyczące wzrostu i masy ciała od użytkownika i pokażemy wartość wskaźnika BMI jako liczbę i jego kategorię. Będziemy musieli umieścić cztery pola tekstowe, które pokażą [Wprowadź swoją wagę (kg):] , [Wprowadź swój wzrost (m):] , [Twój BMI:] i kategorię BMI. Znajdujemy widżet [TextView] na palecie z dostępnymi elementami interfejsu użytkownika, a następnie wybieramy, przeciągamy i upuszczamy cztery elementy [TextView], jak pokazano na rysunku 3.

Rysunek 1. Ustawianie podstawowych właściwości pola tekstowego [TextView]

Rysunek 2. Pozycjonowanie na ekranie etykiety tytułowej aplikacji

Rysunek 3. Umieszczanie na ekranie czterech pól tekstowych (elementów TextView)

Po umieszczeniu pierwszego elementu [TextView], następny jest pozycjonowany względem poprzedniego. W przypadku naszej aplikacji kalkulatora BMI dokładne lokalizacje nie są ścisłe i zależą od osoby realizującej ćwiczenie. To co jest zalecane to pozostawienie miejsca pomiędzy drugim a trzecim polem tekstowym [TextView], aby umieścić przycisk, który zainicjuje obliczenia.

Zaleca się zmienić rozmiary czcionki tekstu na 18 p i pogrubić wyświetlany tekst tekst. Przykładowy wygląd aplikacji po zmianie parametrów pól tekstowych zgodnie z przedstawionymi zalecaniami pokazany jest na rysunku 6.4.

Rysunek 4. Układ GUI aplikacji po skonfigurowaniu pól tekstowych

Dodawanie pól edycyjnych (widżetów EditText)

Teraz na ekranie należy umieścić dwa edytowalne pola tekstowe, aby użytkownik mógł wprowadzić swoją wagę i wzrost, kolejne pole tekstowe, aby wyświetlić wskaźnik BMI jako liczbę i przycisk do rozpoczęcia obliczania wartości BMI.

Przykładowe rozmieszczenie tekstowych pól edycyjnych (Edit Text) pokazano na rysunku 5. Umieszczono tu pola edycyjne, które mogą być używane do wprowadzania liczb dziesiętnych (liczby z częścią ułamkową), a nie ogólne typy wprowadzanych danych, ponieważ użytkownik aplikacji powinien wprowadzać tylko wartości liczbowe (a nie tekstowe). Warto zauważyć, że wynik obliczenia zostanie wyświetlony obok etykiety Twoje BMI. Znajduje się tam Pole tekstowe, w którym wyświetlany jest wynik obliczenia wartości wskaźnika BMI. W tym celu można użyć tekstu statycznego (pole tekstowe [TextView]), ale w ramach ćwiczenia należy pokazać, jak można programowo ustawić wyświetlaną wartość.

Rysunek 5. Umieszczanie edytowalnych pól tekstowych na ekranie aplikacji

Należy pamiętać, że pola tekstowe domyślnie nie mają obramowań, dlatego po ich umieszczeniu możemy je zobaczyć tylko po ich zaznaczeniu.

W kolejnym kroku ustawiamy identyfikatory elementów. Tylko poprzez identyfikatory możemy uzyskać do nich dostęp programowo, a także ustawiamy ich domyślne teksty. W tym celu należy wybrać wybierz odpowiednie edytowalne pole tekstowe, a następnie na wyświetlanej z prawej strony liście właściwości ustawić ID i właściwości tekstowe, jak pokazano na rysunku 6, dla pola wprowadzania wagi. Umieszczamy również jego domyślny tekst (pośrodku, tak jak poprzednio).

Rysunek 6. Ustawienia parametrów pola wprowadzania wagi

Rysunek 7. GUI aplikacji po skonfigurowaniu wszystkich pól tekstowych i edycyjnych

Ustawiamy identyfikatory i domyślne teksty w polach tekstowych dotyczących wysokości i wyniku BMI jako heightInput i 1.80; BMIResult i …….. Użytkownik przed wprowadzeniem danych i obliczeniem swojego BMI widzi w polu wyniku obliczeń "kropeczki". Po tych ustawieniach GUI aplikacji wygląda tak jak na rysunku 7.

Dodawanie i pozycjonowanie przycisku

Do ukończenia projektu graficznego interfejsu użytkownika (GUI) pozostały dwa kroki. Pierwszym z nich jest przycisk, który zainicjuje obliczenia. Należy go wskazać, przeciągnij i umieścić między wejściową wysokością [TextView] i YourBMI [TextView,] a następnie umieść go poziomo pośrodku ekranu aplikacji, jak pokazano na rysunku 8.

Rysunek 8. Umieszczenie przycisku na ekranie aplikacji

Teraz należy zdefiniować tekst wyświetlaną na przycisku jako [Oblicz moje BMI!] Zauważmy, że domyślnym identyfikatorem ID przycisku jest string "Button", który jest prawidłowy i może być zaakceptowany w niniejszej aplikacji.

Nasz GUI jest prawie gotowy, ale pozostał jeszcze jeden krok. Identyfikator pola tekstowego z kategorią kategorii BMI jest domyślnie istawiany na wartość "TextView". Zmieniamy identyfikator i ustaw ID jako BMICategory. Po wykonaniu tych kroków GUI naszej aplikacji jest gotowe, i jest pokazane na rysunku 9.

Rysunek 9. GUI naszej aplikacji Kalkulator BMI

Kod aplikacji kalkulatora BMI

Jesteśmy teraz gotowi do kontynuowania programowania. Aby obliczyć wskaźnik BMI należy w pliku MainActivity.java, czyli w pliku z kodem źródłowym programu wykonać następujące czynności:

W pierwszej kolejności należy pobrać wartości wprowadzone w polach tekstowych przeznaczonych do wprowadzania masy i wzrostu. Należy pamiętać, że pobrane zmienne mają typ String (w polach tekstowych przechowywane są łańcuchy znaków reprezentujących liczby a nie liczby).
Następnie należy przekształć te ciągi na zmienne typu zmiennoprzecinkowego (w tym przypadku typu Double), aby obliczenia BMI można było wykonać przy użyciu równania podanego na początku niniejszego opisu.
W kolejnym kroku obliczamy wartość wskaźnika masy ciała BMI.
Wyświetlamy wartość BMI w polu tekstowym obok etykiety „Twoje BMI:”. Można to zrobić po wcześniejszej po konwersji wyznaczonej liczby na typ String (w polu tekstowym, tak jak to napisano w pierwszym kroku można umieścić tylko łańcuchy znaków)
Za pomocą instrukcji warunkowej [if-else] określamy kategorię BMI na podstawie wartości BMI oraz Tabeli 1.
Wyświetlamy kategorię BMI w widoku tekstowym, który domyślnie, po uruchomieniu aplikacji pokazuje tekst „Tutaj pojawia się kategoria BMI” lub inny podobny (to zależy od wykonującego ćwiczenie).

Otwieramy (lub uaktywniamy zakładkę jeśli plik jest już otwarty) plik MainActivity.java w eksploratorze plików Android Studio. Domyślna zawartość tego pliku jest następująca:

Kod 1.

Obliczenie wartości wskaźnika BMI zostanie wykonane, gdy użytkownik naciśnie przycisk, dlatego musimy napisać metodę słuchacza dla tego przycisku, a następnie wywołać tę metodę wewnątrz funkcji onCreate() (jak zostało to wyjaśnione w ćwiczeniu 1). Kod 2 przedstawia ogólny szablon metody "odbiornika" przycisku.

Kod 2.

Dostęp do przycisku uzyskuje się za pomocą obiektu przycisku utworzonego w drugiej linii, a wszystkie operacje, które zostaną wykonane po kliknięciu przycisku, zostaną przeniesione do metody onClick(View v).

Przede wszystkim należy pobrać dane wejściowe dotyczące wzrostu i wagi z ich odpowiednich edytowalnych pól tekstowych (EditText). Robimy się to za pomocą następującego fragmentu kodu:

Kod 3.

Wyjaśnienie tego kodu jest następujące:

W pierwszym wierszu uzyskujemy dostęp do pola tekstowego wprowadzania wzrostu za pomocą jego identyfikatora (R.id.heightInput), a następnie tworzymy obiekt EditText o nazwie heightText.
W drugim wierszu ciąg znaków wewnątrz tego tekstu EditText jest wyodrębniany i przypisywany do nowego obiektu String o nazwie heightStr.
W kolejnym i ostatnim wierszu wartość String dotycząca wzrostu jest konwertowana na typ double i przypisywana do nowo utworzonej zmiennej o nazwie height.
W końcu mamy wartość wzrostu zapisaną w zmiennej, która jest typu double.

Powyższe kroki muszą być zaimplementowane, ponieważ nie ma innego sposobu, aby bezpośrednio przyjąć wartość umieszczoną w polu typu EditText jako String lub double.

Analogiczne kroku należy wykonać w odniesieniu do wagi i w efekcie uzyskujemy jej wartość w postaci liczby zmiennoprzecinkowej, tak jak to pokazano poniżej.

Kod 4.

Po wykonaniu kodu przedstawionego we fragmentach Kod 3 i Kod 4 mamy dane o wadze i wzroście w zmiennych typu double. Możemy więc wykonać obliczenia BMI za pomocą równania podanego na początku opisu w następujący sposób (operator * wykonuje mnożenie, podczas gdy operator / dzieli wagę do kwadratu wzrostu):

Kod 5.

Wyświetlimy tę wartość BMI w polu EditText obok etykiety You BMI w GUI. Ustawiliśmy jego identyfikator jako BMIResult, gdy wcześniej tworzyliśmy interfejs użytkownika. Poniższy kod wykonuje tę operację:

Kod 6

W tym kodzie widżet o identyfikatorze BMIResult znajduje się w pierwszym wierszu, a następnie zmienna BMI typu double jest konwertowana na String za pomocą kodu Double.toString(BMI) w celu wyświetlenia wewnątrz obiektu EditText. Należy zwrócić uwagę, że teksty napisane wewnątrz widżetów EditText mogą być odczytywane i zapisywane tylko jako ciągi znaków!!!!

Mamy teraz BMI przechowywane jako zmienna typu double. Należy teraz użyć instrukcję warunkową if-else, aby odnieść tą wartość liczbową do klasyfikacji zawartej w Tabeli 1 i określić kategorię BMI. W tym celu zdefiniujmy zmienną typu String, która będzie zawierała kategorię BMI:

Kod 7.

Ustawimy ten ciąg zgodnie z wartością BMI za pomocą instrukcji if-else w następujący sposób:

Kod 8.

Jedyne, co pozostało, to ustawienie TextView na wartość zmiennej BMI_Cat, aby kategoria BMI była wyświetlana w interfejsie użytkownika:

Kod 9.

Łącząc wszystkie powyższe linie kodu razem, dochodzimy do kompletnego programu zawartego w pliku MainActivity.java podanego poniżej. Należy pamiętać, że dyrektywy importu bibliotek na początku tego pliku są automatycznie umieszczane przez Android Studio zgodnie z metodami i klasami, których użyliśmy w naszym kodzie.

Kod 10.

Uruchamianie aplikacji

Wypróbujmy teraz aplikację w emulatorze. Wystarczy nacisnąć przycisk „Uruchom” w Android Studio . Powinienniśmy zobaczyć ekran aplikacji pokazany na rysunku 10.

Rysunek 10. Widok ekranu aplikacji po wprowadzeniu danych wejściowych

Wprowadzamy wartości masy i wzrostu (odpowiednio w kg i metrach), a następnie korzystamy z przycisku [OBLICZ MOJE BMI!]. Jeśli poprawnie wykonaliśmy wszystkie opisane wcześniej czynności, powinniśmy zobaczyć wartość wskaźnika BMI i kategorię BMI na ekranie aplikacji, jak to pokazano dla przykładowych danych na rysunku 11.

Rysunek 11. Przykładowy wynik obliczenia wskaźnika BMI

Podsumowanie

Jak widać na rysunku 11, wartość wskaźnika BMI jest wyświetlana z dużą ilością niepotrzebnych cyfr po przecinku. Z praktycznego punktu widzenia wystarczy tylko jedna cyfra dziesiętna. Możemy użyć następującego kodu, aby ograniczyć cyfry dziesiętne wartości zmiennej BMI i przypisać tak ograniczoną wartość do nowej zmiennej typu double o przykładowej nazwie BMI_trimmed:

Kod 11.

Do tego typu operacji używana jest dedykowana klasa DecimalFormat. Android Studio automatycznie dodaje wymaganą bibliotekę w postaci linii kodu źródłowego:

Kod 12.