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

تجربة ميزة "الكتابة"

‫Jetpack Compose هي مجموعة أدوات واجهة المستخدم المُقترَحة لنظام التشغيل Android. تعرَّف على كيفية إضافة مكوّنات في ميزة "الإنشاء".

زر ←

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

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

  
  <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>

يُنشئ الكود السابق شيئًا كالتالي:

الردّ على أحداث النقر

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

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

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

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 يحدّد ثلاثة صور أو ألوان لاستخدامها في حالات الزر المختلفة.

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

1. أنشئ ثلاث صور نقطية لخلفية الزر تمثّل حالات الزر التلقائية والمُنقر عليه والمركّز عليه. لضمان أن تلائم صورك الأزرار بأحجام مختلفة، أنشئ ملفات الخطوط النقطية على هيئة ملفات خطوط نقطية تسعة أقسام.
2. ضَع ملفات الخطوط المسطّحة في دليل res/drawable/ الخاص بمشروعك. أدخِل اسمًا لكل صورة نقطية للإشارة إلى حالة الزر التي تمثّلها، مثل button_default.9.png وbutton_pressed.9.png وbutton_focused.9.png.
3. أنشئ ملف 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> الصورة المخصّصة للاستخدام عندما يكون الزر في الحالة التلقائية، أي عندما لا يتم النقر عليه أو التركيز عليه.

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

4. طبِّق ملف 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.