Hello everyone!! In this article, we will introduce custom views, which play an important role in Android development. Additionally, we will explore the usage of commonly used structures such as Canvas, Paint, and Path in custom views. Enjoy reading in advance!

👀Custom View

When creating Android screen designs, we usually use ready-made components or views (such as TextView, Button, ImageView). However, we may encounter situations in our projects where standard views and components are insufficient, requiring more unique and application-specific designs and functionalities. At this point, we take advantage of the flexibility offered by custom views by creating our own views.

Creating our own custom views gives us complete control over the functionality and appearance of the view. We can create views in various styles according to our requirements and make any changes we want to these views without any restrictions.

✦There are different approaches to creating custom views. These include:

➜ We can create custom views by inheriting from views such as Button, TextView, and ImageView that we use in screen design, and we can add new features to these views.

➜ We can create a more flexible and customized custom view structure from scratch by inheriting from the View class itself.

➜ When we want to create and use multiple custom views together, we can build this structure using FrameLayout or LinearLayout. This allows us to easily arrange and manage nested custom views.

In the following sections of the article, we will explore how to create a custom view from scratch and how to use these views nested within each other.

In our custom view example, which we will create by inheriting from the View class, we will try to achieve the appearance shown above.

class One @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {}

➜ As the first step, we inherited from the View class and created a class named One. Thus, the One class now represents a custom view. The @JvmOverloads annotation next to the constructor allows for the creation of overloaded constructors so that the constructors of the View class can be called with different parameter combinations from the Java side.

Inheriting from the View class brings the use of Context, AttributeSet, and Int in the constructor. So why do we use them, and what are their roles?

Each parameter is necessary for the custom view to function and be used correctly in environments such as activities and fragments. The Context parameter indicates in which environment the custom view will operate and which resources it will access accordingly. This is because a view accesses resources through its environment. The Attrs parameter allows us to read the attributes defined for the custom view in the XML file, making these XML-defined attributes usable by the custom view. The DefStyleAttr parameter is necessary if we want to apply a specific style or theme to the view.

👉🏻 We are not required to use all of the Context, attrs, and defStyleAttr parameters in the constructor. If we want to use the custom view programmatically instead of in XML, there is no need to use the attrs and defStyleAttr parameters.

private val viewRectF = RectF()

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
   super.onSizeChanged(w, h, oldw, oldh)
   viewRectF.set(0f,0f,w.toFloat(),h.toFloat())
}

➜ In the next step, we override the onSizeChanged function. This function is called whenever the size of the custom view we used in XML changes, allowing for dynamic updates to the size. For example, when we change the orientation of the mobile device from portrait to landscape or when views like a bottom sheet dialog appear on the screen, the onSizeChanged function is called, thus keeping track of the old and new size values of the custom view.

By creating a RectF object, we store the boundary information of the custom view (left, top, right, bottom). This way, when we assign values using viewRectF.set() within the onSizeChanged function, the boundaries are updated according to the new dimensions of the custom view each time the function is called.

private val imageRectF=RectF() 

private val bitmap: Bitmap =
   BitmapFactory.decodeResource(context.resources,R.drawable.book)

private val matrix = Matrix()

private val imagePaint = Paint().apply { isAntiAlias=true }

➜ In this step, we make the necessary definitions to draw the image in our custom view. We create a RectF object named imageRectF to hold the boundary information of the image (left, top, right, bottom). This way, we will keep the size information of the image.

If we want to draw images on custom views, we need to use the Bitmap class for this purpose. A Bitmap represents an image (such as a picture or an icon) and contains a grid of pixels, holding the color information for each pixel. In other words, when we want to create an image on the screen, Android processes and displays this image in Bitmap format. Therefore, we convert our image from the drawable resource into a Bitmap object.

👉🏻 We cannot create files like SVG and XML with Bitmap. If we want to use an image, it must be in PNG, JPG, or WEBP format. The reason for this is that Bitmap is designed to process pixels. Since files like SVG and XML are vector-based rather than pixel-based, we cannot use them with Bitmap.

We create a Matrix object for operations such as drawing the Bitmap on the screen, scaling it, or stretching it from the left or right. Then, we create a Paint object named imagePaint. You can think of the Paint class as a brush. When we want to draw a bitmap or a shape, we can define the color properties using the Paint class. In our example, since we are using a bitmap, we did not specify any color. We only set isAntiAlias = true to prevent rough edges from appearing around the bitmap.

private fun initImageMatrix() {
   imageRectF.set(0f,0f,bitmap.width.toFloat(),bitmap.height.toFloat())

   val widthScale = viewRectF.width() / imageRectF.width()
   val heightScale = viewRectF.height() / imageRectF.height()

   val scaleFactor = max(widthScale, heightScale)

   val translateX = (viewRectF.width()-scaleFactor*imageRectF.width())/2f
   val translateY = (viewRectF.height()-scaleFactor*imageRectF.height())/2f

   matrix.setScale(scaleFactor,scaleFactor)
   matrix.postTranslate(translateX,translateY)
   invalidate()
}

After the necessary definitions, we use the initImageMatrix() function to set the scaling of the bitmap according to the viewRectF. This way, whenever the boundaries of viewRectF change, the bitmap will also adjust to fit those boundaries.

imageRectF.set(0f,0f,bitmap.width.toFloat(),bitmap.height.toFloat())

Initially, we set the boundaries of the imageRectF object according to the bitmap. Thus, the left, top, right, and bottom values of imageRectF will take on the boundary values of the bitmap.

val widthScale = viewRectF.width() / imageRectF.width()
val heightScale = viewRectF.height() / imageRectF.height()
val scaleFactor = max(widthScale, heightScale)

Then, by dividing the width and height of viewRectF by the width and height of imageRectF, we obtain the scale values needed to fit imageRectF within viewRectF. By using the maximum scaling factor, we ensure that the bitmap is positioned within viewRectF while maintaining its height and width values. (You can think of the maximum scaling factor as the centerCrop scale type)

val translateX = (viewRectF.width()-scaleFactor*imageRectF.width())/2f
val translateY = (viewRectF.height()-scaleFactor*imageRectF.height())/2f

matrix.setScale(scaleFactor,scaleFactor)
matrix.postTranslate(translateX,translateY)
invalidate()

As the final step for the InitImageMatrix function, we calculate the offset ratio in the width and height parameters to ensure that imageRectF fits perfectly within viewRectF. Then, we use the matrix to correctly position imageRectF inside viewRectF. By calling invalidate, we ensure that the current state of imageRectF is redrawn on the screen for the custom view.

override fun onDraw(canvas: Canvas) {
   canvas.drawBitmap(bitmap,matrix,imagePaint)
}

To draw the bitmap we created on the screen, we override the onDraw function and perform this operation using the canvas object (which you can think of as a blank piece of paper). This function is called whenever the size of the custom view changes, just like in the onSizeChanged function, and it performs the necessary updates.

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
   super.onSizeChanged(w, h, oldw, oldh)
   viewRectF.set(0f,0f,w.toFloat(),h.toFloat())
   initImageMatrix()
}

As the final step of this phase, we call the initImageMatrix function within the onSizeChanged function. This way, whenever onSizeChanged is executed, the dimensions of the bitmap are updated, and it is scaled according to these dimensions.

➜ As the next step, we will draw the black outer border of the image in our example.

private val framePath = Path()
private val framePaint=Paint(Paint.ANTI_ALIAS_FLAG).apply {
    color= ContextCompat.getColor(context,R.color.black)
    style=Paint.Style.STROKE
    strokeWidth=12.toFloat()
}

