Android SDK: Erstellen einer Zeichen-App - Grundlegende Funktionen

German (Deutsch) translation by Valentina (you can also view the original English article)

In dieser Serie werden wir eine Fingermal-App für Android mit Touch-Interaktion erstellen. Der Benutzer kann aus einer Farbpalette auswählen, eine Pinselgröße auswählen, löschen, eine neue Zeichnung erstellen oder seine vorhandene Zeichnung in der Gerätegalerie speichern.

Serienformat

Diese Serie zum Erstellen einer Zeichen-App besteht aus drei Teilen:

Im ersten Teil der Serie haben wir die Benutzeroberfläche erstellt. Im zweiten Teil haben wir das Zeichnen auf der Leinwand und das Auswählen von Farben implementiert. In diesem letzten Teil der Serie werden wir die Möglichkeit zum Löschen, zum Erstellen neuer Zeichnungen und zum Speichern einer Zeichnung in der Galerie auf dem Benutzergerät vorstellen. Wir werden uns die Optionen ansehen, mit denen Sie diese App in zukünftigen Tutorials verbessern können, einschließlich Musterfüllungen und Deckkraft.

Finale Vorschau

1. Auswahl der Pinselgrößen

Schritt 1

Als wir das letzte Mal das Zeichnen auf der Leinwand implementiert haben, können wir jetzt den Benutzer eine Pinselgröße auswählen lassen. Die Optionen für die Pinselgröße werden angezeigt, wenn der Benutzer die Pinseltaste drückt, die wir der Benutzeroberfläche hinzugefügt haben. Um darauf zu reagieren, erweitern Sie die Eröffnungszeile Ihrer Hauptdeklaration der Activity-Klasse, um die OnClickListener-Schnittstelle zu implementieren:

1	public class MainActivity extends Activity implements OnClickListener

Für dieses Tutorial benötigen Sie die folgenden Importanweisungen, die der Klasse hinzugefügt werden:

import java.util.UUID;
import android.provider.MediaStore;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.view.View.OnClickListener;
import android.widget.Toast;

Fügen Sie der Klasse die folgenden Instanzvariablen hinzu, um die drei Dimensionswerte zu speichern, die wir beim letzten Mal definiert haben:

1	private float smallBrush, mediumBrush, largeBrush;

Instanziieren Sie sie in onCreate:

1	smallBrush = getResources().getInteger(R.integer.small_size);
2	mediumBrush = getResources().getInteger(R.integer.medium_size);
3	largeBrush = getResources().getInteger(R.integer.large_size);

Diese werden wir später verwenden. Sie sollten bereits eine ImageButton-Instanzvariable in der Hauptklasse namens "currPaint" haben - erweitern Sie diese Zeile, um jetzt eine weitere für die Zeichenschaltfläche hinzuzufügen:

1	private ImageButton currPaint, drawBtn;

Rufen Sie in onCreate einen Verweis auf die Schaltfläche aus dem Layout ab:

1	drawBtn = (ImageButton)findViewById(R.id.draw_btn);

Richten Sie die Klasse als Klick-Listener für die Schaltfläche ein:

1	drawBtn.setOnClickListener(this);

Schritt 2

Fügen Sie der Klasse eine onClick-Methode hinzu:

1	@Override
2	public void onClick(View view){
3	//respond to clicks
4	}

Überprüfen Sie innerhalb der Methode, ob auf die Schaltfläche zum Zeichnen geklickt wurde:

1	if(view.getId()==R.id.draw_btn){
2	//draw button clicked
3	}

Wir werden der onClick-Methode für die anderen Schaltflächen später bedingte Blöcke hinzufügen.

Schritt 3

Wenn der Benutzer auf die Schaltfläche klickt, wird ein Dialogfeld mit den drei Schaltflächengrößen angezeigt. Erstellen Sie innerhalb des if-Blocks einen Dialog und legen Sie den Titel fest:

1	final Dialog brushDialog = new Dialog(this);
2	brushDialog.setTitle("Brush size:");

