Sichtbehälter mit Android

Eine Anordnung

Die gleichzeitige Anzeige mehrerer Oberflächenelemente kann realisiert werden, indem diese in einen Behälter eingefügt werden.

Das folgende Programm zeigt eine Tastfläche »valueButton« in einem horizontalen Behälter »layout«.

MainActivity.java

package com.example;
public class MainActivity extends android.app.Activity
{ 
  /** Der momentante Stand des Zaehlers. */
  int i = -1;
  /** Eine Tastflaeche, die eine Zahl enthalten soll. */
  android.widget.Button valueButton;
  /** Initialisiert die Tastflaeche {@code com.example.MainActivity.this.valueButton}.
    @param context Kontext der Anwendung, fuer die die Tastflaeche bestimmt ist */
  void initValueButton( final android.content.Context context )
  { MainActivity.this.valueButton = new android.widget.Button( context );
    MainActivity.this.valueButton.setGravity
    ( android.view.Gravity.LEFT | android.view.Gravity.TOP  );
    MainActivity.this.valueButton.setText( ++MainActivity.this.i + "" );
    MainActivity.this.valueButton.setOnClickListener
    ( new android.view.View.OnClickListener()
      { @java.lang.Override public void onClick( final android.view.View view )
        { MainActivity.this.valueButton.setText( ++MainActivity.this.i + "" ); }} ); }
  /** Eine Anordnung, horizontal. */
  android.widget.LinearLayout layout;
  /** Initialisiert die Anordnung {@code com.example.MainActivity.this.layout}.
    @param context Kontext der Anwendung, fuer welche die Anordnung
    {@code com.example.MainActivity.this.layout} bestimmt ist. */
  void initLayout( final android.content.Context context )
  { MainActivity.this.layout = new android.widget.LinearLayout( this );
    MainActivity.this.layout.addView( MainActivity.this.valueButton ); }
  /** Initialisiert dieses MainActivity-Objekt.
    @param context Kontext der Anwendung, zu welcher dieses 
    MainActivity-Objekt gehört. */
  void init( final android.content.Context context )
  { initValueButton( context );
    initLayout( context ); }
  /** Wird bei Erzeugung dieses App aktiviert.
    @param bundle Gespeicherter Zustand der App */
  @java.lang.Override public void onCreate
  ( final android.os.Bundle bundle )
  { super.onCreate( bundle );
    final android.app.Activity activity = this;
    final android.content.Context context = this;
    init( context );
    enframe( layout, 0xA0000055, 1.0 );
    activity.setContentView( MainActivity.this.layout ); }

  /** Rahmt ein View-Objekt ein.
    @param view  Das einzurahmende View-Objekt
    @param color Die fuer android.graphics.Paint#setColor(int) zu verwendende Farbe
    @param view  Die zu verwendende Strichstaerke (1.0 = normal) */
  void enframe
  ( final android.view.View view, final int color, final double width )
  { final android.graphics.drawable.ShapeDrawable rectShapeDrawable
    = new android.graphics.drawable.ShapeDrawable
    ( new android.graphics.drawable.shapes.RectShape() );
    { final android.graphics.Paint paint = rectShapeDrawable.getPaint();
      paint.setColor( color );
      paint.setStyle( android.graphics.Paint.Style.STROKE );
      final android.graphics.Point size = new android.graphics.Point();
      getWindowManager().getDefaultDisplay().getSize( size );
      paint.setStrokeWidth( ( int )( width / 20 * java.lang.Math.sqrt
          ( ( double )size.x *( double )size.y ))); }
    view.setBackground( rectShapeDrawable ); }}

App

                  .---------------------------------.
                  |---------------------------------|
                  | MainActivity                    |
                  |---------------------------------|
                  |.---.############################|
                  || 0 |///////////////////////////#|
valueButton ---------o |///////////////////////////#|
                  |'---'///////////////////////////o-------------- frame
                  |#///////////////////////////////#|
                  |#///////////////////////////////#|
                  |#//////////////////////////o-------------- layout
                  |#///////////////////////////////#|
                  |#///////////////////////////////#|
                  |#///////////////////////////////#|
                  |#///////////////////////////////#|
                  |#///////////////////////////////#|
                  |#################################|
                  '---------------------------------'

Über die Entwicklereinstellung „Developer Options > Drawing > Show Layout Bounds [v]“ kann auf einigen Android -Geräten eine Umrahmung der Komponenten eingestellt werden.

Zusätzlich zeichnet unser Programm einen Rahmen um den Behälter, damit die Form des Behälters zu erkennen ist. Dazu dient die Methode »enframe«.

Der Zähler/Taster kann verwendet werden wie zuvor.

Waagerechte Behälter

Ein Behälter, deren Inhalte horizontal (waagerecht nebeneinander) nebeneinander angezeigt werden, nennen wir auch einen horizontalen Behälter. Da die horizontale Darstellung schon die Voreinstellung ist, müssen wird hierzu nichts weiter einstellen. Das folgende Programm zeigt das Hinzufügen zweier Tastflächen zu einem Behälter. Wir drucken hier nicht das ganze neue Programm ab, sondern zeigen nur, wie das voranstehende Programm an zwei Stellen abzuändern ist.

