Piszemy painta na Androida

Znamy juz większość podstawowych funkcji. Pora na przykładowy program.

Tym razem pora na painta. Wypisze na początek podstawowe funkcjonalności które chcemy osiągnąć:

• dostępne narzędzie: pędzel
• wybór koloru z 3 dostępnych: czerwony, niebieski i zielony
• zmiana wielkości pędzla za pomocą suwaka
• opcje rysowania zmieniane w menu
• aplikacja działająca w trybie pełnoekranowym

Docelowa aplikacja:

Zacznijmy od stworzenia nowego projektu. Następnie przejdźmy do ustawienia layoutu. Tym razem nie będziemy jednak przeciągać gotowych widgetów, stworzymy własny.

Napiszmy następującą klasę:

package pl.javastart;
 
 import android.content.Context;
 import android.graphics.Canvas;
 import android.util.AttributeSet;
 import android.view.MotionEvent;
 import android.view.SurfaceHolder;
 import android.view.SurfaceView;
 
 public class PaintView extends SurfaceView implements SurfaceHolder.Callback {
 
 	public PaintView(Context context, AttributeSet attrs, int defStyle) {
 		super(context, attrs, defStyle);
 		// TODO Auto-generated constructor stub
 	}
 
 	public PaintView(Context context, AttributeSet attrs) {
 		super(context, attrs);
 		// TODO Auto-generated constructor stub
 	}
 
 	public PaintView(Context context) {
 		super(context);
 		// TODO Auto-generated constructor stub
 	}
 
 	public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
 		// TODO Auto-generated method stub
 	}
 
 	public void surfaceCreated(SurfaceHolder arg0) {
 		// TODO Auto-generated method stub
 	}
 
 	public void surfaceDestroyed(SurfaceHolder arg0) {
 		// TODO Auto-generated method stub
 	}
 
 	public boolean onTouchEvent(MotionEvent event) {
 		return super.onTouchEvent(event);
 	}
 
 	protected void onDraw(Canvas canvas) {
 	}
 
 }

Krótkie omówienie:

Jako że potrzebujemy miejsca na którym moglibyśmy w przyszłości rysować, oraz wykrywającego nasz dotyk, oto ono.

Nasza klasa rozszerza SurfaceView dzięki czemu możemy z łatwością obsługiwać rysowanie na całym ekranie. Dodatkowo implementujemy interfejs SurfaceHolder.Callback, co pozwala na przechwytywanie informacji o zmianach ekranu.

Poza tym przesłoniłem dwie metody: onTouchEvent(..) oraz onDraw(...), których będziemy używali do wykrywania dotyku i odpowiedniej obsługi.

Przejdźmy teraz do ustawienia pliku xml z interfejsem. Po wybraniu zakładki Custom i naciśnięciu Refresh powinien pojawić się nasz View.

Layout w jakim go umieścimy jest dowolny. Ja wybrałem LinearLayout. Następnie rozciągnąłem go na cały ekran. Ustawiłem także tło na białe.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent" >
 
     <pl.javastart.PaintView
         android:id="@+id/paintView"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:background="#ffffff" />
 
 </LinearLayout>

Jak widać, element został dodany wraz z informacją o paczce w której się znajduje. Powinno działać :)

Zajmijmy się na początku najciekawszym - obsługą dotyku.

	
 	public boolean onTouchEvent(MotionEvent event) {
 		Log.d("dotyk", event.getX()+" "+event.getY());
 
 		return true;
 		//return super.onTouchEvent(event);
 	}

Ważnym elementem tutaj jest zwracanie false. Jest to parametr stwierdzający, czy dotyk został już "zużyty". Jeśli zwrócimy true, to aktualne dotknięcie nie będzie już sprawdzane, przez co nie uzyskamy informacji o przesunięciu palca.

Wykorzystamy Log, żeby sprawdzić czy wszystko działa jak należy. Więcej informacji o użyciu Logu wkrótce.

Po uruchomieniu aplikacji i przejechaniu palcem powinniśmy ujrzeć odpowiednie informacje w logu:

Znak, że działa.

Nic się jeszcze nie rysuje, zajmijmy się tym teraz. Dodamy jeden stały kolor, później zajmiemy się opcjami.

Plan jest następujący:

Przy każdym dotknięciu ekranu dodajemy element do listy, oraz przerysowujemy cały ekran.

	
 	public boolean onTouchEvent(MotionEvent event) {
 
 		RectF oval = new RectF(event.getX()-50, event.getY()-50, event.getX() + 50, event.getY() + 50);
 		punkty.add(oval);
 		invalidate();
 		return true;
 	}

Tworzymy nowy obiekt w którym podajemy koordynaty naszego przyszłego punktu na ekranie, w tym przypadku od początku (lewa strona i góra) odejmuję 50px a do końca (prawa strona i dół) dodaję 50px, żeby środek punku znajdował się w miejscu dotknięcia.

