Ćwiczenie 8 Wykorzystanie układu RelativeLayout Cel ćwiczenia Celem ćwiczenia jest praktyczne zapoznanie się z zasadami użycia układu graficznego RelativeLayout oraz wykształcenie umiejętności zastosowania tego układu do tworzenia interfejsu użytkownika. Zakres ćwiczenia obejmuje definiowanie układu RelativeLayout i umieszczanie w nim kontrolek dziedziczących po klasie View (m.in. TextView, EditText, Button, CheckBox, RadioGroup, RadioButton, DatePicker, TimePicker, Toast). Przygotowanie się do ćwiczenia Zapoznać się z wykładem Interfejs użytkownika układy. Zapoznać się z hierarchią klas układów graficznych. Przestudiować opis dotyczący układu RelativeLayout. Powtórzyć wiadomości dotyczące kontrolek wykorzystywanych na dotychczasowych ćwiczeniach. Na podstawie dokumentacji Android SDK: http://developer.android.com/reference/packages.html zapoznać się w podstawowym zakresie z klasami RelativeLayout, ScrollView, DatePicker, TimePicker. Zapoznać się z przykładową aplikacją zamieszczoną w opisie ćwiczenia. Przeanalizować kod źródłowy aplikacji i porównać go z kodem aplikacji w ćwiczeniu dotyczącym układu LinearLayout (ćwiczenie 7). Zadania do wykonania 1. Uruchomić przykładową aplikację zamieszczoną w opisie ćwiczenia i przetestować jej działanie. 2. Napisać aplikację, która umożliwia wprowadzenie dwóch czasów zegarowych (godziny, minuty, sekundy) i określenie różnicy pomiędzy nimi wyrażonej w godzinach, minutach i sekundach. Do wprowadzania danych i wyświetlenia wyniku użyć trzech obiektów klasy TimePicker. Zastosować układ RelativeLayout. 3. Napisać aplikację zgadywankę, w której losowana jest całkowita liczba pseudolosowa z przedziału [1, 1000]. Użytkownik zna przedział z którego wylosowano liczbę, ale nie zna wylosowanej wartości. Zadaniem jest odgadnięcie wylosowanej liczby. Na wprowadzane przez użytkownika liczby aplikacja odpowiada: za mała, za duża lub zgadłeś za n-tym razem. Zastosować układ RelativeLayout i możliwość przewijania ekranu w pionie (ScrollView). Strona 1
Przykładowa aplikacja plik Projekt5Activity.java package org.przyklad; import android.app.activity; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.button; import android.widget.checkbox; import android.widget.datepicker; import android.widget.edittext; import android.widget.radiobutton; import android.widget.toast; public class Projekt5Activity extends Activity implements OnClickListener private RadioButton rb1, rb2; private EditText et1, et2; private DatePicker dp; private CheckBox chk1, chk2, chk3, chk4; private Button btn1, btn2; @Override public void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); setcontentview(r.layout.main); rb1 = (RadioButton) this.findviewbyid(r.id.radio0); rb2 = (RadioButton) this.findviewbyid(r.id.radio1); rb1.setonclicklistener(this); rb2.setonclicklistener(this); et1 = (EditText) this.findviewbyid(r.id.edittext1); et2 = (EditText) this.findviewbyid(r.id.edittext2); dp = (DatePicker) this.findviewbyid(r.id.datepicker1); chk1 = (CheckBox) this.findviewbyid(r.id.checkbox1); chk2 = (CheckBox) this.findviewbyid(r.id.checkbox2); chk3 = (CheckBox) this.findviewbyid(r.id.checkbox3); chk4 = (CheckBox) this.findviewbyid(r.id.checkbox4); chk1.setonclicklistener(this); chk2.setonclicklistener(this); chk3.setonclicklistener(this); chk4.setonclicklistener(this); btn1 = (Button) this.findviewbyid(r.id.button1); btn2 = (Button) this.findviewbyid(r.id.button2); btn1.setonclicklistener(this); btn2.setonclicklistener(this); public void onclick(view v) switch (v.getid()) case R.id.button1: wczytaj(); break; case R.id.button2: this.finish(); break; Strona 2
private void wczytaj() CharSequence imie = (CharSequence) et1.gettext(); CharSequence nazwisko = (CharSequence) et2.gettext(); int r = dp.getyear(); int m = dp.getmonth()+1; // miesiące liczone od 0 int d = dp.getdayofmonth(); String s = (rb1.ischecked()? "Pan " : "Pani ") + imie.tostring() + ' ' + nazwisko.tostring(); s = s + "\nurodz. " + r + '-' + m + '-' + d + "\nzainteresowania: "; if (chk1.ischecked()) s = s + chk1.gettext().tostring() + ", "; if (chk2.ischecked()) s = s + chk2.gettext().tostring() + ", "; if (chk3.ischecked()) s = s + chk3.gettext().tostring() + ", "; if (chk4.ischecked()) s = s + chk4.gettext().tostring(); Toast toast = Toast.makeText(Projekt5Activity.this, s, Toast.LENGTH_LONG); toast.show(); Przykładowa aplikacja plik main.xml Zwrócić uwagę na umieszczenie układu RelativeLayout wewnątrz elementu ScrollView, co umożliwia przewijanie ekranu w pionie. <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/scrollview1" android:layout_height="fill_parent" > <RelativeLayout android:layout_height="fill_parent" > <RadioGroup android:id="@+id/radiogroup1" android:orientation="horizontal" > <RadioButton android:id="@+id/radio0" android:checked="true" android:text="@string/rb1tekst" /> <RadioButton android:id="@+id/radio1" android:text="@string/rb2tekst" /> </RadioGroup> android:id="@+id/textview1" android:text="@string/tv1tekst" android:layout_below="@id/radiogroup1" /> Strona 3
<EditText android:id="@+id/edittext1" android:inputtype="textpersonname" android:layout_torightof="@id/textview1" android:layout_aligntop="@id/textview1" /> android:id="@+id/textview2" android:text="@string/tv2tekst" android:layout_below="@id/edittext1" /> <EditText android:id="@+id/edittext2" android:inputtype="textpersonname" android:layout_torightof="@id/textview2" android:layout_aligntop="@id/textview2" /> android:id="@+id/textview3" android:text="@string/tv3tekst" android:layout_below="@id/edittext2" android:layout_centerhorizontal="true" /> <DatePicker android:id="@+id/datepicker1" android:layout_below="@id/textview3" android:layout_centerhorizontal="true" /> android:id="@+id/textview4" android:text="@string/tv4tekst" android:layout_below="@id/datepicker1" android:layout_centerhorizontal="true" /> android:id="@+id/checkbox1" android:text="@string/chk1tekst" android:layout_below="@id/textview4" /> android:id="@+id/checkbox2" android:layout_weight="1" android:text="@string/chk2tekst" android:layout_below="@id/checkbox1" /> android:id="@+id/checkbox3" android:text="@string/chk3tekst" android:layout_below="@id/checkbox2" /> android:id="@+id/checkbox4" android:text="@string/chk4tekst" android:layout_below="@id/checkbox3" /> Strona 4
<Button android:id="@+id/button1" android:text="@string/btn1tekst" android:layout_below="@id/checkbox4" /> <Button android:id="@+id/button2" android:text="@string/btn2tekst" android:layout_torightof="@id/button1" android:layout_aligntop="@id/button1" /> </RelativeLayout> </ScrollView> Wygląd interfejsu użytkownika zdefiniowanego w pliku main.xml Strona 5
Przykładowa aplikacja plik strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">ankieta osobowa</string> <string name="tv1tekst">imię:</string> <string name="tv2tekst">nazwisko: </string> <string name="tv3tekst">data urodzenia:</string> <string name="tv4tekst">zainteresowania:</string> <string name="rb1tekst">mężczyzna</string> <string name="rb2tekst">kobieta</string> <string name="btn1tekst">wczytaj</string> <string name="btn2tekst">zakończ</string> <string name="chk1tekst">film</string> <string name="chk2tekst">literatura</string> <string name="chk3tekst">muzyka</string> <string name="chk4tekst">sport</string> </resources> Strona 6