Android uygulama geliştirirken bazen var olan widgetlar (Button, Edittext, TextView vs) yeterli gelmeyebilir. Bu durumda kendimiz ihtiyaçlarımız dahilinde custom viewlerimizi oluşturmamız gerekiyor. Bu yazı genelinde custom view oluşturmak için kullanılan Canvas Api ve onun bazı metodlarından bahsedeceğim.
Canvas Nedir?
Canvas, Android’de 2D çizim yapabilmemizi sağlayan bir classtır. Bu class aslında bize çizim yapabilmemiz için boş bir görünüm sağlar. Canvas ile birçok şekil (line, circle, arc, rectangle vs) ve görünüm çizdirmek mümkündür. Canvas çizimi taslak olarak Bitmap üzerinde gerçekleştirilir ve Paint API sayesinde istenilen şekil, renk gibi style işlemleri uygulanabilir. Ayrıca unutulmamalıdır ki Canvas her zaman dp yerine pixel çalışır. Yani çizim yaparken bu göz önünde bulundurularak gerekli hesaplama işlemleri yapılmalıdır.
Bir viewin render işlemi alttaki 3 metod sayesinde gerçekleşir.
- onMeasure()
- onLayout()
- onDraw()
onMeasure() metodu ile view ve onun child larının width ve height değerlerinin hesaplanması yapılır. Eğer yazdığınız custom viewin boyutlarını kendiniz ayarlayacaksanız bu metodu override edebilirsiniz. Hemen sonrasında setMeasureDimension(calcWidth, calcHeight) metodunu çağırmayı unutmayın yoksa uygulamanız crash olacaktır.
onLayout() height ve width gibi değerlerin ayarlanmasında yardımcı olur.
onDraw() metodu ise çizim işlemlerinin yapıldığı kısımdır. Bu metodlar arasında en önemli olan bu metoddur. Ayrıca bu metod içerisinde memory allocation işlemlerine oldukça dikkat edilmelidir. Androidde viewler 60 FPS ile yaklaşık 16ms de bir frame üzerine çizilirler. Eğer bizim yazdığımız viewde çizim işlemleri 16ms üzerine çıkıyorsa sistem 32ms tayin eder ve bu da doğal olarak FPS değerini 30 a düşmesine sebebiyet verir. Bu FPS düşüşlerinin önüne geçebilmek için onDraw metodu içerisinde yazılan kısımlara dikkat etmek gerekir. Örneğin object create işlemi bu metod dışında yapılıp kullanımı bu metodda yapılabilir.
Canvas, aslında matematikten aşina olduğumuz koordinat sistemini baz alarak çalışır ve ekranın sol üst köşesini (0,0) noktası olarak alır. Verilen x,y koordinatlarına göre view ekranda istenildiği pozisyona getirilebilir.
Şimdi örnek olarak bir custom view oluşturalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class SampleView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr) { override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) // draw stuff } } |
Gördüğünüz gibi View sınıfından türetilen SampleView adında bir view oluşturdum ve onDraw metodunu override ettim. Şimdi bu metod içerisinde Canvas API ile birlikte gelen bazı metodları kullanalım.
Örneğin bir resim çizdirmek isterseniz drawBitmap() metodunu kullanabilirsiniz.
|
1 2 3 4 5 |
override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) canvas?.drawBitmap(bitmap, 0f, 0f, null) } |
drawBitmap() metodu parametre olarak sırasıyla bitmap (çizdirilecek olan resim), resmin yerleşeceği x koordinatı, y koordinatı ve paint objesini alır. Paint objesi üstte de bahsettiğim gibi style vermek için kullanılır. Biz bu örnekte herhangi bir style vermek istemediğimiz için null verdik.
Eğer resmi x ekseninde 200 birim, y ekseninde de 400 birim kaydırmak isterseniz o zaman metodunuz alttaki gibi olacaktır.
|
1 2 3 4 5 |
override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) canvas?.drawBitmap(bitmap, 200f, 400f, null) } |
Bir başka method drawCircle() olan ise adından da anlaşılacağı üzere daire çizdirmek için kullanılır.
|
1 2 3 4 5 |
override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) canvas?.drawCircle(measuredWidth / 2, measuredHeight / 2, 400f, null) } |
drawCircle metodu da parametre olarak sırasıyla x ekseni (yukarıda viewin tam ortasında olsun diye measuredWidth / 2 verdik), y ekseni, dairenin çapı ve paint objesi alır.
Canvas içersinde drawCircle ve drawBitmap gibi drawLine, drawColor, drawRect, drawRGB gibi birçok metod bulunur. Bu metodlara şuradan ulaşabilirsiniz.
Paint
Şimdi de üstte incelediğimiz 2 metoda parametre olarak verilen Paint objesinden bahsedelim.
Paint, şekil, text ve resim çizmek için kullanılan bir classtır. Örneğin;
|
1 2 3 4 5 6 |
private val samplePaint = Paint(ANTI_ALIAS_FLAG).apply { color = Color.BLACK alpha = 200 // 0..255 style = Paint.Style.FILL } |
Gördüğünüz gibi bir Paint objesi oluşturarak buna style değerleri verdik. Burada ANTI_ALIAS_FLAG ile daha smooth bir görünüm olmasını sağlamış oluyoruz.
Yazdığımız viewi xml içerisinde aşağıdaki gibi kullanabiliriz.
|
1 2 3 4 5 6 7 8 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <com.emrekose.sample.SampleView android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout > |
References
https://developer.android.com/reference/android/graphics/Canvas
https://developer.android.com/guide/topics/ui/custom-components