Projekt interfejsu graficznego (Layout)¶

Layout aplikacji jest opisany w formacie xml i znajduje się w pliku /app/src/main/res/layout/activity_main.xml (res jest skrótem od resources, nazwę activity_main dla tego elementu Layout wybraliśmy podczas tworzenia projektu). Layout możemy tworzyć zarówno w sposób wizualny (zakładka Design), jak i w sposób programistyczny (xml). Wszystkie zmiany dokonywane w jednym z tych widoków są automatycznie odzwierciedlane w drugim. Pierwszym krokiem będzie dodanie i rozmieszczenie elementów interfejsu graficznego, a także wybór takich cech jak odstępy, obramowania, kolory, czy reakcje na zdarzenia.

W poprzednim module do projektu aplikacji dodawaliśmy predefinowane komponenty graficzne, takie jak przycisk (Button), czy pole tekstowe (TextView). W tym przypadku Dodajmy jeden przycisk (Button) i jedno pole tekstowe (TextView). W tym przypadku zdefiniujemy klasę rozszerzającą (dziedziczenie) klasę android.view.View. Obiekt takiej klasy, jako obiekt klasy View (podobnie jak poprzednio użyte obiekty Button, czy TextView), będzie mógł być być dodany do obiektu Layout naszej aplikacji.

Napisz definicję klasy, która dziedziczy po klasie android.view.View i dodaj ją do Twojego projektu. Możesz w tym celu posłużyć się kreatorem dodawania plików klas, który można uruchomić po kliknięciu prawym przyciskiem myszy w odpowiedniej lokalizacji w panelu nawigacyjnym po lewej stronie. Żeby posłużyć się nią do zaprojektowania interfejsu graficznego za pomocą xml, Twoja klasa powinna posiadać konstruktor z dwoma parametrami (Context, AttributeSet). Jeżeli chcesz utworzyć interfejs graficzny bezpośrednio w Javie, będziesz potrzebował konstruktora jednoparametrowego (Context). Przykład zawiera definicje obydwu konstruktorów. Tworzenie grafiki odbywa się w metodzie onDraw(), do której przekazywany jest obiekt typu Canvas, podobnie jak w przypadku metody paintComponent() w przypadku komponentów graficznego interfejsu użytkownika biblioteki Swing używanej do programowania aplikacji desktopowych w języku Java. Metody tej nie wywołujemy jawnie, jest ona wywoływana przez maszynę wirtualną, w celu wyrenderowania grafiki.

package com.tango.tmp2;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class A extends View
{
   Paint paint = new Paint();
   float cx=0,cy=0,radius=0;

   public A(Context context)
   {
      super(context);
      paint.setColor(Color.BLACK);
   }


   public A(Context context,AttributeSet attrs)
   {
      super(context,attrs);
      paint.setColor(Color.BLACK);
   }
   public void setCircle(float cx,float cy,float radius)
   {
      this.cx=cx;
      this.cy=cy;
      this.radius=radius;
   }
   @Override
   public void onDraw(Canvas canvas)
   {
      paint.setColor(Color.BLACK);
      canvas.drawCircle(cx, cy, radius, paint);
   }
}

Kolejnym krokiem będzie dodanie obiektu widoku (w tym przypadku obiekt klasy A) do pliku opisującego Layout (activity_main.xml).

<com.tango.tmp2.A
   android:id="@+id/v1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentTop="true"
   android:layout_centerHorizontal="true"
   android:layout_marginTop="100dp"
   android:background="#ff0000"
/>

Jeżeli chcesz użyć klasy widoku jako klasy wewnętrznej (w klasie Activity), odpowiedni wpis w pliku xml będzie miał następującą postać.

<view
   class="com.tango.tmp2.A"
   android:id="@+id/v1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentTop="true"
   android:layout_centerHorizontal="true"
   android:layout_marginTop="100dp"
   android:background="#ff0000"
/>