Initially, we create a Path object named framePath. The Path helps us draw lines between specific points, allowing us to create the desired shape. Then, we create a Paint object named framePaint. To avoid a jagged appearance, we set the ANTI_ALIAS_FLAG, and we select a color from our color resource using ContextCompat.getColor(). By setting the style to stroke, we indicate that the painting should only occur on the edges and that the inside should remain uncolored. We also specify the thickness of the line using FrameStrokeWidth.

private fun initFramePath() {
    val cornerRadius = 100f
    framePath.reset()

    framePath.moveTo(viewRectF.left, viewRectF.top)
    framePath.lineTo(viewRectF.right , viewRectF.top)
    framePath.lineTo(viewRectF.right, viewRectF.bottom )
    framePath.lineTo(viewRectF.left + cornerRadius, viewRectF.bottom)
    framePath.arcTo(viewRectF.left, viewRectF.bottom - 2 * cornerRadius, 2 * cornerRadius,
        viewRectF.bottom, 90f, 90f, false)
    framePath.lineTo(viewRectF.left, viewRectF.top + cornerRadius)
    framePath.close()

    invalidate()
}

In the next step, we created the initFramePath function, where we will draw our shape. We established a cornerRadius value to define the corner radius for rounded corners. Since the dimensions of the shape we draw with the path will also change whenever the custom view's size changes, we reset the path using framePath.reset . This ensures that the path is redrawn according to the new dimensions.

When drawing lines with the Path, we start by defining a starting point using framePath.moveTo . Then, we create our lines sequentially with framePath.lineTo. To achieve rounded corners, we use the framePath.arcTo method. Once we complete the shape, we close the path by calling framePath.close . Finally, we call invalidate to ensure that the custom view is redrawn so that the updated shape appears on the screen.

override fun onDraw(canvas: Canvas) {
    canvas.clipPath(framePath)
    canvas.drawBitmap(bitmap,matrix,imagePaint)
    canvas.drawPath(framePath,framePaint)
}

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
   super.onSizeChanged(w, h, oldw, oldh)
   viewRectF.set(0f,0f,w.toFloat(),h.toFloat())
   initImageMatrix()
   initFramePath()
}

As the final step of this process, we call the initFramePath function within the onSizeChanged function. This way, every time onSizeChanged is executed, initFramePath will also be called, allowing the path to be redrawn according to size changes.

We have seen how to create a custom view from scratch. Now let’s move on to how we can use nested custom views in XML…

➜ The operations we will perform in this section are quite simple. We just need to make a few changes to the first example we did.

class Two @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {}

The first of these changes is to inherit from FrameLayout instead of the View class. This way, the custom view we write will behave like a layout.

init {
  setWillNotDraw(false)
}

The second change is that when we inherit from FrameLayout, the onDraw function within the custom view will not be drawn. To prevent this, we set setWillNotDraw to false. This way, we can use the onDraw function.

Source code:

GitHub - amineytc/CustomViewExamples

I hope this article has been helpful and informative for you. For more detailed information, you can check the links below, and feel free to contact me via LinkedIn for any comments or questions regarding the article.

See you in the next article!

References:

• Custom Views - Dev Genius
• Create custom view components | Views | Android Developers
• Android Custom View 102
• Android Custom View 101
• Android Custom Views — 1 (Matrix & PorterDuffXfermode)
• Canvas animations: Simple Circle Progress View on Android
• Building a CustomView -TicTacToe

Tekrardan merhabalar herkese. Bu yazımda Android geliştirmede önemli bir yeri olan custom view’lara giriş yapacağız. Ek olarak custom view’larda yaygın olarak kullanılan Canvas, Paint ve Path yapılarının kullanımlarını da görmüş olacağız. Şimdiden keyifli okumlar…

👀Custom View

Android ekran tasarımlarını oluştururken genellikle hazır component’ler veya view’lar (TextView, Button, ImageView gibi) kullanırız. Ancak, projelerimizde zaman zaman standart view ve component’lerin yetersiz kaldığı, daha özgün ve uygulamaya özel tasarım ve işlevselliklerin gerektiği durumlarla karşılaşabiliriz. Bu noktada kendi view’larımızı oluşturarak custom view’lerin sunduğu esneklikten faydalanırız.

Kendi custom view’larımızı oluşturmak view’in işlevi ve görselliği üzerinde tam kontrol sahibi olmamızı sağlar. Gereksinimlere göre çeşitli tarzlarda view’ler oluşturabilir ve herhangi bir kısıtlama olmadan bu view’ler üzerinde istediğimiz değişiklikleri yapabiliriz.

✦ Custom View oluşturmada farklı yaklaşımlar vardır. Bunlar;

➜ Ekran tasarımında kullandığımız Button, TextView, ImageView gibi view’lardan kalıtım alarak custom view’lar oluşturabilir ve bu view’lara yeni özellikler ekleyebiliriz.

➜ View sınıfının kendisinden kalıtım alarak sıfırdan, daha esnek ve özelleştirilmiş bir custom view yapısı oluşturabiliriz.

➜ Birden fazla custom view oluşturmak ve birlikte kullanmak istediğimiz durumlarda, FrameLayout veya LinearLayout kullanarak bu yapıyı oluşturabiliriz. Bu sayede iç içe custom view’ları kolayca yerleştirip yönetebiliriz.

Yazının ilerleyen bölümünde, sıfırdan bir custom view oluşturmayı ve bu view’ları nasıl iç içe kullanabileceğimizi inceleyeceğiz.

View sınıfını kalıtım alarak oluşturacağımız custom view örneğimizde yukarıda yer alan görünümü elde etmeye çalışacağız.

class One @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {}

➜ İlk adım olarak View sınıfını kalıtım alıp, One isminde bir sınıf oluşturduk. Böylece One sınıfı artık bir custom view’ı temsil eder hale geldi. Constructor yanında yer alan @JvmOverloads annotation’ı ise View sınıfına ait yapılandırıcıların ( constructor’ların ) Java tarafında farklı parametre kombinasyonları ile çağırılabilmesi için overloaded yapılandırıcılar oluşturmakta.

View sınıfını kalıtım almamız, constructor’da Context, AttributeSet ve Int kullanımını beraberinde getirmekte. Peki neden kullanıyoruz ve görevleri neler?

Her bir parametre custom view’ın activity ve fragment gibi kullanılacağı ortamlarda doğru şekilde çalışabilmesi ve de kullanılması için gereklidir. Context parametresi bize custom view’ın hangi ortamda çalışacağını ve buna bağlı olarak hangi kaynaklara erişeceğini belirtir. Çünkü bir view, bulunduğu ortam üzerinden kaynaklara erişim sağlar. Attrs parametresi, custom view’ın XML dosyasında tanımladığımız özelliklerini okumamızı sağlar. Böylece XML de tanımlanan özellikler custom view tarafından kullanılabilir hale gelir. DefStyleAttr parametresi ise view’a belirli bir stil veya tema uygulamak istiyorsak gereklidir.

👉🏻 Context, attrs ve defStyleAttr parametrelerinin hepsini constructor da kullanmak zorunda değiliz. Eğer oluşturduğumuz custom view’ı XML yerine programatik bir şekilde kullanmak istiyorsak attrs ve defStyleAttr parametrelerini kullanımına gerek kalmıyor.

private val viewRectF = RectF()

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
   super.onSizeChanged(w, h, oldw, oldh)
   viewRectF.set(0f,0f,w.toFloat(),h.toFloat())
}

