View Pager متریال در اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش View Pager متریال در اندروید می پردازیم از ViewPager به منظور نمایش فرگمنت یا عکس یا داده خاصی مورد استفاده قرار می گیرید در ادامه پیش نمایش آن را برای شما قرار میدهیم ما در این آموزش همراه با ViewPager از InfiniXIndicator یا نقطه هایی استفاده می کنیم که با تغییر ViewPager آنها نیز تغییر می کنند تا کمی شکل ظاهری متفاوت تری نسبت به ViewPager ساده داشته باشند.

ابتدای کار وارد فایل Build.gradle از نوع Top Level شده و در بخش repositories خط زیر را اضافه کنید. در واقع با تغییر ViewPager نقطه ها یا همان indicator ها نیز تغییر خواهند کرد.

maven {
        url  "https://dl.bintray.com/dgunjit14/Infinix-Indicator"
}

maven {

url "https://dl.bintray.com/dgunjit14/Infinix-Indicator"

}

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

compile 'com.grappes:Infinix-Indicator:1.0.2'

1	compile 'com.grappes:Infinix-Indicator:1.0.2'

پروژه را sync کنید.
برای استفاده از آن شما لازمه از آموزش های قبلی برای لود ViewPager استفاده کنید و در واقع فقط در اینجا Indicator را ما معرفی می کنیم.
کد مربوط به layout همانند زیر است.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    android:background="#ffffff"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".ExampleActivity">
   <com.grappes.infinixindicator.InfiniXIndicator
       android:layout_width="match_parent"
       android:layout_height="22dp"
       android:id="@+id/infinix_indicator"
       android:layout_marginBottom="40dp"
       app:x_background_color="@color/sample_bg"
       app:x_dot_unselected_color="@color/sample_dot_light"
       app:x_dot_selected_color="@color/sample_dot_dark"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"/>
   <android.support.v4.view.ViewPager
       android:id="@+id/view_pager"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/infinix_indicator"
       tools:layout_editor_absoluteX="0dp"></android.support.v4.view.ViewPager>
</android.support.constraint.ConstraintLayout>

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

<android.support.constraint.ConstraintLayout 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"

android:background="#ffffff"

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

tools:context=".ExampleActivity">

<com.grappes.infinixindicator.InfiniXIndicator

android:layout_width="match_parent"

android:layout_height="22dp"

android:id="@+id/infinix_indicator"

android:layout_marginBottom="40dp"

app:x_background_color="@color/sample_bg"

app:x_dot_unselected_color="@color/sample_dot_light"

app:x_dot_selected_color="@color/sample_dot_dark"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"/>

<android.support.v4.view.ViewPager

android:id="@+id/view_pager"

android:layout_width="match_parent"

android:layout_height="0dp"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintTop_toBottomOf="@+id/infinix_indicator"

tools:layout_editor_absoluteX="0dp"></android.support.v4.view.ViewPager>

</android.support.constraint.ConstraintLayout>

برای اینکه آن را find کنیم می توانید مثل زیر عمل کنید.

ViewPager viewPager = findViewById(R.id.view_pager);
InfiniXIndicator infiniXIndicator = findViewById(R.id.infinix_indicator);

1 2	ViewPager viewPager = findViewById(R.id.view_pager); InfiniXIndicator infiniXIndicator = findViewById(R.id.infinix_indicator);

در بالا indicator را find کردیم.
برای اینکه adapter را ست کنید مثل زیر عمل کنید.

YourAdapter adapter = new YourAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
infiniXIndicator.setViewPager(viewPager);

YourAdapter adapter = new YourAdapter(getSupportFragmentManager());

viewPager.setAdapter(adapter);

infiniXIndicator.setViewPager(viewPager);

شما می توانید برای indicator رویداد نیز تعریف کنید مثل زیر

infiniXIndicator.setOnPageChangeListener(new InfiniXIndicator.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

infiniXIndicator.setOnPageChangeListener(new InfiniXIndicator.OnPageChangeListener() {

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override

public void onPageSelected(int position) {

}

@Override

public void onPageScrollStateChanged(int state) {

}

});

برای سفارشی سازی Indicator هم می توانید از سه ویژگی زیر استفاده کنید.

app:x_background_color="@color/sample_bg"
app:x_dot_unselected_color="@color/sample_dot_light"
app:x_dot_selected_color="@color/sample_dot_dark"

app:x_background_color="@color/sample_bg"

app:x_dot_unselected_color="@color/sample_dot_light"

app:x_dot_selected_color="@color/sample_dot_dark"

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

مطالعه بیشتر

View Pager متریال در اندروید

مطالب مشابه

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

مطالب مشابه

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

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