הוספת לחצנים לאפליקציה

כדאי לנסות את התכונה 'כתיבה מהירה'
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>

הקוד הקודם יוצר משהו כזה:

תמונה שבה מוצגים שלושה סוגים של לחצנים
איור 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 עם משאב drawable או צבע. לחלופין, אפשר להחיל סגנון על הלחצן, שעובד באופן דומה לסגנונות 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" />

רקע בהתאמה אישית

אם אתם רוצים להגדיר מחדש באמת את מראה הלחצן, תוכלו לציין רקע בהתאמה אישית. עם זאת, במקום לספק קובץ bitmap או צבע פשוט, הרקע צריך להיות משאב של רשימת מצבים שמשנה את המראה בהתאם למצב הנוכחי של הלחצן.

אפשר להגדיר את רשימת המצבים בקובץ XML שמגדיר שלוש תמונות או צבעים לשימוש במצבים השונים של הלחצן.

כדי ליצור drawable של רשימת מצבים לרקע הלחצן:

  1. יוצרים שלושה קובצי bitmap לרקע הלחצן שמייצגים את המצבים של הלחצן: ברירת המחדל, לחיצה והתמקדות. כדי לוודא שהתמונות יתאימו ללחצנים בגדלים שונים, צריך ליצור את קובצי ה-bitmap כקובצי nine-patch.
  2. מניחים את קובצי ה-bitmap בספרייה 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>

    כך מגדירים משאב drawable יחיד שמשנה את התמונה שלו בהתאם למצב הנוכחי של הלחצן.

    • הערך הראשון של <item> מגדיר את קובץ ה-bitmap שמשמש כשמקישים על הלחצן (מפעילים אותו).
    • הפרמטר <item> השני מגדיר את מפת הסיביות לשימוש כשהלחצן ממוקד, למשל כשהלחצן מודגש באמצעות כדור העקיבה או משטח הכיוונים.
    • הערך השלישי ב-<item> מגדיר את מפת הסיביות שבה צריך להשתמש כשהלחצן נמצא במצב ברירת המחדל, בלי הקשה או מיקוד.

    קובץ ה-XML הזה מייצג משאב אחד שניתן להזזה. כשמתבצעת הפניה ל-Button בתור הרקע שלו, התמונה המוצגת משתנה בהתאם למצב הלחצן.

  4. מחילים את קובץ ה-XML של ה-drawable בתור הרקע של הלחצן:
    <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.