Vor »android.widget.LinearLayout layout;« einzufügen

  /** Eine Tastflaeche zum Zuruecksetzen des Zaehlers. */
  android.widget.Button resetButton;

  /** Initialisiert die Tastflaeche {@code com.example.MainActivity.this.resetButton}.
    @param context Kontext der Anwendung, fuer die die Tastflaeche bestimmt ist */
  void initResetButton( final android.content.Context context )
  { MainActivity.this.resetButton = new android.widget.Button( context );
    MainActivity.this.resetButton.setGravity
    ( android.view.Gravity.LEFT | android.view.Gravity.TOP  );
    MainActivity.this.resetButton.setText( "reset" );
    MainActivity.this.resetButton.setOnClickListener
    ( new android.view.View.OnClickListener()
      { @java.lang.Override public void onClick( final android.view.View view )
        { MainActivity.this.i = -1; 
          MainActivity.this.valueButton.setText( ++MainActivity.this.i + "" ); }} ); }

Die beiden gleichnamigen Methodendeklaration durch folgende ersetzen

  /** Initialisiert die Anordnung {@code com.example.MainActivity.this.layout}.
    @param context Kontext der Anwendung, fuer welche die Anordnung
    {@code com.example.MainActivity.this.layout} bestimmt ist. */
  void initLayout( final android.content.Context context )
  { MainActivity.this.layout = new android.widget.LinearLayout( this );
    MainActivity.this.layout.addView( MainActivity.this.valueButton );
    MainActivity.this.layout.addView( MainActivity.this.resetButton ); }

  /** Initialisiert dieses MainActivity-Objekt.
    @param context Kontext der Anwendung, zu welcher dieses 
    MainActivity-Objekt gehört. */
  void init( final android.content.Context context )
  { initValue( context );
    initResetButton( context );
    initLayout( context ); }

App

.---------------------------------.
|---------------------------------|
| MainActivity                    |
|---------------------------------|
|.-------------------------------.|
||.---. .-------.                ||
||| 0 | | reset |                ||
|||   | |       |                ||
||'---' '-------'                ||
||                               ||
||                               ||
||                               ||
||                               ||
||                               ||
||                               ||
||                               ||
|| layout                        ||
|'-------------------------------'|
'---------------------------------'

Übungsaufgaben

/ Erweitern des Programms (30 – 60 Minuten)

App

.----------------------------.
|----------------------------|
| MainActivity               |
|----------------------------|
|.--------------------------.|
||.------------------------.||
|||                       0|||
||'------------------------'||
||.------------------------.||
|||.-----------. .-------. |||
|||| increment | | reset | |||
||||           | |       | |||
|||'-----------' '-------' |||
||'------------------------'||
|| hLayout                  ||
||                          ||
|| vLayout                  ||
|'--------------------------'|
'----------------------------'

Fügen Sie ein Textfeld zu der Oberfläche hinzu! Dieses Textfeld soll sich über den beiden Tastern befinden. Dies kann erreicht werden, indem das Textfeld und der Behälter mit den Tastern in einen Behälter eingefügt werden, der seine Inhalte übereinander anordnet. Wir nennen solch einen Behälter auch senkrecht oder vertikal.

Die Gestaltung kann mit zwei verschachtelten Behältern erfolgen: Die beiden Taster befinden sich in einem horizontalen Behälter, und dieser befindet sich wiederum mit einem Text zusammen in einem vertikalen Behälter.

Fügen Sie also nun zu dem Programm noch ein Textfeld und einen weiteren Behälter (»android.widget.LinearLayout«) hinzu und stellen Sie diesen mit Hilfe des Aufrufs »setOrientation( android.widget.LinearLayout.VERTICAL )« auf „vertikal“ ein. Dieser Behälter soll zwei Objekte enthalten: erstens das neue Textfeld und zweitens den horizontalen Behälter aus dem bisherigen Programm.

Der neue Behälter soll ebenfalls umrahmt sein und vom Programm angezeigt werden.

Schließlich sollte der Zählerstand dann in dem Textfeld angezeigt werden und nicht mehr auf dem Taster.

Hinweise:

Erinnern Sie sich, daß Textfelder schon in einer früheren Lektion vorgestellt wurden.
Verwenden Sie die Android -API-Dokumentation, um den Gebrauch unbekannter Methoden zu erlernen.
Erweitern Sie das Programm in kleinen Schritten. Nach jeder kleinen Erweiterung sollte das Programm wieder übersetzt und gestartet werden, um den Erfolg zu kontrollieren.
Falls das Programm abstürzt, können Sie die verursachende Stelle entweder durch schrittweise Entfernen der letzten Änderungen oder mit Hilfe von Textausgaben finden. (Techniken zur Ausgabe von Texten außerhalb der graphischen Benutzeroberfläche wurden im Kurs schon vorgestellt.)

/ Entfernen der Umrahmung (10 – 20 Minuten)

Entfernen Sie alle Programmteile, die zur Einrahmung der Behälter beitragen. (Entweder in dem Ergebnis der vorherigen Übungsaufgabe oder in einem der obenstehenden Beispielprogramme.)