آموزش ساخت اسلایدر تصاویر اپ اندرویدی با زبان Kotlin

آموزش ساخت اسلایدر تصاویر اپ اندرویدی با زبان Kotlin


اشتراک گذاری :

۱۳۹۸/۵/۵- تعداد بازدید : ۱۵۴۵ بار - دسته بندی : برنامه نویسی موبایل

آموزش ساخت اسلایدر تصاویر در اپ اندرویدی با زبان kotlin . 

 

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

 

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

ما از indicator یا نقاط مشخص کننده برای اسلایدهای خود استفاده خواهیم کرد تا هم کاربر متوجه شود چند اسلاید وجود دارد و همچنین در کدام اسلاید است . 

 

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

 

پیش نمایش از آنچه میسازیم : 

 

1 - قدم اول ساخت اسلایدر اپ اندرویدی با کاتلین - اضافه کردن وابستگی های مورد نیاز 

 

ما از کتابخانه ی ViewPagerIndicator برای این پروژه استفاده خواهیم کرد  . 

 

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

 

compile ('com.github.JakeWharton:ViewPagerIndicator:2.4.1')  {
        exclude group: 'com.android.support'
        exclude module: 'appcompat-v7'
        exclude module: 'support-v4'
    }

 

2 - قدم دوم ساخت اسلایدر اپ اندرویدی با کاتلین - اضافه کردن تصاویر  

 

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

 

دانلود تصاویر مورد نیاز 

 

شما باید این تصاویر را در پوشه ی drawable اندروید خود وارد کنید . 

مسیر پوشه ی drawable را در تصویر زیر میتوانید ببینید : 

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

 

3 - قدم سوم ساخت اسلایدر اپ اندرویدی با کاتلین - اضافه کردن کلاس مدل 

 

خب حالا نیاز به یک کلاس مدل داریم که ایجاد میکنیم . یک کلاس جدید از نوع کاتلین ایجاد کنید و نام آنرا ImageModel.kt بزارید و کدهای زیر را داخلش کپی کنید : 

 

/**
 * Created by avasam
 */
class ImageModel {
 
    private var image_drawable: Int = 0
 
    fun getImage_drawables(): Int {
        return image_drawable
    }
 
    fun setImage_drawables(image_drawable: Int) {
        this.image_drawable = image_drawable
    }
}

 

4 - قدم چهارم ساخت اسلایدر اپ اندرویدی - ساخت 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>

 

5 - قدم پنجم ساخت اسلایدر اپ اندرویدی با کاتلین - ساخت کلاس آداپتر

 

کلاس آداپتر وظیفه دارد داده ها را به viewpager تحویل دهد . 

یک کلاس جدید کاتلین بسازید و نام آنرا SlidingImage_Adapter.kt قرار دهید . 

کدهای زیر را درون آداپتر کپی کنید : 

 

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 java.util.ArrayList
 
/**
 * Created by avasam
 */
class SlidingImage_Adapter(private val context: Context, private val imageModelArrayList: ArrayList<ImageModel>) : PagerAdapter() {
    private val inflater: LayoutInflater
 
 
    init {
        inflater = LayoutInflater.from(context)
    }
 
    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as View)
    }
 
    override fun getCount(): Int {
        return imageModelArrayList.size
    }
 
    override fun instantiateItem(view: ViewGroup, position: Int): Any {
        val imageLayout = inflater.inflate(R.layout.slidingimages_layout, view, false)!!
 
        val imageView = imageLayout
                .findViewById(R.id.image) as ImageView
 
 
        imageView.setImageResource(imageModelArrayList[position].getImage_drawables())
 
        view.addView(imageLayout, 0)
 
        return imageLayout
    }
 
    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        return view == `object`
    }
 
    override fun restoreState(state: Parcelable?, loader: ClassLoader?) {}
 
    override fun saveState(): Parcelable? {
        return null
    }
 
}

 

6 - قدم ششم ساخت اسلایدر اپ اندرویدی با زبان کاتلین - بروزرسانی اکتیویتی اصلی یا MainActivity.kt

 

فایل layout مربوط به اکتیویتی اصلی برنامه یا همان 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"
    tools:context="com.example.avasam.kotlin_image_slider.MainActivity">
 
    <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>

 

