Android Academy · Ders

Özel Görünümler

Özel Görünümler, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 5 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Android Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Android Academy kursu toplamda 5 dersten oluşur.

Özel Görünümler Neden Kullanılır?

Bazen yerleşik Android görünümleri ihtiyacınızı tam olarak karşılamaz. Özel görünümler şunları yapmanızı sağlar:

SDK'de bulunmayan şekilleri, grafikleri, ilerleme halkalarını veya çizelgeleri çizmek
Uygulamanın tamamında tutarlı biçimde kullanılan markaya özgü kullanıcı arayüzü bileşenleri oluşturmak
Birden fazla görünümü yeniden kullanılabilir tek bir bileşende birleştirmek (Bileşik Görünüm)
İç içe yerleşim hiyerarşilerini ortadan kaldırarak performans elde etmek

View'dan Türetme

View sınıfını (veya ImageView gibi bir alt sınıfı) genişleterek özel bir görünüm oluşturun. Gerekli oluşturucuyu geçersiz kılın:

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

    var progress: Float = 0f
        set(value) {
            field = value.coerceIn(0f, 100f)
            invalidate()   // trigger redraw
        }

    // onMeasure and onDraw go here
}

onMeasure()

onMeasure(), bu görünümün ne kadar büyük olmak istediğini üst öğeye bildirir. Sonunda her zaman setMeasuredDimension() çağırın:

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    val desiredSize = 200  // dp → pixels
    val px = (desiredSize * resources.displayMetrics.density).toInt()

    val width  = resolveSize(px, widthMeasureSpec)
    val height = resolveSize(px, heightMeasureSpec)

    // Square: same width and height
    val size = minOf(width, height)
    setMeasuredDimension(size, size)
}

Paint — Çizim Aracı

Bir Paint nesnesi çizim için stil bilgilerini (renk, kenarlık genişliği, kenar yumuşatma) tutar. Bu nesneyi bir kez oluşturun — kesinlikle onDraw() içinde oluşturmayın:

class CircleProgressView ... : View(...) {

    // Create Paint in init, not in onDraw!
    private val backgroundPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.LTGRAY
        style = Paint.Style.STROKE
        strokeWidth = 20f
        strokeCap = Paint.Cap.ROUND
    }

    private val progressPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.parseColor("#6750A4")
        style = Paint.Style.STROKE
        strokeWidth = 20f
        strokeCap = Paint.Cap.ROUND
    }
}

onDraw() — Görünümü Çizme

onDraw(canvas), görünümün yeniden çizilmesi gerektiği her seferinde çağrılır. Şekilleri, metinleri ve bit eşlemleri çizmek için Canvas kullanın:

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)

    val cx = width / 2f
    val cy = height / 2f
    val radius = (minOf(width, height) / 2f) - 30f

    // Draw background circle
    canvas.drawCircle(cx, cy, radius, backgroundPaint)

    // Draw progress arc
    val oval = RectF(cx - radius, cy - radius, cx + radius, cy + radius)
    val sweepAngle = 360f * (progress / 100f)
    canvas.drawArc(oval, -90f, sweepAngle, false, progressPaint)
}

invalidate() ve requestLayout()

Güncellemeyi tetiklemek için kullanılan iki yöntem:

invalidate() — görünümü yeniden çizer (onDraw çağrılır). İçerik değiştiğinde ancak boyut aynı kaldığında kullanın.
requestLayout() — yeniden ölçer ve yeniden çizer (önce onMeasure, ardından onDraw çağrılır). Görünümün boyutu değiştiğinde kullanın.

Özel Nitelikler (attrs.xml)

Görünümün yerleşim dosyalarından yapılandırılabilmesi için özel XML nitelikleri tanımlayın:

<!-- res/values/attrs.xml -->
<resources>
    <declare-styleable name="CircleProgressView">
        <attr name="progressColor" format="color" />
        <attr name="trackColor"    format="color" />
        <attr name="strokeWidth"   format="dimension" />
        <attr name="progress"      format="float" />
    </declare-styleable>
</resources>

Özel Nitelikleri Okuma