Lassen Sie uns das Dialoglayout in XML definieren - fügen Sie eine neue Datei im Ordner "res/layout" Ihrer App hinzu und nennen Sie sie "brush_chooser.xml". und geben Sie die folgende Gliederung ein:

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:gravity="center"
	android:orientation="vertical" >

</LinearLayout>

Fügen Sie im linearen Layout für jede Größe eine Schaltfläche hinzu:

<ImageButton
	android:id="@+id/small_brush"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_weight="1"
	android:contentDescription="@string/sml"
	android:src="@drawable/small" />

<ImageButton
	android:id="@+id/medium_brush"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_weight="1"
	android:contentDescription="@string/med"
	android:src="@drawable/medium" />

<ImageButton
	android:id="@+id/large_brush"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_weight="1"
	android:contentDescription="@string/lrg"
	android:src="@drawable/large" />

Jede Schaltfläche hat eine ID zur Identifizierung im Aktivitäts-Java-Code. Sie werden feststellen, dass jeder auch ein Inhaltsbeschreibungsattribut hat - fügen Sie die angegebenen Strings zu Ihrer XML-Datei "res/values" Strings hinzu:

1	<string name="sml">Small</string>
2	<string name="med">Medium</string>
3	<string name="lrg">Large</string>

Wie Sie in der Layoutdatei sehen können, hat jede Schaltfläche auch eine zeichenbare Datei, die als Quellattribut aufgeführt ist. Erstellen Sie jetzt für jede dieser Dateien neue Dateien in Ihren "res/drawables"-Ordnern, beginnend mit "small.xml" und geben Sie folgenden Inhalt ein:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:dither="true"
	android:shape="oval" >

	<size
		android:height="@dimen/small_brush"
		android:width="@dimen/small_brush" />

	<solid android:color="#FF666666" />

</shape>

Beachten Sie, dass wir die von uns definierten Dimensionswerte verwenden. Fügen Sie als nächstes "medium.xml" zum Drawables-Ordner hinzu und geben Sie die folgende Form ein:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:dither="true"
	android:shape="oval" >

	<size
		android:height="@dimen/medium_brush"
		android:width="@dimen/medium_brush" />

	<solid android:color="#FF666666" />

</shape>

Fügen Sie abschließend "large.xml" mit folgendem Inhalt hinzu:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:dither="true"
	android:shape="oval" >

	<size
		android:height="@dimen/large_brush"
		android:width="@dimen/large_brush" />

	<solid android:color="#FF666666" />

</shape>

Zurück in Ihrer OnClick-Methode der Hauptaktivitätsklasse, nachdem Sie den Dialog erstellt und seinen Titel festgelegt haben, können Sie nun das Layout festlegen:

1	brushDialog.setContentView(R.layout.brush_chooser);

Schritt 4

Bevor wir mit dem Dialog fortfahren, ändern wir die Ansichtsklasse der benutzerdefinierten Zeichnung, um andere Pinselgrößen zu verwenden. Fügen Sie in Ihrer DrawingView-Klasse die folgenden Importanweisungen für dieses Tutorial hinzu:

1	import android.graphics.PorterDuff;
2	import android.graphics.PorterDuffXfermode;
3	import android.util.TypedValue;

Fügen Sie der Klasse zwei Instanzvariablen hinzu:

1	private float brushSize, lastBrushSize;

Wir verwenden die erste Variable für die Pinselgröße und die zweite, um die zuletzt verwendete Pinselgröße zu verfolgen, wenn der Benutzer zum Radiergummi wechselt, damit wir wieder auf die richtige Größe zurückgreifen können, wenn er sich entscheidet, wieder zum Zeichnen zu wechseln. Fügen Sie in der setupDrawing-Methode vor dem bereits enthaltenen Code Folgendes hinzu, um diese Variablen zu instanziieren:

1	brushSize = getResources().getInteger(R.integer.medium_size);
2	lastBrushSize = brushSize;

