افزودن دکمه به برنامه

امتحان کردن روش Compose
Jetpack Compose جعبه‌ابزار واسط کاربر توصیه‌شده برای Android است. با نحوه افزودن مؤلفه‌ها در Compose آشنا شوید.
دکمه →

دکمه شامل نوشتار یا نماد، یا هر دو است که نشان می‌دهد وقتی کاربر روی آن تک‌ضرب می‌زند چه کنشی رخ می‌دهد.

می‌توانید دکمه‌ای در چیدمان خود به یکی از سه روش ایجاد کنید، بسته به اینکه آیا دکمه‌ای با نوشتار، نماد، یا هر دو می‌خواهید:

  
  <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. سه نقشه بیتی برای پس‌زمینه دکمه ایجاد کنید که نشان‌دهنده حالت‌های پیش‌فرض، تک‌ضرب‌زده، و متمرکز دکمه باشد. برای اطمینان از اینکه تصاویرتان با دکمه‌هایی با اندازه‌های مختلف مطابقت داشته باشد، نقشه‌های بیتی را به‌صورت نقشه‌های بیتی nine-patch ایجاد کنید.
  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 بخوانید.