ساخت گرادینت های متحرک در اندروید

نحوه ساخت پس زمینه با گرادینت های متحرک در اندروید


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

در این مطلب قصد داریم به نحوه ساخت گرادینت های رنگی برای تصویر پس زمینه بپردازیم و در این متد نیازی به بارگذاری یک عکس بزرگ نیست و گردادینت ها با استفاده از کدهای رنگی تولید می شوند. برای این کار از AnimationList استفاده می کنیم.

اول از همه باید به صورت زیر پنج فایل XML جداگانه برای drawables گرادینت ها بسازید.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<gradient

android:angle="225"

android:endColor="#1a2980"

android:startColor="#26d0ce" />

</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<gradient

android:endColor="#614385"

android:startColor="#516395"

android:angle="45"/>

</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<gradient

android:endColor="#1d2b64"

android:startColor="#f8cdda"

android:angle="135"/>

</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<gradient

android:endColor="#ff512f"

android:startColor="#dd2476"

android:angle="45"/>

</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<gradient

android:angle="135"

android:endColor="#34e89e"

android:startColor="#0f3443" />

</shape>

حال در فایل جدید xml drawable کد زیر را که شامل AnimationList است و رنگ پس زمینه را از یک گرادینت به دیگری تغییر می دهد، اضافه کنید. داخل تگ AnimationList باید 5 آیتم را که به این فایل های گرادنیت بالا ارجاع می دهند بیفزایید، برای این کار از تگ ”android:drawable=”@drawable/name استفاده کنید.

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

<item

android:drawable="@drawable/gradient_blue"

android:duration="5000"/>

<item

android:drawable="@drawable/gradient_red"

android:duration="5000"/>

<item

android:drawable="@drawable/gradient_teal"

android:duration="5000"/>

<item

android:drawable="@drawable/gradient_purple"

android:duration="5000"/>

<item

android:drawable="@drawable/gradient_indigo"

android:duration="5000"/>

</animation-list>

حال آن را به عنوان پس زمینه در روت View/ViewGroup از اکتیویتی که مایل به ساخت پس زمینه متحرک برای آن هستید قرار دهید. به ViewGroup/View نیز یک آی دی که پس زمینه برای آن اعمال می شود را اختصاص دهید و در کد جاوا نیز به آن ارجاع دهید.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/linear_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/gradient_animation_list"

android:orientation="vertical>

<!--Content goes here-->

</LinearLayout>

در این مرحله باید در کد جاوا به انیمیشن لیست بگوییم که بین این drawable ها جابجا شود. این کار از طریق متد ()AnimationDrawable.start به صورت زیر انجام می شود:

LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linear_layout);

AnimationDrawable animationDrawable = (AnimationDrawable) linearLayout.getBackground();

animationDrawable.setEnterFadeDuration(2500);

animationDrawable.setExitFadeDuration(5000);

animationDrawable.start();

همانطور که می بینید، به LinearLayout که دارای انیمیشن لیست به عنوان پس زمینه بود ارجاع داده شد. سپس پس زمینه را در AnimationDrawable می گیریم و مدت زمان شروع و پایان را برای هریک از گرادینت ها تعیین می کنیم.

می توانید مدت زمان شروع و پایان را هم تغییر دهید. علاوه بر این می توانید هر تعداد گرادینت که خواستید نیز اضافه کنید. این وب سایت منبع بسیار خوبی برای پیدا کردن ترکیب های متنوع از گرادنیت هاست:

https://uigradients.com

ساخت گرادینت های متحرک در اندروید

http://thetechnocafe.com برگرفته از

اینها را هم بخوانید