Wir verwenden zunächst den Dimensionswert für den mittelgroßen Pinsel. Sie können jetzt die Zeile in der Methode aktualisieren, in der Sie die Strichbreite mit einem hartcodierten Wert festlegen, um stattdessen diesen Variablenwert zu verwenden:

1	drawPaint.setStrokeWidth(brushSize);

Fügen Sie der Klasse die folgende Methode hinzu, um die Pinselgröße festzulegen:

1	public void setBrushSize(float newSize){
2	//update size
3	}

Aktualisieren Sie innerhalb der Methode die Pinselgröße mit dem übergebenen Wert:

1	float pixelAmount = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
2	newSize, getResources().getDisplayMetrics());
3	brushSize=pixelAmount;
4	drawPaint.setStrokeWidth(brushSize);

Wir übergeben den Wert aus der Dimensionsdatei, wenn wir diese Methode aufrufen, also müssen wir den Dimensionswert berechnen. Wir aktualisieren die Variable und das Paint-Objekt, um die neue Größe zu verwenden. Fügen Sie nun Methoden hinzu, um die andere von uns erstellte Größenvariable zu erhalten und festzulegen:

public void setLastBrushSize(float lastSize){
	lastBrushSize=lastSize;
}
public float getLastBrushSize(){
	return lastBrushSize;
}

Wir werden diese Methoden aus der Hauptklasse Activity aufrufen.

Schritt 5

Zurück in Ihrer Hauptklasse Activity vervollständigen wir den Dialog-Code in der onClick-Methode. Nachdem Sie die Inhaltsansicht des Dialog-Objekts eingestellt haben, hören Sie auf Klicks auf die drei Größenschaltflächen, beginnend mit der kleinen:

ImageButton smallBtn = (ImageButton)brushDialog.findViewById(R.id.small_brush);
smallBtn.setOnClickListener(new OnClickListener(){
	@Override
	public void onClick(View v) {
		drawView.setBrushSize(smallBrush);
		drawView.setLastBrushSize(smallBrush);
		brushDialog.dismiss();
	}
});

Wir legen die Größe mit den Methoden fest, die wir der benutzerdefinierten View-Klasse hinzugefügt haben, sobald der Benutzer auf eine Schaltfläche für die Pinselgröße klickt, und schließen dann das Dialogfeld sofort. Machen Sie als nächstes dasselbe für die mittlere und große Schaltfläche:

ImageButton mediumBtn = (ImageButton)brushDialog.findViewById(R.id.medium_brush);
mediumBtn.setOnClickListener(new OnClickListener(){
	@Override
	public void onClick(View v) {
		drawView.setBrushSize(mediumBrush);
		drawView.setLastBrushSize(mediumBrush);
		brushDialog.dismiss();
	}
});

ImageButton largeBtn = (ImageButton)brushDialog.findViewById(R.id.large_brush);
largeBtn.setOnClickListener(new OnClickListener(){
	@Override
	public void onClick(View v) {
		drawView.setBrushSize(largeBrush);
		drawView.setLastBrushSize(largeBrush);
		brushDialog.dismiss();
	}
});

Vervollständigen Sie den Abschnitt der Zeichenschaltfläche von onClick, indem Sie den Dialog anzeigen:

1	brushDialog.show();

Der Dialog wird angezeigt, bis der Benutzer eine Auswahl trifft oder zur Aktivität zurückkehrt.

Schritt 6

Verwenden Sie die neue Methode, um die anfängliche Pinselgröße in onCreate festzulegen:

1	drawView.setBrushSize(mediumBrush);

2. Löschen

Schritt 1

Jetzt fügen wir der App das Löschen hinzu. Fügen Sie in der Ansichtsklasse der benutzerdefinierten Zeichnung eine boolesche Instanzvariable hinzu, die als Flag dafür dient, ob der Benutzer gerade löscht oder nicht:

1	private boolean erase=false;

Zunächst gehen wir davon aus, dass der Benutzer zeichnet und nicht löscht. Fügen Sie der Klasse die folgende Methode hinzu:

