رسومات vector الجزء [2]

الإعلانات

إضافة رسومات vector متعددة الكثافة

 

 

 

إضافة رسومات vector إلى المخطط


في ملف المخطط، يمكنك تعيين أي ودجت مرتبط بالأيقونة، مثل ImageButton, ImageView وما إلى ذلك، للإشارة إلى رسومات

متجهه. على سبيل المثال، يظهر المخطط التالي رسومية متجهه معروضة على زر:

الشكل 4. رسومية متجهه تُعرض على زر في المخطط.

 

لعرض رسومية متجهه على ودجت، كما هو موضح في الشكل 4:

1- افتح المشروع ثم قم بإستيراد الرسومية المتجهه.

هذا المثال يستخدم مشروع هاتف\تابلت، الذي تم إنشاؤه بإستخدام معالج مشروع جديد New Project Wizard.

2- في معاينة اندرويد من نافذة المشروع Project، انقر نقراً مزدوجاً على ملف XML الخاص بالمخطط layout، مثل: content_main.xml.

3- انقر فوق علامة التبويب تصميم Design، لعرض محرر المخطط Layout Editor.

4- اسحب ودجت ImageButton من نافذة اللوحه Palette إلى محرر المخطط.

5- في مربع حوار المصادر Resources، حدد Drawable في الجانب الأيسر، ثم حدد الرسومية المتجهة التي قمت بإستيرادها. اضغط OK.

تظهر الرسومية المتجهة على ImageButton في المخطط.

6- لتغيير لون الصورة إلى لون تمييز “accent color” معرّف في الثيم، في نافذة الخصائص Properties، حدد موقع خاصية الصبغة tint ثم اضغط .

7- في مربع حوار Resources، حدد Color في الجانب الأيسر، ثم حدد colorAccent. اضغط OK.

يتغير لون الصورة إلى لون التمييز في المخطط.

8- إذا كان المشروع يستخدم مكتبة دعم، فيجب أن يكون كود ImageButton مشابهاً لما يلي:

<ImageButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_build_black_24dp"
  tools:layout_editor_absoluteX="11dp"
  tools:layout_editor_absoluteY="225dp"
  android:id="@+id/imageButton"
  android:tint="@color/colorAccent" />

إذا لم يكن المشروع يستخدم مكتبة دعم، فسوف يكون كود الرسومية المتجهه "android:src="@drawable/ic_build_black_24dp.

 

 

الإشارة إلى رسومات متجهة في الكود


عادة يمكنك الإشارة إلى مصدر رسوميه متجهه، بطريقة عامة في الكود الخاص بك، وعندما يتم تشغيل تطبيقك، يتم عرض

الرسوميه المتجهه أو الصورة النقطية المطابقة تلقائياً، بناءً على مستوى واجهة برمجة التطبيقات:

 

  • في معظم الحالات، يمكنك الإشارة إلى رسومية متجهه كـ: drawable@ في كود XML أو كـ: Drawable في كود الجافا.

مثال، كود مخطط XML التالي، يطبق الصورة على معاينه:

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/myimage" />

يقوم كود الجافا التالي بإستيراد الصورة كـ رسومية Drawable:

KOTLIN

val drawable = resources.getDrawable(R.drawable.myimage, theme)

JAVA

Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

تكمن الدالة ()getResources بداخل فئة السياق Context، والتي تطبق على كائنات واجهة المستخدم، مثل: الأنشطة – الشظايا – المخططات – المعاينات وما إلى ذلك.

 

  • إذا كان تطبيقك يستخدم مكتبة الدعم (حتى لو كنت لا تملك العبارة vectorDrawables.useSupportLibrary = true في ملف البناء build.gradle)

يمكنك أيضاً الإشارة إلى رسومية متجهة بإستخدام العبارة app:srcCompat، مثال:

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/myimage" />

قد تحتاج من حين إلى آخر، إلى كتابة مصدر الرسومية إلى فئته الصحيحه، مثلما عندما تحتاج إلى إستخدام ميزات محددة لفئة

الرسومية المتجهة VectorDrawable. للقيام بذلك، يمكنك إستخدام كود جافا كما يلي:

KOTLIN

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val vectorDrawable = drawable as VectorDrawable
} else {
    val bitmapDrawable = drawable as BitmapDrawable
}

