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

این کتابخانه برای  اس دی کا 11 به بالا کاربرد دارد.

دستور زیر را به فایل build.gradle پروژه خود اضافه کنید و اجازه دهید اندروید استودیو کتابخانه را دانلود نماید.

dependencies {
        compile 'com.cleveroad:splittransformation:0.9.0'
    }

نحوه استفاده

در لیوت اصلی خود یک ویو پیجر ایجاد کنید.

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

یک لیوت جدید با نام pager_item ایجاد کنید و بصورت زیر تعریف کنید.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="300dp"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/image"
        android:layout_width="300dp"
        android:layout_height="400dp"
        android:layout_gravity="center_horizontal"
        android:background="#ffffff"
        android:scaleType="centerInside"
        tools:src="@drawable/administrator" />

</FrameLayout>

در فایل dimens.xml یک مقدار جدید به شکل زیر تعریف کنید.

    <dimen name="margin_top">24dp</dimen>

حال سراغ کد نویسی جاوا می رویم. ابتدا برای ویوپیجر خود یک کاستوم ادپتر ایجاد کنید. با نام SimplePagerAdapter و به شکل زیر و یا هر طور که می خواهید تغییر دهید.

private static class SimplePagerAdapter extends PagerAdapter {

        private final int[] drawables = new int[] {
                R.drawable.administrator,
                R.drawable.cashier,
                R.drawable.cook,
                R.drawable.administrator,
                R.drawable.cashier,
                R.drawable.cook,
                R.drawable.administrator,
                R.drawable.cashier,
                R.drawable.cook,
        };

        private final Context context;
        private final LayoutInflater inflater;

        public SimplePagerAdapter(Context context) {
            this.context = context;
            this.inflater = LayoutInflater.from(context);
        }

        @Override
        public int getCount() {
            return drawables.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = inflater.inflate(R.layout.pager_item, container, false);
            ImageView imageView = (ImageView) view.findViewById(R.id.image);
            imageView.setImageDrawable(ContextCompat.getDrawable(context, drawables[position]));
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }

حال به اکتیویتی اصلی خود بازگردید و کدهای زیر را در آن وارد کنید.

ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager); // تعریف اشاره گر برای ویوپیجر
        SimplePagerAdapter adapter = new SimplePagerAdapter(getBaseContext()); // تعریف اداپتر جدید برای ویو پیجر
        TransformationAdapterWrapper wrapper = TransformationAdapterWrapper 
                .wrap(getBaseContext(), adapter)
                .rows(10) // تعداد سطرهایی که در انیمیشن به آن تقسیم می شود.
                .columns(7) // تعداد ستون هایی که در انیمیشن به آن تقسیم می شوند
                .marginTop(getResources().getDimensionPixelSize(R.dimen.margin_top))
                .bitmapScale(1f)
                .build();
        viewPager.setAdapter(wrapper); // ست کردن اداپتر به ویو پیجر
        viewPager.setPageTransformer(false, wrapper);