Nitelikleri oluşturucuda obtainStyledAttributes kullanarak okuyun:

init {
    context.obtainStyledAttributes(attrs, R.styleable.CircleProgressView).use { ta ->
        progressPaint.color = ta.getColor(
            R.styleable.CircleProgressView_progressColor,
            Color.parseColor("#6750A4")
        )
        backgroundPaint.color = ta.getColor(
            R.styleable.CircleProgressView_trackColor,
            Color.LTGRAY
        )
        val sw = ta.getDimension(R.styleable.CircleProgressView_strokeWidth, 20f)
        progressPaint.strokeWidth = sw
        backgroundPaint.strokeWidth = sw
        progress = ta.getFloat(R.styleable.CircleProgressView_progress, 0f)
    }
}

Özel Görünümü XML'de Kullanma

Özel görünümünüzü tam sınıf yolu ve özel niteliklerle yerleşim XML'inde kullanın:

<!-- In any layout XML -->
<com.example.myapp.CircleProgressView
    android:id="@+id/progressView"
    android:layout_width="120dp"
    android:layout_height="120dp"
    app:progress="65"
    app:progressColor="@color/primary"
    app:trackColor="@color/surface_variant"
    app:strokeWidth="12dp" />

<!-- Control in code: -->
binding.progressView.progress = 75f

Bileşik Görünümler

Bileşik görünüm, mevcut görünümleri yeniden kullanılabilir tek bir bileşende birleştirir. LinearLayout gibi bir yerleşim sınıfını genişletin:

class SearchBarView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : LinearLayout(context, attrs) {

    private val binding = ViewSearchBarBinding.inflate(LayoutInflater.from(context), this)

    init {
        orientation = HORIZONTAL
        binding.ivSearch.setOnClickListener {
            onSearchClick?.invoke(binding.etSearch.text.toString())
        }
    }

    var onSearchClick: ((String) -> Unit)? = null

    fun setHint(hint: String) { binding.etSearch.hint = hint }
}

Metin Çizme

Bir Canvas üzerine drawText() ile metin çizin. Paint.getFontMetrics() kullanarak metni tam olarak ortalayın:

private val textPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
    color = Color.BLACK
    textSize = 48f
    textAlign = Paint.Align.CENTER
}

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    val cx = width / 2f
    val cy = height / 2f

    // Vertically center the text:
    val fm = textPaint.fontMetrics
    val textY = cy - (fm.ascent + fm.descent) / 2f
    canvas.drawText("${progress.toInt()}%", cx, textY, textPaint)
}

Kısa Kontrol

Veriler değiştiğinde ancak boyut aynı kaldığında özel görünümünüzü yeniden çizdirmek için hangi yöntemi çağırmalısınız?

Özet: Özel Görünümler

Artık ekranda istediğiniz her şeyi çizebilirsiniz:

@JvmOverloads constructor ile View sınıfını genişletin
onMeasure() — istenen boyutu setMeasuredDimension() ile bildirin
Paint — stili tanımlar; bir kez oluşturun, onDraw() içinde oluşturmayın
onDraw(canvas) — daireler, yaylar, metinler ve bit eşlemleri çizin
Yeniden çizmek için invalidate(), yeniden ölçmek için requestLayout()
XML yapılandırması için attrs.xml üzerinden özel nitelikler
Bileşik görünüm — mevcut görünümleri birleştirmek için bir yerleşimi genişletin

Sırada: Animasyonlar ve Geçişlerle kullanıcı arayüzünüze hayat vermek.

Sıkça Sorulan Sorular

“Özel Görünümler” dersi ücretsiz mi?

Evet — “Özel Görünümler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Android Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Android Academy kursu toplamda 5 dersten oluşur.

“Özel Görünümler” dersinde ne öğreneceğim?

Özel kullanıcı arayüzü bileşenlerini sıfırdan çizin. View sınıfını genişletin, Canvas ve Paint ile onMeasure ve onDraw uygulayın, özel XML öznitelikleri tanımlayın ve bileşik görünümler oluşturun. Android Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Android Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Android Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 5 dersinin 3. dersidir.

“Özel Görünümler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Android Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Android Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Android Academy Sayfasına Dön