JAVA

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
   VectorDrawable vectorDrawable = (VectorDrawable) drawable;
} else {
   BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

يمكنك الوصول إلى مصادر الرسومات المتجهة من خلال التسلسل الرئيسي فقط.

بالنسبة لتقنية مكتبة الدعم، يجب عليك إستخدام تقنيات البرمجة التي تتوافق مع مكتبة الدعم. لمزيد من المعلومات، راجع مكتبة دعم اندرويد 23.2.

 

 

 

تعديل كود XML الذي أُنشئ بواسطة Vector Asset Studio


يمكنك تعديل كود XML للرسومية المتجهه، ولكن لا يمكن تعديل النسق PNGs وكود XML المطابق، و الذي تم إنشاؤه في وقت الإنشاء. ورغم ذلك، نحن لا ننصح بهذا.

عند إستخدام تقنية إنشاء صيغ PNG، تتأكد أداة Vector Asset Studio من أن الرسومية المتجهة و رسومية PNGs متطابقتان، وأن الإيضاح يحتوي على الكود المناسب.

إذا قمت بإضافة كود غير مدعوم في اندرويد 4.4 (المستوى 20) وأقل، فقد تكون الرسومية المتجهة و PNG مختلفة عن بعضها.

تحتاج أيضاً إلى التأكد من الإيضاح يحتوي على الكود لدعم تغييراتك.

لتعديل ملف XML للرسومية المتجهه، عندما لا تستخدم تقنية مكتبة الدعم:

1- في نافذة المشروع، انقر نقراً مزدوجاً فوق ملف XML للرسومية المتجهه، و الذي تم إنشاؤه في مجلد الرسوميات drawable.

يظهر ملف XML في المحرر ونافذة المعاينة Preview.

الشكل 5. ملف XML لرسومية متجهة (vector) معروض في محرر الأكواد و نافذة المعاينة.

 

2- تحرير كود XML بناءً على ما يدعمه الحد الأدنى لمستوى واجهة برمجة التطبيقات:

    • في اندرويد 5.0 (المستوى 21) والإصدارات الأحدث، تدعم أداة Vector Asset Studio جميع عناصر Drawable و VectorDrawable. يمكنك إضافة عناصر XML وتغيير القيم.
    • في اندرويد 4.4 (المستوى 20) والإصدارات الأدنى، تدعم أداة Vector Asset Studio كافة عناصر Drawable ومجموعة فرعية من عناصر VectorDrawable. راجع حلول توافق رسوميات فيكتور مع الإصدارات الأقدم، للحصول على قائمة بذلك. يمكنك تغيير القيم في الكود المُنشأ وإضافة عناصر XML المدعومة.

 

3- ابني المشروع ثم تحقق من أن الرسوميات المتجهة و الرسوميات النقطية المطابقة تبدو متماثله.

 

تذكر أن ملفات PNG التي تم إنشاؤها، يمكن أن تظهر بشكلٍ مختلف في نافذة المعاينة، عنها في التطبيق، ويعود هذا

إلى إختلاف أداء المحركات وأي تغييرات يتم إجراؤها على الرسومية المتجهه قبل الإنشاء.

 

إذا قمت بإضافة كود إلى ملف XML للرسومية المتجهه، والذي أنشأته أداة Vector Asset Studio، فأي ميزات غير

مدعومة في اندرويد 4.4 (المستوى 20) أو أقل، لن تظهر في ملفات PNG التي تم إنشاؤها.

نتيجة لذلك، عند إضافتك كود، يجب عليك دائماً التحقق من مطابقة ملفات PNG المنُشئة مع الرسوميات المتجهة.

للقيام بذلك، يمكنك النقر نقراً مزدوجاً على PNG في معاينة ملفات المشروع في نافذة المشروع Project؛ الهامش

الأيسر من محرر الأكواد Code Editor يعرض أيضاً صورة PNG عندما يشير كودك إلى drawable، كما هو موضح في الشكل 6.

الشكل 6. صورة PNG معروضة في الهامش الأيسر من محرر الأكواد.

 

 

 

حذف رسومات vector من المشروع


لحذف رسومية متجهة “vector” من المشروع اتبع الخطوات التالية:

1- في نافذة المشروع Project، احذف ملف XML المنُشئ لرسومية Vector، من خلال اختيار الملف و الضغط على مفتاح Delete (أو إختيار Edit > Delete).

سوف يظهر مربع حوار الحذف الآمن Safe Delete.

 

2- إختيارياً حدد خيارات options، لمعرفة مكان إستخدام الملف في المشروع، ثم انقر فوق OK.

يقوم اندرويد ستوديو بحذف الملف من المشروع ومن محرك الأقراص. مع ذلك، إن اخترت البحث عن أماكن في المشروع حيث

يتم إستخدام الملف، و وجدت بعض الإستخدامات، عندها يمكنك عرضها لتقرر ما إذا كنت ستحذف الملف أم لا.

 

3- Build > Clean Project.

تتم إزالة أيٍ من ملفات PNG و XML التي يتم إنشاؤها تلقائياً، والتي تتطابق مع الرسومية المتجهة، المحذوفة من المشروع ومحرك الأقراص.

 

 

إرسال تطبيق يحتوي على رسومات vector


إذا إستخدمت تقنية مكتبة الدعم أو كان الحد الأدنى لمستوى API لديك هو اندرويد 5.0 (المستوى 21) أو أعلى، فسوف يحتوي

ملف APK الخاص بك على الرسوميات المتجهة التي قمت بإضافتها بإستخدام Vector Asset Studio. ستكون ملفات APK هذه أصغر مما لو تم تحويل صور vector إلى صور PNGs.

 

عندما يندرج الحد الأدنى لمستوى API لديك تحت اندرويد 4.4 (المستوى 20) أو أقل، وكانت لديك رسوميات متجهة و صور نقطية متماثلة في مشروعك، سيكون لديك خياران لإرسال ملفات APK:

  • قم بإنشاء ملف APK واحد يتضمن كلاً من الرسوميات المتجهة والصور النقطية المطابقة. هذا الحل أبسط في التنفيذ.
  • إنشاء ملفات APK منفصلة لمستويات API المختلفة. عندما لا تقوم بتضمين الصور النقطية المطابقة في ملف APK لأندرويد 5.0 (المستوى 21) وأعلى، يمكن أن يكون حجم ملف APK أصغر بكثير. لمزيد من المعلومات، راجع دعم ملفات APK المتعددة.

 

 

رسومات vector

 

دعم و قيود ملفات PSD


أداة Vector Asset Studio لا تدعم كافة ميزات ملفات PSD. القائمة التالية تلخص خصائص PSD المدعومه والغير مدعومه، بالإضافة إلى بعض تفاصيل التحويل.

 

Document وثيقة

مدعومة:

  • وضع ألوان PSD للصور النقطية bitmap، درجات الرمادي grayscale، مفهرسة indexed، نظام RGB، نظام Lab، أو CMYK.
  • عمق اللون 8، 16، 32 بت.

 

تفاصيل التحويل:

  • أبعاد وثيقة PSD تصبح أبعاد الرسومية المتجهة و viewport.

غير مدعومة:

  • نظام ألوان PSD كـ duotone أو multichannel.

 

Shapes الأشكال

مدعومة:

  • نظام Clipping masks “الصور المفرغة\ أقنعة القص”، إذا كانت قاعدة القص عبارة عن شكلٍ آخر.
  • عمليات الشكل، بما في ذلك الدمج\الإضافة، التقاطع، الطرح subtract، والإستبعاد exclude.

 

غير مدعومة:

تُستخدم قاعدة “Even-odd fill”بواسطة أشكال فوتوشوب. في نظام اندرويد 6.0 (المستوى 23) أو أقل، تدعم الرسوميات المتجهة قاعدة “nonzero fill” فقط.

في الأشكال ذاتية التقاطع، يمكن أن يؤدي هذا القيد إلى حدوث إختلافات بين PSD والرسومية المتجهة الناتجة. لإصلاح هذه

المشكلة، قم بإضافة "android:fillType="evenOdd على الشكل في الرسومية المتجهة. مثال:

<vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:viewportHeight="168"
    android:height="24dp"
    android:viewportWidth="209"
    android:width="24dp">

    <path
        android:fillAlpha="1.0"
        android:fillColor="#000000"
        android:fillType="evenOdd"
        android:pathData="M24,58 L24,167 L114,167 L114,66 M64,1 L64,96 L208,96 L208,8 M1,97 L146,139 L172,47"/>
</vector>

 

الحدود و الملئ Strokes and fills

مدعومة:

  • الحدود، بما في ذلك اللون، العتمه opacity، العرض width، الربط join، و cap، و الشرطات dashes، و المحاذاة alignment.
  • الملئ باللون المصمت، و الحدود.
  • حدود وتعبئة اللون، المعرفة كـ RGB, Lab, أو CMYK.

 

تفاصيل التحويل:

  • إذا كانت الحدود عبارة عن شرطات، أو مقصوصه بإستخدام قاعدة قص، أو تستخدم محاذاة مختلفة عن المركز، تقوم أداة Vector Asset Studio بتحويله إلى شكل ممتلئ في الرسوميات المتجهة.

غير مدعومة:

  • ألوان الملئ والحدود الغير مصمته، مثل التدرج اللوني.

 

العتمه Opacity

مدعومة:

  • طبقات الشكل ذات درجة عتمه 0.

 

تفاصيل التحويل:

  • تقوم أداة Vector Asset Studio بمضاعفة درجة العتمة، بإستخدام عتمة الطبقة، لحساب الملئ الأولي fill alpha.
  • تقوم الأداة بمضاعفة عتمة قاعدة القص (إذا كانت هناك قاعدة قص)، مع الملئ الأولي لحساب الملئ الأولي النهائي.
  • تقوم الأداة بمضاعفة عتمة الحدود، بإستخدام عتمة الطبقة لحساب الحدود الأوليه stroke alpha.
  • تقوم الأداة بمضاعفة عتمة قاعدة القص (إذا كانت هناك قاعدة قص)، بإستخدام الحدود الأوليه لحساب الحدود الأولية النهائية.

 

الطبقات Layers

مدعومة:

  • أي طبقة شكل مرئية.

تفاصيل التحويل:

  • تحافظ أداة Vector Asset Studio على اسماء الطبقات الموجودة في ملف الرسوميات المتجهة.

 

غير مدعومة:

  • تأثيرات الطبقة Layer effects.
  • طبقات النص والضبط Adjustment and text layers.
  • أوضاع الدمج Blending modes (متجاهلة).

 

 

رسومات vector

 

دعم وقيود ملفات SVG


لا تدعم أداة Vector Asset Studio كافة ميزات ملفات SVG. يلخص القسم التالي الميزات المدعومة والغير مدعومة، عندما تقوم

الأداة بتحويل ملف SVG إلى رسومية متجهة VectorDrawable، بالإضافة إلى تفاصيل التحويل.

 

الميزات المدعومة

الرسومية المتجهة VectorDrawable تدعم جميع ميزات Tiny SVG 1.2، بإستثناء النص.

 

الأشكال Shapes

الرسومية المتجهة VectorDrawable تدعم مسارات SVG.

تقوم الأداة بتحويل الأشكال البسيطة مثل الدوائر والمربعات والمضلعات، إلى مسارات.

 

التحولات Transformations

تدعم الأداة مقاييس التحولات، وتطبقهم مباشرة على المسارات الفرعية.

 

المجموعات Groups

تدعم الأداة عناصر المجموعة للترجمة، التحجيم، التدوير. لا تدعم المجموعات خاصية التعتيم.

تقوم الأداة أيضاً بتطبيق أي مجموعة تصاميم أو تعتيم على المسارات الفرعية.

 

الملء والحدود Fills and strokes

يمكن للمسارات أن تُملأ وتُحدد، بإستخدام ألوان مصمته أو تدرجات لونية (خطية linear أو نصف قطرية radial أو زاويّة angular).

يتم دعم الحدود المركزية فقط. أوضاع الدمج غير مدعومة. المسارات المتقطعة Dashed paths غير مدعومة.

 

الأقنعة Masks

تدعم الأداة قناع قص واحد لكل مجموعة.

 

 

ميزات لا يدعمها مستورد ملفات SVG

 

أي ميزة غير مدرجة في قسم الميزات المدعومة أعلاه هي ميزات غير مدعومة. أبرز الميزات الغير مدعومة تشمل ما يلي:

  • تأثيرات المرشح Filter effects: لا يتم دعم التأثيرات مثل الظلال السفليه drop shadows، التمويه blurs، ونسيج الألوان color matrix.
  • النص Text: يوصى بتحويل النصوص إلى أشكال بإستخدام أدوات أخرى.
  • ملء النمط Pattern fills.

 


للإطلاع على المقال باللغة الإنجليزية أضغط هنا.

الإعلانات

اترك رد