12. März 2017 // von Olli

App Entwicklung – Vom Test-Feedback zur Umsetzung

Sobald ein neues Release bevorsteht oder eine größere Änderung im Code vorgenommen wurde, testen wir die App ausführlich. Die Testergebnisse werden anschließend ausgewertet und nach Priorität sortiert.

Ablauf eines typischen Bugfixes

Ein Tester meldet, dass sehr lange Seitentitel die Bedienelemente in der Toolbar überlappen, wenn sich das Gerät im Landscape Modus befindet.

Als erstes versucht ein Kollege aus dem Projektmanagement den Fehler auf unseren Testgeräten zu reproduzieren, denn wir können Probleme in erster Linier nur dann beheben, wenn wir sie nachstellen können. Wenn sich der Fehler reproduzieren lässt wird daraus ein Ticket erstellt und einem unserer Entwickler zugewiesen.

Im Ticket stehen alle relevanten Information zu dem Problem, wie z.B.:

  • Auf welchen Geräten konnte das Problem nachgestellt werden?

    • Huawei GR3, Android 5.1
  • Eine genaue Anleitung um das Problem zu reproduzieren:

    • Open Thomann App
    • Open Menu
    • Choose ‘Online Guides’
    • Press ‘Choosing Computer’
    • In the list press ‘Factors and Technology’
    • Rotate phone horizontally and look at header overlapping menu icons
  • Wenn vorhanden Logfiles und Videos

Anhand des Tickets kann der Entwickler dann das Problem nachvollziehen und gezielt angehen. Die App selbst ist nativ in Java entwickelt, bekommt aber viele Inhalte über HTTP vom Server und stellt diese mithilfe von WebViews dar. Das vorliegende Problem betrifft die App selbst und wird somit auch nativ behoben.

Ein Blick an die Richtige Stelle im Quellcode zeigt auch schon die Problematik:

Der Container, der die Toolbar beinhaltet

<FrameLayout
        android:id="@+id/activityToolbarContainer"
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize">

Die Toolbar selbst mit Menu-Button und Titelleiste

<android.support.v7.widget.Toolbar
        android:id="@+id/activityToolbar"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:theme="@style/ToolBarStyle"/>

Container, der die folgenden Views horizontal anordnet

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

Container für spezielle Toolbar-Elemente wie den Homescreen

<FrameLayout
        android:id="@+id/activityToolbarContent"
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"/>

Die Bedienelemente, die erst sichtbar werden, wenn sich das Gerät im Landscape Modus befindet

<de.thomann.android.ui.toolbar.ToolbarView
        android:id="@+id/activityToolbarButtons"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="end"/>
</LinearLayout>

Auf den ersten Blick sieht alles recht unproblematisch aus, doch bei genauerem Hinsehen kann man erkennen, dass die Bedienelemente, bzw. das gesamte LinearLayout wie eine Maske über die Toolbar gelegt wird. Das bedeutet auch, dass die Toolbar selbst gar nichts von den Bedienelementen weiß. Wenn jetzt ein Seitentitel, der sich ja in der Toolbar befindet, zu lang wird, dann schiebt er sich einfach hinter die Bedienelemente, was zu dem Fehlverhalten führt.

Ein einfaches Umsortieren der Views behebt das Problem:

<FrameLayout
        android:id="@+id/activityToolbarContainer"
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize">

<android.support.v7.widget.Toolbar
        android:id="@+id/activityToolbar"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:theme="@style/ToolBarStyle">

<de.thomann.android.ui.toolbar.ToolbarView
        android:id="@+id/activityToolbarButtons"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="end"/>
</android.support.v7.widget.Toolbar>

Das LinearLayout wird nicht mehr benötigt, da es nur noch diese eine View gibt

<FrameLayout
        android:id="@+id/activityToolbarContent"
        android:layout_height="match_parent"
        android:layout_width="match_parent"/>
</FrameLayout>

Durch diese kleine Änderung weiß die Toolbar nun, dass es noch eine weitere View gibt und passt ihre Breite dynamisch daran an. Im Portrait Modus sind die Bedienelemente ausgeblendet und haben damit eine Breite von 0. Die Titelleiste kann also den gesamten Platz nutzen. Im Landscape Modus sind die Bedienelemente sichtbar und haben eine feste Breite die von der Gesamtbreite der Toolbar abgezogen wird. Der Rest steht der Titelleiste zur Verfügung.

Die Änderungen werden anschließend auf sämtlichen Geräten getestet und wenn es keine Fehler gibt, dann werden die Änderungen ins Git-Repo gepusht und können mit Einverständnis der anderen Entwickler dann in den Master gemergt werden.

Das Ticket wird nun in den Status ‘resolved’ gesetzt und dem Projektmanager zugewiesen. Dieser Überprüft die Änderungen erneut und schließt das Ticket anschließend.

Verwandte Blogposts