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

آموزش ساخت اسلایدر از 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 کم و زیاد کنید . 

 

 

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

دانلود سورس 

آموزش ساخت اسلایدر اندرویدی در اپلیکیشن

 

تمام


محصولات برگزیده مناسب شما
مطالب زیر ممکن است برای شما مفید باشد
آموزش ساخت اسلایدر با Viewpager برای اپ های اندرویدی در محیط android studio طراحی های پیچیده اپلیکیشن های اندرویدی با Constraint Layout مقایسه Kotlin با Java برای برنامه نویسان اندرویدی آموزش کامل کار با Retrofit 2.x بعنوان یک کلاینت REST آموزش ساخت صفحه ثبت نام و ورود در اپ اندرویدی
مدرس : مهندس عباس نیک زاد
سوابق تحصیلی
  • دیپلم ریاضی و فیزیک از تیزهوشان
  • لیسانس کارشناسی مهندسی نرم افزار
  • کارشناس ارشد هوش مصنوعی
  • دارای مدرک IELTS نمره ۷/۵
  • دارای مدرک GMAT نمره ۷۲۰
سوابق شغلی
  • مدیر کل شرکت آوای هوشمند سام به شماره ثبت ۴۴۸۳۸ و شناسه ی ملی ۱۴۰۰۶۷۷۷۰۵۱
  • تدرس در دانشگاه ها و آموزشگاه های معتبر از سال ۱۳۹۴
  • مدرس دوره های آموزشی در زمینه ی برنامه نویسی از سال ۹۵ ( آواسام ، سامنتا )
  • مدیر کل انجمن علمی دانشگاه به مدت یکسال و مدیر انجمن علمی کامپیوتر به مدت یکسال
  • برنامه نویس اپلیکیشن های اندرویدی مختلف برای سازمان های دولتی ، شرکت های خصوصی و ...
  • بازی سازی با انجین یونیتی به مدت دو سال در تیم k2games
  • برنامه نویسی و طراحی وب بصورت فریلنسر از سال ۱۳۹۰
تخصص ها
  • تسلط کامل بر فریمورک های PHP همچون Codeigniter , Laravel , Yii , ….
  • برنامه نویسی موبایل و تبلت های هوشمند اندرویدی به مدت ۴ سال با زبان Java kotlin objective-c javascript
  • مسلط به مفاهیم گرافیکی و نرم افزار های گرافیکی Photoshop , corel , illustrator و …
  • مسلط به مدلسازی سه بعدی Blender
  • مسلط به بازی سازی و زبان سی شارپ در انجین Unity3D
  • تسلط کامل بر مفاهیم هوش مصنوعی
  • متخصص در زمینه لینوکس
  • تسلط کامل برنامه نویسی زبانهای C , Python , C++ , C# , Java , JavaScript
  • تسلط کامل بر فریمورک ها یا کتابخانه های محبوب جاوااسکریپت نظیر Angular , Vue.js , React , Jquery و …
  • مطالعه و فعالیت در زمینه ی امنیت و هک

برچسب ها : آموزش ساخت اسلایدر اندرویدی آموزش برنامه نویسی اندروید آموزش ساخت اسلایدر اپ آموزش ساخت اسلایدشو اپ آموزش ساخت اسلایدر اندرویدی اسلایدر اندرویدی ساخت اسلایدر اندرویدی آموزش ساخت slider اندروید اسلایدر اندروید آموزش ساخت اپ اندرویدی

برای نوشتن نظر باید وارد شوید ورود

بازگشت به بالا
توجه داشته باشید که به ازای هر نظر مفید در سایت آواسام هزار تومان بصورت خودکار به کیف پول شما افزوده میشود