1	public void setErase(boolean isErase){
2	//set erase true or false
3	}

Aktualisieren Sie innerhalb der Methode zuerst die Flag-Variable:

1	erase=isErase;

Ändern Sie nun das Paint-Objekt, um es zu löschen oder zum Zeichnen zurückzukehren:

1	if(erase) drawPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
2	else drawPaint.setXfermode(null);

Wenn Sie nach einem fortgeschrittenen Thema suchen, werfen Sie einen Blick auf die PorterDuff.Mode-Optionen.

Schritt 2

Zurück in der Hauptklasse Activity fügen Sie der Liste der Instanzvariablen einen weiteren ImageButton hinzu:

1	private ImageButton currPaint, drawBtn, eraseBtn;

Rufen Sie in onCreate einen Verweis auf die Schaltfläche ab und richten Sie die Klasse so ein, dass sie auf Klicks lauscht:

1	eraseBtn = (ImageButton)findViewById(R.id.erase_btn);
2	eraseBtn.setOnClickListener(this);

Fügen Sie eine bedingte Anweisung für die Schaltfläche in onClick nach der Bedingung für die Schaltfläche zum Zeichnen hinzu:

1	else if(view.getId()==R.id.erase_btn){
2	//switch to erase - choose size
3	}

Wie bei der Schaltfläche „Zeichnen“ lassen wir den Benutzer eine Radiergummigröße aus einem Dialogfeld auswählen. Erstellen Sie innerhalb des Bedingungsblocks für die Schaltfläche zum Löschen den Dialog wie zuvor:

1	final Dialog brushDialog = new Dialog(this);
2	brushDialog.setTitle("Eraser size:");
3	brushDialog.setContentView(R.layout.brush_chooser);

Wir verwenden das gleiche Layout wie der Draw-Button Dialog. Richten Sie wie zuvor Klicklistener für die Größenschaltflächen ein und rufen Sie diesmal die neue Löschmethode auf, die wir der View-Klasse hinzugefügt haben:

ImageButton smallBtn = (ImageButton)brushDialog.findViewById(R.id.small_brush);
smallBtn.setOnClickListener(new OnClickListener(){
	@Override
	public void onClick(View v) {
		drawView.setErase(true);
		drawView.setBrushSize(smallBrush);
		brushDialog.dismiss();
	}
});
ImageButton mediumBtn = (ImageButton)brushDialog.findViewById(R.id.medium_brush);
mediumBtn.setOnClickListener(new OnClickListener(){
	@Override
	public void onClick(View v) {
		drawView.setErase(true);
		drawView.setBrushSize(mediumBrush);
		brushDialog.dismiss();
	}
});
ImageButton largeBtn = (ImageButton)brushDialog.findViewById(R.id.large_brush);
largeBtn.setOnClickListener(new OnClickListener(){
	@Override
	public void onClick(View v) {
		drawView.setErase(true);
		drawView.setBrushSize(largeBrush);
		brushDialog.dismiss();
	}
});

Wir rufen die Methode zum Festlegen der Pinselgröße wie beim Zeichnen-Button auf, diesmal setzen wir zuerst das Erase-Flag auf true. Zeigen Sie schließlich den Dialog an:

1	brushDialog.show();

Der Benutzer kann mit der Berührungsinteraktion wie beim Zeichnen löschen:

Schritt 3

Wenn der Benutzer auf die Schaltfläche zum Zeichnen klickt und eine Pinselgröße auswählt, müssen wir wieder zum Zeichnen zurückkehren, falls sie zuvor gelöscht wurden. Rufen Sie in den drei Klick-Listenern, die Sie für die kleinen, mittleren und großen Schaltflächen im Abschnitt für die Zeichenschaltfläche von onClick hinzugefügt haben, die Löschmethode mit einem falschen Parameter auf - fügen Sie dies in jedem onClick hinzu, bevor Sie dismiss für das "brushDialog"-Objekt aufrufen:

