آموزش ساخت اسلایدر از URL و واکشی تصاویر از سرور در اسلایدر در محیط Android Studio

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

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

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

در 5 مرحله ی بسیار روان و ساده این اسلایدر را خواهیم ساخت 

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

مرحله ی 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 کم و زیاد کنید . 

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

دانلود سورس 

تمام

لینک کوتاه این مقاله : https://avasam.ir/post/112

این سیستم برپایه ی علاقه مندی شما یک دوره ی مناسب به شما پیشنهاد میدهد

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

هدایتم کن

مقالات دیگر مرتبط با این مقاله ی آموزشی :‌

 آموزش ساخت اسلایدر با Viewpager برای اپ های اندرویدی در محیط android studio kotlin یا جاوا ؟ برای برنامه نویسان اندروید مسئله این است ! تماس با ما 5 دلیل برای اینکه با جاوا اسکریپت کار کنید کلان داده یا Big Data چیست

دوره های آموزشی مرتبط با این مقاله :

دوره ی آموزش پروژه محور ساخت دیجیکالا به همراه اپ و سورس کامل

دوره ی آموزش کاتلین (kotlin) بصورت پروژه محور

دوره ی آموزش ساخت فریمورک برای پی اچ پی با PHP MVC

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