Następnie metoda invalidate() przekazuje informację, że wymagane jest przemalowanie ekranu, czyli w naszym wypadku wywołanie metody odDraw(Canvas canvas)

W metodzie onDraw((...) za każdym razem rysujemy nowe elementy:

	
 	protected void onDraw(Canvas canvas) {
 
 		paint.setColor(Color.RED);
 
 		for (RectF punkt : punkty) {
 			canvas.drawOval(punkt, paint);
 		}
 
 	}

Aplikacja powinna już działać (screen z mojego telefonu)

Cały kod programu:

package pl.javastart;
 
 import java.util.ArrayList;
 
 import android.content.Context;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.RectF;
 import android.util.AttributeSet;
 import android.view.MotionEvent;
 import android.view.SurfaceHolder;
 import android.view.SurfaceView;
 
 public class PaintView extends SurfaceView implements SurfaceHolder.Callback {
 
 	ArrayList<RectF> punkty;
 	Paint paint = new Paint();
 
 	public PaintView(Context context, AttributeSet attrs) {
 		super(context, attrs);
 		punkty = new ArrayList<RectF>();
 		paint = new Paint();
 	}
 
 	public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
 		// TODO Auto-generated method stub
 	}
 
 	public void surfaceCreated(SurfaceHolder arg0) {
 
 	}
 
 	public void surfaceDestroyed(SurfaceHolder arg0) {
 		// TODO Auto-generated method stub
 	}
 
 	public boolean onTouchEvent(MotionEvent event) {
 
 		RectF oval = new RectF(event.getX()-50, event.getY()-50, event.getX() + 50, event.getY() + 50);
 		punkty.add(oval);
 		invalidate();
 		return true;
 	}
 
 	protected void onDraw(Canvas canvas) {
 
 		paint.setColor(Color.RED);
 
 		for (RectF punkt : punkty) {
 			canvas.drawOval(punkt, paint);
 		}
 
 	}
 
 }

Pozostało dodać menu i odpowiednie opcje.

paint.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
 
     <item
         android:id="@+id/menu_kolor"
         android:orderInCategory="1"
         android:title="@string/kolor"/>
     <item
         android:id="@+id/menu_rozmiar"
         android:orderInCategory="2"
         android:title="@string/rozmiar"/>
 
 </menu>

Zacznijmy od zmiany koloru pędzla.

PaintActivity.java:

package pl.javastart;
 
 import android.app.Activity;
 import android.app.AlertDialog;
 import android.content.Context;
 import android.content.DialogInterface;
 import android.graphics.Color;
 import android.os.Bundle;
 import android.view.Menu;
 import android.view.MenuItem;
 import android.widget.RadioGroup;
 import android.widget.Toast;
 
 public class PaintActivity extends Activity {
 
 	PaintView paintView;
 	Context ctx;
 	RadioGroup radioGroup;
 
 	public void onCreate(Bundle savedInstanceState) {
 		super.onCreate(savedInstanceState);
 		setContentView(R.layout.paint);
 		paintView = (PaintView) findViewById(R.id.paintView);
 		ctx = getApplicationContext();
 	}
 
 	public boolean onCreateOptionsMenu(Menu menu) {
 		getMenuInflater().inflate(R.menu.paint, menu);
 		return true;
 	}
 
 	public boolean onOptionsItemSelected(MenuItem item) {
 
 		switch (item.getItemId()) {
 		case R.id.menu_kolor:
 
 			AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);
 			alertDialogBuilder.setTitle("Wybor koloru");
 			final CharSequence[] items = { "Czerwony", "Zielony", "Niebieski" };
 
 			alertDialogBuilder.setItems(items, new DialogInterface.OnClickListener() {
 				public void onClick(DialogInterface dialog, int item) {
 					switch (item) {
 					case 0:
 						paintView.setColor(Color.RED);
 						break;
 					case 1:
 						paintView.setColor(Color.GREEN);
 						break;
 					case 2:
 						paintView.setColor(Color.BLUE);
 						break;
 					}
 				}
 			});
 
 			AlertDialog alertDialog = alertDialogBuilder.create();
 			alertDialog.show();
 
 			break;
 
 		}
 
 		return true;
 	}
 }

To jednak sprawi, że wszystko co narysowaliśmy do tej pory również zmieni kolor. Stwórzmy więc naszą klasę przechowującą obiekty do naysowania z dodatkową informacją o kolorze:

ObiektDoNarysowania.java

package pl.javastart;
 
 import android.graphics.RectF;
 
 public class ObiektDoNarysowania {
 
 	public int kolor;
 	public RectF figura;
 
 	public ObiektDoNarysowania(int kolor, RectF figura) {
 		this.kolor = kolor;
 		this.figura = figura;
 	}
 
 }

Musimy teraz odpowiednio zmodyfikować klasę PaintView:

package pl.javastart;
 
 import java.util.ArrayList;
 
 import android.content.Context;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.RectF;
 import android.util.AttributeSet;
 import android.view.MotionEvent;
 import android.view.SurfaceHolder;
 import android.view.SurfaceView;
 
 public class PaintView extends SurfaceView implements SurfaceHolder.Callback {
 
 	ArrayList<ObiektDoNarysowania> punkty;
 	Paint paint = new Paint();
 	private int color;
 
 	public PaintView(Context context, AttributeSet attrs) {
 		super(context, attrs);
 		punkty = new ArrayList<ObiektDoNarysowania>();
 		paint = new Paint();
 		color = Color.RED;
 	}
 
 	public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
 		// TODO Auto-generated method stub
 	}
 
 	public void surfaceCreated(SurfaceHolder arg0) {
 
 	}
 
 	public void surfaceDestroyed(SurfaceHolder arg0) {
 		// TODO Auto-generated method stub
 	}
 
 	public boolean onTouchEvent(MotionEvent event) {
 
 		RectF oval = new RectF(event.getX() - 50, event.getY() - 50, event.getX() + 50, event.getY() + 50);
 		punkty.add(new ObiektDoNarysowania(color, oval));
 		invalidate();
 		return true;
 	}
 
 	protected void onDraw(Canvas canvas) {
 
 		for (ObiektDoNarysowania punkt : punkty) {
 			paint.setColor(punkt.kolor);
 			canvas.drawOval(punkt.figura, paint);
 		}
 
 	}
 
 	public void setColor(int color) {
 		this.color = color;
 	}
 
 }

Działa jak marzenie:

Pora na rozmiar pędzla.

Tutaj potrzebny będzie nowy layout. Jako suwaka użyjemy ProgressBar.

rozmiar.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent" >
 
     <SeekBar
         android:id="@+id/seekBar"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1" />
 
 </LinearLayout>

Dodajmy opcję do menu:

		case R.id.menu_rozmiar:
 
 			LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
 		    View layout = inflater.inflate(R.layout.rozmiar, null);
 		    AlertDialog.Builder builder = new AlertDialog.Builder(this)
 		    .setView(layout);
 		    alertDialog = builder.create();
 		    alertDialog.show();
 		    SeekBar sb = (SeekBar)layout.findViewById(R.id.seekBar);
 		    sb.setMax(30);
 		    sb.setProgress(paintView.getRozmiar()-20);
 		    sb.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
 
 				public void onStartTrackingTouch(SeekBar arg0) {
 					// TODO Auto-generated method stub
 
 				}
 
 				public void onStopTrackingTouch(SeekBar arg0) {
 					// TODO Auto-generated method stub
 
 				}
 
 				public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
 					paintView.setRozmiar(20+progress);
 
 				}
 		    });

Tutaj znowu tworzę AlertDialog, tym razem dodaję do niego własny widok. Ustawiam maksymalną wartość dla SeekBara. Niestety nie da się ustawić wartości minimalnej, dlatego przy ustawianiu będę dodawał 20, co da nam rozmiar pędzla w przedziale od 20px do 50px.

Podpiąłem listener i przy każdej zmianie ustawiana jest odpowiednia wartość wielkości pędzla.

Jak już zapewne zauważyliście do PaintView dodałem metody getRozmiar() oraz setRozmiar(). Zmodyfikowałem również tworzenie obiektu:

RectF oval = new RectF(event.getX() - rozmiar, event.getY() - rozmiar, event.getX() + rozmiar, event.getY() + rozmiar);

Na koniec dodajmy fulscreena. Wy tym celu dodajemy

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

do Manifestu. Powinno to wyglądać mniej więcej tak:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="pl.javastart"
     android:versionCode="1"
     android:versionName="1.0" >
 
     <uses-sdk
         android:minSdkVersion="10"
         android:targetSdkVersion="15" />
 
     <application
         android:icon="@drawable/ic_launcher"
         android:label="@string/app_name"
         android:theme="@style/AppTheme" >
         <activity
             android:name=".PaintActivity"
             android:label="@string/title_activity_paint"
             android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
     </application>
 
 </manifest>

No i na tym zakończyliśmy tworzenie painta.

Zadania do własnego wykonania:

Poziom początkujący

• dodaj kolor biały, czarny i fioletowy

• dodaj opcję czyszczenia ekranu

Poziom średnio zaawansowany:

• dodaj informację o aktualnym rozmiarze pędzla pod suwakiem

• dodaj kwadratowy pędzel i możliwość wyboru typu pędzla

Dzięki za uwagę. Problemy, pytania? Komentarze są do Waszej dyspozycji.