➜ Bir sonraki adımda ise onSizeChanged fonksiyonunu override ediyoruz. Bu fonksiyon, XML içerisinde kullandığımız custom view’ın size’ı her değiştiğinde çağırılır ve size üzerinde dinamik olarak güncelleme yapar. Örneğin, mobil cihazı dikey konumdan yatay konuma aldığımızda ya da ekranda bottom sheet dialog gibi görünümler çıktığında onSizeChanged fonksiyonu çağırılır ve böylece custom view’ın eski ve yeni size değerleri tutulmuş olur.

RectF nesnesi oluşturarak, custom view'ın çerçeve sınır bilgilerini (left, top, right, bottom) saklamış oluruz. Bu sayede, onSizeChanged fonksiyonu içerisinde viewRectF.set() ile değer atadığımızda ve fonksiyon çağırımı her yapıldığında custom view'ın yeni boyutlarına göre sınırları güncellenmiş olur.

private val imageRectF=RectF() 

private val bitmap: Bitmap =
   BitmapFactory.decodeResource(context.resources,R.drawable.book)

private val matrix = Matrix()

private val imagePaint = Paint().apply { isAntiAlias=true }

➜ Bu adımda ise örneğimizdeki resmi custom view’a çizmek için gerekli olan tanımlamaları yapıyoruz. Resmimizin çerçeve sınır bilgilerini (left, top, right, bottom) tutacak imageRectF isminde bir RectF nesnesi oluşturuyoruz. Bu sayede resmin boyut bilgilerini tutmuş olacağız.

Custom view’lara resim çizmek istiyorsak bunun için Bitmap sınıfını kullanmamız gerekli. Bitmap, bir görüntüyü (resim, ikon vb.) temsil eder. Piksellerin sıralandığı bir ızgarayı içerir ve her bir pikselin renk bilgilerini barındırır. Yani, ekranda bir görüntü oluşturmak istediğimizde Android, bu görüntüyü Bitmap formatında işler ve gösterir. Bunun için biz de drawable dosyasında yer alan resmimizi Bitmap nesnesine dönüştürüyoruz.

👉🏻 ️Bitmap ile svg ve xml gibi dosyaları create edemeyiz. Eğer bir görsel kullanmak istiyorsak bu png, jpg veya webp uzantılı dosyalarla olmalıdır. Bunun sebebi ise Bitmap’in pikselleri işlemek üzere tasarlanmış olması. Svg ve xml gibi dosyalar piksel yerine vector tabanlı olduğu için Bitmap ile kullanımını sağlayamayız.

Bitmap’in ekranda çizilmesi, büyültülmesi, sağdan veya soldan genişletilmesi gibi işlemleri için Matrix nesnesi oluşturuyoruz. Ardından imagePaint isminde bir Paint nesnesi oluşturuyoruz. Paint sınıfını kalem gibi düşünebilirsiniz. Bir bitmap veya şekil çizmek istediğimizde renk özelliklerini Paint sınıfı ile belirleyebiliyoruz. Örneğimizde bitmap kullandığımız için herhangi bir renk vermedik. Sadece isAntiAlias = true ifadesi ile bitmap kenarlarında pürüzlü görünümlerin oluşmasını engelledik.

private fun initImageMatrix() {
   imageRectF.set(0f,0f,bitmap.width.toFloat(),bitmap.height.toFloat())

   val widthScale = viewRectF.width() / imageRectF.width()
   val heightScale = viewRectF.height() / imageRectF.height()

   val scaleFactor = max(widthScale, heightScale)

   val translateX = (viewRectF.width()-scaleFactor*imageRectF.width())/2f
   val translateY = (viewRectF.height()-scaleFactor*imageRectF.height())/2f

   matrix.setScale(scaleFactor,scaleFactor)
   matrix.postTranslate(translateX,translateY)
   invalidate()
}

Gerekli olan tanımlamaların ardından initImageMatrix() fonksiyonu ile oluşturduğumuz bitmap’in viewRectF’e göre ölçeklendirilmesini ayarlıyoruz. Böylece viewRectF sınırları her değiştiğinde bitmap de bu sınırlara uyum sağlayacakır.

imageRectF.set(0f,0f,bitmap.width.toFloat(),bitmap.height.toFloat())

Başlangıçta imageRectF nesnesinin sınırlarını bitmap’e göre ayarlıyoruz. Böylece imageRectF’in left, top, right ve bottom değerleri bitmap’in sınır değerlerini alacaktır.

val widthScale = viewRectF.width() / imageRectF.width()
val heightScale = viewRectF.height() / imageRectF.height()
val scaleFactor = max(widthScale, heightScale)

Ardından viewRectF’in genişlik ve yükseliği ile imageRectF’in genişlik ve yükseliğini bölerek, imageRectF’i viewRectF’e sığdırmak için gerekli olan scale değerlerini elde ediyoruz. Scale değerlerini max ölçekleme faktörü ile aldığımızda bitmap’in viewRectF’e yükseklik ve genişlik değerleri korunarak yerleşmesini sağlamış oluyoruz. ( max ölçekleme faktörünü, centerCrop scale type’ı olarak düşünebilirsiniz )

val translateX = (viewRectF.width()-scaleFactor*imageRectF.width())/2f
val translateY = (viewRectF.height()-scaleFactor*imageRectF.height())/2f

matrix.setScale(scaleFactor,scaleFactor)
matrix.postTranslate(translateX,translateY)
invalidate()

InitImageMatrix fonksiyonu için son adım olarak, imageRectF'in viewRectF içerisine tam olarak yerleşebilmesi için genişlik ve yükseklik parametrelerindeki kaydırma oranını hesaplıyoruz. Ardından, matrix ile imageRectF'in viewRectF içerisine doğru bir şekilde yerleşimini gerçekleştiriyoruz. Invalidete ile de imageRectF'in güncel halinin ekranda görünmesi için custom view'ın yeniden çizilmesini sağlıyoruz.

override fun onDraw(canvas: Canvas) {
   canvas.drawBitmap(bitmap,matrix,imagePaint)
}

Oluşturduğumuz bitmap’in ekrana çizilebilmesi için onDraw fonksiyonunu override ederek, bu işlemi canvas nesnesi (beyaz bir kağıt gibi düşünebilirsiniz) aracılığıyla gerçekleştiriyoruz. Bu fonksiyon onSizeChanged fonksiyonunda olduğu gibi custom view’ın size’ı her değiştiğinde çağırılır ve güncelleme yapar.

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
   super.onSizeChanged(w, h, oldw, oldh)
   viewRectF.set(0f,0f,w.toFloat(),h.toFloat())
   initImageMatrix()
}

Bu adımın son işlemi olarak initImageMatrix fonksiyonunu onSizeChanged fonksiyonu içerisinde çağırıyoruz. Bu şekilde, onSizeChanged her çalıştığında bitmap'in boyutları güncellenir ve bu boyutlara göre ölçeklenmiş olur.

➜ Bir sonraki adım olarak örneğimizde yer alan resmin siyah dış çerçevesini çizeceğiz.

private val framePath = Path()
private val framePaint=Paint(Paint.ANTI_ALIAS_FLAG).apply {
    color= ContextCompat.getColor(context,R.color.black)
    style=Paint.Style.STROKE
    strokeWidth=12.toFloat()
}

Başlangıçta, framePath isminde bir Path nesnesi oluşturuyoruz. Path, belirli noktalar arasında çizgiler çizmemize yardımcı oluyor. Yani, istediğimiz şekli Path ile oluşturacağız. Ardından framePaint isminde bir Paint nesnesi oluşturuyoruz. Pürüzlü bir görünüm oluşmaması için ANTI_ALIAS_FLAG , renk belirlemek için ise ContextCompat.getColor() ile kendi color dosyamızdan renk seçiyoruz. Style’a stroke vererek boyamanın sadece kenarlarda olmasını, iç kısmın boyalı olmaması gerektiğini söylüyoruz. FrameStrokeWidth ile de çizgimizin kalınlığını belirtiyoruz.

