ساخت یک vector در اندروید به جای استفاده از تصاویر bitmap دو دلیل مهم دارد:

بدون هر گونه از دست دادن کیفیت بزرگنمایی می شوند و برای همه‌ی صفحات با هر density فقط یک vector نیاز است.

با استفاده از SVG paths می توان یک vector در اندروید ساخت که به روش آن می پردازیم.

مثالی برای آشنایی با روش ساخت vector در اندروید:

قصد ساخت شکل زیر را داریم :

یک مثلث با رنگ فیروزه ای در بالا چپ و یک مثلث با رنگ سبز تیره در پایین راست.

۱ – ابتدا یک فایل drawable با نام دلخواه ایجاد میکنیم :

۲ – ساخت یک vector در اندروید با سایز و مشخصات زیر می سازیم :

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="100dp"
    android:width="100dp"
    android:viewportHeight="100"
    android:viewportWidth="100">

</vector>

اندازه height و width را براساس نیاز خود تغییر دهید، android:viewportWidth و android:viewportHeight ویژگی های بیسار مهمی برای تعیین میزان canvas هستند که برای راحتی با اندازه height و width یکی در نظر میگیریم.

۳ – رسم اولین مثلث :

برای رسم اولین مثلث باید مسیر مانند شکل زیر از A به B سپس به C برویم :

باید متذکر شد که گوشه بالا چپ نقطه (۰,۰) است و گو شه ی پایین راس نقطه (۱۰۰,۱۰۰) است زیرا ما android:viewportWidth=”100″ و android:viewportHeight=”100″ را اینگونه مقداری کرده ایم.

روش اضافه کردن مسیر به vector به گونه زیر است:

<path
    android:fillColor=" رنگ مورد نظر شما"
    android:pathData=" مسیر حرکت" />

برای ایجاد مسیر ما از سه متغییر کمک میگیریم که به توضیح آنها می پردازیم.

M : به معنی Moveto که نقطه شروع حرکت را مشخص می کن.

L : به معنی Lineto که خط به نقطه بعدی را رسم می‌ کند.

z : در پایان هر مسیر این متغیر را میگذاریم.

برای رسم مثلث بالا باید :

1.  از نقطه (A=(0,0  شروع کنیم : M 0,0
2. بعد باید به نقطه (B=(100,0 برویم : L 100,0
3. عد به نقطه (C=(0,100 می رویم : L 0,100

۴ – در آخر مسیر را میبیندیم : z

مسیر کلی حرکت ما به این شکل می شود : M 0,0 L 100,0 0,100 z

حال این مسیر را در داخل vector با رنگ دلخواه قرار می دهیم :

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="100dp"
    android:width="100dp"
    android:viewportHeight="100"
    android:viewportWidth="100">

    <path
        android:fillColor="@color/colorPrimary"
        android:pathData="M 0,0 L 100,0 0,100 z" />

</vector>

شکل زیر از مسیر بالا پدید می آید.

۴ – رسم مثلث دوم :

برای رسم مثلث دوم باید :

• (B=(100,0
• (C=(0,100
• (D=(100,100

پس مسیر به این گونه می شود : M 100,0 L 0,100 100,100 z

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="100dp"
    android:width="100dp"
    android:viewportHeight="100"
    android:viewportWidth="100">

    <path
        android:name="light_triangle"
        android:fillColor="@color/colorPrimary"
        android:pathData="M 0,0 L 100,0 0,100 z" />

    <path
        android:name="dark_triangle"
        android:fillColor="@color/greenPrimary"
        android:pathData="M 100,0 L 0,100 100,100 z" />

</vector>

و شکل نهایی به صورت زیر می شود:

برای دیدن آموزش های دیگر در تیک۴ اینجا کلیک کتید.