Accordion spielen leicht gemacht – Eine Android View

Sehr häufig findet man auf Webseiten oder in Programmen ein sogenanntes Accordion, um Steuerelemente zu gruppieren. Besonders wenn sehr wenig Platz für sämtlichen Content ist, bietet sich eine solche View an, da nicht der gesamte Inhalt zur gleichen Zeit dargestellt werden muss. So liegt es doch nahe, dass es Accordions auch unter Android geben sollte. Doch leider ist dem nicht so. Ich habe eine ganze Zeit Google bemüht, aber keinen Hinweis auf eine native Accordion-View gefunden. Aber was soll’s – selbst ist der Mann.

Im Prinzip ist es ganz einfach. Man nehme ein paar Buttons und ein paar Layout-Elemente, in denen der eigentliche Content platziert wird, würze das Ganze mit ein paar EventListenern, schüttele alles ordentlich durch und fertig ist das Accordion. Also fast.

Aussehen kann das Ganze dann ungefähr so:

Accordion geschlossen

Accordion ausgeklappt

Man kann natürlich noch etwas weiter gehen und Scrollbars hinzufügen oder andere Erweiterungen einbauen. Für den Anfang hat mir ein solch simples Accordion aber gereicht.

 

  1. <de.aflx.blog.gui.Accordion
  2.    android:layout_width="fill_parent"
  3.    android:layout_height="fill_parent"
  4.    android:orientation="vertical">
  5.     <Button
  6.        android:text = "Group 1"
  7.        android:layout_width="fill_parent"
  8.        android:layout_height="wrap_content" />
  9.     <EditText
  10.     android:layout_width="fill_parent"
  11.     android:layout_height="100dp"
  12.     android:hint="Text 1"/>
  13.     <Button
  14.        android:text = "Group 2"
  15.        android:layout_width="fill_parent"
  16.        android:layout_height="wrap_content" />
  17.     <EditText
  18.        android:layout_width="fill_parent"
  19.        android:layout_height="100dp"
  20.        android:hint="Text 2"/>
  21.     <Button
  22.         android:text = "Group 3"
  23.         android:layout_width="fill_parent"
  24.         android:layout_height="wrap_content" />
  25.     <EditText
  26.         android:layout_width="fill_parent"
  27.         android:layout_height="100dp"
  28.         android:hint="Text 3"/>
  29. </de.aflx.blog.gui.Accordion>

Wie man sieht, gibt es hier keine großen Überraschungen. Da das Accordion die LinearLayout-Klasse erweitert, kann man den Inhalt dort wie gewohnt über eine XML-Datei definieren.

Auch die Accordion-Klasse weist kein Hexenwerk auf. in der onFinishInflate-Methode werden die EventListener der Buttons gesetzt und der gesamte zugehörige Inhalt versteckt. Dafür nutze ich die Konstante GONE und nicht INVISIBLE, weil dadurch nicht nur die View versteckt sondern auch der Platz auf dem Screen freigegeben wird.
Per Definition habe ich festgelegt, dass Buttons die Gruppentrenner sind und auf jeden Button eine View folgen muss, die eben kein Button ist. Damit man als Callback für die Buttons die Accordion-Klasse selbst nutzen kann, muss diese das Interface android.view.View.OnClickListener implementieren. In der entsprechenden onClick-Funktion wird gecheckt, welcher Button geklickt wurde und entsprechend werden Inhalte ein- oder ausgeblendet. Klickt man einen Button an, dessen Inhalt bereits sichtbar ist, wird dieser nun wieder versteckt.

 

  1. public class Accordion extends LinearLayout implements OnClickListener {
  2.   public Accordion(Context context) {
  3.     super(context);
  4.   }
  5.  
  6.   public Accordion(Context context, AttributeSet attrs) {
  7.     super(context, attrs);
  8.   }
  9.  
  10.   /**
  11.    * Add eventlistener to the buttons and hide the content.
  12.    */
  13.   @Override
  14.   protected void onFinishInflate() {
  15.     super.onFinishInflate();
  16.  
  17.     for (Integer i = 0; i < this.getChildCount(); i++) {
  18.       View view = this.getChildAt(i);      
  19.  
  20.       // every second child has to be a button
  21.       if (view instanceof Button) {
  22.         view.setOnClickListener(this);
  23.       } else {
  24.     if ((i-1) % 2 != 0) {
  25.           return;
  26.         }
  27.  
  28.     view.setVisibility(GONE);
  29.       }
  30.     }
  31.   }
  32.  
  33.   /**
  34.    * Handle Button-Clicks. Show the corresponding content
  35.    * or hide it if it
  36.    * was already visible.
  37.    */
  38.   public void onClick(View v) {
  39.     for (Integer i = 0; i < this.getChildCount(); i = i+2) {
  40.       View content = this.getChildAt(i);
  41.  
  42.       // Hide all children buttons
  43.       if (content != v) {
  44.         this.getChildAt(i+1).setVisibility(GONE);
  45.       } else {
  46.         // if the content was visible => hide it now
  47.     if (this.getChildAt(i+1).getVisibility() == VISIBLE) {
  48.           this.getChildAt(i+1).setVisibility(GONE);
  49.     } else {
  50.           this.getChildAt(i+1).setVisibility(VISIBLE);
  51.     }
  52.       }
  53.     }
  54.   }
  55. }

Jetzt ist auch klar, warum es in Android noch keine Accordion-View gibt. Es ist viel zu einfach selbst eine zu bauen 😀

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.