Button in android studio

في هذه التدوينة سنتعرف الي ألازرار في برمجة تطبيقات الروبوت وكيفية عملها وما يحدث خلف الكواليس
الزر Butoonهو فئة فرعية من الكلاس TextView وزر مركب buttonهو فئة فرعية لفئة الزر Butoon>. حيث نستطيع علي أحد الازرار تنفيذ إجراءات أو أحداث مختلفة مثل حدث النقرclick event والحدث المضغوط pressed eventوالحدث باللمس touch eventوما إلى ذلك.
أزرار Android هي مكونات واجهة المستخدم الرسومية (GUI) التي تكون منطقية عند النقر (النقرات) بواسطة المستخدم. عندما ينقر المستخدم على الزر / ينقر taps/clicks على أحد التطبيقات في Android ، يمكن أن يستجيب التطبيق للنقرة / النقر وتنفيذ حدث معين.
يمكن تقسيم هذه الأزرار إلى فئتين:

1. الأولى هي الأزرار التي تحتوي على نص Button

2. والثانية هي الأزرار التي تحتوي على صورة ImageButton يمكن أن يحتوي الزر الذي يحتوي على صور على كل من صورة ونص. تسمى أيضًا أزرار Android التي تحتوي على صور باسم ImageButton.

وتوجد خمسة انواع من الازرار يتعامل معهاالتطبيق وهي :

1. Button

2. ToggleButton

3. RadioButton

4. ImageButton

5. FloatinActionButton

يمكننا إدراج الازرار في البرنامج بطريقتين :

1. السحب والإفلات

2. عن طريق ملف XML

وسنعتمد في هذه التدوينة العمل من خلال ملف XML file وذلك لكي تتعلم كيفية كتابة الكود في هذا الملف وتتعرف الي الخصائص التي تميز الازرار

كتابة الزر في ملف XML

قم بعمل مشروع جديد وقم بتسميته باي إسم تريده وهنا سيكون بالاسم ButtonExample وفي داخل الفعالية \ الصفحة\النشاط الرئيسي قم بكتابة الاكواد

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GagAcademy" />

بعض الخصائص التي تميز الازرار

1.id تعرفنا اليها سابقا وهي خاصية رقم المعرف الفريد لكل عنصر ولا يجب أن يكون هناك عناصر بنفس الاسم id

 <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GagAcademy" />

2.gravity خاصية المحازاة للعناصر وهي تسمح محازاة الزر بعدة إتجاهات مثل اليمين والاسفل والوسط واليسار والتوسط في الافقي والعمودي

 <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="right"//هنا قم بتغير القيمة الي اخري مثلا الي اليسار او الوسط او الاسفل وشاهد النتيجة
        android:text="GagAcademy" />

ملاحظة

يمكنك دمج اكثر من خاصية في نفس العنصر وذلك من خلال إستخدام الرمز |ويوضع بين الخاصية والاخري كما هو موضح في الصورة أعلاه

3.textColor وهي الخاصية المسؤولة عن لون النص الذي يوجد بداخل الزر ويمكنك إعطاها اللون الذي تريد
4.textSize هذه الخاصية مسؤولة عن حجم الزر وهي تقاس بوحدة sp
5.textStyle هذه الخاصية مسؤولة عن شكل الزر ويحمل إحدي القيم bold or italic ويكون في الوضع الافتراضي normal
background.6 وهي خاصية توفر إمكانية وضع لون او صورة ويكون عبارة عن خلفية للزر
7.padding or margin وهما الخصائص التي تتحكم في تمركز النص الداخلي بالنسبة للحاوية padding او الحاوية ككل بالنسبة للواجهة الجزر margin
8.textAllCaps خاصية منطقية تقبل إحدي القيمتين فقط إما true or false وهي تجعل من النص داخل الزر إما حروف كبيرة او صغيرة

  <Button
        android:id="@+id/Button1"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:background="#147D03"
        android:text="GagAcademy"
        android:textSize="20sp"
        android:paddingRight="130dp"
        android:layout_marginTop="130dp"
        android:textAllCaps="false"
        android:textStyle="bold|italic"/>   

9.drawableTop, drawableRight, drawableBottom and drawableLeft
هذه الخصائص تستخدم عندما نريد وضع صورة مع النص داخل الزر وهي تتحكم في وضع الصورة بالنسبة للنص

توجد خصائص أخري كثيرة ستتعرف اليها من خلال تعاملك مع البرنامج ومتطلبات التطبيق الذي تريد صناعته
وسنتعرف في تدوينات أخري الي إستخدام المكتبات في تصميم الازرار بصورة جميلة ومناسبة مع التطبيق باذن الله .

ملاحظة

يمكنك التعامل مع الازرار وكل الواجهات في ملف XML من خلال ملف الجافا كليا وتنسيقها بشكل مناسب

MainActivity.java

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button btn_Show = (Button) findViewById(R.id.Button1);//تم إستدعاء الزر من خلال رقم المعرف id وإنشاء كائن من الكلاس Button وتمت تسميته btn_show 
        //من خلال الكائن يمكنك إستدعاء كل الدوال التي تتوفر في الكلاس الاب Button 
        btn_Show.setText("GagAcademy");
        btn_Show.setTextSize(16);
        btn_Show.setGravity(50);
        btn_Show.setBackground(getResources().getDrawable(R.drawable.ic_launcher));
        btn_Show.setTextColor(Color.GREEN);
        //يمكنك وضع ما تريد من الخصائص في ملف الجافا
    }