في هذه التدوينة سنتعرف الي الازرار Butoon , ToggleButton , Switch , RadioGroup المستخدمة في الاندرويد وكيفية عملها وما يحدث خلف الكواليس .
ماهو الزر Butoon في الاندرويد
الزر Butoon هو فئة فرعية من الكلاس TextView وزر مركب buttonهو فئة فرعية لفئة الزر Butoon>. حيث نستطيع علي أحد الازرار تنفيذ إجراءات أو أحداث مختلفة مثل حدث النقرclick event والحدث المضغوط pressed eventوالحدث باللمس touch eventوما إلى ذلك .
أزرار Android هي مكونات واجهة المستخدم الرسومية (GUI) التي تكون منطقية عند النقر (النقرات) بواسطة المستخدم. عندما ينقر المستخدم على الزر / ينقر taps/clicks على أحد التطبيقات في Android ، يمكن أن يستجيب التطبيق للنقرة / النقر وتنفيذ حدث معين.
يمكن تقسيم هذه الأزرار إلى فئتين:
الأولى هي الأزرار التي تحتوي على نص Button
والثانية هي الأزرار التي تحتوي على صورة ImageButton يمكن أن يحتوي الزر الذي يحتوي على صور على كل من صورة ونص. تسمى أيضًا أزرار Android التي تحتوي على صور باسم ImageButton.
Button
ToggleButton
RadioButton
ImageButton
FloatinActionButton
السحب والإفلات
عن طريق ملف XML
كتابة الزر في ملف XML
قم بعمل مشروع جديد وقم بتسميته باي إسم تريده وهنا سيكون بالاسم ButtonExample وفي داخل الفعالية \ الصفحة\النشاط الرئيسي قم بكتابة الاكواد <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Alawirisaddam" />
خصائص الزر Butoon في الاندرويد
1.id تعرفنا اليها سابقا وهي خاصية رقم المعرف الفريد لكل عنصر ولا يجب أن يكون هناك عناصر بنفس الاسم id <Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Alawirisaddam" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"//هنا قم بتغير القيمة الي اخري مثلا الي اليسار او الوسط او الاسفل وشاهد النتيجة
android:text="Alawirisaddam" />
ملاحظة
يمكنك دمج اكثر من خاصية في نفس العنصر وذلك من خلال إستخدام الرمز
|ويوضع بين الخاصية والاخري كما هو موضح في الصورة أعلاه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="Alawirisaddam"
android:textSize="20sp"
android:paddingRight="130dp"
android:layout_marginTop="130dp"
android:textAllCaps="false"
android:textStyle="bold|italic"/>
9. drawableTop, drawableRight, drawableBottom and drawableLeft
هذه الخصائص تستخدم عندما نريد وضع صورة مع النص داخل الزر وهي تتحكم في وضع الصورة بالنسبة للنص
توجد خصائص أخري كثيرة ستتعرف اليها من خلال تعاملك مع البرنامج ومتطلبات التطبيق الذي تريد صناعته
وسنتعرف في تدوينات أخري الي إستخدام المكتبات في تصميم الازرار بصورة جميلة ومناسبة مع التطبيق باذن الله .
ملاحظة
يمكنك التعامل مع الازرار وكل الواجهات في ملف XML من خلال ملف الجافا كليا وتنسيقها بشكل مناسب
@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("Alawirisaddam");
btn_Show.setTextSize(16);
btn_Show.setGravity(50);
btn_Show.setBackground(getResources().getDrawable(R.drawable.ic_launcher));
btn_Show.setTextColor(Color.GREEN);
//يمكنك وضع ما تريد من الخصائص في ملف الجافا
}
ماهو الزر ToggleButton في الاندرويد
وهو عنصر ToggleButton في نظام التشغيل Android ، يتم استخدام ToggleButton لعرض الحالة المحددة checked وغير المحددة unchecked لأحد الأزرارعند النقر عليه.
ToggleButton بشكل أساسي زر تشغيل / إيقاف off/on مع مؤشر ضوئي يشير إلى الحالة الحالية لزر التبديل. المثال الأكثر بساطة على ToggleButton هو تشغيل / إيقاف الصوت ، بلوتوث ، wifi ، نقطة ساخنة وجميع الادوات التي تظهر عند إنزال الستارة الخاصة بهاتفك . كما إنها فئة فرعية subclass من الكلاس compoundButton
كتابة كود العنصر ToggleButton في ملف XML
في داخل الفعالية الرئيسية MainActivity وفي ملف xml file الخاص بها قم بكتابة الكود التالي او قم بسحبه من خلال لوحة التصميم <ToggleButton
android:id="@+id/btn_toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
خصائص الزر ToggleButton في الاندرويد
- id:
هي الخاصية المسؤولة عن تميز هذا الزر عن غيره طريق إعطاه إسم فريد
- checked:
تستخدم هذه الخاصية في وضع القيمة للزر وتكون قيمة منطقية true or false وعند وضع القيمة true يعني أن الحالة محددة checked وعندما تكون flase تعني أن الحالة غير محددة unchecked وتكون القيمة الافتراضية هي flase
- gravity :
هذه الخاصية تستخدم في التحكم في موضع النص داخل الزر وتكون إحدي القيم يمين او يسار او بالاعلي او الاسفل او الوسط في كلا الاتجاهين
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<ToggleButton
android:id="@+id/btn_toggle1"
android:checked="true"
android:gravity="right"
android:layout_width="100dp"
android:layout_height="100dp" />
<ToggleButton
android:id="@+id/btn_toggle2"
android:checked="false"
android:gravity="left"
android:layout_width="100dp"
android:layout_height="100dp" />
</LinearLayout>
- textOn And textOff:
textOn تستخدم هذه الخاصية في تعين النص عندما تكون الحالة محددة checked
textOff تستخدم في تعين النص المكتوبة داخلها عندما تكون الحالة غير محددة unchecked
- textSize:
تستخدم في تعين حجم النص داخل زر التبديل ويقاس حجم النص بوحدة sp
- textStyle:
تستخدم هذه الخاصية في تعين شكل النص داخل الزر وتأخذ إحدي القيم bold , italic
- textColor:
تستخدم في تعين لون للنص داخل الزر
- background:
تستخدم في وضع صورة او لون ليكون عبارة عن خلفية للزر
- padding:
تستخدم في تحريك النص داخل الزر من إحدي الحواف الاربعة وفقا لقيم الاتجاهات المعروفة
- drawableBottom, drawableTop, drawableRight And drawableLeft :
تستخدم في وضع صورة مع نص داخل الزر والتحكم في تموضع الصورة بالنسبة للنص من خلال القيم اعلي واسفل ويمين ويسار
<ToggleButton
android:id="@+id/btn_toggle1"
android:checked="true"
android:gravity="center"
android:textOff="Disable"
android:textOn="Enable"
android:textSize="20sp"
android:textStyle="italic"
android:textColor="#efd56b"
android:background="#44a987"
android:drawableLeft="@mipmap/ic_launcher"
android:layout_width="280dp"
android:layout_height="100dp"/>
<ToggleButton
android:id="@+id/btn_toggle2"
android:checked="false"
android:gravity="center"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#601aec"
android:background="#9c98ac"
android:textOff="Disable"
android:textOn="Enable"
android:drawableRight="@mipmap/ic_launcher"
android:layout_width="280dp"
android:layout_height="100dp" />
ماهو الزر Switch في الاندرويد
وهو احد ازرار الايقاف والتشغيل ومشابه بنسبة كبيرة جدا لزر التبديل ToggleButton
Switch عبارة عن زر تبديل بين حالتين وهو من ازرار الايقاف والتشغيل ويحمل قيمة منطقية واحدة إما true or false ويستخدم في عرض الحالة المحددة chescked وغير المحددة unchecked عندما ينقر المستخدم عليه
وبما أنه من أزرار الايقاف والتشغيل إذا يستخدم في العمليات المنطقية مثل إيقاف وتشغيل الصوت او الواي فاي او البلوتوث او الفلاش وغيرها من التطبيقات .
وهو كلاس فرعي يرث من كلاس CompoundButton مثله مثل زر togglebutton.
وفي حيث المقارنة بينه وبين زر التبديل ToggleButton فانه يوفر للمستخدم بساطة النقر لتغير القيمة الحالية ,بالاضافة الي أنه اكثر جازبية من زر ToggleButton.
طرق إدراج الزر في البرنامج
عن طريق السحب والإفلات Drag&Drop في لوحة التصميم
عن طريق ملف XML file
الشكل الاساسي لزر Switch
إفتح مشروع جديد في البرنامج وقم بتسميته بالاسم الذي تريد ثمOpen res -> layout -> activity_main.xml (or) main.xml اكتب الكود التالي ليظهر لك الزر في تطبيق المعاينة:
<Switch
android:id="@+id/btn_forSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
خصائص الزر Switch في الاندرويد
| إسم الخاصية | إستخدامه |
|---|---|
| id | خاصية إعطاء الزر إسم فريد لا يشترك فيه زر أخر ويسخدم هذا الاسم في ملف الجافا عندما نريد إعطاء بعض الاوامر لهذا الزر |
| checked | توفر هذه الخاصية تحديد الحالة الحالية للزر إما محددة checked او غير محددة unchecked وهي قيمة منطقية إما true or false والقيمة الافتراضية هي false |
| text | يمكن كتابة م تريد داخل الزر بإستخدام هذه الخاصية |
| gravity | خاصية محازاة النص داخل الزر وفقا للاتجاهات مثل right, left, bottom, center |
| textOn | تظهر هذه الخاصية القيمة التي بداخلها عندما تكون الحالة محددة أي ان checked="true" |
| textOff | تظهر هذه الخاصية القيمة التي بداخلها عندما تكون الحالة غير محددة أي ان checked="false" |
| textColor | خاصية إعطاء النص الذي بداخل الزر لون محدد android:textColor="#fff" |
| textSize | خاصية تعين حجم النص وتأخذ قيمة عددية Double مثل 10.8,20,50 وتقاس بوحدة sp |
| textStyle | تعين شكل النص داخل الزر وتأخذ إحدي القيم bold or italic |
| background | تعين لون او صورة ليكون خلفية للزر |
| padding | تحدد المسافة بين النص وحافة الزر الداخلية وتأخذ قيم الاتجاهات right, left, top, bottom, center وتكون القيمة عددية android:paddingRight="20dp" |
| drawableValue | خاصية تعين صورة وفقا للاتجاه المحدد وتكون القيمة كلاتي android:drawableRight="مكان تواجد الصورة" value ="right,left,top,bottom" |
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp">
<Switch
android:id="@+id/simpleSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:drawableBottom="@drawable/ic_android_black_24dp"
android:gravity="center"
android:text="switch"
android:textColor="#00e736"
android:textOff="Off"
android:textOn="On"
android:textSize="25sp" />
</LinearLayout>
مثال شامل علي زر Switch
في داخل ملف الفعالية الرئيسية activity_main.xml قم بكتابة الكود التالي <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="30dp"
tools:context=".MainActivity">
<Switch
android:id="@+id/simples11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:checked="true"
android:text="switch1"
android:textOff="Off"
android:textOn="On"
android:textSize="26sp"
android:textColor="#000" />
<Switch
android:id="@+id/simples22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:checked="false"
android:text="switch2"
android:textOff="Off"
android:textOn="On"
android:textSize="26sp" />
<Button
android:id="@+id/submitButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="50dp"
android:background="#f5959e87"
android:padding="10dp"
android:text="Submit"
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
package //قم بكتابة إسم الحزمة الخاص بك هنا;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Switch;
import android.widget.Toast;
import android.widget.ToggleButton;
import static engahmed.gagacademy.R.id.simpleToggleButton1;
import static engahmed.gagacademy.R.id.simpleToggleButton2;
public class MainActivity extends AppCompatActivity {
Switch simpleSwitch1, simpleSwitch2;
Button submit;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
simpleSwitch1 = (Switch) findViewById(R.id.simples11);
simpleSwitch2 = (Switch) findViewById(R.id.simples22);
submit = (Button) findViewById(R.id.submitButton);
submit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String statusSwitch1, statusSwitch2;
if (simpleSwitch1.isChecked())
statusSwitch1 = simpleSwitch1.getTextOn().toString();
else
statusSwitch1 = simpleSwitch1.getTextOff().toString();
if (simpleSwitch2.isChecked())
statusSwitch2 = simpleSwitch2.getTextOn().toString();
else
statusSwitch2 = simpleSwitch2.getTextOff().toString();
Toast.makeText(getApplicationContext(), "Switch1 :" + statusSwitch1 + "\n" + "Switch2 :" + statusSwitch2, Toast.LENGTH_LONG).show(); //ستعرض رسالة توضح حالة الازرار
}
});
}
}
ماهو الزر RadioButton في الاندرويد
وهو من أزرار القيم المنطقية إي أن لديه حالتين فقط
العملية التي تتم عند الضغط علي أحد الازرار هي أنه سيتم إلقاء تحديد جميع الازرار الاخري ,وهذا يعني أنه يمكن الضغط علي زر واحد فقط من مجموعة الازرار التي تنتمي الي نفس المجموعة RadioGroup. RadioGroup عبارة عن أداة مستخدمة في Android لتجميع أزرار الاختيار وتوفر ميزة تحديد زر راديو واحد فقط من المجموعة. عندما يحاول المستخدم تحديد أي زر راديو آخر داخل نفس مجموعة الراديو ، فسيتم إلغاء تحديد زر الاختيار المحدد مسبقًا تلقائيًا. قم بعمل خطوات مشروع جديد وتسميته بما تريد وفي داخل ملف XML الخاص بالصفحة الرئيسية قم بكتابة الكود التالي وهو الشكل الاساسي لزر RadioButton.
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="match_parent">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RadioGroup>
خصائص الزر RadioButton في الاندرويد
هي نفس الخصائص التي تعرفنا اليها سابقا في ازرار التبديل Switch & ToggleButton| إسم العامل | إستخدامه |
|---|---|
| id | خاصية إعطاء الزر إسم فريد لا يشترك فيه زر أخر ويسخدم هذا الاسم في ملف الجافا عندما نريد إعطاء بعض الاوامر لهذا الزر |
| Checked | يتم استخدامه لتحديدالحالة الحالية لزر الاختيار. يمكننا تعيينها إما صواب أو خطأ حيث يظهر true الحالة المحددة checked والخطأ false يعرض حالة غير محددة unchecked من زر الاختيار. كالقيمة الافتراضية المعتادة للسمة المحددة false |
| text | توفر إمكانية كتابة نص ما داخل الزر android:text="stringValue" |
| gravity | خاصية محازاة النص داخل الزر وفقا للاتجاهات مثل right, left, bottom, center |
| textColor | خاصية إعطاء النص داخل الزر لون محدد android:textColor="#fff" |
| textSize | خاصية تعين حجم للنص وتقاس بوحدة sp android:textSize="20sp" |
| textStyle | تعين شكل النص داخل الزر وتأخذ القيم bold or itlaic |
| background | تعين لون او صورة لتكون خلفية للزر |
| padding | تحدد المسافة بين النص وحواف الزر من الجهة الداخلية وتأخذ قيم متجهية مثل right left top bottom وتكون قيمة الخاصية عددية اي رقم يمثل المسافة android:paddingLeft="20dp" |
| drawableValue | خاصية تعين صورة بجانب علامة الزر الثابتة وفقا للاتجاه المحدد android:drawbleRight="مكان تواجد الصورة" |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<RadioGroup
android:layout_marginTop="20dp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:id="@+id/btn_click"
android:text="radioButton1"
android:textSize="20sp"
android:textColor="#e11596"
android:checked="true"
android:background="@color/colorPrimary"
android:gravity="top"
android:padding="10dp"
android:drawableRight="@drawable/ic_android_black_24dp"
android:layout_width="300dp"
android:layout_height="100dp" />
</RadioGroup>
</LinearLayout>
سنقوم بعمل مثال شامل لتوضيح فكرة عمل أزرار الاختيار وكيفية برمجتها في ملف الجافا
قم بفتح ملف xml واكتب داخله الكود الاتي
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#e0e0e0"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select your Hobby:: "
android:textColor="#000"
android:textSize="20sp"
android:textStyle="bold" />
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:id="@+id/btn_football"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:checked="false"
android:text="كرة القدم"
android:textColor="#154"
android:textSize="20sp"
android:textStyle="bold" />
<RadioButton
android:id="@+id/btn_basketball"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:checked="false"
android:text="كرة السلة"
android:textColor="#154"
android:textSize="20sp"
android:textStyle="bold" />
<RadioButton
android:id="@+id/btn_swimming"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:checked="false"
android:text="السباحة"
android:textColor="#154"
android:textSize="20sp"
android:textStyle="bold" />
<RadioButton
android:id="@+id/btn_running"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:checked="false"
android:text="المشي"
android:textColor="#154"
android:textSize="20sp"
android:textStyle="bold" />
<RadioButton
android:id="@+id/btn_programming"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:checked="true"
android:text="البرمجة"
android:textColor="#154"
android:textSize="20sp"
android:textStyle="bold" />
</RadioGroup>
<Button
android:id="@+id/submitButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="20dp"
android:background="#0f0"
android:padding="10dp"
android:text="Submit"
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
// package alawirisaddam.radobuttonalawirisaddam;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
RadioButton football, basketball, swimming, running, programming;
String selected;
Button submit;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
football = (RadioButton) findViewById(R.id.btn_football);
basketball = (RadioButton) findViewById(R.id.btn_basketball);
swimming = (RadioButton) findViewById(R.id.btn_swimming);
running = (RadioButton) findViewById(R.id.btn_running);
programming = (RadioButton) findViewById(R.id.btn_programming);
submit = (Button) findViewById(R.id.submitButton);
submit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (football.isChecked()) {
selected = football.getText().toString();
} else if (basketball.isChecked()) {
selected = basketball.getText().toString();
} else if (swimming.isChecked()) {
selected = swimming.getText().toString();
} else if (running.isChecked()) {
selected = running.getText().toString();
} else if (programming.isChecked()) {
selected = programming.getText().toString();
}
Toast.makeText(getApplicationContext(), selected, Toast.LENGTH_LONG).show();
}
});
}
}
