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

אפשר לנסות את הדרך של כתיבת הודעה

‫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 שמגדיר שלושה צבעים או תמונות לשימוש במצבים השונים של הכפתור.

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

1. יוצרים שלושה מפות סיביות לרקע של הכפתור שמייצגות את מצבי ברירת המחדל, ההקשה והמיקוד של הכפתור. כדי לוודא שהתמונות יתאימו ללחצנים בגדלים שונים, צריך ליצור את מפות הסיביות (bitmap) כתמונות תשעה חלקים.
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 הזה מייצג משאב drawable יחיד. כשמפנים לתמונה באמצעות 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.