آموزش ساخت ViewPager متریال دیزاین با Indicator در برنامه نویسی اندروید

سلام دوستان در این سری از آموزش های برنامه نویسی اندروید به آموزش ساخت ViewPager متریال دیزاین با Indicator در برنامه نویسی اندروید می پردازیم قبلتر یک نمونه از این نوع Viewpager بعلاوه Indicator برای شما قرار داده بودیم که با استقبال خوبی همراه بود امروز نوع دیگری از آن را برای شما آماده کرده ایم در ادامه می توانید عکس متحرک آن را مشاهد کنید در ادامه با ماه همراه باشید.

 
همانطور که میبینید بسیاز زیبا است.
مثل همیشه برای استفاده از آن باید وارد فایل  Build.gradle شده از نوع module سپس در قسمت dependencies خط زیر را قرار دهید.

compile 'com.steelkiwi:indicator-view:1.0.0'

سپس پروژه را sync کنید (باز هم تکرار می کنم علت خطا های گریدل را قبلا بررسی کرده ایم لطفا ابتدا در سایت جستجو کنید اگر پیدا نکردید بپرسید)
دوستان اگر شما view pager رو ایجاد کردید و فقط می خواهید این بخش پایین آن ( Indicator ) رو اضافه کنید می تونید به شکل زیر عمل کنید.

<steelkiwi.com.library.view.IndicatorView
    android:id="@+id/indicator"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:iv_bar_color="@android:color/black"
    app:iv_corner_radius="3dp"
    app:iv_idle_color="@color/item_idle_color"
    app:iv_select_color="@color/item_select_color"
    app:iv_text_color="@android:color/white"
    app:iv_text_size="@dimen/text_size"
    app:iv_action="hang_down"
    app:iv_item_amount="6"/>

iv_bar_color رنگ پشت زمینه Indicator را تنظیم می کند.
iv_corner_radius حالت گرد مانند برای هر Indicator در نظر می گیرد.
iv_idle_color رنگ خود Indicator را تغییر میدهد.
iv_select_color رنگ زمانی که روی هر صفحه از Indicator هستید رو تنظیم می کند ( رنگ خود Indicaotr )
iv_text_color رنگ متن Indicator را تنظیم می کند.
iv_text_size اندازه متن هر Indicator را تعیین می کند.
iv_action اگر دیده باشید Indicator به سمت پایین افتاده است اگر خواستید به سمت بالا افتاده باشد مقدار این ویژگی را برابر با look_up قرار دهید.
تعداد Indicator که می خواهید نمایش دهید باید با تعداد Viewpager برابر باشد.
و کد جاوای مربوط به آن

IndicatorView indicator = (IndicatorView) findViewById(R.id.indicator);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
indicator.attachViewPager(viewPager);

حالا ما برای عزیزانی که viewpager نساخته اند کد کامل را قرار میدهیم .
ابتدا یک فایل به نام activity_main.xml ایجاد کنید کد های زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:background="@android:color/white"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <steelkiwi.com.library.view.IndicatorView
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:iv_bar_color="@android:color/black"
        app:iv_corner_radius="@dimen/radius"
        app:iv_idle_color="@color/item_idle_color"
        app:iv_select_color="@color/item_select_color"
        app:iv_size="@dimen/item_size"
        app:iv_text_color="@android:color/white"
        app:iv_text_size="@dimen/text_size"
        app:iv_action="hang_down"
        app:iv_item_amount="6"/>
</RelativeLayout>

سپس فایل colors.xml که در پوشه res/values قرار دارد را باز کرده کد های زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#b93b04</color>
    <color name="colorAccent">#FF4081</color>
    <color name="color1">#dc602a</color>
    <color name="item_idle_color">#999999</color>
    <color name="item_select_color">#666666</color>
</resources>

حالا فایل dimens.xml که در همان مسیر قرار دارد را باز کرده یا ایجاد کرده و کد های زیر را در آن قرار دهید.

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="radius">4dp</dimen>
    <dimen name="item_size">40dp</dimen>
    <dimen name="text_size">12sp</dimen>