private fun initFramePath() {
    val cornerRadius = 100f
    framePath.reset()

    framePath.moveTo(viewRectF.left, viewRectF.top)
    framePath.lineTo(viewRectF.right , viewRectF.top)
    framePath.lineTo(viewRectF.right, viewRectF.bottom )
    framePath.lineTo(viewRectF.left + cornerRadius, viewRectF.bottom)
    framePath.arcTo(viewRectF.left, viewRectF.bottom - 2 * cornerRadius, 2 * cornerRadius,
        viewRectF.bottom, 90f, 90f, false)
    framePath.lineTo(viewRectF.left, viewRectF.top + cornerRadius)
    framePath.close()

    invalidate()
}

Sıradaki işlemde şeklimizi çizeceğimiz initFramePath fonksiyonunu oluşturduk. Köşe ovalliği için cornerRadius değeri oluşturarak köşe yarıçapı belirledik. Custom view size’ı her değiştiğinde path ile çizdiğimiz şeklin boyutları da değişeceği için framePath.reset diyerek, path’in sıfırlanmasını sağladık. Bu sayede yeni boyutlara göre path tekrardan çizilmiş olacak.

Path ile çizgi çizerken ilk adımda framePath.moveTo ile bir başlangıç noktası belirliyoruz. Ardından framePath.lineTo ile sırasıyla çizgilerimizi oluşturuyoruz. Köşe ovalliği için ise framePath.arcTo methodunu kullanıyoruz. Şekli tamamladığımızda framePath.close diyerek path’i kapatıyoruz. En son ise invalidate diyerek, güncel halinin ekranda görünmesi için custom view’ın yeniden çizilmesini sağlıyoruz.

override fun onDraw(canvas: Canvas) {
    canvas.clipPath(framePath)
    canvas.drawBitmap(bitmap,matrix,imagePaint)
    canvas.drawPath(framePath,framePaint)
}

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
   super.onSizeChanged(w, h, oldw, oldh)
   viewRectF.set(0f,0f,w.toFloat(),h.toFloat())
   initImageMatrix()
   initFramePath()
}

Bu adımın son işlemi olarak initFramePath fonksiyonunu onSizeChanged fonksiyonu içerisinde çağırıyoruz. Bu şekilde, onSizeChanged her çalıştığında initFramePath de çağırılarak, path’in boyut değişikliklerine göre tekrardan çizimi sağlanacaktır.

Sıfırdan bir custom view’ı nasıl oluşturacağımızı görmüş olduk. Artık XML üzerinde iç içe custom view kullanımını nasıl yapacağımıza geçelim…

➜ Bu kısımda yapacağımız işlemler oldukça basit. Sadece ilk yaptığımız örnek üzerinde birkaç değişiklik yapmamız gerekli.

class Two @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {}

Bu değişikliklerden ilki View sınıfını kalıtım almak yerine FrameLayout’dan kalıtım almak. Böylece yazdığımız custom view bir layout gibi davranacaktır.

init {
  setWillNotDraw(false)
}

İkinci değişiklik ise, FrameLayout’dan kalıtım aldığımızda custom view içerisindeki onDraw fonksiyonu çizilmez bir hale gelecek. Bunu engellemek için setWillNotDraw’u false ayarlıyoruz. Böylelikle onDraw fonksiyonunu kullanabilir hale geliyoruz.

Kaynak kodlar :

GitHub - amineytc/CustomViewExamples

Umarım faydalı ve açıklayıcı bir yazı olmuştur sizin için. Detaylı bilgi için aşağıdaki linklere bakabilir, yazı ile ilgili görüş ve sorularınız için Linkedin üzerinden benimle iletişime geçebilirsiniz.

Bir sonraki yazıda görüşmek üzere🙌🏻

Kaynaklar :

• Custom Views - Dev Genius
• Create custom view components | Views | Android Developers
• Android Custom View 102
• Android Custom View 101
• Android Custom Views — 1 (Matrix & PorterDuffXfermode)
• Canvas animations: Simple Circle Progress View on Android
• Android puls view: Canvas, Path and vectors
• Building a CustomView -TicTacToe

Selamlar👋, bu yazımda android bileşenlerinden biri olan activity ve onunla birlikte kullanılan fragment ikilisinin ne olduğundan, yaşam döngü süreçlerinden bahsedeceğim. Aynı zamanda context ve single activity pattern kavramlarını da görmüş olacağız💫

👀Activity

Activity, uygulamalarımızda kullanıcı ara yüzünün temsil edildiği ekran ve de kullanım sırasında yapılan eylemlere bağlı olarak kendine ait yaşam döngüsü ile uygulama kontrolünü sağlayan bir android bileşenidir(component).

👉🏻Uygulamalarımızda birden fazla activity barındırabiliriz fakat genel kullanım olarak Single Activity Pattern kullanımı tercih edilmekte. Single Activity Pattern, tek bir activity üzerine bir veya birden fazla fragment bağlanmasını ifade eder.

👉🏻Aynı zamanda Activity’ler birer context dir. Bu yüzden oluşturulma maliyetleri yüksektir. Context kavramına yakından bakalım;

✔️Context, uygulama kaynak ve sınıflarına erişim sağlaması ile birlikte activity başlatılmasında, intent ile ekranlar arası geçişlerde, veri tabanı işlemleri gibi işlevlerin gerçekleştirilmesinde kullanılan abstract bir sınftır.

✔️Context, uygulamada o an bulunulan ortamı işaret eder ve diğer uygulama bileşenleri ile de iletişimi sağlar. Daha iyi kavramak adına örneklendirelim; Bir okulda branş bazlı öğretmenler ve sınıflar olsun. Öğretmenleri uygulama bileşenleri olarak düşünebiliriz. Her bir öğretmen kendi branş sınıfında gerekli kontrolleri sağlamakta ve öğrencilere bilgi aktarımında bulunmakla görevli (fragmentları öğretmen olarak düşünürsek, kendi lifecycle döngülerinde durum kontrollerini sağlar ve de kendi ortamından sorumludur ). Burada okul, bizim için context kavramını ifade eder. Context olmadan uygulama bileşenlerinin görevlerini yapması mümkün değildir.

✔️Context, application context ve activity context olmak üzere ayrılır. Application context; Uygulama yaşam döngüsü sonlanmadığı sürece ayakta kalır ve uygulama seviyesinde kaynak erişimine açıktır.

Activity context; Activity seviyesinde kaynak erişimine açıktır. Her bir activitynin kendine ait activity context i vardır ve kendi activity lifecycle süreçlerine bağlıdır. Eğer bulunulan activity sonlandırılırsa o activity context de sonlanmış olur.

👀Fragment

Fragment, activity içerisinde kullanılabilen aynı zamanda uygulama işlevselliğini artıran bir UI component dir. Bir veya birden fazla fragment activity içerisinde yer alabilir.

👉🏻Fragmentlar kendi yaşam döngülerine sahiptir.

👉🏻Fragment lar bir context değildir. Bu sebeple fragment oluşturmak activity kıyasla daha az maliyetlidir.

⚡Şimdi sırasıyla activity ve fragment lifecycle süreçlerine bakalım..

👀Activity Lifecycle

Activity lifecycle, bir activity nin oluşturulduğu an ve sonlandığı an arasında oluşabilecek durumlar ve bu durumların birbirleri ile olan bağlantısını içerir.

👉Uygulama kullanımı sırasında kullanıcının; Activity değiştirmesi, ilgili activity arka planda bekletmesi, dikey ve yatay mod arasında geçişler yapması (configuration changed) gibi durumlar lifecycle metotlarının değişimine sebep olur.

