شرح CheckBox في الاندرويد

برنامج تعليمي CheckBox مع مثال في Android Studio

في Android ، يعتبر CheckBox نوعًا من الأزرار ذات الحالتين إما غير محدد أو محدد في Android. أو يمكنك القول إنه نوع من مفتاح التشغيل / الإيقاف يمكن للمستخدمين تبديله. يجب عليك استخدام مربع الاختيار عند تقديم مجموعة من الخيارات القابلة للتحديد للمستخدمين غير الحصريين بشكل متبادل. CompoundButton هي الفئة الأصل لفئة CheckBox .

خانة الاختيار
في android ، هناك الكثير من استخدام مربع الاختيار . على سبيل المثال ، لإجراء استطلاع في تطبيق Android ، يمكننا سرد بعض الخيارات والسماح للمستخدم باختيار استخدام CheckBox. سيقوم المستخدم ببساطة بتحديد مربعات الاختيار هذه بدلاً من كتابة الخيار الخاص به في EditText . استخدام آخر شائع جدًا لـ CheckBox هو خيار تذكرني في نموذج تسجيل الدخول.

كود CheckBox في XML:

<CheckBox
    android:id="@+id/simpleCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Simple CheckBox"/>
  

CheckBox في Android
ملاحظة مهمة: يمكنك التحقق من الحالة الحاليةلخانة الاختيار برمجيًا باستخدام طريقة isChecked (). تقوم هذه الطريقة بإرجاع قيمة منطقية إما صواب أو خطأ ، إذا تم تحديد خانة اختيار ، فإنها ترجع صوابًا وإلا فإنها ترجع خطأ. يوجد أدناه مثال على الكود الذي قمنا فيه بفحص الحالة الحالية لمربع الاختيار.

//initiate a check box
    CheckBox simpleCheckBox = (CheckBox) findViewById(R.id.simpleCheckBox);

    //check current state of a check box (true or false)
    Boolean checkBoxState = simpleCheckBox.isChecked();
  

سمات وخصائص CheckBox :

الآن دعنا نناقش السمات المهمة التي تساعدنا في تكوين خانة اختيار في  ملف XML (التخطيط).

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

<CheckBox
    android:id="@+id/simpleCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Simple CheckBox"/>

2. تم التحديد CheckBox : المحدد هو سمة من سمات خانة الاختيار المستخدمة لتعيين الحالة الحالية لمربع الاختيار. يجب أن تكون القيمة صحيحة أو خاطئة حيث تُظهر القيمة true الحالة المحددة بينما تُظهر القيمة false الحالة غير المحددة لخانة الاختيار. القيمة الافتراضية للسمة المحددة خاطئة. يمكننا أيضًا ضبط الوضع الحالي برمجيًا.

يوجد أدناه مثال على رمز قمنا فيه بتعيين القيمة الحقيقية للسمة المحددة التي تعين الحالة الحالية على التحقق.

<CheckBox
    android:id="@+id/simpleCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Simple CheckBox" 
    android:checked="true"/> <!--set the current state of the check box-->

فحص في CheckBox Android
إعداد حالة CheckBox الحالية في فئة Java:

أدناه قمنا بتعيين الحالة الحالية لـ CheckBox في فئة java .

