اندروید کنترل های UI متعددی را در اختیار توسعه دهندگان قرار می دهد تا از آنها برای ساخت صفحات UI استفاده نمایند. یکی از نیازمندی های رایج UI اسلاید شدن بین چندین صفحه برای نمونه یک اسلایدشوی عکس است. اندروید یک کنترل UI را جهت ساخت اسکرین های اسلایدینگ در اختیار قرار داده که ViewPager نام دارد. در این مطلب آموزشی قصد داریم نحوه استفاده از ViewPager جهت ساخت رابط کاربری اسلایدینگ اسکرین در اپلیکیشن های اندروید را شرح دهیم، کدهای این مطلب را می توانید با کمک این لینک دانلود نمایید.

افزودن ViewPager به اکتیویتی

یک پروژه جدید از نوع Blank Activity بسازید و کار را با افزودن یک ViewPager به اکتیویتی آغاز نمایید، مشابه سایر کنترل های UI باید ViewPager را در فایل لی اوت تعریف کنید.

فایل activity_main.xml را مطابق زیر تغییر دهید:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v4.view.ViewPager
        android:id="@+id/vpPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pager_header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            />
    </android.support.v4.view.ViewPager>
</LinearLayout>

در لی اوت بالا یک LinearLayout وجود دارد که دربرگیرنده یک ViewPager با آی دی “vpPage” می باشد. یک ویوی تو در تو به نام PagerTabStrip وجود دارد که بسته به تعداد صفحات در ViewPager، تب ها را در قسمت بالای صفحه به نمایش می گذارد. زمانی که یک لی اوت ساختید، فایل MainActivity.java را به منظور استفاده از این لی اوت مشابه زیر آپدیت کنید:

package com.viewpagerandroid; // Update to match your package
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewPager vpPager = (ViewPager) findViewById(R.id.vpPager);
    }
}

در کد بالا l یک MainActivity است که لی اوت ساخته شده را ست می کند، سپس با استفاده از تابع findViewById به جستجوی یک رفرنس از ViewPager می پردازد.

ساخت فرگمنت برای ViewPager

لازم است تمامی اسکرین های موجود در ViewPager را به عنوان یک فرگمنت تعریف کنید. هر اسکرین می تواند یک نمونه از کلاس های Fragment متفاوت یا نمونه های مختلف از کلاس فرگمنت مشابه با محتوای متغیر باشد. این اپلیکیشن سه اسکرین خواهد داشت، دو اسکرین با فیلد متن و یک عکس و اسکرین دیگر با یک فیلد متن و دو عکس، از این رو به دو کلاس فرگمنت نیاز خواهید داشت.

لی اوت ها و کلاس های فرگمنت مطابق زیر خواهند بود:

fragment_one_img.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/txtMain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <ImageView
        android:id="@+id/imgMain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

FragmentWithOneImage.java

package com.viewpagerandroid;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
public class FragmentWithOneImage extends Fragment {
    private String title;
    private int image;
    public static FragmentWithOneImage newInstance(String title, int resImage) {
        FragmentWithOneImage fragment = new FragmentWithOneImage();
        Bundle args = new Bundle();
        args.putInt("image", resImage);
        args.putString("title", title);
        fragment.setArguments(args);
        return fragment;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        image = getArguments().getInt("image", 0);
        title = getArguments().getString("title");
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_one_img, container, false);
        TextView tvLabel = (TextView) view.findViewById(R.id.txtMain);
        tvLabel.setText(title);
        ImageView imageView = (ImageView) view.findViewById(R.id.imgMain);
        imageView.setImageResource(image);
        return view;
    }
}

fragment_two_images.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/txtMain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <ImageView
        android:id="@+id/imgMain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ImageView
        android:id="@+id/imgSecondary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

FragmentWithTwoImages.java

package com.viewpagerandroid;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
public class FragmentWithTwoImages extends Fragment {
    private String title;
    private int imageMain;
    private int imageSecondary;
    public static FragmentWithTwoImages newInstance(String title, int resMainImage, int resSecondaryImage) {
        FragmentWithTwoImages fragment = new FragmentWithTwoImages();
        Bundle args = new Bundle();
        args.putInt("imageMain", resMainImage);
        args.putInt("imageSecondary", resSecondaryImage);
        args.putString("title", title);
        fragment.setArguments(args);
        return fragment;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        imageMain = getArguments().getInt("imageMain", 0);
        imageSecondary = getArguments().getInt("imageSecondary", 0);
        title = getArguments().getString("title");
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_two_images, container, false);
        TextView tvLabel = (TextView) view.findViewById(R.id.txtMain);
        tvLabel.setText(title);
        ImageView imageView = (ImageView) view.findViewById(R.id.imgMain);
        imageView.setImageResource(imageMain);
        ImageView imageViewSecondary = (ImageView) view.findViewById(R.id.imgSecondary);
        imageViewSecondary.setImageResource(imageSecondary);
        return view;
    }
}

