יום שלישי, 29 במאי 2012

בניית כפתור מקוסטם - Android

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

בשלב הבא יש צורך להכין את התמונות כך שהם יהיו מותאמים אם התוכנה draw9patch וזאות כדי למונע מריכות ומתיחות של התמונות, יש הסבר של שלב אחרי שלב בקישור כיצד לבצע את זה, אני אפרת את השלבים:
  1. כנסו לתקיה שביצאתם את התתקנה של ה SDK, נווטו לתקיה של tools ושם תמצאו את הישום.
  2. תטענו את קובץ התמונה לישום, על ידי לחיצה על file ולאחר מכן   Open 9-patch...
  3. מצד ימין אתם תראו את התצוגה המקדימה של התמונה לאחר מתיחות, כאשר בסרגל התחתון מצד שמאל אתם יכולים להזיז ולראות סוגים שונים של מתיחות.
  4. עלידי סימון נקודות מסביב לתמונה אתם מגדירים את האיזורים שהישום יכול לבצע מתיחות.
אני מצרף דוגמא לתמונה שמוכנה אחרי 9patch:
זאות הדרך למונע את עיבות התמונה.

אחרי שהתמונות מוכנות יש צורך להגדיר קובץ שידע לזהות ולהתמודד אם בחירת המצבים כאשר הכפתור לחוץ או לא, אנחנו צריכים להעתיק לתקייה של drawable את התמונות וליצור קובץ xml שנגדיר שם את כל ההגדרות, ניתן לו שם לדוגמא back_button_conf.xml.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item
        android:state_focused="false"
        android:state_selected="false"
        android:state_pressed="false"
        android:drawable="@drawable/back_button_800px"
        />
    <item
        android:state_focused="false"
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/back_button_800px"
        />

    <!-- Focused states -->
    <item
        android:state_focused="true"
        android:state_selected="false"
        android:state_pressed="false"
        android:drawable="@drawable/back_button_roll_800px"
        />
    <item
        android:state_focused="true"
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/back_button_roll_800px"
        />

    <!-- Pressed -->
    <item
        android:state_pressed="true"
        android:drawable="@drawable/back_button_roll_800px"
        />
</selector>
שימו לב שיש כמה מצבים שניתן להגדיר תמונות שונות לכל מצב, אני מגדיר רק מצב של לחוץ ולא לחוצ, כמובן שאפשר להשתמש גם במצבים אחרים.

הדבר האחרון שנותר זה להגדיר את קובץ הxml בכפתור.
<Button
         android:id="@+id/button1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:background="@drawable/back_button_conf" />


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









אין תגובות: