הכלי Draw 9-patch הוא עורך WYSIWYG שכלול ב-Android Studio. הכלי מאפשר ליצור תמונות bitmap שמשנות את הגודל שלהן באופן אוטומטי כדי להתאים לתוכן של התצוגה ולגודל המסך. אפשר לשנות את הגודל של חלקים נבחרים בתמונה לרוחב או לאורך על סמך אינדיקטורים שמצוירים בתוך התמונה.
במאמר הזה יש הסבר על גרפיקת NinePatch ואיך היא פועלת.
איור 1. כלי Draw 9-patch ב-Android Studio מציג תמונת NinePatch.
כדי ליצור גרפיקת NinePatch באמצעות הכלי Draw 9-patch ב-Android Studio: תצטרכו את תמונת ה-PNG שממנה אתם רוצים ליצור תמונת NinePatch.
- ב-Android Studio, לוחצים לחיצה ימנית על תמונת ה-PNG שרוצים ליצור ממנה תמונת NinePatch, ואז לוחצים על Create 9-patch file (יצירת קובץ NinePatch).
- מזינים שם קובץ לתמונה מסוג NinePatch ולוחצים על אישור. התמונה שלכם תיווצר עם סיומת הקובץ
.9.png. - לוחצים לחיצה כפולה על קובץ ה-NinePatch החדש כדי לפתוח אותו ב-Android Studio.
בחלונית הימנית של סביבת העבודה שנפתחת, נמצא אזור הציור שבו אפשר לערוך את הקווים של תיקוני המתיחה ואזור התוכן. בחלונית השמאלית מוצגת תצוגה מקדימה של הגרפיקה כשהיא מתוחה.
- לוחצים בתוך ההיקף של הפיקסל האחד כדי לשרטט את הקווים שמגדירים את הטלאים הניתנים למתיחה ואת אזור התוכן (אופציונלי).
לוחצים לחיצה ימנית כדי למחוק קווים שצוירו קודם (ב-Mac, מחזיקים את Shift ולוחצים).
- בסיום, לוחצים על קובץ > שמירה כדי לשמור את השינויים.
כדי לפתוח קובץ NinePatch קיים ב-Android Studio, לוחצים עליו לחיצה כפולה.
כדי לוודא שהגרפיקה של NinePatch מוקטנת בצורה נכונה, צריך לוודא שכל האזורים הניתנים למתיחה הם בגודל של 2x2 פיקסלים לפחות. אחרת, יכול להיות שהאזורים האלה ייעלמו כשמצמצמים את קנה המידה. כדי להימנע מאינטרפולציה במהלך שינוי הגודל שעלולה לגרום לשינוי הצבע בגבולות, צריך לספק פיקסל אחד של שטח בטוח נוסף בגרפיקה לפני ואחרי אזורים שניתנים למתיחה.
הערה: קובץ PNG רגיל (*.png) נטען עם גבול ריק של פיקסל אחד שנוסף מסביב לתמונה. אפשר לצייר את הטלאים שניתנים למתיחה ואת אזור התוכן בתוך הגבול.
קובץ NinePatch שנשמר בעבר (*.9.png) נטען כמו שהוא,
בלי שנוסף אזור ציור כי הוא כבר קיים.
איור 2. תמונה של NinePatch ב-Android Studio שמציגה תוכן, תיקונים ותיקונים לא טובים.
אמצעי הבקרה האופציונליים כוללים:
- זום: שינוי רמת הזום של הגרפיקה באזור הציור.
- קנה מידה של תיקון: שינוי קנה המידה של התמונות באזור התצוגה המקדימה.
- הצגת נעילה: הצגה חזותית של האזור בגרפיקה שלא ניתן לצייר בו כשמעבירים את העכבר מעל הגרפיקה.
- Show patches (הצגת טלאים): תצוגה מקדימה של הטלאים הוורודים שניתנים למתיחה באזור הציור. ורוד מציין תיקון שניתן להרחבה, כפי שמוצג באיור 2.
- הצגת התוכן: סימון אזור התוכן בתמונות התצוגה המקדימה. האזור שבו מותר להציג תוכן מסומן בסגול, כמו שמוצג באיור 2.
- הצגת אזורים בעייתיים: מוסיפה גבול אדום מסביב לאזורים של תיקונים שעשויים ליצור ארטיפקטים בגרפיקה כשמגדילים אותה, כמו שמוצג באיור 2. אם תסירו את כל הטלאים הבעייתיים, תשמרו על העקביות החזותית של התמונה המתוחה.