👉Lifecycle sürecinde callback metotları ile oluşabilecek durumları kontrol edebilir ve gerekli anda ihtiyaç olan durumları yönetebiliriz.

Yukarıdaki görselden metot açıklamalarını ve lifecycle sürecini görebilirsiniz.🔎Senaryo bazlı metot çağırımlarına bakalım..

👉Uygulama açıldığında :

onCreate -> onStart -> onResume

👉Home tuşuna basarak uygulamayı arka plana aldığımızda :

onUserInteraction -> onUserLeaveHint -> onPause -> onStop

📌onUserInteraction : Odak activity de iken kullanıcının ekranda her hangi bir yere tıklaması sonucu çağırılan metot.

📌onUserLeaveHint : Kullanıcı home tuşuna her bastığında çağırımı gerçekleşen metot.

👉Arka plandan uygulamayı çıkarıp activity tekrar gördüğümüzde :

onRestart -> onStart -> onResume

👉Ön plana başka bir uygulama alıp, asıl uygulamamızı arka planda beklettiğimizde :

onPause -> onSaveInstanceState -> onStop

📌onSaveInstanceState : Aktivite durumunun ve verilerin bundle ile geçici olarak saklandığı metot.

👉Ekran döndürüldüğünde :

onPause → onSaveInstanceState -> onStop → onDestroy → onCreate → onStart → onRestoreInstanceState -> onResume

📌onRestoreInstanceState : Geçici olarak saklanan activity durumu ve verilerin geri yüklendiği metot.

👉Uygulamadan çıktığımızda :

onPause → onStop → onDestroy

👀Fragment Lifecycle

Activity lifecycle da olan onCreate, onStart, onResume, onPause, onStop ve onDestroy metotları fragment lifecycle sürecinde de mevcut. Activity lifecycle sürecinde bu metotların açıklamalarını yapmıştık. 🔎Fragment lifecycle özel diğer metotların ne olduğuna bakalım..

👉onAttach : Fragment oluşturulmadan önce activity-fragment bağlantısı gerçekleştiğinde çağırılan metot.

👉onCreateView : Fragment kullanıcı arayüzünün(UI) oluşturulurken çağırımı yapılan metot.

👉onActivityCreated : Fragment bağlandığı activity nin onCreate metot çağırımı gerçekleştiğinde çağırımı yapılır.

👉onDestroyView : Fragment kullanıcı ara yüzünün görünür olmadığı durumda çağırılan metot. Ara yüz görünür olmasa bile fragment varlığını sürdürmeye devam eder.

👉onDetach : Fragment-activity bağlantısının koptuğu an da çağırılan metot.

• Context | Android Developers
• Fragments | Android Developers
• Fragment lifecycle | Android Developers
• The activity lifecycle | App architecture | Android Developers
• Activity | Android Developers
• The Android Lifecycle cheat sheet — part III : Fragments

Umarım faydalı ve açıklayıcı bir yazı olmuştur sizin için. Detaylı bilgi için yukarıdaki linklere bakabilir, yazı ile ilgili görüş ve sorularınız için Linkedin üzerinden benimle iletişime geçebilirsiniz.

Bir sonraki yazıda görüşmek üzere🙌

Tekrardan merhabalar herkese. Bu yazımda nesne yönelimli programlamanın temel yapı taşlarından olan sınıflardan bahsedeceğim. Ek olarak sınıflarda yaygın olarak kullanılan init ve this yapılarının kullanımlarını örnekler üzerinden görmüş olacağız.

👀Sınıflar

Sınıflar belirli bir gruba ait özelliklerin ve işlevlerin toplandığı yerdir. Günlük yaşamdan örnek verirsek; insan sınıfımız olsun. Bu sınıf insana ait isim, yaş, meslek gibi özelliklere ve de yürüme, koşma gibi işlevlere de sahip olabilir. Her bir birey de insan sınıfından türemiş nesneleri ifade edebilir. Her bir bireyin kendine özgü ismi, yaşı vb. özellik ve işlevleri vardır.

🔎Şimdi sınıfların kotlin ile nasıl yazılabildiğini inceleyelim.

fun main(){

    val electronicDevice=ElectronicDevice()
}

class ElectronicDevice

👉🏻Kotlin’de classanahtar kelimesiyle sınıflarımızı oluştururuz.

Bu örnekte ElectronicDeviceisminde bir sınıfımız var. Bu sınıfımız herhangi bir özelliğe ya da işleve sahip değil. Bu yüzden sınıf isimlendirmesinin sonuna parantez()koymamıza gerek yok.

Sınıfımızdan bir instance ( nesne olarak düşünebilirsiniz ) oluşturmak istediğimizde sınıfımızı yapılandırmamız gerek. Bunun için de sınıf ismi ve yapılandırıcı parantezi birlikte kullanıyoruz. Bu örneğimizde instance (nesne)electronicDevice bizim için.

📌Burada bahsi geçen yapılandırıcı parantez aslında constructor parantezi. Constructor ise yapılandırma fonksiyonu. Constructor lar instance oluşturmada ve sınıfa ait özelliklerin tanımlanması noktasında karşımıza çıkar.

📌Constructor lar primary ve secondary constructor olmak üzere ikiye ayrılır. Sınıf tanımının yanına yapılandırıcı parantez açarak primary constructor tanımlamış oluruz. Yapılandırıcı parantez den önce ister constructor kelimesi yazılmış olsun ister olmasın, yapılandırıcı parantezi açmak primary constructor olduğunu belirtir.

📌Primary constructor tanımı yapmasak bile arka planda () default boş bir constructor oluşturulur.

📌Secondary constructor ise harici olarak class içerisinde constructor kelimesi ile kullanılarak tanımlanır. Secondary constructor tanımı yaparken primary constructor’ı işaret etme zorunluluğumuz vardır.

📌Secondary constructor, primary constructor da herhangi bir değere sahip olan değişkenleri içermek zorunda değildir.

🔎 Teorik anlatım havada kalmış olabilir. Örnekler üzerinden constructor yapısına yakından bakalım.

fun main(){

    val electronicDevice = ElectronicDevice(45,"cable")
    println(electronicDevice.electricPower) // 45
}

class ElectronicDevice constructor(
    val electricPower:Int,
    val electronicComponents:String)

Yukarıdaki örnekte ElectronicDevicesınıfına ait özellikleri (electricPower, electronicComponents) yapılandırma aşamasında belirttik. Instance oluştururken ise parametre tiplerine göre değerler verip instance oluşturmuş olduk.

Örneğimizdeki constructor, sınıf isminin hemen ardından gelmiş durumda. Bu sebeple yapılandırıcımız primary constructor.

🤔Sınıfa ait özellikleri yapılandırırken constructoranahtar kelimesinin yukarıdaki örnekte kullanıldığını gördük. Peki constructor kelimesini yazmak bu örnek için gerçekten gerekli mi ? Cevabımız hayır.

class ElectronicDevice (val electricPower:Int,val electronicComponents:String)

📌Eğer primary constructor herhangi bir annotation veya visibility modifier içermiyorsa constructor kelimesini yazmadan da kullanabiliriz.

Aynı örneği constructor içindeki parametrelere valveya varvermeden yazdığımızda, üretilen nesneden parametrelere ulaşamayız.

📌Constructor içindeki parametrelere valveya varverirsem o sınıfa ait bir özellik haline gelirler yani erişim sağlayıp kullanabilirim. Vermediğimde ise o sınıfa ait bir özellik değil de o sınıfı yapılandırmaya yardımcı bir değer haline gelirler. Ve sadece init blokları içerisinde erişip kullanabilirim.

