SMB Interfejs graficzny (widoki)

Prezentacja na temat: "SMB Interfejs graficzny (widoki)"— Zapis prezentacji:

1 SMB Interfejs graficzny (widoki)
Michail Mokkas

2 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

3 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();

4 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

5 TextView (XML) Widok reprezentujący pole tekstowe.
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="116dp" />

6 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); }

7 TextView (rezultat)

8 Button (XML) Widok reprezentujący guzik.
<Button 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" />

9 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); } } }

10 Button (rezultat)

11 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: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="" />

12 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(); } }); } }

13 EditText (rezultat)

14 CheckBox (XML) Widok reprezentujący guzik o dwóch stanach (zaznaczony lub niezaznaczony). <CheckBox 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" />

15 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!"); } } }); } }

16 CheckBox (rezultat)

17 RadioButton (XML) <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content" > <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" /> </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.

18 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(); } }); } }

19 RadioButton (rezultat)

20 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:

21 Parametry układów xmlns:android - specyfikuje przestrzeń nazw Android
wartość powinna mieć przypisane URI: 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: wartość tools:context powinna być nazwą aktywności (. przed nazwą) np. .MainActivity

22 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

23 Parametry widoków kont. 1
android:text - specyfikuje tekst jaki dany widok ma wyświetlać wartości powinny być wypisane w strings.xml : android:id - specyfikuje identyfikator danego widoku wartości przypisywane w - (+ 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

24 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

25 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 , jeżeli dodamy <color name=“bialy”>#FFFFFF</color> do strings.xml android:textSize - ustawia rozmiar tekstu. wartość to liczba typu float np. 14.5dp

26 Padding vs Margin

27 LinearLayout <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout> Wyświetla widoki w nim zawarte obok siebie w pozycji poziomej lub pionowej.

28 GridLayout Wyświetla widoki w nim zawarte w układzie tabeli.
<?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="1" android:layout_column="1" /> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="2" android:layout_column="2" /> </GridLayout> Wyświetla widoki w nim zawarte w układzie tabeli.

29 RelativeLayout <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView 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" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginTop="237dp" android:onClick="myOnClick" /> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginStart="-117dp" android:layout_marginBottom="232dp" /> </RelativeLayout> Wyświetla widoki w nim zawarte w względnych co do siebie pozycjach.

30 ConstraintLayout Optymalna i bogatsza wersja RelativeLayout.
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android=" xmlns:app=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="175dp" android:layout_marginEnd="148dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="237dp" android:onClick="myOnClick" app:layout_constraintTop_toTopOf="parent" /> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="36dp" android:layout_marginBottom="232dp" app:layout_constraintBottom_toBottomOf="parent" /> </android.support.constraint.ConstraintLayout> ConstraintLayout Optymalna i bogatsza wersja RelativeLayout. Spłaszcza hierarchię widoków.