Mobil İnkişafda Xüsusi Görünüşlər və Çəkmə: mahiyyəti, hansı API-lər və necə işləməsi

Xüsusi Görünüşlər nədir və mobil tətbiqlərdə nə üçün lazımdır

Xüsusi Görünüşlər unikal qrafika yaratmaq üçün standart çəkmə və ölçmə metodlarını ləğv edən istifadəçi təyinli interfeys komponentləridir. Qrafiklər, animasiyalar, diaqramlar, xüsusi söhbət elementləri və AR maskaları — bunlar mobil tətbiqlərdə Xüsusi Görünüşlərin tipik istifadə ssenariləridir. Standart UI komponentləri (Button, TextView, Label) tapşırıqların 80%-ni əhatə edir, lakin qalan 20% mobil inkişafda çəkmə üzərində tam nəzarət tələb edir. Mobil inkişafda çəkmə junior tərtibatçını senior-dan fərqləndirən bacarıqdır.

Xüsusi Görünüşlər nə vaxt əsaslandırılır

Mobil tətbiqlərdə Xüsusi Görünüşlər unikal 2D qrafika, mürəkkəb animasiyalar, çartlar və məlumat vizuallaşdırması üçün lazımdır. Standart UIKit tələb olunan elementi təmin etmirsə — xüsusi Görünüş yaradılır. Mobil tətbiqlərdə Xüsusi Görünüşlər gedişat çubuqları, xüsusi düymələr, gradient dolğular, animasiyalı ikonlar və barmaqla çəkmə kətanları üçün istifadə olunur. Həddindən artıq istifadə etməmək vacibdir — sadə stillər üçün, Görünüş API-si vasitəsilə standart komponentləri konfiqurasiya etmək kifayətdir.

iOS-da Xüsusi Görünüşlər: drawRect və Core Graphics

iOS-da, Xüsusi Görünüşlər UIView-dən miras alaraq və drawRect metodunu ləğv edərək yaradılır. drawRect ilk renderdə və hər setNeedsDisplay() çağırışından sonra çağırılır. drawRect-in daxilində, tərtibatçı UIGraphicsGetCurrentContext() vasitəsilə CGContext əldə edir — xətlər, formalar, gradientlər və mətn üçün kətan. Core Graphics (Quartz 2D) hər piksel üzərində tam nəzarət verən aşağı səviyyəli CPU əsaslı render mühərrikidir. UIBezierPath qısa sintaksislə yollar yaratmaq üçün rahat sarğıcdır.

class CircleView: UIView {
    private var fillColor: UIColor = .systemBlue

    override func drawRect(_ rect: CGRect) {
        guard let ctx = UIGraphicsGetCurrentContext() else { return }
        ctx.setFillColor(fillColor.cgColor)
        ctx.addEllipse(in: bounds.insetBy(dx: 4, dy: 4))
        ctx.drawPath(using: .fill)
    }

    func updateColor(_ newColor: UIColor) {
        fillColor = newColor
        setNeedsDisplay()
    }
}

Core Graphics: CGContext, CGGradient və çevrilmələr

Core Graphics bütün çəkmə əməliyyatları üçün CGContext — kətan təmin edir. CGGradient CGColorSpace (sRGB, Display P3) dəstəyi ilə xətti və radial gradientlər yaradır. Çevrilmələr CGAffineTransform vasitəsilə həyata keçirilir — döndərmə, miqyaslama və yerdəyişmə üçün 3x3 matris. CGContextTranslateCTM, CGContextRotateCTM və CGContextScaleCTM koordinat sistemini dəyişir. Core Graphics CPU-da işləyir, buna görə mürəkkəb qrafika prosessoru yükləyə bilər — GPU sürətləndirilməsi üçün Metal istifadə edin.

Formalar yaratmaq üçün UIBezierPath

