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

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

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

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

1	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"/>

<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);

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>

<?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>

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

</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>

</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>

<?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);
        }
    }
}

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);
    }
}

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 استفاده کردیم.

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

موفق و موید باشید.

مطالعه بیشتر

مطالب مشابه

ادامه مطلب

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

ادامه مطلب

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

ادامه مطلب

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

ادامه مطلب

آموزش RunTime Permission در برنامه نویسی اندروید با Dexter

ادامه مطلب

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

ادامه مطلب

آموزش ساخت عکس گرد در اندروید

ادامه مطلب

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

ادامه مطلب

آموزش روشن و خاموش کردن Gps بدون نمایش Dialog در برنامه نویسی اندروید

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

nima1382na گفت:
تیر 29, 1396 در 2:26 ب.ظ
سلام استاد من وقتی کتابخوانه رو سینک کردم این مشکل برام پیش اومد :
http://uupload.ir/files/urfz_2017-07-18_012231.png
توی SDK manager هم رفتم برای دانلود اما پیداش نکردم
ممنون میشم کمکم کنید ….
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  تیر 29, 1396 در 3:22 ب.ظ
  سلام و فکر کنم حدودا این نهمین باری باشه که این رو میگ ابتدا ف****ی*ل**ت*ر ش**ک*ن را روشن کرده سپس وارد فایل build.gradle شده از نوع Top level در بخش repositories دومی خط های زیر را اضافه کنید.
  MainActivity.java
  jcenter() maven { url 'https://jitpack.io' } mavencentral()
  1
  2
  3
  jcenter()
  maven { url 'https://jitpack.io' }
  mavencentral()
  یا ممکن است شما دارید از sdk استفاده می کنید که پایین تر باشد.
  موفق و موید باشید
  پاسخ

باعرض سلام.
ببخشید اینجا که گفتید یک فایل به نام TutorialAdapter.java درست کنیم منظورتون از فایل چیه؟ کلاس؟ اکتیویتی؟
هم چنین در کد های این قسمت،بنده نمی تونم TutorialAdapter را اکستند کنم از CustomPagerAdapter ،میگه باید کلاس CustomPagerAdapter را بسازی.
ممنون میشم راهنمایی ام کنید. لازم به ذکر است که بنده کد های این قسمت را نمی خوام استفاده کنم. بلکه برای این پست میخوام:
https://programchi.ir/2017/07/30/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-bottom-navigation-%D9%85%D8%AA%D8%B1%DB%8C%D8%A7%D9%84-%D8%AF%DB%8C%D8%B2%D8%A7%D9%86-%D8%AF%D8%B1-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C/
اما چون در این پست آموزش ندادید و گفتید به آموزش های Viewpager مراجعه کنید مجبور شدم از این قسمت استفاده کنم.

پاسخ

سلام و درود لینکی که قرار دادید فکر می کنم اشتباه است و در مورد CustomPageAdapter حتما یک آداپتور سفارشی است که قرار دادیم لطفا لینک را قرار دهید تا بیشتر راهنمایتان کنیم.
موفق باشید

پاسخ

سلام ضمن تشکر از پاسخگویی تان.
بنده بررسی کردم لینک درست بود. با این حال مجددا لینک مرتب شده را قرار میدهم:
https://goo.gl/gffevJ
بنده توی آموزش bottom-navigation می خوام با کلیک بر روی هر آیکن یه صفحه بیاد. اونجا نوشته اید برای اینکار باید از viewpager استفاده کنیم. اما آموزشی قرار نداده اید. توی همین پست این کار را کرده اید. اما متاسفانه به همان ارور هایی که خدمتتون عرض کردم بر می خورم و متد CustomPagerAdapter را نمی شناسد.
به طور خلاصه بنده می خوام این کار را بکنم:
از pager این آموزش برای آموزش bottom-navigation استفاده کنم چون در خود آموزش bottom-navigation چیزی مطرح نشده است.

پاسخ

سلام و درود درسته لینک مشکلی نداشت اشتباه از ما بود.
شما ابتدا مثل زیر یک adapter درست کنید.

 class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();
        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }
        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }
        @Override
        public int getCount() {
            return mFragmentList.size();
        }
        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }
        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }

class ViewPagerAdapter extends FragmentPagerAdapter {

private final List<Fragment> mFragmentList = new ArrayList<>();

private final List<String> mFragmentTitleList = new ArrayList<>();

public ViewPagerAdapter(FragmentManager manager) {

super(manager);

}

@Override

public Fragment getItem(int position) {

return mFragmentList.get(position);

}

@Override

public int getCount() {

return mFragmentList.size();

}

public void addFragment(Fragment fragment, String title) {

mFragmentList.add(fragment);

mFragmentTitleList.add(title);

}

@Override

public CharSequence getPageTitle(int position) {

return mFragmentTitleList.get(position);

}

سپس به viewpager خودتان setAdapter کنید آموزش کامل Viewpager قرار می گیرد در سایت .
موفق باشید.

پاسخ

میثم گفت:
دی 28, 1397 در 8:09 ب.ظ
سلام
اینجا ارور میده
import steelkiwi.com.pagerindicator.custom.CustomPagerAdapter;
این رو پیدا نمیکنه
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  دی 29, 1397 در 12:57 ب.ظ
  شما این رو حذف کنید و دوباره import کنید مشکل حل میشه
  پاسخ

مطالب مشابه

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

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

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