1	drawView.setErase(false);

Wenn der Benutzer gelöscht hat und auf eine Farbschaltfläche klickt, gehen wir davon aus, dass er zurück zum Zeichnen wechseln möchte. Rufen Sie in der paintClicked-Methode vor dem vorhandenen Code die Löschmethode auf und übergeben Sie false:

1	drawView.setErase(false);

Setzen Sie die Pinselgröße, die sich noch in PaintClicked befindet, auf die zuletzt verwendete Pinselgröße zurück, anstatt sie zu löschen:

1	drawView.setBrushSize(drawView.getLastBrushSize());

Diese Art der Verarbeitung ist motiviert durch Annahmen darüber, was der Benutzer aufgrund seiner Aktionen tun möchte - Sie könnten diese App möglicherweise in diesem Sinne verbessern. Denken Sie also daran, wenn Sie später an der App weiterarbeiten möchten.

3. Neue Zeichnungen

Schritt 1

Wir haben eine Schaltfläche hinzugefügt, mit der der Benutzer eine neue Zeichnung starten kann, also implementieren wir das jetzt. Fügen Sie der Liste der ImageButton-Instanzvariablen in Ihrer Hauptaktivitätsklasse eine weitere hinzu:

1	private ImageButton currPaint, drawBtn, eraseBtn, newBtn;

Instanziieren Sie es mit einem Verweis auf die im Layout aufgeführte Schaltfläche in onCreate und hören Sie auch auf Klicks:

1	newBtn = (ImageButton)findViewById(R.id.new_btn);
2	newBtn.setOnClickListener(this);

Schritt 2

Fügen Sie in onClick einen weiteren Bedingungsblock für die neue Schaltfläche hinzu:

1	else if(view.getId()==R.id.new_btn){
2	//new button
3	}

Fügen Sie in Ihrer benutzerdefinierten Zeichnungsansichtsklasse eine Methode hinzu, um eine neue Zeichnung zu starten:

1	public void startNew(){
2	drawCanvas.drawColor(0, PorterDuff.Mode.CLEAR);
3	invalidate();
4	}

Die Methode löscht einfach den Canvas und aktualisiert die Anzeige.

Zurück im Bedingungsblock der Hauptaktivitätsklasse für die neue Schaltfläche in onCreate überprüfen wir, ob der Benutzer definitiv eine neue Zeichnung starten möchte:

AlertDialog.Builder newDialog = new AlertDialog.Builder(this);
newDialog.setTitle("New drawing");
newDialog.setMessage("Start new drawing (you will lose the current drawing)?");
newDialog.setPositiveButton("Yes", new DialogInterface.OnClickListener(){
	public void onClick(DialogInterface dialog, int which){
		drawView.startNew();
		dialog.dismiss();
	}
});
newDialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener(){
	public void onClick(DialogInterface dialog, int which){
		dialog.cancel();
	}
});
newDialog.show();

Der Dialog ermöglicht es dem Benutzer, seine Meinung zu ändern, indem er die neue Methode aufruft, wenn er sich entscheidet, fortzufahren und eine neue Zeichnung zu starten. In diesem Fall wird die aktuelle Zeichnung gelöscht.

4. Zeichnungen speichern

Schritt 1

Der einzige verbleibende Teil der App-Funktionalität ist die Möglichkeit, Zeichnungen auf dem Gerät zu speichern. Fügen Sie die Schaltfläche Speichern als letzte in der Folge von ImageButton-Instanzvariablen in der Hauptklasse Activity hinzu:

1	private ImageButton currPaint, drawBtn, eraseBtn, newBtn, saveBtn;

Instanziieren Sie es und hören Sie auf Klicks in onCreate:

1	saveBtn = (ImageButton)findViewById(R.id.save_btn);
2	saveBtn.setOnClickListener(this);

Fügen Sie eine Bedingung dafür in onClick hinzu:

1	else if(view.getId()==R.id.save_btn){
2	//save drawing
3	}