حالا کدهای درون MainActivity.kt باید به شکل زیر باشد : 

 

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.ArrayList
import java.util.Timer
import java.util.TimerTask
 
class MainActivity : AppCompatActivity() {
    private var imageModelArrayList: ArrayList<ImageModel>? = null
 
    private val myImageList = intArrayOf(R.drawable.harley2, R.drawable.benz2, R.drawable.vecto, R.drawable.webshots, R.drawable.bikess, R.drawable.img1)
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        imageModelArrayList = ArrayList()
        imageModelArrayList = populateList()
 
        init()
 
    }
 
    private fun populateList(): ArrayList<ImageModel> {
 
        val list = ArrayList<ImageModel>()
 
        for (i in 0..5) {
            val imageModel = ImageModel()
            imageModel.setImage_drawables(myImageList[i])
            list.add(imageModel)
        }
 
        return list
    }
 
    private fun init() {
 
        mPager = findViewById(R.id.pager) as ViewPager
        mPager!!.adapter = SlidingImage_Adapter(this@MainActivity, this.imageModelArrayList!!)
 
        val indicator = findViewById(R.id.indicator) as CirclePageIndicator
 
        indicator.setViewPager(mPager)
 
        val density = resources.displayMetrics.density
 
        //Set circle indicator radius
        indicator.setRadius(5 * density)
 
        NUM_PAGES = imageModelArrayList!!.size
 
        // Auto start of viewpager
        val handler = Handler()
        val Update = Runnable {
            if (currentPage == NUM_PAGES) {
                currentPage = 0
            }
            mPager!!.setCurrentItem(currentPage++, true)
        }
        val swipeTimer = Timer()
        swipeTimer.schedule(object : TimerTask() {
            override fun run() {
                handler.post(Update)
            }
        }, 3000, 3000)
 
        // Pager listener over indicator
        indicator.setOnPageChangeListener(object : ViewPager.OnPageChangeListener {
 
            override fun onPageSelected(position: Int) {
                currentPage = position
 
            }
 
            override fun onPageScrolled(pos: Int, arg1: Float, arg2: Int) {
 
            }
 
            override fun onPageScrollStateChanged(pos: Int) {
 
            }
        })
 
    }
 
    companion object {
 
        private var mPager: ViewPager? = null
        private var currentPage = 0
        private var NUM_PAGES = 0
    }
 
}

 

7 - قدم هفتم در ساخت اسلایدر اپ اندرویدی - نگه داشتن اسلاید خودکار 

 

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

 

  // Auto start of viewpager
        val handler = Handler()
        val Update = Runnable {
            if (currentPage == NUM_PAGES) {
                currentPage = 0
            }
            mPager!!.setCurrentItem(currentPage++, true)
        }
        val swipeTimer = Timer()
        swipeTimer.schedule(object : TimerTask() {
            override fun run() {
                handler.post(Update)
            }
        }, 3000, 3000)

 

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

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

در قطعه کد زیر مدت زمان نمایش هر اسلاید سه ثانیه تعریف شده است که شما میتوانید انرا عوض کنید :  منظور همان عدد 3000 است . 

 val swipeTimer = Timer()
        swipeTimer.schedule(object : TimerTask() {
            override fun run() {
                handler.post(Update)
            }
        }, 3000, 3000)

 

 

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

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

اتمام مقاله آموزشی


محصولات برگزیده مناسب شما
مطالب زیر ممکن است برای شما مفید باشد
6 دلیل برای یادگیری کاتلین مقایسه Kotlin با Java برای برنامه نویسان اندرویدی طراحی های پیچیده اپلیکیشن های اندرویدی با Constraint Layout برنامه نویسی سوکت در جاوا بررسی اپلیکیشن دیجی کالا - کشف زبان برنامه نویسی این اپلیکیشن
مدرس : مهندس عباس نیک زاد
سوابق تحصیلی
  • دیپلم ریاضی و فیزیک از تیزهوشان
  • لیسانس کارشناسی مهندسی نرم افزار
  • کارشناس ارشد هوش مصنوعی
  • دارای مدرک 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 و …
  • مطالعه و فعالیت در زمینه ی امنیت و هک

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

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

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