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

سلام دوستان امیدوارم حالتان خوب باشد در این سری از آموزش برنامه نویسی اندروید به آموزش ViewPager در برنامه نویسی اندروید می پردازیم از viewpager به منظور swipe به سمت چپ / راست استفاده می شود در ادامه برای Viewpager یک آداپتور سفارشی میسازیم تا بتوانیم ViewPager را سفارشی کنیم در ادامه با ما همراه باشید.

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

ابتدا ما در layout که ساخته شده (activity_main.xml) یک Viewpager همانند زیر قرار میدهم.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<android.support.v4.view.ViewPager

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

</RelativeLayout>

باید سه تا لایه برای Viewpager خودمان درست کنیم این بخش دست خودمان است می توانید حتی یک عدد باشد.
سه layout داریم عبارتند از

view_blue.xml
view_red.xml
view_green.xml

layout های بالا صفحه های مختلف Viewpager را تشکیل خواهند داد.
ما فقط یکی از آنها را قرار میدهیم شما بقیه را از روی همین یکی بسیازید.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="@android:color/holo_blue_dark"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Second View"
        android:layout_gravity="center_horizontal"
        android:textSize="28sp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Swipe left"
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:minLines="2"
        android:id="@+id/textView2"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Swipe right"
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:minLines="2"
        android:id="@+id/textView3"
        android:layout_alignTop="@+id/textView2"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

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

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

android:orientation="vertical" android:layout_width="match_parent"

android:background="@android:color/holo_blue_dark"

android:layout_height="match_parent">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Second View"

android:layout_gravity="center_horizontal"

android:textSize="28sp"

android:textColor="@android:color/black"

android:textStyle="bold"

android:layout_centerVertical="true"

android:layout_centerHorizontal="true"

android:id="@+id/textView" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Swipe left"

android:layout_gravity="center_horizontal"

android:textSize="20sp"

android:textColor="@android:color/black"

android:textStyle="bold"

android:minLines="2"

android:id="@+id/textView2"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Swipe right"

android:layout_gravity="center_horizontal"

android:textSize="20sp"

android:textColor="@android:color/black"

android:textStyle="bold"

android:minLines="2"

android:id="@+id/textView3"

android:layout_alignTop="@+id/textView2"

android:layout_alignParentRight="true"

android:layout_alignParentEnd="true" />

</RelativeLayout>

در اینجا برای اینکه یکسری داده sample در آن لود کنیم یک enum به نام ModelObject.java ایجاد کردیم و کدهای زیر را در آن قرار دادیم (این کلاس به POJO یا getter / setter معروف است.)

package ir.programchi.viewpager;
public enum ModelObject {
    RED(R.string.red, R.layout.view_red),
    BLUE(R.string.blue, R.layout.view_blue),
    GREEN(R.string.green, R.layout.view_green);
    private int mTitleResId;
    private int mLayoutResId;
    ModelObject(int titleResId, int layoutResId) {
        mTitleResId = titleResId;
        mLayoutResId = layoutResId;
    }
    public int getTitleResId() {
        return mTitleResId;
    }
    public int getLayoutResId() {
        return mLayoutResId;
    }
}

package ir.programchi.viewpager;

public enum ModelObject {

RED(R.string.red, R.layout.view_red),

BLUE(R.string.blue, R.layout.view_blue),

GREEN(R.string.green, R.layout.view_green);

private int mTitleResId;

private int mLayoutResId;

ModelObject(int titleResId, int layoutResId) {

mTitleResId = titleResId;

mLayoutResId = layoutResId;

}

public int getTitleResId() {

return mTitleResId;

}

public int getLayoutResId() {

return mLayoutResId;

}

کلاس بالا یا enum بالا عمل getter و setter را نیز انجام میدهد همانطور که می بینید یک Constructor نیز دارد.
یک کلاس جاوا به نام CustomPagerAdapter.java ایجاد کنید و کدهای زیر را در آن قرار دهید.

package ir.programchi.viewpager;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class CustomPagerAdapter extends PagerAdapter {
    private Context mContext;
    public CustomPagerAdapter(Context context) {
        mContext = context;
    }
    @Override
    public Object instantiateItem(ViewGroup collection, int position) {
        ModelObject modelObject = ModelObject.values()[position];
        LayoutInflater inflater = LayoutInflater.from(mContext);
        ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);
        collection.addView(layout);
        return layout;
    }
    @Override
    public void destroyItem(ViewGroup collection, int position, Object view) {
        collection.removeView((View) view);
    }
    @Override
    public int getCount() {
        return ModelObject.values().length;
    }
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
    @Override
    public CharSequence getPageTitle(int position) {
        ModelObject customPagerEnum = ModelObject.values()[position];
        return mContext.getString(customPagerEnum.getTitleResId());
    }
}

