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

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

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

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);
 }
}
ان الهدف الاسمى من هذا الدرس هو تعلم اساسيات انشاء العناصر المخصصة و لا انسى ان جوجل تعتبر العناصر المخصصة من المهارات الاساسية التي لا بد لمطور اندرويد التحلي بها .
لا تنسى تتبع اخبار مطوري اندرويد على صفحتنا على الفايس بوك
هل ترغب في مثل هذه التدوينات

اسماعيل ايت بلا

ببساطة ارغب في تجربة جديدة من التعلم من خلال مشاركة ما تعلمه يجبرني ذلك على البحث لمدة طويلة مما يجعل الموقع جديرا بالثقة

اترك لنا تعليقا

الاشتراك بالقائمة البريدية

توصل باحدث مواضيعنا و كن على اطلاع باخر اخبار وتقنيات الاندرويد