Verwenden wir einen ähnlichen Algorithmus wie den, den wir zum Erstellen neuer Zeichnungen verwendet haben, um zu überprüfen, ob der Benutzer fortfahren und speichern möchte:

AlertDialog.Builder saveDialog = new AlertDialog.Builder(this);
saveDialog.setTitle("Save drawing");
saveDialog.setMessage("Save drawing to device Gallery?");
saveDialog.setPositiveButton("Yes", new DialogInterface.OnClickListener(){
	public void onClick(DialogInterface dialog, int which){
		//save drawing
	}
});
saveDialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener(){
	public void onClick(DialogInterface dialog, int which){
		dialog.cancel();
	}
});
saveDialog.show();

Wenn der Benutzer fortfahren und speichern möchte, müssen wir die aktuell angezeigte Ansicht als Bild ausgeben. Beginnen Sie in der onClick-Methode für den Speicherdialog damit, den Zeichnungs-Cache in der benutzerdefinierten Ansicht zu aktivieren:

1	drawView.setDrawingCacheEnabled(true);

Versuchen Sie nun, das Bild in eine Datei zu schreiben:

1	String imgSaved = MediaStore.Images.Media.insertImage(
2	getContentResolver(), drawView.getDrawingCache(),
3	UUID.randomUUID().toString()+".png", "drawing");

Nehmen Sie sich einen Moment Zeit, um sich diesen Code anzusehen. Wir verwenden die Methode insertImage, um zu versuchen, das Bild in den Medienspeicher für Bilder auf dem Gerät zu schreiben, der es in der Benutzergalerie speichern sollte. Wir übergeben den Content Resolver, Drawing Cache für die angezeigte View, einen zufällig generierten UUID-String für den Dateinamen mit PNG-Erweiterung und eine kurze Beschreibung. Die Methode gibt die URL des erstellten Bildes zurück oder null, wenn der Vorgang nicht erfolgreich war. Dadurch können wir Benutzerfeedback geben:

if(imgSaved!=null){
	Toast savedToast = Toast.makeText(getApplicationContext(), 
		"Drawing saved to Gallery!", Toast.LENGTH_SHORT);
	savedToast.show();
}
else{
	Toast unsavedToast = Toast.makeText(getApplicationContext(), 
		"Oops! Image could not be saved.", Toast.LENGTH_SHORT);
	unsavedToast.show();
}

Löschen Sie den Zeichnungs-Cache, damit alle zukünftigen gespeicherten Zeichnungen nicht den vorhandenen Cache verwenden:

1	drawView.destroyDrawingCache();

Fügen Sie schließlich Ihrer Projektmanifestdatei die folgende Berechtigung hinzu:

1	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Beim Durchsuchen der Gerätegalerie sollte der Benutzer jetzt sein Zeichnungsbild sehen können:

Abschluss

Dieses Tutorial vervollständigt die Funktionalität unserer grundlegenden Zeichen-App! Wenn Sie die App ausführen, sollten Sie in der Lage sein zu zeichnen, Farben auszuwählen, Pinsel- und Radiergummigrößen auszuwählen, neue Zeichnungen zu erstellen und Zeichnungen in der Galerie zu speichern. Wir haben den grundlegenden Prozess zum Erleichtern des Zeichnens mithilfe der Touchscreen-Interaktion auf Android durchgearbeitet, aber es gibt viele Möglichkeiten, die Anwendung zu verbessern. Versuchen Sie also, damit zu experimentieren, um Ihre eigenen zusätzlichen Funktionen zu integrieren. In zukünftigen Tutorials werden wir die Verwendung von Musterfüllungen behandeln, anstatt nur mit Volltonfarben zu zeichnen, die Deckkraft zu verwenden und den Benutzer eine Deckkraftstufe auswählen zu lassen. Wir werden auch das Zeichnen auf Android-Geräten behandeln, bei denen das Interaktionsmodell kein Touchscreen ist, beispielsweise mit einer Maus oder einem Trackball.