UIBezierPath CGPath üzərində obyekt yönümlü sarğıcdır. addArc(withCenter:radius:startAngle:endAngle:clockwise:) metodu tağlar və dairələr yaradır, addCurve Bézier əyriləri yaradır. Yollar addClip vasitəsilə birləşmə, kəsişmə və çıxma əməliyyatlarını dəstəkləyir. UIBezierPath xüsusi maskalar (maskView), kəsmə yolları və mürəkkəb formalar — ulduzlar, ürəklər, xüsusi ikonlar üçün rahatdır.

Android-də Xüsusi Görünüşlər: onDraw və Canvas

Android-də, xüsusi Görünüş onDraw(Canvas) ləğv edilərək View-i genişləndirir. Canvas mobil inkişafda bütün çəkmə metodlarını ehtiva edir: drawCircle, drawRect, drawLine, drawText, drawBitmap, drawPath və drawRoundRect. Paint parametrləri konfiqurasiya edir — rəng, xətt qalınlığı, stil (FILL, STROKE, FILL_AND_STROKE), anti-aliasing (isAntiAlias) və mətn ölçüsü. onDraw hər invalidate() çağırışında çağırılır və ağır əməliyyatlar ehtiva etməməlidir — bütün hesablamalar keşlənir.

class CustomCircleView(context: Context, attrs: AttributeSet?)
    : View(context, attrs) {

    private val paint = Paint().apply {
        style = Paint.Style.FILL
        color = Color.BLUE
        isAntiAlias = true
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val cx = width / 2f
        val cy = height / 2f
        val radius = minOf(cx, cy) - 4f
        canvas.drawCircle(cx, cy, radius, paint)
    }
}

Android-də Path və animasiyalar

Android-də Path, UIBezierPath-in ekvivalentidir: addCircle, addRect, addOval, lineTo, cubicTo və quadTo. PathMeasure yolun uzunluğunu və istənilən nöqtədə koordinatları hesablayır — obyektin yol boyunca hərəkətini animasiya etmək üçün faydalıdır. Animasiyalar üçün, geri çağırışda invalidate() ilə ValueAnimator istifadə olunur. Animator rəngi, radiusu, mövqeyi dəyişə bilər — çəkməyə təsir edən istənilən xüsusiyyət. Android-də Xüsusi Görünüşlər XML vasitəsilə animasiya üçün StateListDrawable və animated-vector-u da dəstəkləyir.

Canvas-də Shader və gradientlər

Android-də gradientlər Shader vasitəsilə təyin olunur — LinearGradient, RadialGradient və SweepGradient. Shader paint.setShader(shader) vasitəsilə Paint-ə təyin edilir. LinearGradient iki nöqtə arasında isteğe bağlı rəng mövqeləri ilə xətti gradient yaradır. RadialGradient — mərkəzdən kənarlara radial. SweepGradient — mərkəz nöqtəsi ətrafında konik. Shader.TileMode (CLAMP, REPEAT, MIRROR) sahə hüdudlarından kənarda davranışı müəyyən edir.

Flutter-də CustomPainter: Canvas-da çəkmə

Flutter CustomPainter istifadə edir — paint(Canvas canvas, Size size) və shouldRepaint metodları olan sinif. Flutter-də Canvas eyni metodları təmin edir Android-də olduğu kimi: drawCircle, drawRect, drawLine, drawPath, drawParagraph və drawImage. Flutter-də Paint rəngi, qalınlığı, stili və anti-aliasingi konfiqurasiya edir. Flutter drawRect və ya onDraw istifadə etmir — bütün çəkmə CustomPaint vidjetinə yerləşdirilmiş CustomPainter vasitəsilə həyata keçirilir.

class CirclePainter extends CustomPainter {
  final Color color;

  CirclePainter({required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill
      ..isAntiAlias = true;
    final radius = size.shortestSide / 2 - 4;
    canvas.drawCircle(size.center(Offset.zero), radius, paint);
  }

  @override
  bool shouldRepaint(CirclePainter oldDelegate) =>
    oldDelegate.color != color;
}

shouldRepaint və RepaintBoundary

shouldRepaint CustomPainter-in yenidən çəkilməsinə ehtiyac olub-olmadığını müəyyən edir. Yalnız renderə təsir edən məlumatlar dəyişdikdə true qaytarın — rəng, ölçü, çart məlumatları. RepaintBoundary yenidən çəkməni ayrıca təbəqədə təcrid edir — nadir hallarda dəyişən vidjetlər üçün istifadə edin. Flutter-də setNeedsDisplay və ya invalidate yoxdur — yenidən çəkmə setState və ya dəyişiklikləri dinləyən ValueNotifier vasitəsilə tetiklenir.

Flutter-də gradientlər və çevrilmələr

Flutter LinearGradient, RadialGradient və SweepGradient-i dəstəkləyir — Android-də olduğu kimi eyni tiplər. Gradient createShader(Rect bounds) vasitəsilə Paint üçün Shader yaradır. Çevrilmələr canvas.rotate, canvas.scale, canvas.translate və canvas.skew vasitəsilə həyata keçirilir. Flutter Transform vidjeti üçün 4x4 çevrilmə matrisi (Matrix4) istifadə edir. Flutter-də çəkmə animasiyaları CustomPainter-i yenidən çəkmək üçün setState ilə birlikdə AnimationController istifadə edilərək hazırlanır.

Xüsusi Görünüşlərin ölçülməsi: sizeThatFits, onMeasure və computeDryLayout metodları

Xüsusi Görünüşlərin düzgün ölçülməsi proqnozlaşdırıla bilən interfeys davranışının təməlidir. iOS-da, Görünüşün ölçüsü sizeThatFits və intrinsicContentSize vasitəsilə müəyyən edilir. sizeThatFits verilmiş məhdudiyyətlər üçün optimal ölçü qaytarır. intrinsicContentSize — xarici məhdudiyyətlər olmadan məzmunun təbii ölçüsü. Android-də ölçmə MeasureSpec parametrləri (UNSPECIFIED, EXACTLY, AT_MOST) ilə onMeasure-də həyata keçirilir. Flutter-də ölçü paint(Canvas, Size)-ə ötürülür və computeDryLayout və ya LayoutBuilder vasitəsilə hesablana bilər.

iOS-da sizeThatFits və intrinsicContentSize

intrinsicContentSize CGSize qaytarır — məzmununa əsaslanan Görünüşün təbii ölçüsü. setContentHuggingPriority və setContentCompressionResistancePriority dartılma və sıxılma zamanı davranışı idarə edir. sizeThatFits Auto Layout-da ölçünü hesablamaq üçün sistem tərəfindən çağırılır. Xüsusi Görünüşlər üçün, komponentinizin təbii ölçüsü varsa intrinsicContentSize-i ləğv edin — məsələn, dairə həmişə 100x100 olmalıdır.

Android-də onMeasure və MeasureSpec

onMeasure widthMeasureSpec və heightMeasureSpec qəbul edir. MeasureSpec rejim və ölçü ehtiva edir: UNSPECIFIED (məhdudiyyətsiz, Görünüş öz ölçüsünü seçir), EXACTLY (valideyndən dəqiq ölçü), AT_MOST (maksimum ölçü). setMeasuredDimension(width, height) ölçmə nəticəsini saxlayır. Məlumat dəyişdikdə, yenidən ölçmə üçün requestLayout() çağırın. İç-içə ViewGroup-lar uşaq elementləri yerləşdirmək üçün onLayout-u ləğv etməyi tələb edir.

Flutter-də computeDryLayout

computeDryLayout tam layout dövrü olmadan ölçünü hesablamaq üçün RenderObject metodudur. LayoutBuilder.getSize — build metodunda mövcud yeri əldə etmək üçün alternativdir. Flutter-də kətan ölçüsü paint-ə Size olaraq ötürülür və ayrıca ölçmə tələb etmir — CustomPainter ötürülən hüdudlar daxilində çəkir. Bununla belə, xüsusi RenderObject-lər üçün performLayout və computeDryLayout-u ləğv etməlisiniz.