یک دکمه ایجاد کنید

دکمه‌ها به کاربر اجازه می‌دهند تا یک عمل تعریف‌شده را انجام دهد. پنج نوع دکمه وجود دارد:

نوع

ظاهر

هدف

پر شده

پس‌زمینه‌ی یکدست با متن متضاد.

برای اقدامات اصلی، مانند «ارسال» و «ذخیره»، جلوه سایه بر اهمیت دکمه تأکید می‌کند.

تُنال

رنگ پس زمینه برای مطابقت با سطح تغییر می‌کند.

برای اقدامات اولیه یا مهم. دکمه‌های توپر وزن بصری ایجاد می‌کنند و برای اقداماتی مانند «افزودن به سبد خرید» و «ورود» مناسب هستند.

مرتفع

سایه باعث میشه بیشتر به چشم بیاد.

برای اقدامات اصلی یا مهم. برای برجسته‌تر کردن دکمه، ارتفاع را افزایش دهید.

تشریح شده

دارای حاشیه‌ای بدون پر کردن است.

برای اقداماتی که مهم هستند اما اصلی نیستند. دکمه‌های outline به خوبی با دکمه‌های دیگر جفت می‌شوند تا اقدامات جایگزین و ثانویه مانند «لغو» یا «بازگشت» را نشان دهند.

متن

متن بدون پس‌زمینه یا حاشیه.

برای اقدامات کم‌اهمیت‌تر مانند لینک‌های ناوبری، یا اقدامات ثانویه مانند «بیشتر بدانید» یا «مشاهده جزئیات».

سازگاری نسخه

این پیاده‌سازی مستلزم آن است که minSDK پروژه شما روی سطح API 21 یا بالاتر تنظیم شده باشد.

وابستگی‌ها

ایجاد یک دکمه پر شده

کامپوننت دکمه‌ی پر شده از ترکیب‌بندی پایه‌ی Button استفاده می‌کند. این کامپوننت به طور پیش‌فرض با یک رنگ ثابت پر شده است.

نتایج

یک دکمه‌ی توپر با پس‌زمینه‌ی بنفش که روی آن نوشته شده «پر شده».
شکل ۱. یک دکمه‌ی پر شده.

یک دکمه با تُن رنگی پر شده ایجاد کنید

کامپوننت دکمه با تُن رنگیِ پر شده از ترکیب‌پذیر FilledTonalButton استفاده می‌کند. این کامپوننت به طور پیش‌فرض با یک رنگ تُن رنگی پر شده است.

نتایج

یک دکمه با تُن رنگی و پس‌زمینه بنفش روشن که روی آن نوشته شده «پر شده».
شکل ۲. یک دکمه‌ی تُنال.

یک دکمه با طرح کلی ایجاد کنید

کامپوننت دکمه outline از ترکیب‌بندی OutlinedButton استفاده می‌کند. به طور پیش‌فرض با یک outline ظاهر می‌شود.

نتایج

یک دکمه شفاف با حاشیه تیره که روی آن نوشته شده «Outlined».
شکل ۳. یک دکمه با طرح کلی.

ایجاد دکمه برجسته

کامپوننت دکمه‌ی مرتفع از ترکیب‌بندی ElevatedButton استفاده می‌کند. این کامپوننت دارای سایه‌ای است که به طور پیش‌فرض جلوه‌ی ارتفاع را نشان می‌دهد و به صورت یک دکمه‌ی حاشیه‌دار با سایه ظاهر می‌شود.

نتایج

یک دکمه‌ی مرتفع با پس‌زمینه‌ی خاکستری که روی آن نوشته شده «مرتفع».
شکل ۴. یک دکمه‌ی برجسته.

ایجاد دکمه متنی

کامپوننت دکمه متنی از ترکیب‌بندی TextButton استفاده می‌کند. تا زمانی که کلیک نشود، فقط به صورت متن نمایش داده می‌شود. به طور پیش‌فرض، هیچ طرح یا فرم ثابتی ندارد.

نتایج

یک دکمه متنی که عبارت «دکمه متنی» روی آن نوشته شده است
شکل ۵. یک دکمه متنی.

نکات کلیدی

  • onClick : تابعی که هنگام فشردن دکمه توسط کاربر فراخوانی می‌شود.
  • enabled : وقتی مقدار این پارامتر false باشد، دکمه غیرفعال و در دسترس به نظر نمی‌رسد.
  • colors : نمونه‌ای از ButtonColors که رنگ‌های استفاده شده در دکمه را تعیین می‌کند.
  • contentPadding : فاصله‌ی بین دکمه‌ها.

مجموعه‌هایی که حاوی این راهنما هستند

این راهنما بخشی از این مجموعه‌های راهنمای سریعِ برگزیده است که اهداف گسترده‌تر توسعه اندروید را پوشش می‌دهد:

بیاموزید که چگونه توابع ترکیبی می‌توانند شما را قادر سازند تا به راحتی اجزای رابط کاربری زیبایی را بر اساس سیستم طراحی متریال دیزاین ایجاد کنید.
مجموعه راهنمای سریع

سوالی یا بازخوردی دارید؟

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع اطلاعات کسب کنید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.
به سوالات متداول بروید نظر بدهید