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

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش متریال دیزاین viewPager با Indicator در برنامه نویسی اندروید می پردازیم این نوع از viewpager بسیار زیبا است در ادامه می توانید شکلی از این Indicator نا آشنا را ببینید.

indicator

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

    compile 'com.github.chenupt.android:springindicator:1.0.2@aar'
    compile 'com.github.chenupt.android:multiplemodel:1.1.0@aar'
    compile 'com.google.guava:guava:18.0'

compile 'com.github.chenupt.android:springindicator:1.0.2@aar'

compile 'com.github.chenupt.android:multiplemodel:1.1.0@aar'

compile 'com.google.guava:guava:18.0'

سپس پروژه را sync کنید (قبلا علت خطاهای مربوط به گریدل را بررسی کرده بودیم )
سپس بخش layout ما که نام آن برابر با activity_main.xml همانند زیر می شود.

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">
    <android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="10dp"
        android:minHeight="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark" />
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <github.chenupt.springindicator.viewpager.ScrollerViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center" />
        <github.chenupt.springindicator.SpringIndicator xmlns:app="http://schemas.android.com/apk/res-auto"
            app:siTextSize="18sp"
            app:siIndicatorColors="@array/indicator_colors"
            app:siTextColor="@color/colorPrimaryDark"
            app:siSelectedTextColor="@android:color/white"
            app:siIndicatorColor="@color/colorPrimary"
            android:id="@+id/indicator"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_marginLeft="24dp"
            android:layout_marginRight="24dp" />
    </FrameLayout>
</LinearLayout>

<LinearLayout 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:orientation="vertical"

tools:context=".MainActivity">

<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/tool_bar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="?attr/colorPrimary"

android:elevation="10dp"

android:minHeight="?attr/actionBarSize"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

app:theme="@style/ThemeOverlay.AppCompat.Dark" />

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<github.chenupt.springindicator.viewpager.ScrollerViewPager

android:id="@+id/view_pager"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center" />

<github.chenupt.springindicator.SpringIndicator xmlns:app="http://schemas.android.com/apk/res-auto"

app:siTextSize="18sp"

app:siIndicatorColors="@array/indicator_colors"

app:siTextColor="@color/colorPrimaryDark"

app:siSelectedTextColor="@android:color/white"

app:siIndicatorColor="@color/colorPrimary"

android:id="@+id/indicator"

android:layout_width="match_parent"

android:layout_height="56dp"

android:layout_marginLeft="24dp"

android:layout_marginRight="24dp" />

</FrameLayout>

</LinearLayout>

همان طور که میبینید شامل یک Viewpaager از همین کتاب خانه و یک object دیگر به نام SpringIndicator که همان Indicator های بالا صفحه است را تشکیل می دهد.
حالا باید صفحه فرگمنتی که توی Viewpager باید نمایش داده شود را ایجاد کنیم پس یک فایل به نام fragment.xml ایجاد کنید و کد های زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/image"
        android:layout_centerInParent="true"
        tools:src="@drawable/bg4"
        android:scaleType="centerCrop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

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

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

android:orientation="vertical">

<ImageView

android:id="@+id/image"

android:layout_centerInParent="true"

tools:src="@drawable/bg4"

android:scaleType="centerCrop"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</RelativeLayout>

حالا باید کد های مربوط به بخش MainActivity.java را قرار دهید.

package ir.programchi;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import com.google.common.collect.Lists;
import java.util.List;
import github.chenupt.multiplemodel.viewpager.ModelPagerAdapter;
import github.chenupt.multiplemodel.viewpager.PagerModelManager;
import github.chenupt.springindicator.SpringIndicator;
import github.chenupt.springindicator.viewpager.ScrollerViewPager;
public class MainActivity extends ActionBarActivity {
    ScrollerViewPager viewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ScrollerViewPager) findViewById(R.id.view_pager);
        SpringIndicator springIndicator = (SpringIndicator) findViewById(R.id.indicator);
        Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
        setSupportActionBar(toolbar);
        PagerModelManager manager = new PagerModelManager();
        manager.addCommonFragment(fragment.class, getBgRes(), getTitles());
        ModelPagerAdapter adapter = new ModelPagerAdapter(getSupportFragmentManager(), manager);
        viewPager.setAdapter(adapter);
        viewPager.fixScrollSpeed();
        // just set viewPager
        springIndicator.setViewPager(viewPager);
    }
    private List<String> getTitles(){
        return Lists.newArrayList("1", "2", "3", "4");
    }
    private List<Integer> getBgRes(){
        return Lists.newArrayList(R.drawable.bg1, R.drawable.bg2, R.drawable.bg3, R.drawable.bg4);
    }
}

package ir.programchi;

import android.content.Intent;

import android.os.Bundle;

import android.support.v7.app.ActionBarActivity;

import android.support.v7.widget.Toolbar;

import android.view.Menu;

import android.view.MenuItem;

import com.google.common.collect.Lists;

import java.util.List;

import github.chenupt.multiplemodel.viewpager.ModelPagerAdapter;

import github.chenupt.multiplemodel.viewpager.PagerModelManager;

import github.chenupt.springindicator.SpringIndicator;

import github.chenupt.springindicator.viewpager.ScrollerViewPager;

public class MainActivity extends ActionBarActivity {

ScrollerViewPager viewPager;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

viewPager = (ScrollerViewPager) findViewById(R.id.view_pager);

SpringIndicator springIndicator = (SpringIndicator) findViewById(R.id.indicator);

Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);

setSupportActionBar(toolbar);

PagerModelManager manager = new PagerModelManager();

manager.addCommonFragment(fragment.class, getBgRes(), getTitles());

ModelPagerAdapter adapter = new ModelPagerAdapter(getSupportFragmentManager(), manager);

viewPager.setAdapter(adapter);

viewPager.fixScrollSpeed();

// just set viewPager

springIndicator.setViewPager(viewPager);

}

private List<String> getTitles(){

return Lists.newArrayList("1", "2", "3", "4");

}

private List<Integer> getBgRes(){

return Lists.newArrayList(R.drawable.bg1, R.drawable.bg2, R.drawable.bg3, R.drawable.bg4);

}

در ابتدا view های مربوط به viewpager و Indicator و Toolbar را به دست آوردیم سپس یک PagerModelManager جدید ایجاد کرده تا صفحه های مربوط به Fragment را handle کنیم و سپس adapter خودمان را بروی Indicator ست کردیم تا هر وقت صفحه viewpager عوض شد Indicator نیز عوض شد و برای اینکه هر صفحه یک عکس داشته باشد ما در فولدر Drawbale عکس هایی را با نام ( bg1,bg2,bg3,bg4 ) قرار داده ایم خودتان عکس های Sample قرار دهید برای تست تا به خطا نخورید و برای اینکه Indicator ما یک متنی داشته باشد (در اینجا عدد است ولی شما هر چی خواستید می تونید قرار دهید) یک void به نام getTitles درست کردیم تا مقدار آن را return کند ( بازگرداند ) .
حالا باید کد های مربوط به صفحه فرگمنتون رو در یک فایل به نام fragment.java قرار دهیم.
پس fragment.java ما مثل زیر می شود.

package ir.programchi;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
/**
 * Created by jefferson on 2015/1/31.
 *
 */
public class fragment extends Fragment{
    private int bgRes;
    private ImageView imageView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        bgRes = getArguments().getInt("data");
    }
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment, container, false);
    }
    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        imageView = (ImageView) getView().findViewById(R.id.image);
        imageView.setBackgroundResource(bgRes);
    }
}

package ir.programchi;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

/**

* Created by jefferson on 2015/1/31.

public class fragment extends Fragment{

private int bgRes;

private ImageView imageView;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

bgRes = getArguments().getInt("data");

}

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment, container, false);

}

@Override

public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {

super.onViewCreated(view, savedInstanceState);

imageView = (ImageView) getView().findViewById(R.id.image);

imageView.setBackgroundResource(bgRes);

}

و تمام حالا برنامه را تست کنید.

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

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

مطالعه بیشتر

مطالب مشابه

ادامه مطلب

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

ادامه مطلب

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

ادامه مطلب

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

ادامه مطلب

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

ادامه مطلب

ایجاد رویداد کلیک برای دکمه به زبان کوتلین در اندروید

ادامه مطلب

آموزش horizontal Progress Bar در برنامه نویسی اندروید

ادامه مطلب

آموزش تشخیص نوع فایل در برنامه نویسی اندروید

ادامه مطلب

Rating Bar (نوار امتیاز) متریال دیزاین در اندروید

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

nima1382na گفت:
تیر 27, 1396 در 2:43 ب.ظ
سلام استاد
من تو سینک شدن گردل مشکل دارم تو این آموزش
وقتی کتابخانه رو اضافه کردم ، فیلتر شکن ه*ا*ت* ا**س**پ*ا*ت رو روشن کردم و سینک کردم ولی هنوزم ارور میده
ممنون میشم چک کنید ببینید کتابخانه ای ک دادید درسته یا اینکه چرا برای من سینک نمیشه …
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  تیر 27, 1396 در 4:00 ب.ظ
  سلام و درود بررسی شد مشکلی ندارد ولی در صورتی که بازم هم خطا داشتید وارد فایل build.gradle شده از نوع Top level و خط های زیر را به dependencies اضافه کنید.
  MainActivity.java
  jcenter() maven { url 'https://jitpack.io' } mavencentral()
  1
  2
  3
  jcenter()
  maven { url 'https://jitpack.io' }
  mavencentral()
  موفق و موید باشید.
  پاسخ
  1. nima1382na گفت:
    تیر 27, 1396 در 5:27 ب.ظ
    سلام
    خیلی ممنون این مشکلم درست شده
    ولی ی مشکل دیگ داشتم ک تو سوالات پرسیدم
    ممنون میشم پاسخ بدید ????
    http://programchi.ir/questions/%d9%85%d8%b4%da%a9%d9%84-%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/
    پاسخ
    1. محمد حسین جعفری پور مدیر سایت گفت:
      تیر 27, 1396 در 5:55 ب.ظ
      پاسخ میدهیم
      پاسخ
    2. محمد حسین جعفری پور مدیر سایت گفت:
      تیر 27, 1396 در 5:58 ب.ظ
      خواهش می کنم پاسخ داده شد.
      پاسخ
nima1382na گفت:
تیر 27, 1396 در 7:03 ب.ظ
استاد شرمنده که هی مزاحم میشم و با سوالام سرتونو درد میارم 🙁
برام یه مشکل دیگه پیش اومد …
http://uupload.ir/files/9q3n_2017-07-18_012231.png
اگه میشه این رو هم یه چک بکنید
ممنون میشم
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  تیر 27, 1396 در 7:31 ب.ظ
  کتاب خانه زیر را اضافه کنید
  compile 'com.google.guava:guava:22.0'
  1
  compile 'com.google.guava:guava:22.0'
  یا اگر نشد زیری را اضافه کنید
  compile 'com.google.guava:guava:22.0-android'
  1
  compile 'com.google.guava:guava:22.0-android'
  پاسخ
  1. nima1382na گفت:
    تیر 27, 1396 در 7:50 ب.ظ
    ممنون استاد مشکلم حل شد
    پاسخ
    1. محمد حسین جعفری پور مدیر سایت گفت:
      تیر 27, 1396 در 8:14 ب.ظ
      موفق باشید.
      پاسخ
  2. nima1382na گفت:
    تیر 27, 1396 در 7:56 ب.ظ
    استاد میتونم ایدی تلگرامتون رو داشته باشم ؟
    خواهشا اگ میشه بدید بهم خیلی ضروریع
    پاسخ
    1. محمد حسین جعفری پور مدیر سایت گفت:
      تیر 27, 1396 در 8:58 ب.ظ
      امکان پاسخ به صورت مجزا وجود ندارد متاسفم
      پاسخ
nima1382na گفت:
تیر 27, 1396 در 7:16 ب.ظ
اینم یه نگاه بندازین
من اومدم Lists رو عوض کردم و به جاش نوشتم List ( البته به احتمال زیاد اشتباه کردم )
این ارور رفع شد ولی یه ارور دیگ هست :
http://uupload.ir/files/9h1_2017-07-18_084351.png
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  تیر 27, 1396 در 7:31 ب.ظ
  پاسختون رو در نظر قبلی دادم موفق باشید.
  پاسخ
nima1382na گفت:
تیر 27, 1396 در 9:09 ب.ظ
استاد باز ی مشکا پیش اومد
واقعا میدونم دیگ از دستم خسته شدید از بس رو مختون رفتم و سوال پرسیدم …
http://uupload.ir/files/nl0f_2017-07-18_103434.png
مشکلش چیه ؟
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  تیر 27, 1396 در 9:28 ب.ظ
  دوست عزیز آموزش را خوب مطالعه کنید این همون fragment هست که باید در فولدر layout درست می کردید.
  موفق و موید باشید.
  پاسخ
nima1382na گفت:
تیر 27, 1396 در 11:31 ب.ظ
سلام استاد
میشه بگید مشکلش چیههه ؟
لینک قبلیه خراب بود …
http://uupload.ir/files/guzp_2017-07-18_012231.png
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  تیر 27, 1396 در 11:49 ب.ظ
  سلام به خطا توجه نکنید بیشتر shape هایی که در layout قرار میگیرد این خطا ها را دارند (بیشتر کتاب خانه این مشکل را دارند) برنامه در زمان اجرا خطا نخواهد داشت.
  اگر می خواهید این مشکل را حل کنید از توی منوی فایل Invalidate / cache restart را بزنید.
  پاسخ

سلام.ممنون از آموزش هاي خوبتون.من اگر بخوام صفحه هر از چند ثانيه خود به خود تغيير كنه بايد چكار كنم؟مثل اسلايد شو هاي تبليغاتي.ممنون ميشم پاسخ بديد

پاسخ

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

Runnable runnable = new Runnable() {
    public void run() {
        if (myAdapter.getCount() == page) {
            page = 0;
        } else {
            page++;
        }
        viewPager.setCurrentItem(page, true);
        handler.postDelayed(this, 2000);
    }
};

Runnable runnable = new Runnable() {

public void run() {

if (myAdapter.getCount() == page) {

page = 0;

} else {

page++;

}

viewPager.setCurrentItem(page, true);

handler.postDelayed(this, 2000);

}

};

موفق باشید.

پاسخ

مهدی پور گفت:
دی 3, 1397 در 7:30 ق.ظ
سلام استاد وقت شما بخیر
اگه بخوام به جای عکس هر صفحه محتوای جداگانه داشته باشه چطور
مثلا یک صفحه شامل ی سری دکمه باشه و صفحه بعد شامل متن
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  دی 3, 1397 در 1:55 ب.ظ
  سلام و درود این برمیگرده به فرگمنت شما حالا شما کافیه یکسری فرگمنت درست کنید و لود کنید
  پاسخ

مطالب مشابه

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

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

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