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”
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)
Kashiash's Blog 