أداة Draw 9-patch هي محرِّر WYSIWYG مضمَّن في Android Studio. وتتيح لك الأداة أيضًا إنشاء صور نقطية يتم تغيير حجمها تلقائيًا لتلائم محتوى العرض وحجم الشاشة. يمكنك تغيير حجم أجزاء محدّدة من الصورة أفقيًا أو عموديًا استنادًا إلى المؤشرات المرسومة داخل الصورة.
للاطّلاع على مقدمة عن رسومات NinePatch وآلية عملها، يمكنك قراءة مقالة رسومات NinePatch القابلة للرسم.
اتّبِع الخطوات التالية لإنشاء رسم NinePatch باستخدام أداة الرسم 9-patch في "استوديو Android". ستحتاج إلى صورة PNG التي ترغب في إنشاء صورة NinePatch منها.
- في "استوديو Android"، انقر بزر الماوس الأيمن على صورة PNG التي تريد إنشاء صورة NinePatch منها، ثم انقر على إنشاء ملف من 9 رموز تصحيح.
- أدخِل اسم ملف لصورة NinePatch وانقر على حسنًا. سيتم إنشاء صورتك بامتداد الملف
.9.png
. - انقر مرّتين على ملف NinePatch الجديد لفتحه في "استوديو Android".
في مساحة العمل التي يتم فتحها، تكون اللوحة اليمنى هي منطقة الرسم، حيث يمكنك تعديل الخطوط للتصحيحات القابلة للتوسيع ومنطقة المحتوى. الجزء الأيسر هو منطقة المعاينة، حيث يمكنك معاينة الرسم عند تمديده.
- انقر داخل محيط البكسل الذي يبلغ بكسل واحد لرسم الخطوط التي تحدّد البُقع القابلة للتوسيع ومساحة المحتوى (اختياريًا).
انقر بزر الماوس الأيمن لمحو الخطوط المرسومة سابقًا (في نظام التشغيل Mac، اضغط مع الاستمرار على Shift وانقر).
- عند الانتهاء، انقر على ملف > حفظ لحفظ التغييرات.
لفتح ملف NinePatch حالي في Android Studio، انقر مرّتين على الملف.
لضمان تصغير حجم رسومات NinePatch بشكل سليم، تأكَّد من أنّ حجم أي مناطق قابلة للتوسيع لا يقل عن 2×2 بكسل. وإلا، قد تختفي هذه المناطق عند تصغير الحجم. لتجنُّب الاستيفاء أثناء تغيير الحجم والذي قد يؤدي إلى تغيير اللون على الحدود، وفِّر 1 بكسل من مساحة آمنة إضافية في الرسومات قبل المناطق القابلة للتوسيع وبعدها.
ملاحظة: يتم تحميل ملف PNG عادي (*.png
) مع إضافة حدود فارغة بقياس 1 بكسل حول الصورة. يمكنك رسم
التصحيحات القابلة للتوسيع ومساحة المحتوى داخل الحدود.
تم تحميل ملف NinePatch (*.9.png
) الذي تم حفظه سابقًا كما هو،
بدون إضافة منطقة رسم لأنّه متوفّر حاليًا.
تتضمن عناصر التحكم الاختيارية ما يلي:
- التكبير أو التصغير: اضبط مستوى تكبير/تصغير الرسم في منطقة الرسم.
- مقياس التصحيح: يمكنك ضبط حجم الصور في منطقة المعاينة.
- إظهار القفل: يتم عرض المنطقة غير القابلة للرسم من الرسم عند تمرير الماوس.
- عرض التصحيحات: عايِن التصحيحات الوردية القابلة للتوسيع في منطقة الرسم. يشير اللون الوردي إلى رقعة قابلة للتوسيع، كما هو موضح في الشكل 2.
- عرض المحتوى: حدِّد منطقة المحتوى في صور المعاينة. ويشير اللون الأرجواني إلى المنطقة التي يُسمح فيها بالمحتوى، كما هو موضّح في الشكل 2.
- عرض بقع سيئة: إضافة حد أحمر حول مناطق الرقعة، ما قد ينتج عنه أخطاء في الرسم عند تمديده، كما هو موضّح في الشكل 2. وإذا أزلت جميع التصحيحات غير الصالحة، سيحافظ ذلك على التناسق المرئي للصورة الموسّعة.