android bella: انشاء عناصر مخصصة في الاندرويد باستعمال كوتلن

حسنا العناصر المخصصة او customView اظنك استعملت العناصر المخصصة الاف المرات دون معرفة كيفية عملها منها textView و editText و غيرها الكثير لكن هل تعلم كيفة انشاء واحدة خاصة بك اذن  هيا بنا لنبحر في هذا البحر الشاسع نحو احتراف اندرويد بكل ما للكلمة من معنى .

اذا وصلت الى 1000 لايك في اقل من اسبوع على صفحتي ساقوم بانشاء فيديو zero to hero في العناصر المخصصة
0-ما هي مهمة اليوم : ببساطة دائرة في وسطها نص بسيط .

1-لماذا استعمل العناصر المخصصة اصلا :
ابسط و اسهل : يمكنك مثلا وضع خط على textView مرة واحدة و لن تحتاج الى وضع الخط كل مرة تقوم باستدعائه.
تجنب وضع الكثير من العناصر في الكود فتسطيع وضع عنصر واحد كافي و وافي يعمل افضل من العناصر الاخرى .
في بعض الاحيان تحتاج الى اضافة خاصية الى عنصر لكن لا تستطيع من خاصية typeface التي لا توجد في ملف xml و سناتي على ذكر هذا .

2-الهيكلة :

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

هذا الكود يقوم باخد السياق  context  او الاكتفتي التي سيقوم بالرسم عليها .
و ايضا الخصائص التي تضعها في ملف xml على الفيو .
ثم خصائص التي توجد بملف الستايل .
3- انشاء ملف attr.xml
هذا الملف هو الذي ينقل الخصائص التي تضعها ب xml الى customView   لانشاء الملف:
File -> Value Resource  File ->attr ->finish

<resources>
    <declare-styleable name="KotlinView">
        <attr format="color" name="circleColor">
        <attr format="string" name="circleLabel"></attr>
        <attr format="color" name="labelColor"></attr>
    </attr></declare-styleable>
</resources>

4-اضافة العنصر الى activity :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.androidbella.learnprog.helper.KotlinView
        android:id="@+id/custView"
        android:layout_width="374dp"
        android:layout_height="wrap_content"
        custom:circleColor="#29536b"
        custom:circleLabel="Hello"
        custom:labelColor="#ffff66" />
</RelativeLayout>

5-رسم الدالة باستعمال دالة onDraw

class KotlinView @JvmOverloads constructor(
  context: Context, private var attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr){
 //circle | text colors | label text
 private var circleCol: Int = 0
 private var labelCol: Int = 0
 private var circleText: String? = null
 //paint for drawing custom view
 private var circlePaint: Paint? = null
 init {
  val a = context.theme.obtainStyledAttributes(attrs,
    R.styleable.kotlinView, 0, 0)
  try {
   //اخد معطيات من العنصر الخاص بنا
   circleText = a.getString(R.styleable.kotlinView_circleLabel)
   circleCol = a.getInteger(R.styleable.kotlinView_circleColor, 0)
   labelCol = a.getInteger(R.styleable.kotlinView_labelColor, 0)
  } finally {
   a.recycle()
  }
  circlePaint= Paint()
 }
 //هذه الدالة هي من سترسم الدائرة
 override fun onDraw(canvas: Canvas?) {
  super.onDraw(canvas)
  //رسم الدائرة
  val viewWidthHalf = this.measuredWidth / 2f
  val viewHeightHalf = this.measuredHeight / 2f
  //اخذ قيمة الانحناء من الطول او العرض حسب الاصغر
  val radius: Float
  radius = if (viewWidthHalf > viewHeightHalf)
   viewHeightHalf - 10f
  else viewWidthHalf - 10f
  //اضافة بعض الخصائص للرسام
  circlePaint!!.style = Paint.Style.FILL
  circlePaint!!.isAntiAlias = true
  //تغيير اللون
  circlePaint!!.color = circleCol
  canvas!!.drawCircle(viewWidthHalf , viewHeightHalf, radius, circlePaint)
  //رسم النص
  circlePaint!!.textAlign = Paint.Align.CENTER
  circlePaint!!.color=Color.WHITE
  circlePaint!!.textSize = 50F
  canvas.drawText(circleText, viewWidthHalf, viewHeightHalf, circlePaint);
 }
}

ان الهدف الاسمى من هذا الدرس هو تعلم اساسيات انشاء العناصر المخصصة و لا انسى ان جوجل تعتبر العناصر المخصصة من المهارات الاساسية التي لا بد لمطور اندرويد التحلي بها .
لا تنسى تتبع اخبار مطوري اندرويد على صفحتنا على الفايس بوك