آموزش بروزرسانی شد و سورس کد آماده ی اندرویدی استدیو به آخر اموزش اضافه شد

 

محتویات این مقاله ی آموزشی : 

• در این آموزش قصد داریم یک اسلایدر بسازیم که تصاویر خودش را از URL فراخوانی کند . 
• در این آموزش ما نحوه ی واکشی تصاویر از سمت سرور درون یک اسلایدر که با کمک Viewpager پیاده میشود را کار میکنیم .
• این آموزش در محیط Android Studio میباشد . 
• برای فراخوانی تصاویر از url ما از کتابخانه ی Glide استفاده خواهیم کرد .
• اسلایدر ما قابلیت اسلایدشو بودن یا حرکت خودکار ار خواهد داشت . 
• در این اسلایدر کاربر میتواند با کشیدن تصاویر به چپ و راست بین اسلایدها حرکت کند . 

 

آموزش ساخت اسلایدر آنلاین در محیط android studio

در ویدیو زیر شما نتیجه ی نهایی این آموزش را میبینید : 

 

 

مرحله ی 1 : تغییرات فایل Gradle را انجام دهید:

ما قصد داریم از دو کتابخانه استفاده کنیم که باید آنها را به گردل اضافه کنیم . کتابخانه ی ViewPagerIndicator   و Glide .

فایل  build.gradle(Module: app) را باز کنید و سه خط زیر را اضافه کنید : 

implementation 'com.github.JakeWharton:ViewPagerIndicator:2.4.1'
implementation 'com.github.bumptech.glide:glide:4.7.1'
implementation 'com.android.support:design:27.1.0'

 

مرحله ی 2 : اضافه کردن مجوز ها یا Permission ها:

برای اینکه ما تصاویر را از اینترنت فراخوانی میکنیم به مجوز اینترنت نیاز داریم که در فایل AndroidManifest.xml درون سورس کد خود در محیط  اندروید استودیو ، مجوز را اضافه کنیم :

 <uses-permission android:name="android.permission.INTERNET"/>

 

مرحله ی 3 : ساخت Layout اسلایدر:

 

در مسیر res->layout یک فایل layout جدید بسازید و اسمش را slidingimages_layout.xml قرار دهید . 

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

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="1dip" >
 
    <ImageView
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher"
        android:scaleType="centerCrop" />
</FrameLayout>

این کدها برای آماده کردن یک اسلاید واحد در Viewpager ما میباشد . 

 

مرحله ی 4 : کلاس Adapter را بسازید:

یک عدد کلاس از نوع Adapter ایجاد کنید که وظیفه ی ارائه ی داده های مورد نیاز برای پرکردن اسلاید ها را دارد . 

یک فایل کلاس درست کنید و نام انرا SlidingImage_Adapter.java قرار دهید . 

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

import android.content.Context;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
 
 
 
/**
 * Created by Parsania Hardik on 23/04/2016.
 */
public class SlidingImage_Adapter extends PagerAdapter {
 
 
    private String[] urls;
    private LayoutInflater inflater;
    private Context context;
 
 
    public SlidingImage_Adapter(Context context, String[] urls) {
        this.context = context;
        this.urls = urls;
        inflater = LayoutInflater.from(context);
    }
 
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }
 
    @Override
    public int getCount() {
        return urls.length;
    }
 
    @Override
    public Object instantiateItem(ViewGroup view, int position) {
        View imageLayout = inflater.inflate(R.layout.slidingimages_layout, view, false);
 
        assert imageLayout != null;
        final ImageView imageView = (ImageView) imageLayout
                .findViewById(R.id.image);
 
 
        Glide.with(context)
                .load(urls[position])
                .into(imageView);
 
        view.addView(imageLayout, 0);
 
        return imageLayout;
    }
 
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view.equals(object);
    }
 
    @Override
    public void restoreState(Parcelable state, ClassLoader loader) {
    }
 
    @Override
    public Parcelable saveState() {
        return null;
    }
 
 
}

 

خب حالا بیایید کدهای بالا را درک کنیم . 

خط زیر را در نظر داشته باشید : 

private String[] urls;

این خط یک آرایه به نام urls میسازد که قراره url ها یا آدرس اینترنتی اسلاید ها را نگهداری بکند . 

