Ewidencja pojazdów – dopieszczanie interfejsu

O atrakcyjności aplikacji decyduje wygląd interfejsu. Niestety interfejs androida nie jest „sexy” i np. odbiega od tego co oferuje iPhone czy aplikacje robione w Adobe Air/Flex. Bolączką wielu programistów, niestety także autora tego tekstu jest brak smykałki do dopracowywania wyglądu interfejsu. Na szczęście Moby dostarcza kilka predefiniowanych szablonów wyglądu list danych. Oto opis jak ich używać.

Dla każdej tabeli możemy zdefiniować layout alternatywny. Najprostszy z nich to Layout 3 zawierający linijke tekstu oraz ikonkę pozwalającą wyświetlać ikonkę, która zależy od zawartości rekordu listy.

Układ graficzny nr 3

LeftIconField	UpTextField	RightIconField
	LoTextField

Aby uzyskać taki wygląd należy w FileUserOptions dodać opcje typu Number o nazwie ALTROWLAYOUT i wpisać jej wartość 3

Oraz określić, jakie pole ma być wyświetlane w UpTextField w przypadku tabeli Dostawców paliwa wybieramy pole Brand, co oznacza , że w polu górnym widoku ma być wyświetlona wartość kolumny Brand z tabeli którą edytujemy czyli w tym przypadku Brands.

Dodatkowo określamy jak ikonka powinna być wyświetlona w LeftIconField podajemy wyrażenie zgodne ze składnia języka JAVA, którego wynik daje nazwę ikonki.

Podobnie robimy w tabeli Makes

Oraz w tabeli Models

Wykaz ikonek potrzebnych dla naszej aplikacji – zawartośc katalogu res\drawables

Układ graficzny nr 3 wersja rozbudowana

Aby pokazac układ bardziej rozbudowany, zmodyfikujemy nieco tabelę z dostawcami paliwa – dodamy pole z informacja czy akceptują karte paliwowa UTA

W ten sposób definiujemy pole typu CHECKBOX

Generujemy aplikację. W związku z tym, że zmieniła nam się struktura bazy, modyfikujemy numer wersji bazy danych. Dzięki tej informacji MOBY wygeneruje procedurę do konwersji z poprzedniej wersji, na wersje bieżącą.

Ustawiamy dodatkowe opcje jak poniżej:

Dodajemy opcje związane z informacja o prawej ikonce

RightIconField(„uta” + BrandsxDbAdapter.getAcceptUTACards(c))

Do projektu wgrywamy ikonkę uta1.png

Układ graficzny własny … tzn. ręcznie dziergany

Zmieniamy vehicles_list.xml na:

<?xml version=”1.0″ encoding=”utf-8″?>

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;

android:id=”@+id/RelativeLayout01″

android:layout_height=”wrap_content”

android:layout_width=”fill_parent”>

 

<ImageView android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:id=”@+id/lefticon”

android:visibility=”gone”></ImageView>

 

 

<TextView

android:layout_width=”wrap_content”

android:text=”TextView”

android:padding=”5dp”

android:textAppearance=”?android:attr/textAppearanceMedium”

android:layout_height=”wrap_content”

android:id=”@+id/model”

android:layout_toRightOf=”@+id/lefticon”

android:layout_alignTop=”@+id/lefticon”

android:layout_alignBottom=”@+id/lefticon”>

</TextView>

 

<TextView

android:layout_width=”wrap_content”

android:text=”TextView”

android:textAppearance=”?android:attr/textAppearanceMedium”

android:layout_height=”wrap_content”

android:id=”@+id/odmoter”

android:padding=”5dp”

android:layout_alignParentRight=”true”>

</TextView>

<TextView

android:layout_width=”wrap_content”

android:text=”TextView”

android:padding=”5dp”

android:textAppearance=”?android:attr/textAppearanceMedium”

android:layout_height=”wrap_content”

android:id=”@+id/plateno”

android:layout_centerInParent=”true”

></TextView>

 

</RelativeLayout>

W VehiclesList.java odszukujemy procedure VehiclesHolder

I zmieniamy, aby wyglądała jak poniżej

static class VehiclesHolder {

 

private TextView Odmoter = null;

private TextView Model = null;

private TextView PlateNo = null;

private ImageView LeftIcon=null; //manual

private View row=null;

VehiclesHolder(View row) {

this.row=row;

 

LeftIcon=(ImageView)row.findViewById(R.id.lefticon);

Odmoter=(TextView)row.findViewById(R.id.odmoter);

Model=(TextView)row.findViewById(R.id.model);

PlateNo=(TextView)row.findViewById(R.id.plateno);

 

}

 

void populateFrom(Cursor c) {

if (VehiclesxDbAdapter.getOdmoter(c) != null) {

Odmoter.setText(VehiclesxDbAdapter.getOdmoter(c).toString());

}

if (VehiclesxDbAdapter.getModel(c) != null) {

Model.setText(VehiclesxDbAdapter.getModel(c).toString());

}

if (VehiclesxDbAdapter.getPlateNo(c) != null) {

PlateNo.setText(VehiclesxDbAdapter.getPlateNo(c));

}

int resId;

try {

resId = R.drawable.class.getDeclaredField(„makes” + VehiclesxDbAdapter.getMake(c).toLowerCase()).getInt(null);

LeftIcon.setImageResource(resId);

LeftIcon.setVisibility(View.VISIBLE);

} catch (Exception e) {

Log.d(TAG,”ikona:” + „makes” + VehiclesxDbAdapter.getMake(c).toLowerCase());

LeftIcon.setVisibility(View.INVISIBLE);

}

}

}

Oczywiście podczas kolejnego generowaniaclarion nadpisze nam nasze zmiany. Aby temu zapobiec, zabronimy generowanie kodu listy oraz layoutu wiersza listy

FreezeListLayout(true) oraz FreezeList(true)