آموزش ساخت Ripple Effect و Background Drawable با xml

[Radiomedia 36]

با سلام و کسب اجازه از اساتید وبسایت انسرسنتر اولین آموزش رو براتون قرار میدم.
مدت زیادیه در این وبسایت عضو هستم و از آموزش هاش استفاده کردم، این در حالیه که هیچ آموزشی تابحال نذاشتم، و خودم رو متعهد دونستم هرچند کوچک این لطف رو جبران کنم.

خب اولین آموزش، طریقه ساخت پس زمینه و ساخت افکت موج دار یا Ripple در فایل xml و فراخوانی آن:
ابتدا باید بگم شاید روش‌های من خیلی اصولی و کوتاه نباشه اما بهرحال کارو راه میندازه.
برای ساخت پس زمینه ابتدا
راه اول: کد زیر رو در یک فایل xml ذخیره و پوشه Drawable می‌ریزیم و Attribute اون رو در حالت Read-only قرار میدیم، برای اینکه موقع کامپایل حذف نشه(که معمولا این راه توصیه نمیشه)

برای مثال نام این فایل رو solid.xml میزاریم:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > //or oval
	<corners android:radius="10dp" /> 
	<solid android:color="#FFF" />
  	<stroke android:width="1dp" android:color="@color/light_gray" />
</shape>

در تگ shape و گزینه 

android:shape="rectangle"

ما شکل مستطیل رو انتخاب کردیم اما اگر خواستید دایره باشه oval رو بجاش بزارید

تگ corners گرد کردن گوشه ها رو تعیین میکنه

تگ solid تک رنگ پس زمینه رو، که رنگ اینجا سفید هست و یا میتونید gradiant یعنی طیف رنگ هم بدید:

<gradient android:angle="90"
		android:endColor="#3C000000" android:startColor="#002e3436" />

angle یعنی زاویش که 90 درجه یعنی startColor بالاست و endColor پایین.

تگ stroke هم خط دور شکل که ضخامتش اینجا 1dp هست و رنگش هم طوسی روشن

راه دوم: و یا کد زیر رو در منیفست پروژه کپی کنید.

CreateResource(drawable , solid.xml , 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
	<corners android:radius="10dp" />
	<solid android:color="#FFF" />
   	<stroke android:width="1dp" android:color="@color/light_gray" />
</shape>
)

تفاوتشون در خط اوله که در اینجا، ما پوشه رو اول و بعد اسم فایل رو و بعدش کد داخلش رو وارد میکنیم.

 در محیط b4a 
اول کتابخانه xmlLayoutBuilder رو اضافه و تیک میزنیم.

لینک سایت مرجع

لینک دانلود کابخانه

بعد ویو ای که میخوایم بش پس زمینه بدیم رو ایجاد میکنیم، و کد زیر رو کپی می‌کنیم:
 

Private res As XmlLayoutBuilder
Label1.Background = res.GetDrawable("solid")

 بخش دوم: ساخت پس‌زمینه چندلایه برای زمانی که میخوایم مثلا زیرسایه بدیم به ویو:

CreateResource(drawable , bottomshadow.xml , 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item> //سایه
        <shape android:shape="rectangle">
            <solid android:color="#F7F7F7"/>
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item 
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#FFF"/> //background
            <corners android:radius="5dp" />
        </shape>
    </item>
</layer-list>
)

این هم مثل قبلیه فقط دو لایه از شکل هاست، که در بالایی سایه رو ترسیم میکنیم، و پایین شکل پس زمینشو. 

بخش بعدی قراردادن افکت ریپل برای ویو:

کد زیر رو در منیفست اضافه میکنیم:

CreateResource(drawable , ripple.xml , 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent" >
    <item android:drawable="@drawable/solid" />
</ripple>
)

در قسمت رنگ، هر رنگی خواستید بزارید، و در قسمت drawable فایل xml که قبلش ساختیم رو میدیم

نکته، اگر خواستید برای پس زمینه ویو عکس بزارید با افکت ریپل، اول عکس مدنظر رو در پوشه drawable کپی کنید(باید png باشه)، و اونو در حالت Read-only بزارید، و بعدش اسم عکس رو بجای فایل xml وارد کنید(بدون پسوند) مثلا اسم عکستون bg.png :

<item android:drawable="@drawable/bg" />

و در b4a کد زیر :

Private res As XmlLayoutBuilder
Label1.Background = res.GetDrawable("ripple")

امیدوارم بدردتون بخوره این آموزش، من الان دنیام شده برنامه نویسی اندروید، و B4A واقعا داره روز به روز بهتر میشه، اگر آموزشی مد نظرتون بود و یا در سایت مرجع موجهش نشدید بم بگید اگر تونستم حتما آموزششو براتون میذارم.

آموزش های بعدی رو هم سعی میکنم لینکشو زیر همه آموزشا بزارم.

ایشاله همیشه لبتون خندون باشه

آموزش دوم: اینجا