SMB Interfejs graficzny (widoki) Michail Mokkas

Podstawowe metody setContentView(int) – ustala zawartość Activity z pliku układowego (XML). findViewById(int) – znajdude widok, który został zidentyfikowany poprzez parameter android:id w pliku układowym (XML). zależnie od wersji kompilatora, czasami jest wymagane castowanie na typ elementu

Toast Umożliwia tworzenie “dymków” (pojawiający się pop-up) z jakimś tekstem. Wykorzystywany do notyfikacji użytkownika o różnych zdarzeniach. String str = “Toast message"; Toast msg = Toast.makeText(getBaseContext(), str, Toast.LENGTH_LONG); msg.show();

View (widok) View - klasa reprezentująca widok (podstawowy element budowy interfejsu użytkownika). Odpowiedzialna za rysowanie elementów na ekranie oraz obsługę zdarzeń. Przykładowe widoki: TextView EditText Button RadioButton CheckBox ProgressBar

TextView (XML) Widok reprezentujący pole tekstowe. <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="116dp" android:text="@string/text1" />

TextView (JAVA) Możemy dokonywać zmian danego widoku w sposób dynamiczny. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TextView tv1 = (TextView)findViewById(R.id.textView1); tv1.setText(getString(R.string.otherText)); tv1.setTextColor(Color.RED); }

TextView (rezultat)

Button (XML) Widok reprezentujący guzik. <Button android:id="@+id/button1" android:onClick="myOnClick" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="90dp" android:text="@string/button" />

Button (JAVA) public class MainActivity extends Activity { private Button but1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); but1 = (Button)findViewById(R.id.button1); but1.setText("Change my colour."); but1.setTextColor(Color.GREEN); } public void myOnClick(View view){ if(but1.getCurrentTextColor()==Color.GREEN){ but1.setTextColor(Color.RED); }else if(but1.getCurrentTextColor()==Color.RED){ but1.setTextColor(Color.BLUE); }else{ but1.setTextColor(Color.GREEN); } } }

Button (rezultat)

EditText (XML) Widok reprezentujący pole do wpisania tekstu przez użytkownika. Atrybut hint wyświetla (domyślny tekst) wskazówkę odnoszącą się do wpisywanego tekstu. <EditText android:id="@+id/editText" android:hint="input some text here" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="150dp" android:text="" />

EditText (JAVA) public class MainActivity extends Activity { private EditText et1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); addButtonListener(); } public void addButtonListener(){ et1 = (EditText)findViewById(R.id.editText); Button but1 = (Button) findViewById(R.id.button1); but1.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v){ String str = et1.getText().toString(); Toast msg = Toast.makeText(getBaseContext(), str, Toast.LENGTH_LONG); msg.show(); } }); } }

EditText (rezultat)

CheckBox (XML) Widok reprezentujący guzik o dwóch stanach (zaznaczony lub niezaznaczony). <CheckBox android:id="@+id/checkBox1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_marginTop="160dp" android:layout_centerHorizontal="true" android:checked="false" android:text="@string/checkbox_test" />

CheckBox (JAVA) public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); addListenerOnCheckBox(); } public void addListenerOnCheckBox(){ CheckBox cb1 = (CheckBox)findViewById(R.id.checkBox1); cb1.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v){ if(((CheckBox) v).isChecked()){ ((CheckBox) v).setText("Uncheck me!"); }else{ ((CheckBox) v).setText("Check me!"); } } }); } }

CheckBox (rezultat)

RadioButton (XML) <Button android:id="@+id/button_id1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button1" /> <RadioGroup android:id="@+id/radioGroup1" android:layout_width="wrap_content" android:layout_height="wrap_content" > <RadioButton android:id="@+id/radioButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/radiobutton1text" android:checked="true" /> <RadioButton android:id="@+id/radioButton2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/radiobutton2text" /> </RadioGroup> Widok reprezentujący guzik o dwóch stanach (zaznaczony lub niezaznaczony). Powinien należeć do grupy, w której reszta wyborów jest wzajemnie wykluczająca.

RadioButton (JAVA) public class MainActivity extends Activity { private RadioGroup rb_group; private RadioButton rb_button; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); addListenerOnCheckBox(); } public void addListenerOnCheckBox(){ rb_group = (RadioGroup)findViewById(R.id.radioGroup1); Button bt1 = (Button) findViewById(R.id.button_id1); bt1.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v){ int selectedId = rb_group.getCheckedRadioButtonId(); rb_button = (RadioButton) findViewById(selectedId); Toast.makeText(getBaseContext(), rb_button.getText(), Toast.LENGTH_SHORT).show(); } }); } }

RadioButton (rezultat)

Layout (układ) ViewGroup - klasa odpowiedzialna za układy. Jest to widok, który może zawierać inne widoki (podrzędne). Przykładowe układy: RelativeLayout LinearLayout GridLayout image source: http://i.stack.imgur.com/KSCNf.png