در کد بالا FagmentWithOneImage دارای یک متد getInstance است که متن و آی دی منبع عکس نمایش داده شده در فرگمنت را می گیرد. فرگمنت لی اوت fragment_one_img.xml را پر کرده و متن و آی دی منبع عکس را ست می کند.

به طور مشابه FragmentWithTwoImages نیز لی اوت fragment_two_iamges.xml را پر کرده و متن و دو آی دی منبع عکس ها را ست می کند.

جایگذاری PagerAdapter

حال که کار ساخت فرگمنت ها تمام شد، به یک PagerAdapter جهت ست کردن بر روی ViewPager نیاز دارید. می توانید آن را به طور مستقیم از PagerAdapter نیز اکستند کنید، اما اندروید یک کلاس پایه به نام FragmentPagerAdapter را در اختیار قرار داده که عملکردهای ابتدایی برای نمایش فرگمت به عنوان صفحات در PagerAdapter را پیاده سازی می کند.

با افزودن این کلاس به MainActivity.java می توانید adapter را از FragmentPagerAdapter اکستند کنید:

public static class MyPagerAdapter extends FragmentPagerAdapter {
    private static int NUM_ITEMS = 3;
    public MyPagerAdapter(FragmentManager fragmentManager) {
        super(fragmentManager);
    }
    // Returns total number of pages.
    @Override
    public int getCount() {
        return NUM_ITEMS;
    }
    // Returns the fragment to display for a particular page.
    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return FragmentWithOneImage.newInstance("Fragment 1", R.drawable.android_1);
            case 1:
                return FragmentWithOneImage.newInstance("Fragment 2", R.drawable.android_2);
            case 2:
                return FragmentWithTwoImages.newInstance("Fragment 3", R.drawable.android_3, R.drawable.android_4);
            default:
                return null;
        }
    }
    // Returns the page title for the top indicator
    @Override
    public CharSequence getPageTitle(int position) {
        return "Tab " + position;
    }
}

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

کلاس MyPagerAdapter از FragmentPagerAdapter اکستند شده و متد getCount را که تعداد صفحاتی را که اداپتر به نمایش خواهد گذاشت، بر می گرداند، اورراید می نمایند. در این مثال می خواهیم سه صفحه را به نمایش گذاریم، بنابراین متد سه را برمی گرداند. متد getItem نمونه ای از فرگمنت را برای نمایش در صفحه برمی گرداند.

متد getPageTitle نیز عنوان هریک از صفحات را برمی گرداند. زمانی که MyPagerAdapter را ساختید، باید نمونه ای از آن را بر روی ViewPager در تابع onCreate ست کنید، نحوه کار در زیر نمایش داده شده است:

FragmentPagerAdapter adapterViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ViewPager vpPager = (ViewPager) findViewById(R.id.vpPager);
    adapterViewPager = new MyPagerAdapter(getSupportFragmentManager());
    vpPager.setAdapter(adapterViewPager);
  }

با اجرای اپلیکیشن سه صفحه را مشاهده می کنید که حرکت می کنند.

افزودن انیمیشن به اسکرین اسلاید

با ست کردن یک ViewPager.PageTransformer قادر به جایگذاری انیمیشن های مختلف در اسلاید صفحه هستید. برای این کار باید متد tranformPage را اورراید نمایید. در این تابع انیمیشن های کاستوم را مبنی بر موقعیت صفحه ارائه می دهید، ترانسفورم های متعددی به صورت لایبرری های اپن سورس در دسترس شما قرار دارند، برای نمونه ToxicBakery.ViewPagerTransforms.

جهت استفاده از یک انیمیشن کاستوم آن را به شکل زیر به وابستگی های build.gradle اضافه کنید:

dependencies {
  ...
  compile 'com.ToxicBakery.viewpager.transforms:view-pager-transforms:1.2.32@aar'
}

هم اکنون به طوری که در زیر نمایش داده شده، قادر به اضافه کردن PageTransformer بر روی ViewPager در متد onCreate هستید:

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   ViewPager vpPager = (ViewPager) findViewById(R.id.vpPager);
   adapterViewPager = new MyPagerAdapter(getSupportFragmentManager());
   vpPager.setAdapter(adapterViewPager);
   vpPager.setPageTransformer(true, new RotateUpTransformer());
}

حال اگر اپلیکیشن را به اجرا در آورید و در صفحات اسلاید کنید، صفحات در هنگام اسلاید می چرخند.

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

https://www.sitepoint.com برگرفته از