fun main(){
    val deviceOne = ElectronicDevice(45, "cable")
    val deviceTwo = ElectronicDevice("samsungS23")
    println(deviceOne.electricPower)
}

class ElectronicDevice (val electricPower:Int,val  electronicComponents:String){

    init{
        println("Power: $electricPower, Components: $electronicComponents")
    }

    constructor(deviceName:String) : this(60,"") {
        println("Secondary constructor - deviceName: $deviceName")
    }
}

/*
Power: 45, Components: cable
Power: 60, Components: 
Secondary constructor - deviceName: samsungS23
45
*/

Bu örneğimizde sınıf isminin hemen ardından primary constructor ve de sınıf içerisinde constructor anahtar kelimesiyle secondary constructor oluşturulmuş durumda.

🔎Şimdi sırasıyla örneğimizde yer alan init ve this yapılarına göz gezdirelim.

📌 init : Sınıfa parametre verileri geldiği anda eğer veriler ile bir şeyleri sınıf içerisinde değiştirmek veya işlem yapmak istiyorsam, init bloğu oluşturmam gerekli.

Örneğimizde de parametre verileri geldiği anda çalıştırılması için init blokları içerisinde println ile ekrana belirtilen ifadenin yazılmasını sağladık.

👉🏻 val olarak tanımladığım bir değişkene init bloğunda değer atıyorsam, değişkeni val olarak kullanmaya devam edebilirim.

👉🏻Bir sınıf birden fazla init bloğuna sahip olabilir.

👉🏻Init ler yazıldığı sıraya göre çalışırlar.

📌this: İçinde bulunduğumuz sınıfın kendisine erişmek için kullandığımız yapılardır.

Örneğimizde secondary constructor tanımlarlen this yapısının kullanıldığını görüyoruz. Bu şekilde bir kullanım yapmamızın sebebi , primary constructor da yer alan parametrelerin initialize edilmesi gerektiği. Eğer secondary constructor da this yapısını kullanmazsak hata ile karşılaşırız.

class Phone( val model: String,val costs: Int){

    init{
        println("$model phone costs $ $costs ")
    }

    constructor( color:String) : this("iphone14",900){
        println("$model phone color is $color")
    }
}

fun main(){

    val phoneWithPrimaryConst = Phone("samsungS23",800)
    val phoneWithSecondaryConst = Phone("black")
}

/*
samsungS23 phone costs $ 800 
iphone14 phone costs $ 900 
iphone14 phone color is black
*/

Örneğimizde iki tane instance tanımı yapılmış durumda. İlk olarak primary constructor ardından secondary constructor gereklilikleri ile instance oluşturulmuş.

Tüm bu yapılan işlemler çalıştırıldığında ilk init blok içerisi ekrana yazılmış olacak. Sebebi ise primay constructor’a veriler geldiğinde init bloğunun çalışıyor olması. phoneWithSecondaryConstinstance çağırımı yapıldığında ise secondary constructor da this yapısı ile primary constructor initialize edildiği için tekrardan init bloğu içerisi çalışıp sonrasında secondary constructor bloğu içerisindeki işlem yapılmış olacak.

Classes | Kotlin

Umarım faydalı ve açıklayıcı bir yazı olmuştur sizin için. Yazı ile ilgili fikir ve sorularınız için Linkedin üzerinden benimle iletişime geçebilirsiniz.

Bir sonraki yazıda görüşmek üzere!

İyi kodlamalarr..

Tekrardan merhaba herkese. Bu yazımda Kotlin’de önemli bir yeri olan kimi zaman da kafa karışıklığı yaratan higher order fonksiyonlara değineceğim. Şimdiden keyifli okumalar..

👀Higher Order Functions

Parametre olarak fonksiyon alan ya da duruma bağlı olarak fonksiyon döndüren fonksiyonun kendisine higher order fonksiyon diyoruz. ✍Higher Order fonksiyon tanımladığımızda parametre olarak gelen fonksiyon, bir fonksiyon referansı oluyor. Yani bir lambda expression veya anonymous fonksiyon olabilir.

🚀Örnekler üzerinden Higher Order fonksiyonlara yakından bakalımm..

fun main(){

    fun myhigherOrderFunction(a:Int, b:Int, operation: (Int, Int) -> Int){
        println(operation.invoke(a,b))  // 20
    }

    myhigherOrderFunction(5,4) { number1, number2 ->
        number1 * number2
    }

} 

Yukarıda myhigherOrderFunctionisimli fonksiyonumuz parametre olarak inttipinde a ve bparametrelerini alıyor. Ek olarak tanımda bahsettiğimiz gibi operationisminde fonksiyon referansı almış durumda. Fonksiyon referansı; birinci ve ikinci parametreleriint,geri dönüş tipi ise yine int bu örnek için.

Fonksiyon kapsamında referansımıza invoke işlevi ile a ve b parametrelerini kullanarak çağırım yaptık. Higher Order fonksiyonumuzun kendisini kullanmak istediğimizde ise beklenen değerleri vererek çarpım işlemini gerçekleştirdik.

fun main(){
    val myFunction  =fun(a:String,b:String):Int{
        return a.length * b.length
    }
    myHigherOrderFunc("Marilyn","Monroe",myFunction)

}

fun myHigherOrderFunc(nameOne:String, nameTwo:String, parameter:(String,String)->Int){
    println(parameter.invoke(nameOne,nameTwo)) // 42 
    // println(parameter(nameOne,nameTwo) // 42 

} 

Bu örneğe baktığımızda ise belirtilen string'lerin uzunluklarını alarak çarpım işleminin yapıldığını görüyoruz. Higher Order fonksiyonun kendisine baktığımızda string tipinde iki tane parametre almış durumda. Fonksiyon referansı olarak ise birinci ve ikinci parametre tipleri string , geri dönüş tipi intolan parameterisminde referansımız mevcut.

👉🏻Higher Order fonksiyona nameOneve nameTwoisminde iki parametre verdik bu örnekte. Kullanıma göre parametre sayısını çoğaltabilir veya hiç yer vermeyebilirsiniz.

👉🏻Burada dikkat etmemiz gereken asıl nokta kendimiz ayrı bir fonksiyon tanımı yapıp Higher Order fonksiyon çağırımında kullanmış olmamız. Örneğimizde anonymous fonksiyon oluşturulup kullanıldığını görüyoruz.

fun main(){

    myHigherOrderFunction("Weeknd"){
        println(it)
    }

}
fun myHigherOrderFunction(a:String,actionNotifier:(String)->Unit){
    actionNotifier.invoke("Hello Alien!!")
    val nameLength = a.length*a.length
    println(nameLength)
    actionNotifier.invoke("See you soon Alien!!")
}

/* 
Hello Alien!!
36
See you soon Alien!!
*/

Örneğimizdeki Higher Order fonksiyonu stringtipinde aparametresini ve de stringtipinde parametre alan herhangi bir değer döndürmeyen lambda expression işlevini içeriyor. Lambda işlevini iki kez çağırarak belirtilen mesajların yanında string uzunluğunun karesini alma işlemini gerçekleştiriyor.

🚀Bir sonraki örneğe geçelimm..

fun main(){
    higherOrderFunctions("pomme","billie",::sumHigher)

}

fun sumHigher(name1:String,name2:String) = name1.length * name2.length