من این آرایه رشته را با مقادیر آن در کلاس MainActivity.java ایجاد کرده ام که در مرحله بعدی خواهیم دید.

متد instantiateItem() وظیفه ی ساختن هر اسلاید در viewpager را دارد . 

 

کدهای این متد در زیر آمده است : 

 @Override
    public Object instantiateItem(ViewGroup view, int position) {
        View imageLayout = inflater.inflate(R.layout.slidingimages_layout, view, false);
 
        assert imageLayout != null;
        final ImageView imageView = (ImageView) imageLayout
                .findViewById(R.id.image);
 
 
        Glide.with(context)
                .load(urls[position])
                .into(imageView);
 
        view.addView(imageLayout, 0);
 
        return imageLayout;
    }

قبل از هر چیزی ، کامپایلر تمام اسلاید ها را با خط زیر میسازد : 

View imageLayout = inflater.inflate(R.layout.slidingimages_layout, view, false);

من از slidingimages_layout.xml استفاده کردم که در مرحله ی 3 ایجاد کردیم . 

سپس کامپایلر ImageView  را با استفاده از findViewById() پیدا میکند . 

 بعد از آن کامپایلر برای فراخوانی یا لود کردن تصاویر از قطعه کدهای زیر استفاده میکند : 

Glide.with(context)
     .load(urls[position])
     .into(imageView);

urls[position] مسیر یا URL مناسب تصویر را ارائه می دهد. 

سه خط بالا تصویر را لود میکند و در imageview نشان میدهد . 

 

مرحله ی 5 - آخرین تغییرات:

حالا اخرین کاری که باید انجام دهیم فایل های activity_main.xml و MainActivity.java  را کمی تغییر دهیم و درست کنیم . 

کدهای زیر را در activity_main.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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="16dp">
 
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
 
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_alignParentTop="true" />
 
        <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/indicator"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:gravity="bottom"
            android:padding="10dip"
            app:centered="true"
            app:fillColor="#df0623"
            app:pageColor="#fff"
            app:snap="false" />
    </RelativeLayout>
</RelativeLayout>

 

من یک viewpager  در صفحه ی اصلی ساختم . 

حالا باید نقاط راهنمایی یا indicator  های اسلایدر که یک سری نقطه به تعداد اسلاید ها در زیر اسلایدر است را نشان دهیم . البته این شکل های گرد برای راهنمایی کاربر است که متوجه شود دقیقا روی اسلاید چندم است و کلا چند اسلاید داریم . 

به همین خاطر ، من relativelayout استفاده کردم، بنابراین می توانیم موارد مناسب را با هم هماهنگ کنیم.

 

کدهای زیر را در فایل جاوا MainActivity.java بنویسید :

import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.viewpagerindicator.CirclePageIndicator;
import java.util.Timer;
import java.util.TimerTask;
 
public class MainActivity extends AppCompatActivity {
 
    private static ViewPager mPager;
    private static int currentPage = 0;
    private static int NUM_PAGES = 0;
 
    private String[] urls = new String[] {"https://demonuts.com/Demonuts/SampleImages/W-03.JPG", "https://demonuts.com/Demonuts/SampleImages/W-08.JPG", "https://demonuts.com/Demonuts/SampleImages/W-10.JPG",
                                            "https://demonuts.com/Demonuts/SampleImages/W-13.JPG", "https://demonuts.com/Demonuts/SampleImages/W-17.JPG", "https://demonuts.com/Demonuts/SampleImages/W-21.JPG"};
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        init();
    }
 
    private void init() {
 
        mPager = (ViewPager) findViewById(R.id.pager);
        mPager.setAdapter(new SlidingImage_Adapter(MainActivity.this,urls));
 
        CirclePageIndicator indicator = (CirclePageIndicator)
                findViewById(R.id.indicator);
 
        indicator.setViewPager(mPager);
 
        final float density = getResources().getDisplayMetrics().density;
 
//Set circle indicator radius
        indicator.setRadius(5 * density);
 
        NUM_PAGES = urls.length;
 
        // Auto start of viewpager
        final Handler handler = new Handler();
        final Runnable Update = new Runnable() {
            public void run() {
                if (currentPage == NUM_PAGES) {
                    currentPage = 0;
                }
                mPager.setCurrentItem(currentPage++, true);
            }
        };
        Timer swipeTimer = new Timer();
        swipeTimer.schedule(new TimerTask() {
            @Override
            public void run() {
                handler.post(Update);
            }
        }, 3000, 3000);
 
        // Pager listener over indicator
        indicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
 
            @Override
            public void onPageSelected(int position) {
                currentPage = position;
 
            }
 
            @Override
            public void onPageScrolled(int pos, float arg1, int arg2) {
 
            }
 
            @Override
            public void onPageScrollStateChanged(int pos) {
 
            }
        });
 
    }
}

 

