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

רוצה לנסות את שיטת הכתיבה?

'Jetpack פיתוח נייטיב' היא ערכת הכלים המומלצת לממשק המשתמש ל-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 באמצעות משאב צבע או אפשרות הזזה. לחלופין, אפשר להחיל סגנון על הלחצן, שפועל באופן דומה לסגנונות 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/ של הפרויקט. מתן שם לכל מפת סיביות (bitmap) שישקף את מצב הלחצן שהוא מייצג, למשל 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> השלישי מגדיר את מפת הסיביות שבה צריך להשתמש כשהלחצן נמצא בברירת המחדל במצב הזה, לא מקישים ולא ממוקדים.
   הערה: חשוב לסדר את הרכיבים <item>. כשפריט הגרפיקה הזה הוא מתבצעת הפניה לרכיבי <item> כדי לקבוע איזה מהם המתאים למצב הלחצן הנוכחי. מכיוון שברירת המחדל של מפת הסיביות היא אחרונה, היא מיושמת רק כשהתנאים android:state_pressed ו-android:state_focused הם שסומנה כ-False.

   קובץ ה-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