Ćwiczenie 8 - Robert Arsoba

Programowanie urządzeń mobilnych w systemie Android
dr inż. Robert Arsoba
Ć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).
Materiały przygotowano w ramach projektu
„Inżynier pilnie poszukiwany”
Strona 1
Programowanie urządzeń mobilnych w systemie Android
dr inż. Robert Arsoba
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;
}
}
Materiały przygotowano w ramach projektu
„Inżynier pilnie poszukiwany”
Strona 2
Programowanie urządzeń mobilnych w systemie Android
dr inż. Robert Arsoba
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_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RadioGroup
android:id="@+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="@string/rb1tekst" />
<RadioButton
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/rb2tekst" />
</RadioGroup>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv1tekst"
android:layout_below="@id/radioGroup1" />
Materiały przygotowano w ramach projektu
„Inżynier pilnie poszukiwany”
Strona 3
Programowanie urządzeń mobilnych w systemie Android
dr inż. Robert Arsoba
<EditText
android:id="@+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:layout_toRightOf="@id/textView1"
android:layout_alignTop="@id/textView1" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv2tekst"
android:layout_below="@id/editText1" />
<EditText
android:id="@+id/editText2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:layout_toRightOf="@id/textView2"
android:layout_alignTop="@id/textView2" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv3tekst"
android:layout_below="@id/editText2"
android:layout_centerHorizontal="true" />
<DatePicker
android:id="@+id/datePicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textView3"
android:layout_centerHorizontal="true" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv4tekst"
android:layout_below="@id/datePicker1"
android:layout_centerHorizontal="true" />
<CheckBox
android:id="@+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/chk1tekst"
android:layout_below="@id/textView4" />
<CheckBox
android:id="@+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/chk2tekst"
android:layout_below="@id/checkBox1" />
<CheckBox
android:id="@+id/checkBox3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/chk3tekst"
android:layout_below="@id/checkBox2" />
<CheckBox
android:id="@+id/checkBox4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/chk4tekst"
android:layout_below="@id/checkBox3" />
Materiały przygotowano w ramach projektu
„Inżynier pilnie poszukiwany”
Strona 4
Programowanie urządzeń mobilnych w systemie Android
dr inż. Robert Arsoba
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btn1tekst"
android:layout_below="@id/checkBox4" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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
Materiały przygotowano w ramach projektu
„Inżynier pilnie poszukiwany”
Strona 5
Programowanie urządzeń mobilnych w systemie Android
dr inż. Robert Arsoba
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>
Materiały przygotowano w ramach projektu
„Inżynier pilnie poszukiwany”
Strona 6