package ir.programchi.viewpager;

import android.content.Context;

import android.support.v4.view.PagerAdapter;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class CustomPagerAdapter extends PagerAdapter {

private Context mContext;

public CustomPagerAdapter(Context context) {

mContext = context;

}

@Override

public Object instantiateItem(ViewGroup collection, int position) {

ModelObject modelObject = ModelObject.values()[position];

LayoutInflater inflater = LayoutInflater.from(mContext);

ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);

collection.addView(layout);

return layout;

}

@Override

public void destroyItem(ViewGroup collection, int position, Object view) {

collection.removeView((View) view);

}

@Override

public int getCount() {

return ModelObject.values().length;

}

@Override

public boolean isViewFromObject(View view, Object object) {

return view == object;

}

@Override

public CharSequence getPageTitle(int position) {

ModelObject customPagerEnum = ModelObject.values()[position];

return mContext.getString(customPagerEnum.getTitleResId());

}

در اینجا ما اداپتور خودمان را از کلاس PagerAdapter اندروید extends سپس متودهای آن را override کردیم .
متود CustomPagerAdapter باید یک Context داشته باشد تا به آیتم ها و اشیا دسترسی بگیرد.
instantiateItem : به منظور inflate کردن layout ها ما مورد استفاده قرار می گیرد.
destroyItem : این متود view های ما رو در زمانی که استفاده ندارند حذف می کند.
getCount : این متود تعداد view های ما را برمی گرداند.
isViewFromObject : این روش بررسی می کند که آیا یک جسم خاص متعلق به یک موقعیت خاص است یا خیر .
getPageTitle : عنوان مربوط به هر تب را بر می گرداند.
در نهایت وارد MainActivity.java شده و کدهای زیر را قرار دهید.

package ir.programchi.viewpager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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 viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new CustomPagerAdapter(this));
    }
}

package ir.programchi.viewpager;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

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 viewPager = (ViewPager) findViewById(R.id.viewpager);

viewPager.setAdapter(new CustomPagerAdapter(this));

}

در بالا ابتدا viewpager را find کردیم سپس آداپتور new شده را به آن دادیم (setAdapter کردیم)

موفق باشید.

مطالعه بیشتر

5 پاسخ به “آموزش ViewPager در برنامه نویسی اندروید”

محمد گفت:
اسفند 5, 1396 در 4:53 ب.ظ
وااااای شما عالی هستید.
خیلی خیلی متشکرم.
لطف بزرگی کردید این آموزش را قرار دادید
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  اسفند 5, 1396 در 9:27 ب.ظ
  خواهش می کنم موفق باشید.
  پاسخ
مجتبی گفت:
خرداد 13, 1397 در 10:08 ب.ظ
سلام ، ممنون
من همه چیو فهمیدم ولی خب اگه میشه کمی در مورد enum توضیح بدین مرسی
من میدونم getter setter چیه ولی خب enum نمیدونم چیه مرسی
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  خرداد 14, 1397 در 3:37 ب.ظ
  سلام خواهش می کنم
  یک مطلب در اینباره در سایت قرار میدهیم.
  پاسخ
reza گفت:
بهمن 23, 1397 در 7:48 ب.ظ
سلام امکانش هست بگید چطوری می تونیم یه چنتا نقطه برای pagination در پایین این صفحات داشته باشیم؟ مثلا اگر دیده باشید توی بعضی از اپ ها وقتی اولین بار اجراشون می کنیم یه چنتا صفحه توضیح میاد بعد تو صفحه آخر دکمه ثبت نام رو میذارن. امکانش هست توضیح بدین؟ سپاس بی کران
پاسخ

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

مطالب مشابه

5 پاسخ به “آموزش ViewPager در برنامه نویسی اندروید”

دیدگاهتان را بنویسید لغو پاسخ

مطالب مشابه

5 پاسخ به “آموزش ViewPager در برنامه نویسی اندروید”

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی