Membuat Sebuah Custom Drawing View Sederhana di Android

thumbnail

Pertama kita Extend View class dengan class kita dan mengimplement method constructor.

1. Inisialisasi drawing primitive dan paint dalam semua constructor.

Inisialisasi

1
<span style="font-weight: 400;">private int pathIndex = 0;</span>
1
<span style="font-weight: 400;">private ArrayList&lt;Path&gt; pathLists = new ArrayList&lt;&gt;();</span>
1
<span style="font-weight: 400;">private ArrayList&lt;Paint&gt; paintLists = new ArrayList&lt;&gt;();</span>
1
<span style="font-weight: 400;">private float startX = 0F;</span>
1
<span style="font-weight: 400;">private float startY = 0F;</span>
1
<span style="font-weight: 400;">private void init() {</span>
1
<span style="font-weight: 400;">   pathLists.add(new Path());</span>
1
<span style="font-weight: 400;">   paintLists.add(createPaint());</span>
1
<span style="font-weight: 400;">   pathIndex++;</span>
1
<span style="font-weight: 400;">}</span>

Buat instance dari Paint

1
<span style="font-weight: 400;">Paint paint = new Paint();</span>
1
<span style="font-weight: 400;">paint.setStyle(Paint.Style.</span><i><span style="font-weight: 400;">STROKE</span></i><span style="font-weight: 400;">);</span>
1
<span style="font-weight: 400;">paint.setStrokeWidth(3F);</span>

Buat instance dari Path dan pindah ke posisi sekarang

1
<span style="font-weight: 400;">Path path = new Path();</span>
1
<span style="font-weight: 400;">startX = event.getX();</span>
1
<span style="font-weight: 400;">startY = event.getY();</span>

 

1
<span style="font-weight: 400;">path.moveTo(startX, startY);</span>

2. Override method onDraw dan perbarui Canvas untuh menggambar jalur (Path)

Perbarui path dengan Canvas

1
<span style="font-weight: 400;">@Override</span>
1
<span style="font-weight: 400;">protected void onDraw(Canvas canvas) {</span>
1
<span style="font-weight: 400;">   super.onDraw(canvas);</span>
1
<span style="font-weight: 400;">   canvas.drawColor(Color.</span><i><span style="font-weight: 400;">WHITE</span></i><span style="font-weight: 400;">);</span>

 

1
<span style="font-weight: 400;">   for (int index = 0; i &lt; pathIndex; index++) {</span>
1
<span style="font-weight: 400;">       Path path = pathLists.get(index);</span>
1
<span style="font-weight: 400;">       Paint paint = paintLists.get(index);</span>

 

1
<span style="font-weight: 400;">       canvas.drawPath(path, paint);</span>
1
<span style="font-weight: 400;">   }</span>
1
<span style="font-weight: 400;">}</span>

3. Override method onTouchEvent dan atur event listener untuk menggambar

Sebuah view tidak hanya bertanggung jawab untuk menggambar tapi juga menangani suatu event tertentu.

1
<span style="font-weight: 400;">@Override</span>
1
<span style="font-weight: 400;">public boolean onTouchEvent(MotionEvent event) {</span>
1
<span style="font-weight: 400;">   switch (event.getAction()) {</span>
1
<span style="font-weight: 400;">       case MotionEvent.</span><i><span style="font-weight: 400;">ACTION_DOWN</span></i><span style="font-weight: 400;">:</span>
1
<span style="font-weight: 400;">           ----</span>
1
<span style="font-weight: 400;">           break;</span>
1
<span style="font-weight: 400;">       case MotionEvent.</span><i><span style="font-weight: 400;">ACTION_MOVE</span></i><span style="font-weight: 400;">:</span>
1
<span style="font-weight: 400;">           ----</span>
1
<span style="font-weight: 400;">           break;</span>
1
<span style="font-weight: 400;">       default:</span>
1
<span style="font-weight: 400;">           break;</span>
1
<span style="font-weight: 400;">   }</span>
1
<span style="font-weight: 400;">   // </span><i><span style="font-weight: 400;">Invalidate the whole view. If the view is visible.</span></i>
1
<span style="font-weight: 400;">   invalidate();</span>
1
<span style="font-weight: 400;">   return true;</span>
1
<i><span style="font-weight: 400;">}</span></i>

Sebuah action move event

1
<span style="font-weight: 400;">float x = event.getX();</span>
1
<span style="font-weight: 400;">float y = event.getY();</span>
1
<span style="font-weight: 400;">Path path = pathLists.get(pathIndex - 1);;</span>
1
<span style="font-weight: 400;">path.lineTo(x, y);</span>

Sebuah aksi di down motion event

1
<span style="font-weight: 400;">updateIndex(createPath(event));</span>

4. Menangani Path Index untuk method “Undo” dan “Redo”

Perbarui instance dari path dan paint

1
<span style="font-weight: 400;">pathIndex == pathLists.size())</span>
1
<span style="font-weight: 400;">pathLists.add(path);</span>
1
<span style="font-weight: 400;">paintLists.add(createPaint());</span>
1
<span style="font-weight: 400;">pathIndex++;</span>

5. Tambahkan Custom Class dalam .xml

Lihat hasilnya dan feel the magic.

love_animated
love_animated

 

Back To Top