تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

إضافة أزرار إلى تطبيقك

يتكون الزر من نص أو أيقونة، أو كليهما، يوضح الإجراء الذي يحدث عندما ينقر المستخدم عليه.

يمكنك إنشاء زر في التخطيط الخاص بك بثلاث طرق، اعتمادًا على ما إذا كنت تريد زرًا يحتوي على نص أو أيقونة أو كليهما:

  
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:paddingLeft="16dp"
      android:paddingRight="16dp"
      android:orientation="vertical" >
  
      <Button
          android:id="@+id/supabutton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="I'm a button" />
  
      <ImageButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:contentDescription="A tiny Android icon"
          android:src="@drawable/baseline_android_24"
          app:tint="#ff0000" />
  
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:drawableStart="@drawable/baseline_android_24"
          android:drawablePadding="4dp"
          android:drawableTint="#ff0000"
          android:text="I'm a button with an icon" />
  </LinearLayout>

تنشئ التعليمة البرمجية السابقة شيئًا مثل هذا:

صورة تعرض ثلاثة أنواع من الأزرار — **الشكل 1.** ثلاثة أنماط للأزرار.

الاستجابة لأحداث النقر

عندما ينقر المستخدم على زر، يتلقّى عنصر Button حدثًا عند النقر.

للإعلان عن معالج الأحداث آليًا، يمكنك إنشاء كائن View.OnClickListener وتخصيصه للزر عن طريق طلب setOnClickListener(View.OnClickListener)، كما في المثال التالي:

Kotlin

findViewById<Button>(R.id.supabutton)
  .setOnClickListener {
      Log.d("BUTTONS", "User tapped the Supabutton")
  }

Java

Button button = (Button) findViewById(R.id.supabutton);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
      Log.d("BUTTONS", "User tapped the Supabutton");
    }
});

اختيار تصميم للزر

يختلف مظهر الزرّ - صورة الخلفية والخط - بين الأجهزة، لأن الأجهزة التي تصنّعها الشركات المصنّعة المختلفة غالبًا ما يكون لها أنماط تلقائية مختلفة لعناصر التحكُّم في الإدخال.

لتخصيص أزرار فردية بخلفية مختلفة، حدِّد السمة android:background باستخدام مورد قابل للرسم أو ملوّن. بدلاً من ذلك، يمكنك تطبيق نمط للزر، ويعمل بشكل مشابه لأنماط HTML لتحديد خصائص أنماط متعددة مثل الخلفية والخط والحجم. لمزيد من المعلومات حول تطبيق الأنماط، يمكنك الاطّلاع على الأنماط والمظاهر.

زر بلا حدود

أحد التصميم الذي يمكن أن يكون مفيدًا هو الزر "بلا حدود". تشبه الأزرار التي لا حدود لها الأزرار الأساسية إلا أنه ليس لها حدود أو خلفية ولكنها لا تزال تتغير مظهرها في حالات مختلفة، مثل النقر عليها.

لإنشاء زر بلا حدود، طبِّق نمط borderlessButtonStyle على الزر، كما في المثال التالي:

<Button
  android:id="@+id/supabutton"
  style="?android:attr/borderlessButtonStyle"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="I'm a button" />

خلفية مخصّصة

إذا كنت تريد إعادة تعريف مظهر الزر فعلاً، فيمكنك تحديد خلفية مخصصة. فبدلاً من توفير صورة نقطية أو لون بسيط، يجب مع ذلك أن تكون الخلفية عبارة عن مورد قائمة حالة يتغير مظهره اعتمادًا على الحالة الحالية للزر.

يمكنك تحديد قائمة الحالات في ملف XML يحدد ثلاث صور أو ألوان لاستخدامها مع حالات الأزرار المختلفة.

لإنشاء قائمة حالات قابلة للرسم لخلفية الزر، قم بما يلي:

أنشِئ ثلاث صور نقطية لخلفية الزرّ تمثّل حالات الأزرار التلقائية والتي تم النقر عليها وتركيزها. للتأكّد من أنّ صورك تتناسب مع الأزرار ذات الأحجام المختلفة، أنشِئ الصور النقطية على شكل صور نقطية تسعة رقع.
ضَع الصور النقطية في دليل res/drawable/ لمشروعك. أدخِل اسمًا لكل صورة نقطية لتعكس حالة الزر التي تمثّلها، مثل button_default.9.png وbutton_pressed.9.png وbutton_focused.9.png.
أنشِئ ملف XML جديدًا في دليل res/drawable/. أدخِل اسمًا مثل button_custom.xml. أدرِج XML على النحو التالي:
```
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/button_focused"
          android:state_focused="true" />
    <item android:drawable="@drawable/button_default" />
</selector>
```
تحدّد هذه السمة موردًا واحدًا قابلاً للرسم يغيّر صورته استنادًا إلى الحالة الحالية للزر.
- يحدّد أول <item> الصورة النقطية لاستخدامها عند النقر على الزر (يتم تفعيله).
- وتحدّد السمة <item> الثانية الصورة النقطية لاستخدامها عند التركيز على الزر، مثلاً عندما يتم تمييز الزر باستخدام كرة التعقب أو لوحة الاتجاهات.
- يحدّد العنصر <item> الثالث الصورة النقطية لاستخدامها عندما يكون الزر في الحالة التلقائية، سواء تم النقر عليه أو التركيز عليه.
ملاحظة: إنّ ترتيب عناصر <item> مهم. وعند الإشارة إلى هذا القابل للرسم، يتم اجتياز عناصر <item> لتحديد العنصر المناسب لحالة الزر الحالية. بما أنّ الصورة النقطية التلقائية هي الأخيرة، لا يتم تطبيقها إلا عند تقييم الشرطين android:state_pressed وandroid:state_focused على أنّها false.

يمثّل ملف XML هذا موردًا واحدًا قابلاً للرسم. عند الإشارة إلى الصورة باستخدام Button للخلفية، تتغير الصورة استنادًا إلى حالة الزر.

استخدِم ملف XML القابل للرسم كخلفية للزر:

<Button
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"
    android:background="@drawable/button_custom"  />

لمزيد من المعلومات حول بنية XML هذه، بما في ذلك كيفية تعريف زرّ غير مفعَّل أو يتم تمريره فوقه أو في حالة أخرى، يمكنك الاطّلاع على مقالة StateListDrawable.