Android tutorial II: Podstawowe kontrolki

Device-Button-1-by-Merlin2525-800pxWitaj w drugiej części tutorialu o o platformie Android, dzisiaj napiszemy pierwszy program i omówimy podstawowe kontrolki.


 
 
 

  1. Tworzenie nowego projektu,
  2. Omówienie plików projektu (manifest, layouty, pliki Java),
  3. Omówienie aktywności, layoutów,
  4. Napiszemy pierwszy program z wykorzystaniem Toast, TextView, EditText, Button,
  5. Stworzymy Emulator.

Tworzymy nowy projekt:

Uruchamiamy Android studio:

File > New Project > New Project:

  • Wybieramy nazwę projektu, nazwę domeny i lokacje.

new_project

  • Wybieramy minimalny system na jaki chcemy pisać dany program, my w kursie zajmiemy się smartfonami więc interesuje nas tylko pozycja phone and tablets.

new_project_target

  • Następnie wybieramy pierwszą aktywność naszego programu, tutaj mamy tak jakby szablony aktywności nas na razie interesuje tylko Empty Activity,  każdy program na Androida musi posiadać co najmniej jedną aktywność.

new_project_activity

  • Wybieramy nazwy ActivityName głowny plik Javy. LayoutName plik XML który będzie odpowiedzialny za krótko mówiąc grafikę naszej pierwszej aktywności. Zauważ że nazwy klas piszemy z dużych liter np MainActivity a nazwy XML z małych z podkreśleniem activity_main.

new_project_finish

  • Finish i gotowe pierwszy projekt utworzony.
  • Zobaczmy jakie pliki generuje nasz projekt na ten moment interesuje nas:

manifes

Pliki Projektu:

Manifest – jest punktem wyjściowym każdej aplikacji, przed uruchomieniem programu, wczytywany jest manifest programu, określa które fragmenty kodu należy uruchomić, wszystkie aktywności muszą być zadeklarowane w manifeście.

Res – zasoby mogą to być np obrazki użyte w aplikacji, statyczne nazwy. Zasoby są definiowane przez umieszczanie plików w katalogu /res projektu.

Pliki java – implemantacja programu.

Aktywność:

Aktywność jest to podstawowy komponent w Androidzie odpowiedzialny za interakcje z użytkownikiem, tworzenie okna naszej aplikacji i uruchamiania innych komponentów, każdą aktywność musimy zadeklarować w manifeście. Poniżej przedstawiony został cykl życia aktywności warto o nim poczytać.

  • Cykl życia aktywności

activity_lifecycle

Layouty:

Layout definiuje wizualną strukturę interfejsu graficznego aplikacji, layouty deklarujemy na dwa sposoby:

  • deklaracja w pliku XML
  • deklaracja w pliku JAVA

My na razie skupimy się na tworzeniu layoutów za pomocą XML.

Wyobraźmy sobie layouty jako kontenery do których wkładamy następne elementy np buttony czy pola tekstowe lub inne kontenery (layouty). Rozróżniamy kilka typów layoutów różnią się one tym jak rozkładane są w nich elementy np najbardziej podstawowy Linear layout rozmieszcza wszystkie elementy które się w nim znajdują w jednym wierszu lub kolumnie.

Istnieją również:

  • Relative layout najbardziej wskazany w projektowaniu aplikacji, elementy rozmieszcza się w nim według innych elementów np button jest z prawej strony pola textView,
  • Frame layout odnosi się do Fragmentów o których napiszemy sobie w przyszłości,
  • Grid layout dzieli nasz kontener na siatkę do której możemy dodawać inne elementy.

Pierwszy program: TextView,  Button,  EditText, Toast:

Ok stwórzmy layout naszego pierwszego programu:

Otwórz /res > layout > activity_main.xml

U dołu ekranu mamy dwie zakładki Text i Design:

  • Text – to tekstowy tryb tworzenia layoutów,
  • Design – to bardziej przyjazny dla początkujących graficzny interfejs tworzenia layotuów, gdzie po prostu przeciągamy interesujące nas kontrolki i nadajemy im odpowiednie atrybuty.

Nasz pierwszy program będzie zczytywał text który wprowadza użytkownik w polu EditText i po naciśnięciu Buttona wyświetlał go w polu TextView a także wyświetla powiadomienie typu TOAST.

  • Utwórz sobie taki layout:

layout

Teraz ważne czynności które musisz wykonać na tym etapie musimy nadać naszym kontrolkom pola ID przez które będziemy się z nim komunikować w plikach JAVA, możesz to zrobić przez podwójne naciśnięcie na kontrolkę w trybie DESIN, lub w trybie tekstowym:

android:id="@+id/textView"

Na tym etapie powinieneś wyrobić sobie nawyk rzucania nazw kontrolek do stringów, przejdź do zakładki Text najedz na nazwę kontrolki wciśnij alt + enter Extract String Resource i enter i już nasza zmienna jest w Stringach, zobacz /res > values > strings.xml.

extract_to_strings

Po co to robić ???

Wyobraź sobie, że zrobiłeś swój pierwszy wielki program liczący 100 klas chcesz go sprzedać w google Play i wymyśliłeś, że zaatakujesz rynek niemiecki trzeba przetłumaczyć apke, wchodziśż do jednego pliku z nazwami i tłumaczysz przez 15 minut:) a co gdybyś tego nie zrobił…

Przejdźmy do naszego pliku Javy jak widzisz nasza klasa dziedziczy po AppCompatActivity jest to klasa która dziedziczy po Activity, każda aktywność w Androidzie musi dziedziczyć po Activity.

  • Deklarujemy zmienne globalne widoczne są w zakresie całej klasy,
Button buttonStart;
TextView textView;
EditText editText;
  • Inicjalizujemy je w metodzie initVariable() musimy tutaj wykonać rzutowania, ponieważ metoda findViewById() zwraca widok a my konkretnie chcemy widok typu TextView lub EditText.
buttonStart = (Button) findViewById(R.id.button);
textView = (TextView) findViewById(R.id.textView);
editText = (EditText) findViewById(R.id.editText);
  • Zwróć uwagę na metodę onCreate jest to pierwsza metoda w cyklu życia aktywności, po uruchomieniu programu to ona wykona się jako pierwsza, metoda setContentView tworzy nasz interfejs graficzny na podstawie layoutu do którego odwołujemy się przez klase R jak do wszystkich zasobów R.zasób.nazwa_pliku, my wywołaliśmy jeszcze nasza metodę initVariable() czyli zainicjalizowaliśmy nasze zmienne.
 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initVariable();
  • Wwywołujemy metode setOnClickListener na buttonie tworzymy w niej zmienną value do której zczytamy naszą wartość z pola EditText za pomocą metody getText, a metoda toString zwraca naszą wartość w postaci stringów właśnie.
buttonStart.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               String value = editText.getText().toString();
               textView.setText(value);
               Toast.makeText(getApplicationContext(), "wartość: " + value,         Toast.LENGTH_SHORT).show();
           }
       });
  • Na koniec wyświetlimy powiadomienie czyli Toast w pierwszym parametrze musimy podać Context naszej aplikacji, równie dobrze moglibyśmy wpisać tutaj nazwę naszej klasy czyli MainActivity.this czyli, że jesteśmy w tej klasie, drugi parametr to komunikat który będzie wyświetlany, trzeci to czas jaki ma się wyświetlać nasz komunikat i na koniec wywołujemy metodę show która wyświetli komunikat.

Cały kod programu:

package info.first;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    Button buttonStart;
    TextView textView;
    EditText editText;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initVariable();
        buttonStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String value = editText.getText().toString();
                textView.setText(value);
                Toast.makeText(getApplicationContext(), "wartość: " + value, Toast.LENGTH_SHORT).show();
            }
        });
    }
    public void initVariable() {
        buttonStart = (Button) findViewById(R.id.button);
        textView = (TextView) findViewById(R.id.textView);
        editText = (EditText) findViewById(R.id.editText);
    }
}

Tworzenie emulatora:

Teraz utworzymy nowy emulator, aby przetestować apke:

  • Run > RunApp lub shift + F10;

emulator

  • Create New Emulator:

emulator2

  • Wybieramy jakie urządzenie symulujemy, możemy wejść w bardziej zaawansowane ustawienia Next:

emulator3

  • Wybieramy wersję Androida, jeżeli nie mamy zainstalowanego HAXMA powinniśmy zainstalować dzięki czemu nasz emulator będzie szybszy Next:

emulator 4

  • Upewnijmy się jeszcze czy Emulated Performance mamy ustawione na Auto, inaczej możemy mieć błąd podczas uruchamiania emulatora

blad

  • Ok wszystko gotowe.

To tyle nasz pierwszy program za nami, trochę nam się rozrósł ten temat następne będą krótsze i bardziej skupimy się na kodzie. Dzisiaj omówiliśmy najważniejsze zagadnienia które są ci na tym etapie potrzebne, w następnym temacie kontrolek ciąg dalszy.

Cześć.

2 myśli na temat “Android tutorial II: Podstawowe kontrolki

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *