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

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش متریال دیزاین viewPager با Indicator در برنامه نویسی اندروید می پردازیم این نوع از viewpager بسیار زیبا است در ادامه می توانید شکلی از این 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'

سپس پروژه را 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>

همان طور که میبینید شامل یک 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>

حالا باید کد های مربوط به بخش 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);
    }
}

در ابتدا 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);
    }
}

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

مطالعه بیشتر