</resources>

حالا برای اینکه یک دیتایی در pageview خودمان نمایش دهیم یک layout به نام image_layout.xml ایجاد کنید و کد زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color1">
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        android:layout_centerInParent="true"/>
</RelativeLayout>

چیزی که دقیقا نمایش داده می شود همان عدد هایی است که با تغییر صفحه در viewpager آنها نیز تغییر می کند.
برای اینکه مقدار Textview که در وسط صفحه است در هر بار تغییر کند ما نیاز به یک آداپتور داریم علت ایجاد آداپتور را به صورت کامل در یک مطلب جداگانه ایجاد کرده ایم می توانید برای اطلاعات بیشتر به آن مراجعه کنید.
پس یک فایل به نام TutorialAdapter.java ایجاد کرده و کد زیر را در آن قرار دهید.

package ir.programchi;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
import steelkiwi.com.pagerindicator.custom.CustomPagerAdapter;
/**
 * Created by Jefferson on 2/20/17.
 */
public class TutorialAdapter extends CustomPagerAdapter<TutorialAdapter.ViewHolder> {
    private Context context;
    private LayoutInflater inflater;
    private List<Integer> tutorialImage = new ArrayList<>();
    public TutorialAdapter(Context context) {
        this.context = context;
    }
    @Override
    public TutorialAdapter.ViewHolder onCreateViewHolder(ViewGroup parent) {
        if(inflater == null) {
            inflater = LayoutInflater.from(parent.getContext());
        }
        View view = inflater.inflate(R.layout.image_layout, parent, false);
        return new ViewHolder(view);
    }
    @Override
    public void onBindViewHolder(TutorialAdapter.ViewHolder viewHolder, int position) {
        viewHolder.text.setText(String.valueOf(position + 1));
    }
    @Override
    public int getCount() {
        return tutorialImage.size();
    }
    public void setTutorialImage(List<Integer> tutorialImage) {
        this.tutorialImage.clear();
        this.tutorialImage.addAll(tutorialImage);
        notifyDataSetChanged();
    }
    public class ViewHolder extends CustomPagerAdapter.ViewHolder {
        TextView text;
        public ViewHolder(View itemView) {
            super(itemView);
            text = (TextView) itemView.findViewById(R.id.text);
        }
    }
}

و در آخر هم بعد از ایجاد Adapter کد بخش MainActivtiy.java همانند زیر می شود.

package ir.programchi;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
import steelkiwi.com.library.view.IndicatorView;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        List<Integer> images = new ArrayList<>();
        images.add(R.color.color1);//1
        images.add(R.color.color1);//2
        images.add(R.color.color1);//3
        images.add(R.color.color1);//4
        images.add(R.color.color1);//5
        images.add(R.color.color1);//6
        images.add(R.color.color1);//7
        images.add(R.color.color1);//8
        images.add(R.color.color1);//9
        images.add(R.color.color1);//10
        images.add(R.color.color1);//11
        images.add(R.color.color1);//12
        images.add(R.color.color1);//13
        images.add(R.color.color1);//14
        TutorialAdapter adapter = new TutorialAdapter(this);
        final IndicatorView indicator = (IndicatorView) findViewById(R.id.indicator);
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.setAdapter(adapter);
        adapter.setTutorialImage(images);
        indicator.attachViewPager(viewPager);
    }
}

کار خاصی در بالا انجام ندادیم ابتدا یک لیست درست کردیم وبه تعداد 14 تا رنگ برای هر صفحه در نظر گرفتیم (تمامی صفحه یک رنگ است خواستید می توانید تغییرش دهید) و از آداپتورمان استفاده کردیم و در آخر هم برای وصل شدن Indicator به ViewPager از attachViewPager استفاده کردیم.
 
این آموزش هم به پایان رسید.
 
موفق و موید باشید.

مطالعه بیشتر