יצירת אנימציות בListView

נניח ויש לנו אפליקציה שמציגה נתונים בתוך רשימה. הבעיה היא שהרשימה הזו דיי משעממת, כל הנתונים מופיעים בבת אחת בלי שום אפקט מיוחד שימשוך את עין המשתמש וינעים את זמן השימוש שלו באפליקציה. הבעיה הזו קיימת בכל אפליקציה שמשתמשת בListView, וזה כמעט כל אפליקצית אנדרואיד אשר מציגה רשימת נתונים כלשהיא (כולל אפליקציות חדשות, חיפוש וכו'). ומהו הפיתרון? סיפריה פשוטה בשם ListViewAnimations.

לצורך ההדגמה ניקח את קטע הקוד הבא:

public class ListViewExampleActivity extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_listviewexampleactivity);

    final ListView listview = (ListView) findViewById(R.id.listview);
    String[] values = new String[] { "Item 1","Item 2","Item 3" };

    final ArrayList list = new ArrayList();
    for (int i = 0; i < values.length; ++i) {
      list.add(values[i]);
    }
    final StableArrayAdapter adapter = new StableArrayAdapter(this,
        android.R.layout.simple_list_item_1, list);
    listview.setAdapter(adapter);
  }

  private class StableArrayAdapter extends ArrayAdapter {

    HashMap<String, Integer> mIdMap = new HashMap<String, Integer>;();

    public StableArrayAdapter(Context context, int textViewResourceId,
        List objects) {
      super(context, textViewResourceId, objects);
      for (int i = 0; i < objects.size(); ++i) {
        mIdMap.put(objects.get(i), i);
      }
    }

    @Override
    public long getItemId(int position) {
      String item = getItem(position);
      return mIdMap.get(item);
    }

    @Override
    public boolean hasStableIds() {
      return true;
    }

  }

} 

בכללי, מה שהקוד הנ"ל עושה זה פשוט ליצור ArrayList מערכים שנמצאים בתוך מערך, והArrayList הזה מועבר לתוך Adapter שיצרנו כדי שידע להציג את הנתונים בListView שלנו.

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

הפיתרון כמו שאמרתי כבר קודם לכן טמון בסיפריית קוד-פתוח בשם ListViewAnimations שניתנת לצפייה בכתובת: https://github.com/nhaarman/ListViewAnimations

מה שאנחנו צריכים מכל הסיפרייה הזו זה lib-core.jar (לחצו כדי להוריד), שזה בעצם הגרסא המקומפלת של הבסיס של הספרייה, שזה בעצם מה שאנחנו צריכים כדי לבצע אנימציות פשוטות. הסיפרייה עצמה מאפשרת גם דברים נוספים כמו Drag&Drop, Swipe to Dismiss וכו' אבל לא ניגע בזה עכשיו.

אז אחרי שהורדנו את הקובץ JAR של הסיפרייה, נעביר אותו לתיקייה libs של הפרוייקט שלנו. בתיקייה הזו נמצאות כל הסיפריות החיצוניות שאנחנו נשתמש בהם בפרוייקט. ספריות שתתיקלו בהם לעיתים קרובות הם של שירותי פרסומות למיניהם או של סיפריות כמו זאת שאנחנו מדברים עליה שעושות דברים אחרים (כמה דוגמאות: CardsLib, Pull to Refersh ויש עוד המון שתוכלו למצוא).

עכשיו כשהסיפרייה נמצאת אצלנו בפרוייקט, כל שנותר לנו הוא להוסיף את הקוד שמבצע את האנימציה. הקוד הולך ככה:

AlphaInAnimationAdapter animationAdapter = new AlphaInAnimationAdapter(adapter);
animationAdapter.setAbsListView(listview);
listview.setAdapter(adapter);

(אם מופיעות לכם שגיאות זה כנראה בגלל שלא עשיתם import למחלקות הרלוונטיות, פשוט לחצו ctrl+shift+o וזה צריך להסתדר).

בשורה הראשונה של הקוד אנחנו יוצרים Adapter חדש שבעצם מקבל את הAdapter שיצרנו בעצמנו. בשורה השנייה אנחנו מעבירים לAdpater את הListView שלנו, ובשורה השלישית אנחנו עושים ההפך, מגדירים את הAdapter של הListView לAdapter החדש שיצרנו עכשיו.

וזהו! פשוט נורא למימוש, פשוט מעבירים לסיפרייה הנ"ל את הAdapter הישן ומשתמשים רק בחדש, והתוצאה מאוד יפה לעין.

רשימת האפקטים השונים שניתן להשתמש בהם היא:

  • AlphaAnimationAdapter
  • ScaleInAnimationAdapter
  • SwingBottomInAnimationAdapter
  • SwingLeftInAnimationAdapter
  • SwingRightInAnimationAdapter

פשוט תחליפו את שם המחלקה שאתם יוצרים והאפקט ישתנה..

למי שרוצה לראות דמו של האפקטים השונים ניתן לראות את זה באפליקציית ההדגמה של הספרייה.

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים

תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>