إنشاء صور نقطية يمكن تغيير حجمها (ملفات من 9 رموز تصحيح)
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
أداة Draw 9-patch هي محرِّر WYSIWYG مضمَّن في Android Studio. وتتيح لك الأداة أيضًا إنشاء
صور نقطية يتم تغيير حجمها تلقائيًا لتلائم محتوى العرض وحجم الشاشة. يمكنك تغيير حجم أجزاء محدّدة من الصورة أفقيًا أو عموديًا استنادًا إلى المؤشرات المرسومة داخل الصورة.
للاطّلاع على مقدمة عن رسومات NinePatch وآلية عملها، يمكنك قراءة مقالة
رسومات NinePatch القابلة للرسم.
الشكل 1. أداة الرسم 9 رموز التصحيح في "استوديو Android"
التي تعرض صورة 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. صورة NinePatch في "استوديو Android"
تعرض المحتوى والتصحيحات ورموز التصحيح غير الصالحة.
تتضمن عناصر التحكم الاختيارية ما يلي:
- التكبير أو التصغير: اضبط مستوى تكبير/تصغير الرسم في منطقة الرسم.
- مقياس التصحيح: يمكنك ضبط حجم الصور في منطقة المعاينة.
- إظهار القفل: يتم عرض المنطقة غير القابلة للرسم من الرسم عند تمرير الماوس.
- عرض التصحيحات: عايِن التصحيحات الوردية القابلة للتوسيع في منطقة الرسم. يشير اللون الوردي إلى رقعة قابلة للتوسيع، كما هو موضح في الشكل 2.
- عرض المحتوى: حدِّد منطقة المحتوى في صور المعاينة. ويشير اللون الأرجواني إلى المنطقة التي يُسمح فيها بالمحتوى، كما هو موضّح في الشكل 2.
- عرض بقع سيئة: إضافة حد أحمر حول مناطق الرقعة، ما قد ينتج عنه أخطاء في الرسم عند تمديده، كما هو موضّح في الشكل 2. وإذا أزلت جميع التصحيحات غير الصالحة، سيحافظ ذلك على التناسق المرئي للصورة الموسّعة.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Create resizable bitmaps (9-patch files)\n\nThe Draw 9-patch tool is a WYSIWYG editor included in Android Studio. The tool lets you create\nbitmap images that automatically resize to accommodate the contents of the view and the size of\nthe screen. You can scale selected parts of the image horizontally or vertically based on indicators\ndrawn within the image.\n\nFor an introduction to NinePatch graphics and how they work, read\n[NinePatch drawables](/guide/topics/graphics/2d-graphics#nine-patch).\n\n**Figure 1.** Android Studio's\nDraw 9-patch tool displaying a NinePatch image.\n\nFollow these steps to create a NinePatch graphic using the Draw 9-patch tool in Android\nStudio. You'll need the PNG image that you'd like to create a NinePatch image from.\n\n1. In Android Studio, right-click the PNG image you'd like to create a NinePatch image from, then click **Create 9-patch file**.\n2. Enter a filename for your NinePatch image and click **OK** . Your image will be created with the `.9.png` file extension.\n3. Double-click your new NinePatch file to open it in Android Studio. \n\n In the workspace that opens, the left pane is your drawing area, where you can edit\n the lines for the stretchable patches and content area. The right\n pane is the preview area, where you can preview your graphic when stretched.\n4. Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) the content area. \n\n Right-click to erase\n previously drawn lines (on Mac, hold Shift and click).\n5. When done, click **File** \\\u003e **Save** to save your changes.\n\nTo open an existing NinePatch file in Android\nStudio, double-click the file.\n\nTo make sure that your NinePatch graphics scale down properly, verify that any\nstretchable regions are at least 2x2 pixels in size.\nOtherwise, those regions may disappear when scaled down. To avoid interpolation during scaling\nthat may cause the color at the boundaries to change, provide 1 pixel of extra safe\nspace in the graphics before and after stretchable regions.\n\n**Note:** A normal PNG file (`*.png`) is\nloaded with an empty 1-pixel border added around the image. You can draw\nthe stretchable patches and content area within the border.\nA previously saved NinePatch file (`*.9.png`) is loaded as-is,\nwith no drawing area added because it already exists.\n\n**Figure 2.** A NinePatch image in Android Studio\nshowing content, patches, and bad patches.\n\nOptional controls include:\n\n- **Zoom**: Adjust the zoom level of the graphic in the drawing area.\n- **Patch scale**: Adjust the scale of the images in the preview area.\n- **Show lock**: Visualize the non-drawable area of the graphic on mouse-over.\n- **Show patches**: Preview the pink stretchable patches in the drawing area. Pink indicates a stretchable patch, as shown in figure 2.\n- **Show content**: Highlight the content area in the preview images. Purple indicates the area where content is allowed, as shown in figure 2.\n- **Show bad patches**: Adds a red border around patch areas that may produce artifacts in the graphic when stretched, as shown in figure 2. If you eliminate all bad patches, you will maintain the visual coherence of your stretched image."]]