/*Add in Oncreate() funtion after setContentView()*/
    // initiate a check box
    CheckBox simpleCheckBox = (CheckBox) findViewById(R.id.simpleCheckBox;

    // set the current state of a check box
    simpleCheckBox.setChecked(true);
  

3. الجاذبية gravity: سمة الجاذبية هي سمة اختيارية تُستخدم للتحكم في محاذاة النص في CheckBox مثل اليسار واليمين والوسط والأعلى والأسفل والمركز الرأسي والمركز الأفقي وما إلى ذلك.

أدناه قمنا بتعيين الجاذبية اليمنى والمركزية الرأسية لنص مربع الاختيار.

<CheckBox
    android:id="@+id/simpleCheckBox"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Simple CheckBox"
    android:checked="true"
    android:gravity="right|center_vertical"/>  <!-- gravity of the check box-->

الجاذبية في CheckBox Android
4. النص Text: يتم استخدام سمة النص لتعيين النص في خانة الاختيار. يمكننا ضبط النص في xml وكذلك فيفئة java .

يوجد أدناه مثال للكود مع شرح مضمن حيث قمنا بتعيين النص "Text Attribute Of Check Box" لخانة الاختيار.

<CheckBox
    android:id="@+id/simpleCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Text Attribute Of Check Box"/> <!--displayed text of the check box-->

اختبار في CheckBox Android
إعداد النص في CheckBox في فئة Java:

فيما يلي رمز المثال الذي قمنا بتعيين نص مربع الاختيار فيه يعني برمجيًا في فئة java .

/*Add in Oncreate() funtion after setContentView()*/
    // initiate check box
    CheckBox simpleCheckBox = (CheckBox) findViewById(R.id.simpleCheckBox);

    // displayed text of the check box
    simpleCheckBox.setText("Text Attribute Of Check Box");

5. لون النص : تستخدم سمة لون النص لتعيين لون النص لخانة الاختيار. تكون قيمة اللون بصيغة "#argb" أو "#rgb" أو "#rrggbb" أو "#aarrggbb".

أدناه قمنا بتعيين اللون الأحمر للنص المعروض في خانة الاختيار.

<CheckBox
    android:id="@+id/simpleCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text is Red Color"
    android:textColor="#f00" 
    android:checked="true"/> <!-- red color for the text of check box-->

textColor في Checkbox Android
ضبط textColor في CheckBox في فئة Java:

أدناه نقوم بتعيين لون نص مربع الاختيار برمجيًا.

/*Add in Oncreate() funtion after setContentView()*/
    //initiate the checkbox
    CheckBox simpleCheckBox = (CheckBox) findViewById(R.id.simpleCheckBox);

    //red color for displayed text
    simpleCheckBox.setTextColor(Color.RED);
  

6. textSize:  يتم استخدام سمة textSize لتعيين حجم نص خانة الاختيار. يمكننا ضبط حجم النص في sp (مقياس بكسل مستقل) أو dp (كثافة بكسل).

يوجد أدناه مثال الكود الذي قمنا بتعيين حجم 20sp فيه لنص مربع الاختيار.

<CheckBox
    android:id="@+id/simpleCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text size Attribute Of Check Box"
    android:textColor="#00f"
    android:checked="false"
    android:textSize="20sp"/><!--set Text Size of text in CheckBox-->

textSize في CheckBox Android
ضبط حجم النص في CheckBox في فئة Java:

أدناه قمنا بتعيين حجم النص لمربع الاختيار في فئة جافا.

/*Add in Oncreate() funtion after setContentView()*/
    CheckBox simpleCheckBox = (CheckBox) findViewById(R.id.simpleCheckBox);
    //set 20sp displayed text size
    simpleCheckBox.setTextSize(20);
  

7. textStyle:  يتم استخدام سمة textStyle لتعيين نمط النص لنص خانة الاختيار. أنماط النص الممكنة هي غامقة ومائلة وعادية. إذا احتجنا إلى استخدام نمطين أو أكثر لعرض النص ، فحينئذٍ "|" عامل يستخدم لذلك.

أدناه نقوم بتعيين أنماط النص الغامق والمائل لنص خانة الاختيار.

<CheckBox
    android:id="@+id/simpleCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text Style Attribute Of Check Box"
    android:textColor="#44f"
    android:textSize="20sp"
    android:checked="false"
    android:textStyle="bold|italic"/>

textStyle في CheckBox Android
8. الخلفية background :  يتم استخدام سمة الخلفية لتعيين خلفية مربع الاختيار. يمكننا تعيين لون أو رسم في خلفية مربع الاختيار.

أدناه قمنا بتعيين اللون الأسود للخلفية ، واللون الأبيض للنص المعروض في خانة الاختيار.

<CheckBox
    android:id="@+id/simpleCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text size Attribute Of Check Box"
    android:textColor="#fff"
    android:textSize="20sp"
    android:textStyle="bold|italic"
    android:checked="true"
    android:background="#000" /><!-- black background for the background of check box-->

الخلفية و TextColor في CheckBox
إعداد الخلفية في CheckBox في فئة Java:

فيما يلي رمز المثال الذي قمنا بتعيين لون خلفية مربع الاختيار فيه يعني برمجيًا في فئة java.

/*Add in Oncreate() funtion after setContentView()*/
    CheckBox simpleCheckBox = (CheckBox) findViewById(R.id.simpleCheckBox);
    // set background in CheckBox
    simpleCheckBox.setBackgroundColor(Color.BLACK);
  

9. padding:  يتم استخدام خاصية padding لتعيين المساحة المتروكة من اليسار أو اليمين أو أعلى أو أسفل.

  • المساحة المتروكة لليمين: اضبط المساحة المتروكة من الجانب الأيمن لخانة الاختيار .
  • المساحة المتروكة على اليسار : قم بتعيين المساحة المتروكة من الجانب الأيسر لخانة الاختيار .
  • paddingTop: قم بتعيين المساحة المتروكة من الجانب العلوي لخانة الاختيار .
  • paddingBottom: عيّن المساحة المتروكة من الجانب السفلي لخانة الاختيار .
  • المساحة المتروكة : قم بتعيين المساحة المتروكة من جميع جوانب خانة الاختيار .

يوجد أدناه مثال لرمز الحشو حيث قمنا بتعيين مساحة 30dp من جميع جوانب مربع الاختيار.

<CheckBox
    android:id="@+id/simpleCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Padding Attribute Of Check Box"
    android:textColor="#44f" 
    android:textSize="20sp"
    android:textStyle="bold|italic"
    android:checked="false"
    android:padding="30dp"/> <!--30dp padding from all side’s-->

الحشو في CheckBox Android


مثال على CheckBox في Android Studio:

يوجد أدناه مثال CheckBox في Android ، حيث نعرض خمسة مربعات اختيار باستخدام الخلفية والسمات الأخرى التي ناقشناها سابقًا في هذا المنشور. تمثل كل خانة اختيار اسم موضوع مختلف ، وكلما نقرت على مربع اختيار ، يتم عرض نص خانة الاختيار المحددة في نخب. فيما يلي الإخراج النهائي ، والتعليمات البرمجية والشرح خطوة بخطوة للمثال:

تحميل الكود للمشروع كاملا   ؟

مثال CheckBox في Android Studio
الخطوة 1: قم بإنشاء مشروع جديد وقم بتسميته CheckBoxExample

في هذه الخطوة ، نقوم بإنشاء مشروع جديد في android studio عن طريق ملء جميع التفاصيل الضرورية للتطبيق مثل اسم التطبيق واسم الحزمة وإصدارات api وما إلى ذلك.

حدد ملف -> جديد -> مشروع جديد واملأ النماذج وانقر فوق الزر "إنهاء".

الخطوة 2: الآن افتح res -> layout ->  activity_main. xml (or) main.xml  وأضف الكود التالي:

في هذه الخطوة ، نفتح ملف xml ونضيف الكود لعرض خمسة من TextView وخانات الاختيار.

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Select Your Programming language: "
    android:textColor="#f00"
    android:textSize="20sp"
    android:textStyle="bold" />

    <LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:background="#e0e0e0"
    android:orientation="vertical">

    <CheckBox
    android:id="@+id/androidCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:checked="false"
    android:padding="20dp"
    android:text="@string/android"
    android:textColor="#44f"
    android:textSize="20sp"
    android:textStyle="bold|italic" />

    <CheckBox
    android:id="@+id/javaCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:checked="false"
    android:padding="20dp"
    android:text="@string/java"
    android:textColor="#f44"
    android:textSize="20sp"
    android:textStyle="bold|italic" />

    <CheckBox
    android:id="@+id/phpCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:checked="false"
    android:padding="20dp"
    android:text="@string/php"
    android:textColor="#444"
    android:textSize="20sp"
    android:textStyle="bold|italic" />

    <CheckBox
    android:id="@+id/pythonCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:checked="false"
    android:padding="20dp"
    android:text="@string/python"
    android:textColor="#888"
    android:textSize="20sp"
    android:textStyle="bold|italic" />

    <CheckBox
    android:id="@+id/unityCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:checked="false"
    android:padding="20dp"
    android:text="@string/unity"
    android:textColor="#101010"
    android:textSize="20sp"
    android:textStyle="bold|italic" />
    </LinearLayout>

    </RelativeLayout>

الخطوة 3: الآن افتح التطبيق -> java-> package ->  MainActivity. جافا

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

package example.abhiandriod.checkboxexample;

    import android.graphics.Color;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.widget.Button;
    import android.widget.CheckBox;
    import android.widget.Toast;

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    CheckBox android, java, python, php, unity3D;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    // initiate views
    android = (CheckBox) findViewById(R.id.androidCheckBox);
    android.setOnClickListener(this);
    java = (CheckBox) findViewById(R.id.javaCheckBox);
    java.setOnClickListener(this);
    python = (CheckBox) findViewById(R.id.pythonCheckBox);
    python.setOnClickListener(this);
    php = (CheckBox) findViewById(R.id.phpCheckBox);
    php.setOnClickListener(this);
    unity3D = (CheckBox) findViewById(R.id.unityCheckBox);
    unity3D.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {

    switch (view.getId()) {
    case R.id.androidCheckBox:
    if (android.isChecked())
    Toast.makeText(getApplicationContext(), "Android", Toast.LENGTH_LONG).show();
    break;
    case R.id.javaCheckBox:
    if (java.isChecked())
    Toast.makeText(getApplicationContext(), "Java", Toast.LENGTH_LONG).show();
    break;
    case R.id.phpCheckBox:
    if (php.isChecked())
    Toast.makeText(getApplicationContext(), "PHP", Toast.LENGTH_LONG).show();
    break;
    case R.id.pythonCheckBox:
    if (python.isChecked())
    Toast.makeText(getApplicationContext(), "Python", Toast.LENGTH_LONG).show();
    break;
    case R.id.unityCheckBox:
    if (unity3D.isChecked())
    Toast.makeText(getApplicationContext(), "Unity 3D", Toast.LENGTH_LONG).show();
    break;
    }
    }
    }

الخطوة 5: افتح res -> values ->  strings. xml

في هذه الخطوة ، نعرض ملف سلسلة يستخدم لتخزين بيانات سلسلة من التطبيق. 

<resources>
    <string name="app_name">CheckBoxExample</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="android">Android</string>
    <string name="java">Java</string>
    <string name="php">PHP</string>
    <string name="python" >Python</string>
    <string name="unity">Unity 3D</string>
    </resources>

المخرجات :

الآن ابدأ تشغيل AVD في Emulator وقم بتشغيل التطبيق. سترى 5 خيار مربع يطلب منك اختيار لغة البرمجة الخاصة بك. حدد وسيظهر نص هذا CheckBox المحدد على الشاشة.

CheckBox مثال إخراج Android Studio