انیمیشن برای CardView در برنامه نویسی اندروید

سلام دوستان امیدوارم حالتون خوب باشد در این سری از آموزش برنامه نویسی اندروید به آموزش انیمیشن برای CardView در برنامه نویسی اندروید می پردازیم پیاده سازی انیمیشن برای CardView بسیار سخت و در بعضی موارد غیر ممکن است به علت اینکه شاید شما تعداد اجزای مختلفی را در CardView چیده باشید در ادامه با استفاده از کتاب خانه Skeleton به پیاده سازی انیمیشنی همانند زیر خواهیم پرداخت در ادامه با ما همراه باشید.

همانطور که مشاهده می کنید چقدر متریال دیزاین و زیبا است در ادامه به نحوه استفاده از آن خواهیم پرداخت
برای استفاده از این کتاب خانه ابتدا مثل همیشه باید آن را به پروژه خود اضافه کنید.
برای اینکار وارد فایل Build.gradle از نوع Top Level شده سپس در بخش repositories خط زیر را اضافه کنید.

     maven { url 'https://jitpack.io' }

1	maven { url 'https://jitpack.io' }

سپس وارد فایل Build.gradle از نوع Module شده سپس در بخش dependencies خط زیر را اضافه کنید.

      compile 'com.github.rasoulmiri:Skeleton:v1.0.0'

1	compile 'com.github.rasoulmiri:Skeleton:v1.0.0'

پروژه را sync کنید.
کد زیر را در بالاترین بخش layout قرار دهید ( در صورت قرار ندادن این بخش انیمیشن اجرا نمی شود )

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

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

در مثال زیر از CardView استفاده شده است شما باید کتاب خانه آن را خودتان اضافه کنید تا CardView شناخته شود

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:Skeleton="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@color/white"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    app:cardUseCompatPadding="true"
    app:contentPadding="0dp">
    <io.rmiri.skeleton.SkeletonGroup
        android:id="@+id/skeletonGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        Skeleton:SK_BackgroundViewsColor="#EEEEEE"
        Skeleton:SK_animationAutoStart="true"
        Skeleton:SK_animationDirection="LTR"
        Skeleton:SK_animationDuration="1000"
        Skeleton:SK_animationFinishType="gradient"
        Skeleton:SK_animationNormalType="gradient"
        Skeleton:SK_backgroundMainColor="@android:color/transparent"
        Skeleton:SK_highLightColor="#DEDEDE">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <io.rmiri.skeleton.SkeletonView
                android:id="@+id/skeletonViewPhoto"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                Skeleton:SK_cornerRadius="0dp"
                Skeleton:SK_padding="0dp"
                Skeleton:SK_shapeType="rect">
                <android.support.v7.widget.AppCompatImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    app:srcCompat="@drawable/photoTest" />
            </io.rmiri.skeleton.SkeletonView>
            <io.rmiri.skeleton.SkeletonView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/skeletonViewPhoto"
                Skeleton:SK_cornerRadius="10dp"
                Skeleton:SK_padding="5dp"
                Skeleton:SK_shapeType="rect">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentEnd="true"
                    android:text="Title" />
            </io.rmiri.skeleton.SkeletonView>
        </RelativeLayout>
    </io.rmiri.skeleton.SkeletonGroup>
</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"

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

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

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:cardBackgroundColor="@color/white"

app:cardCornerRadius="10dp"

app:cardElevation="10dp"

app:cardUseCompatPadding="true"

app:contentPadding="0dp">

<io.rmiri.skeleton.SkeletonGroup

android:id="@+id/skeletonGroup"

android:layout_width="match_parent"

android:layout_height="wrap_content"

Skeleton:SK_BackgroundViewsColor="#EEEEEE"

Skeleton:SK_animationAutoStart="true"

Skeleton:SK_animationDirection="LTR"

Skeleton:SK_animationDuration="1000"

Skeleton:SK_animationFinishType="gradient"

Skeleton:SK_animationNormalType="gradient"

Skeleton:SK_backgroundMainColor="@android:color/transparent"

Skeleton:SK_highLightColor="#DEDEDE">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content">

<io.rmiri.skeleton.SkeletonView

android:id="@+id/skeletonViewPhoto"

android:layout_width="match_parent"

android:layout_height="300dp"

Skeleton:SK_cornerRadius="0dp"

Skeleton:SK_padding="0dp"

Skeleton:SK_shapeType="rect">

<android.support.v7.widget.AppCompatImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="centerCrop"

app:srcCompat="@drawable/photoTest" />

</io.rmiri.skeleton.SkeletonView>

<io.rmiri.skeleton.SkeletonView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/skeletonViewPhoto"

Skeleton:SK_cornerRadius="10dp"

Skeleton:SK_padding="5dp"

Skeleton:SK_shapeType="rect">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentEnd="true"

android:text="Title" />

</io.rmiri.skeleton.SkeletonView>

</RelativeLayout>

</io.rmiri.skeleton.SkeletonGroup>

</android.support.v7.widget.CardView>

هم اکنون برنامه را اجرا کنید و انیمیشن را نظاره کنید در بالا Structure این انیمشین مثل زیر می شود.

<io.rmiri.skeleton.SkeletonGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
         <io.rmiri.skeleton.SkeletonView ...>
            <View ... />
        </io.rmiri.skeleton.SkeletonView>
        <io.rmiri.skeleton.SkeletonView ...>
            <View ... />
        </io.rmiri.skeleton.SkeletonView>
</io.rmiri.skeleton.SkeletonGroup>

<io.rmiri.skeleton.SkeletonGroup

android:layout_width="match_parent"

android:layout_height="wrap_content">

<io.rmiri.skeleton.SkeletonView ...>

</io.rmiri.skeleton.SkeletonView>

<io.rmiri.skeleton.SkeletonView ...>

</io.rmiri.skeleton.SkeletonView>

</io.rmiri.skeleton.SkeletonGroup>

پس طبق کد بالا ما یک SkeletonGroup که در آن هر بخش که می خواهیم به یک انیمیشن تبدیل شود در یک SkeletonView باید قرار بگیرد و در مورد ویژگی یا Property های مربوط به آن در ادامه توضیحات را مطالعه کنید.
Skeleton:SK_cornerRadius مقدار گردی دور انیمیشن را تنظیم می کند.
Skeleton:SK_shapeType : نوع انیمیشن را تنظیم می کند که به سه نوع rect, oval,text تقسیم می شود.

SK_cornerRadiusTopLeft
SK_cornerRadiusTopRight
SK_cornerRadiusBottomLeft
SK_cornerRadiusBottomLRight

ویژگی ها زیر مربوط به SkeletonGroup است.
SK_animationAutoStart : شروع اتوماتیک انیمشین را تنظیم می کند می تواند true یا false باشد به طور پیشفرض true است.
SK_animationDuration : مقدار زمانی انیمیشن را تنظیم می کند مثلا 1000 میلی ثانیه می شود یک ثانیه.
SK_animationDirection : جهت انیمیشن را تنظیم می کند می تواند LTR یا RTL باشد.
SK_backgroundMainColor : رنگ انیمشین را تنظیم می کند.

این آموزش هم به پایان رسید.

موفق و پیروز باشید.

مطالعه بیشتر