Parametry układów xmlns:android - specyfikuje przestrzeń nazw Android wartość powinna mieć przypisane URI: http://schemas.android.com/apk/res/android xmlns:tools - specyfikuje przestrzeń nazw Tools, stosowane m.in. do mapowania layoutu z daną aktywnością (Activity) poprzez tools:context wartość xmlns:tools powinna mieć przypisane URI: http://schemas.android.com/tools wartość tools:context powinna być nazwą aktywności (. przed nazwą) np. .MainActivity

Parametry widoków android:layout_[width/height] - specyfikują bazową szerokość oraz wysokość widoku przyjmuje wartości: fill_parent - widok musi być tak duży jak widok nadrzędny (minus obramowanie), wyparte przez match_parent wraz z API 8 match_ parent - używany zamiast fill_parent od API 8+ wrap_content - widok powinien być na tyle duży (minimalnie) aby pomieścił zawartość android:padding[Right/Left/Top/Bottom] - specyfikują rozmiar wolnej przestrzeni w środku prawej, lewej, górnej oraz dolnej krawędzi. wartości powinny być wypisane w pliku dimends.xml np. @dimen/activity_horizontal_margin

Parametry widoków kont. 1 android:text - specyfikuje tekst jaki dany widok ma wyświetlać wartości powinny być wypisane w strings.xml : np. @string/hello_world android:id - specyfikuje identyfikator danego widoku wartości przypisywane w formacie @+id/identyfikator np. @+id/button1 - (+ oznacza, że identyfikator ten ma być dodany w R.java) android:layout_margin[Right/Left/Top/Bottom] - specyfikują rozmiar wolnej przestrzeni pomiędzy prawą, lewą, górną oraz dolną krawędzią widoku a układem. wartości w dp (Density-independent Pixels, 1 dp = 1 piksel na ekranie 160 dpi) dpi - (dots per inch) liczba punktów na cal np. 20dp

Parametry widoków kont. 2 android:layout_allignParent[Right/Left/Top/Bottom] - pozycjonują widok do prawej, lewej, górnej lub dolnej krawędzi układu. przyjmuje wartośći boolowskie: true false android:layout_to[Start/End/Left/Right]Of - pozycjonują początkową, końcową, lewą lub prawą krawędź widoku na początek, koniec, lewo, prawo od zakotwiczenia jakiegoś widoku. wartość to identyfikator widoku np. @+id/button1

Parametry widoków kont. 3 android:layout_[row/column] - wskazuje na pozycję widoku w tabeli układu (GridLayout). wartości to liczby całkowite odnoszące się do indeksów tabeli np. 5 android:[background/textColor] - decyduje o kolorze tła lub tekstu widoku wartość to kolor w postaci szesnastkowej np. #FFFFFF np. @color/bialy , jeżeli dodamy <color name=“bialy”>#FFFFFF</color> do strings.xml android:textSize - ustawia rozmiar tekstu. wartość to liczba typu float np. 14.5dp

Padding vs Margin

LinearLayout <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <CheckBox android:id="@+id/checkBox2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/checkbox" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/button" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/textview" /> </LinearLayout> Wyświetla widoki w nim zawarte obok siebie w pozycji poziomej lub pionowej.

GridLayout Wyświetla widoki w nim zawarte w układzie tabeli. <?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/textview" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="1" android:layout_column="1" android:text="@string/button" /> <CheckBox android:id="@+id/checkBox4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="2" android:layout_column="2" android:text="@string/checkbox" /> </GridLayout> Wyświetla widoki w nim zawarte w układzie tabeli.

RelativeLayout <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentEnd="true" android:layout_marginTop="175dp" android:layout_marginEnd="148dp" android:text="@string/text1" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignStart="@+id/textView1" android:layout_alignParentTop="true" android:layout_marginTop="237dp" android:onClick="myOnClick" android:text="@string/button" /> <CheckBox android:id="@+id/checkBox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignStart="@+id/button1" android:layout_alignParentBottom="true" android:layout_marginStart="-117dp" android:layout_marginBottom="232dp" android:text="@string/checkbox" /> </RelativeLayout> Wyświetla widoki w nim zawarte w względnych co do siebie pozycjach.

ConstraintLayout Optymalna i bogatsza wersja RelativeLayout. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:id="@+id/relativeLayout"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="175dp" android:layout_marginEnd="148dp" android:text="@string/text1" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="237dp" android:onClick="myOnClick" android:text="@string/button" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="@+id/textView1" /> <CheckBox android:id="@+id/checkBox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="36dp" android:layout_marginBottom="232dp" android:text="@string/checkbox" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/button1" /> </android.support.constraint.ConstraintLayout> ConstraintLayout Optymalna i bogatsza wersja RelativeLayout. Spłaszcza hierarchię widoków.