توضیحات کد بالا 

به بخش زیر توجه کنید : 

new String[] {"https://demonuts.com/Demonuts/SampleImages/W-03.JPG", 
                                    "https://demonuts.com/Demonuts/SampleImages/W-08.JPG", 
                                               "https://demonuts.com/Demonuts/SampleImages/W-10.JPG",
                                            "https://demonuts.com/Demonuts/SampleImages/W-13.JPG", 
                                           "https://demonuts.com/Demonuts/SampleImages/W-17.JPG", 
                                           "https://demonuts.com/Demonuts/SampleImages/W-21.JPG"};

در این بخش تصاویری که میخواهیم از url های مشخص فراخوانی شود و در اسلایدر قرار بگیرد مینویسیم . یک آرایه از url تصاویر میباشد . 

حالا به درون متد init() توجه کنید : 

private void init() {
 
        mPager = (ViewPager) findViewById(R.id.pager);
        mPager.setAdapter(new SlidingImage_Adapter(MainActivity.this,urls));
 
        CirclePageIndicator indicator = (CirclePageIndicator)
                findViewById(R.id.indicator);
 
        indicator.setViewPager(mPager);
 
        final float density = getResources().getDisplayMetrics().density;
 
//Set circle indicator radius
        indicator.setRadius(5 * density);
 
        NUM_PAGES = urls.length;
 
        // Auto start of viewpager
        final Handler handler = new Handler();
        final Runnable Update = new Runnable() {
            public void run() {
                if (currentPage == NUM_PAGES) {
                    currentPage = 0;
                }
                mPager.setCurrentItem(currentPage++, true);
            }
        };
        Timer swipeTimer = new Timer();
        swipeTimer.schedule(new TimerTask() {
            @Override
            public void run() {
                handler.post(Update);
            }
        }, 3000, 3000);
 
        // Pager listener over indicator
        indicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
 
            @Override
            public void onPageSelected(int position) {
                currentPage = position;
 
            }
 
            @Override
            public void onPageScrolled(int pos, float arg1, int arg2) {
 
            }
 
            @Override
            public void onPageScrollStateChanged(int pos) {
 
            }
        });
 
    }

این متد در ابتدا adapter را به viewpager ست میکند . 

کامپایلر در viewpager  مشخص کننده ها که همان اشکال گرد برای هر اسلایدر است تنظیم میکند . 

شما میتوانید شعاع این اشکال گرد را نیز تغییر دهید توسط خط زیر : 

indicator.setRadius(5 * density);

خط زیر تعداد اسلایدها را مشخص میکند : 

NUM_PAGES = urls.length;

و قطعه کد زیر هم خاصیت اسلاید شو یا نمایش خودکار را به اسلایدر ما اضافه میکند : 

 // Auto start of viewpager
        final Handler handler = new Handler();
        final Runnable Update = new Runnable() {
            public void run() {
                if (currentPage == NUM_PAGES) {
                    currentPage = 0;
                }
                mPager.setCurrentItem(currentPage++, true);
            }
        };
        Timer swipeTimer = new Timer();
        swipeTimer.schedule(new TimerTask() {
            @Override
            public void run() {
                handler.post(Update);
            }
        }, 3000, 3000);

شما میتوانید سرعت اسلایدشو را با تغییر عدد 3000 کم و زیاد کنید . 

 

 

سورس قرار گرفت برای اندروید استودیو میتونید دانلود کنید 

دانلود سورس 

 

این آموزش با زبان java بود اگر همین کدها را بخواهید با کاتلین که زبانی نسبتا جدیدتر است بنویسید قطعا سریعتر مینویسید و کیفیت بهتری تحویل میگیرید سعی کنید از کاتلین نیز استفاده کنید.