fun higherOrderFunctions(a:String,b:String,parameter:(String,String)->Int){
    println(parameter.invoke(a,b)) // 30

Bu örneğimizdeki Higher Order fonksiyon görüldüğü üzere stringtipinde iki adet parametre yanında parameter isminde birinci ve ikinci parametreleri string, dönüşü ise inttipinde olan fonksiyon referansı almakta.

sumHigherfonksiyonu ise string uzunluklarını alarak çarpım işlemi gerçekleştirmekte. Burada dikkat etmemiz gereken nokta sumHigherfonksiyonunun top level decleration olması. ✍Top level decleration, herhangi bir sınıf, nesne veya kod parçasının dışında üst düzey olarak tanımlanan işlevdir. Kullanıma bağlı olarak bir fonksiyon ya da değişken olabilir.

✍Higher order fonksiyon çağırım esnasında top level decleration erişmek için :: gösterimini yapmış olduk.

Higher-order functions and lambdas | Kotlin

Umarım faydalı ve açıklayıcı bir yazı olmuştur sizin için. Detaylı bilgi için yukarıdaki linke bakabilir, yazı ile ilgili fikir ve sorularınız için Linkedin üzerinden benimle iletişime geçebilirsiniz.

Bir sonraki yazıda görüşmek üzere!

İyi kodlamalarr..

Merhabalar. Bu yazımda function literal olarak da geçen lambda expression ve anonymous fonksiyonlardan bahsedeceğim. İyi okumalarr..

👀Lambda Expression

Lambda expression’lar aslında çağırılabilir bir fonksiyondur. Yazım olarak süslü parantezler ile çevrilir. İlk süslü parantezden sonra parametrelerin arasına virgül konularak parametreler yazılır. Ardından ok işareti konulur ve expression body si normal fonksiyon gibi yazılır. Aynı zamanda tanımladıktan sonra anlık olarak kullanabiliriz.

🚀Fonksiyon referans gösterimine bakalımm..

🔎()-> Int

Yukarıdaki örnek hiçbir parametre almayan Int tipinde geri dönüş sağlayan fonksiyon anlamı taşımakta.

🔎(Boolean, Int, String)->String

Bu örnek ise birinci parametresi boolean, ikinci parametresi int, üçüncü parametresi string tipinde olan, geri dönüş tipi ise yine string tipinde fonksiyon tanımını ifade eder.

🚀Şimdi örnekler üzerinden lambda expression inceleyelimm..

fun main(){

    val impactOperation:(String,String)->Int = {elementOne:String,elementTwo:String->
        elementOne.length*elementTwo.length
    }

    println(impactOperation.invoke("lara","fabian"))
}

// 24 

Bu temel örnekte int tipinde geri dönüş değeri olan impactOperation fonksiyonu, verilen string elemanların uzunluklarını alıp çarpma işlemi gerçekleştirmekte.

🔎impactOperation.invoke(“lara”,”fabian”)

🔎impactOperation(“lara”,”fabian”)

Fonksiyon çağırımını invoke işlevi ile gerçekleştirdik örneğimizde. Invoke kullanmadan normal fonksiyon çağırımı ile de aynı işlemi yapabiliriz. Performans açısından herhangi bir farkları olmadığını da belirtmeliyim bu noktada.

🔎{elementOne:String, elementTwo:String-> }

🔎{elementOne, elementTwo-> }

Expression body içinde yer alan isimlendirmeleri tip belirtmeden de kullanabiliriz.

Dikkat etmemiz gereken bir başka nokta ise fonksiyon içerisinde return ifadesini kullanmamamız.✍Lambda expression’ların son ifadesi return tipi olarak tanımlanır yani return ifadesini yazmamıza gerek yoktur. Ve de return type’ı açık olarak belirtemezler.

Bu örnekte ise lambda expression tek parametreli. Bu yüzden parametre otomatik olarak it diye isimlendirilir. Ve de yine tek parametreli olduğu için ok işareti -> koymaya gerek yoktur.

👀Anonymous Functions

Anonymous normal fonksiyonlar gibidir. Normal fonksiyonlardan farkı fonksiyon ismi belirtilmeden yazılmalarıdır. ✍Lambda ifadelerden farkları ise dönüş tipinin belirtilmesidir.

✍Anonymous fonksiyonlar single expression veya fonksiyon body si şeklinde de yazılabilirler.

📌fun (a:Int):Boolean

fun main(){
    val toplama = fun(x: Int, y: Int): Int {
        return x * y
    }

    println(toplama.invoke(12, 8))
}

// 96

Örnekte gördüğümüz gibi fonksiyon ismi belirtmeden anonymous oluşturuyoruz. Int tipinde geri dönüşü de belirtilmiş durumda.

fun main(){
    // single expression örnekleri
    val modOne = fun(number1: Int, number2: Int): Int = number1 % number2
    val modTwo = fun(number1: Int, number2: Int) = number1 % number2
    
}

Higher-order functions and lambdas | Kotlin

Umarım faydalı bir yazı olmuştur sizin için. Detaylı bilgi için yukarıdaki linke bakabilirsiniz.

Yazı ile ilgili fikir ve sorularınız için Linkedin üzerinden benimle iletişime geçebilirsiniz. Bir sonraki yazıda görüşmek üzere!

Tekrardan merhabalar herkese. Bu yazımda Extension ve Infix fonksiyonların ne olduğunu ve de temel kullanım şekillerini örnekler üzerinden aktaracağım.

👀Extension Fonksiyonlar

Kullandığımız bir sınıfa veya veri tipine yeni özellik eklemek istediğimiz, fakat modifiye etmek istemediğimiz durumlarda extension fonksiyon yazarız.

✍Extension fonksiyonlar statik olarak tutulurlar yani hafızada yer kaplarlar. Statik olarak tutuldukları için de ayrı bir fonksiyon yazılmış gibi davranış gösterirler.

✍Bir sınıf içerisinde extension fonksiyon yazdığımızda artık sadece o sınıf içerisinden ulaşılabilir duruma gelir bizim için. Ve de sınıfımızı receiver olarak adlandırırız.

📌fun Type.funcName(parameters):ReturnType

Şimdi ise örnekler üzerinden extension fonksiyonlara göz gezdirelim.

fun main(){
    val firstArray= arrayOf(14,15,3,46,10,25)
    println(firstArray.myExtensionFuc().toList())

}
fun Array<Int>.myExtensionFuc():Array<Int>{

    for(i in this.indices) this[i]*=this[i]
    return this

}

// [196, 225, 9, 2116, 100, 625]

Bu örnekte int tipinde elemanlardan oluşan diziye extension fonksiyon yazdık. Fonksiyon bizim için her bir elemanın karesini alıp dizi index güncelliyor ve de geri dönüş olarak diziyi döndürüyor.

fun main(){
    val firstArray= arrayOf("bilbo","thorin","gandalf","obliviate")
    println(firstArray.myextensionFunction().toList())

}
fun Array<String>.myextensionFunction(): Array<Int?> {

    val emptyIntArray = arrayOfNulls<Int>(this.size)

    this.forEachIndexed { index, element ->
        emptyIntArray[index] =  index * element.length
    }
    
    return emptyIntArray
}

// [0, 6, 14, 27]

Bu örnekte ise type olarak string array’e extension fonksiyon yazdık. Fonksiyon genel anlamda bizim için her bir string elemanın bulunduğu index numarası ile, string uzunluğunu alarak çarpım işlemi gerçekleştiriyor. Ve bu çarpım işlemi sonucunu bize geri döndürüyor.

👀Infix Fonksiyonlar

Infix fonksiyonlar bizim daha anlaşılabilir bir şekilde işlemler yapmamızı sağlamasının yanı sıra temelde extension fonksiyonlar ile benzerdir. Ve bir infix fonksiyon kesinlikle extension fonksiyon olmak durumundadır.

Infix fonksiyonlar hakkında bilmemiz gereken birkaç nokta ise :

👉🏻Infix fonksiyonlar sadece bir parametre alır.

👉🏻Infix fonksiyonların parametresi default value alamaz.

👉🏻Infix fonksiyonlar daha düşük üstünlüğe sahiptir.

📌infix fun Type.funcName(parameter):ReturnType

fun main(){
    val firstArray= arrayOf(75,8,10,55,7,14,24)
    val number = 5
    println(number myInfixFunc firstArray)
    
}
infix fun Int.myInfixFunc(myArray:Array<Int>): ArrayList<Int> {

    val emptyArrayList: ArrayList<Int> = ArrayList()

    for(i in myArray) if(i % this == 0) emptyArrayList.add(i)
    return emptyArrayList
}

// [75, 10, 55]

Int tipindeki değerlere infix fonksiyon yazıldığını görüyoruz bu örnekte. Fonksiyon parametre olarak int array alıp array içerisinde her bir elemanın mod alma işlemini gerçekleştiriyor. Mod işleminin kalansız olması durumunda ise de array içerisindeki eleman yeni bir arraylist içerisine ekleniyor ve dönüş işlemi sağlanıyor.

• Extensions | Kotlin
• Functions | Kotlin

Umarım faydalı bir yazı olmuştur sizin için. Detaylı bilgi için yukarıdaki linklere bakabilirsiniz.

Yazı ile ilgili fikir ve sorularınız için Linkedin üzerinden benimle iletişime geçebilirsiniz. Bir sonraki yazıda görüşmek üzere!

Merhabalar, bu yazımda forEach işlevi üzerinde örnekler vererek break, continue, return ve labelling ifadelerini inceleyeceğim. Keyifli okumalar.

İlk olarak kullanacağımız ifadeleri hatırlayalım.

Break: Döngü içerisinde break ile karşılaştığımız anda içinde bulunduğumuz döngü sonlanır. Eğer iç içe iki tane döngü söz konusu ve de en içteki döngüde break ifadesi var ise içteki döngü sonlandırılır. Kod parçası olması durumunda işleme devam edilir.

Continue: Döngü içerisinde kendisinden sonraki kod parçalarının atlanmasını ve bulunduğu döngünün en başına giderek bir sonraki adımdan devam edilmesini sağlar.

Return: Döngü içinde return ifadesi yer alıyorsa kendisinden sonra kod parçaları olsa bile döngü sonlandırılır.

Labeling: Labelling için işlem parçacığının etiketlenmesi diyebiliriz. Döngü ifadesine veya bloğa etiketleme yapabilirsiniz.

İncelemeye forEach işlevini örneklendirerek başlayalım.

intArrayOf(41,36,89,43,12,50,99).forEach {it->
        println(it)
}

Yukarıda forEach temel kullanımı yer almakta. forEach, döngü yapısını oluşturmadan elemanlar üzerinde işlemler yapabilmemizi sağlayan bir işlevdir. For veya while gibi bir döngü ifadesi değildir. Aynı zamanda forEach higher-order bir fonksiyondur.

Break & Continue

forEach içerisinde break — continue kullanmak istediğimizde hata alırız.

Bunun temel sebebi break-continue ikilisinin döngü yapıları ile kullanılması gerektiğidir. forEach içerisinde break ve continue yerine aynı etkiyi yaratan alternatif çözümler kullanabiliriz.

Return

val arrayOne=intArrayOf(56,74,32,14,78,96,65,52)
arrayOne.forEach {m->
     if(m>50 && m<75) {
         println(m)
         return
     }
}

// 56

Yukarıdaki örnekte arrayOne dizisi elemanları sırasıyla if koşulunu sağlarsa yazdırılmaktadır. Kod parçası çalıştırıldığında ilk olarak m değeri 56 olacak ve belirtilen aralığı da sağladı için yazma işlemi gerçekleştirilecektir. if koşul aralığından çıkıldığında return ifadesi ile karşılaştığımız için forEach çalışması sonlandırılacaktır.

intArrayOf(41,36,89,43,12).forEach {element->
        println(element)
        intArrayOf(9,8,7,6).forEach {a->
            if(a>7) println(a+a)
        }
        return
}

/*
41
18
16
*/

Bu örnekte ise iç içe iki tane forEach yer almakta. İlk forEach çalıştığında dizinin ilk elemanını yazdırma işlemi gerçekleşmiş olacak. İkinci forEach baktığımızda dizi elemanlarının üzerinden sırasıyla koşul kontrol edilecek. Koşul sağlanması durumunda ise de toplama işlemi yapılıp yazdırılacaktır. İkinci forEach bloğunda tüm elemanlar kontrol edilip bloktan çıkıldığında return ile karşılaştığımız kod blokları tamamen sonlandırılacaktır.

Labelling

intArrayOf(81,42,35,84,95).forEach expression@{
        if(it>50) return@expression
        println(it)
}

/*
42
35
*/

expression@ yazarak etiketleme işlemi yapıyoruz. Etiket ismini farklı bir isim de verebilirsiniz.

return@expression bizim için o adımı ve sonrasını atla anlamı taşıyor. Aslında continue’nun yaptığı işlevi sağlıyor bizim için. Sırasıyla elemanlara bakarak 50 sayısından büyük olma koşulu sağlandığında diziye tekrar gidip diğer elemanları incelemeye devam ediyor.

run breaking@ {
        intArrayOf(42,81,35,84,95).forEach {a->
            if(a>50) return@breaking
            println(a)
        }
}

println("here")

/* 
42
here
*/

Döngü sonlandırıp döngü dışındaki bir ifadeye dönmek istiyorsak run fonksiyonu yazarak bunu sağlayabiliriz.

Bu örnekte dizi elemanları sırasıyla incelenip elemanın 50 sayısından büyük olma koşulunu sağladığında yazdığımız run fonksiyonu ile döngüyü sonlandırıp döngü dışına çıkıyoruz.

val arrayOne=intArrayOf(8,10,79,98,19)
run breaking@{
    arrayOne.forEach {m->
        intArrayOf(2,3,4).forEach expression@{n->
           if(m>50 ){
              return@breaking
           }else if(n>2){
                 return@expression
           }
           println("m:$m * n:$n =  ${m*n}")
        }
    }
}
println("here")

/*
m:8 * n:2 =  16
m:10 * n:2 =  20
here
*/

İç içe iki tane forEach kullanarak labeling incelemesi yapıyoruz bu örnekte. arrayOne dizi elemanının 50 den büyük olması şartı sağlandığında döngü tamamen sonlanacaktır. İç kısımda yer alan dizi elemanının da 2 sayısından büyük olması durumda o adım ve devamında yer alan kod satırları atlanacaktır.

val arrayOne=intArrayOf(120,79,98,19,56)
run breaking@{
    intArrayOf(25,61,8,37,10,72,18,16,5,12).forEach {a->
      run one@{
        intArrayOf(100,488,675,288).forEach {b->
         run two@ {
             arrayOne.forEach {c->
                  if(c>b) return@two
             }
         }
         if(b%a==0) println("b:$b mod a:$a = 0") else if (b<500) return@one
        }
        println("you are here")
      }
      if(a>70) return@breaking
    }
}


/* 
b:100 mod a:25 = 0
b:100 mod a:10 = 0
*/

Bu örnekte ise iç içe üç tane forEach işlevi kullanıyoruz. Koşulların sağlanması durumlarına göre işlevler sonlandırılıyor.

Debug modda kodları inceleyerek çalışma mantığını daha iyi bir şekilde anlayabilirsiniz.

Returns and jumps | Kotlin

Umarım faydalı bir yazı olmuştur sizin için , bir sonraki yazıda görüşmek üzere!