ساخت مدیا پلیر در کاتلین در محیط برنامه نویسی اندروید استودیو

سلام خدمت همه ی عزیزان کدایت ، من در این بخش آموزش قصد داریم . ساخت مدیا پلیر در کاتلین یا به نوعی موزیک پلیر در کاتلین را به شما عزیزان یاد بدهم .ما این کار با کلاس Media Player انجام میدهیم.

مدیا پلیر در کاتلین چگونه پیاده سازی می شود.

شما در طول دوره برنامه نویسی به زبان کاتلین ممکن هست بخواهید از مدیا پلیر در کاتلین استفاده کنید . برای این کار شما باید از کلاس Media Player در کاتلین استفاده کنید . من برای اینکه شما براحتی این مبحث Media Player در کاتلین را یاد بگیرید . میخواهم یک پروژه کوچک برای شما انجام دهم. و در آن برای شما یک مدیا پلیر یا در واقع یک موزیک پلیر در کاتلین برای شما برنامه نویسی کنیم .

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

پروژه ما شامل یک موزیک پلیر ساده میباشد تا برای ما اهنگ موردنظرمون رو پخش کند و اینکه ما بتونیم آن اهنگ را چند ثانیه به جلو بندازیم . و یا چند ثانیه به عقب و همچنین میتوانیم آهنگ را pause کنیم . برای شروع ساخت مدیاپلیر در کاتلین شما ابتدا یک پروژه جدید ایجاد کنید. و اسم آن را Media Player بگذارید . البته هر اسم دلخواه دیگر نیز میتوانید قرار دهید . بعد این کاربیاید و یک پوشه raw ایجاد کنیم و داخل یک موزیک قرار دهیم تا در برنامه موزیک پلیرمون از آن استفاده کنیم.

برای ایجاد پوشه raw ابتدا به روی پوشه Java راست کلیک کنید و گزینه Anroid Resource Directory را انتخاب کنید . بعد از این کار شما با یک پنچره مواجه میشوید که فقط لازم است آن را مانند شکل زیر انتخاب کنید . و در آخر گزینه OK را بزنید .

ایجاد پوشه raw در اندروید استودیو

لایه activity_media_player.xml :

بعد از انجام کار بالا ما نیاز داریم تا یک Activity دیگر ایجاد کنیم . و یک نام دلخواه برای آن انتخاب کنید . ما برای موزیک پلیر در کاتلین یا همون مدیا پلیر در کاتلین نیاز داریم . ایکون های play , pause و جلو و عقب را ایجاد کنیم برای این کار وارد لایه XML خودمون بشیم و کد های زیر را که من قبلا برای طراحی این قسمت کد نویسی کردم را وارد کنید .

<?xml version="1.0" encoding="utf-8"?>
<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:background="#FF4081"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="100dp"
        android:src="@drawable/icon_music" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:orientation="horizontal">


        <TextView
            android:id="@+id/Id_Time2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="6"
            android:text="۰۰:۰۰"
            android:textColor="#FFFFFF"
            android:textSize="18dp" />


        <SeekBar
            android:id="@+id/music_seekBarr"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:backgroundTint="@color/material_on_background_emphasis_high_type" />

    </LinearLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:gravity="center">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/Id_rewind"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:adjustViewBounds="true"
                android:src="@drawable/icon_back2" />

            <ImageView
                android:id="@+id/Id_pause"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:adjustViewBounds="true"
                android:src="@drawable/icon_pause2" />


            <ImageView
                android:id="@+id/Id_backword"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:adjustViewBounds="true"
                android:src="@drawable/icon_play2" />

            <ImageView
                android:id="@+id/id_forward"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:adjustViewBounds="true"
                android:src="@drawable/icon_next2" />

        </LinearLayout>


    </RelativeLayout>

</LinearLayout>

همونطور که در قسمت بالا مشاهده میکنید . من برای ساخت مدیا پلیر در کاتلین یک Seek Bar نیاز دارم و بعلاوه آیکون های مورد نیازمون که در قسمت بالا برای شما آوده ام . اگر خواستید برای این موزیک پلیر در کاتلین آیکون های دیگری تهیه کنید میتوانید به سایت زیر مراجعه کنید و icon مورد نظرتون رو انتخاب کنید . ودر برنامه استفاده کنید .

Media Player.kt :

و اما کد نویسی بخش اکتیویتی برای این قسمت ما امدیم از کلاس Media Player در کاتلین استفاده کردیم . وموزیک پلیر را در برنامه خودمون پیاده سازی کردیم کد  های این بخش خیلی آسان میباشد من در این اکتیویتی از انیمیشن Yoyo برای ویجت ImageView نیز استفاده کردم . برای آموزش این انیمیشن به مبحث انیمیشن Yoyo در کاتلین که برای شما آموزش دادم مراجعه کنید .کد های بخش Main Activity برای پیاده سازی مدیا پلیر در کاتلین به شرح زیر میباشد.

import android.media.MediaPlayer
import android.os.Bundle
import android.os.Handler
import android.view.View
import android.widget.Button
import android.widget.ImageView
import android.widget.SeekBar
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.daimajia.androidanimations.library.Techniques
import com.daimajia.androidanimations.library.YoYo
import java.lang.String
import java.util.concurrent.TimeUnit

class MediaPlayer : AppCompatActivity(), View.OnClickListener {
    lateinit var btn_forward: ImageView
    lateinit var btn_backword: ImageView
    lateinit var btn_rewind: ImageView
    lateinit var btn_pause: ImageView

    //    TextView
    lateinit var txt_small2: TextView

    //    SeekBar
    lateinit var myseekBar: SeekBar

//    private val mediaPlayer: MediaPlayer? = null

    private var startTime = 0.0
    private var finalTime = 0.0

    private val myHandler: Handler = Handler()
    private val forwardTime = 3000
    private val backwardTime = 3000
    private lateinit var mediaPlayer: MediaPlayer
    var oneTimeOnly = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_media_player)


//        مقدار دهی  ID ها برای ویجت ها

        btn_forward = findViewById(R.id.id_forward)
        btn_backword = findViewById(R.id.Id_backword)
        btn_rewind = findViewById(R.id.Id_rewind)
        btn_pause = findViewById(R.id.Id_pause)
        txt_small2 = findViewById(R.id.Id_Time)
        YoYo.with(Techniques.Tada).duration(10000).repeat(50)
            .playOn(findViewById(R.id.imageView))

        myseekBar = findViewById(R.id.music_seekBarr)

        mediaPlayer = MediaPlayer.create(applicationContext, R.raw.adele);
        myseekBar.setClickable(false);
        btn_pause.setEnabled(false);



        btn_backword.setOnClickListener(this)
        btn_pause.setOnClickListener(this)
        btn_forward.setOnClickListener(this)
        btn_rewind.setOnClickListener(this)

    }

    override fun onClick(v: View?) {

        when (val id = v!!.id) {
            R.id.Id_backword -> {

                mediaPlayer.start()
                finalTime = mediaPlayer.duration.toDouble()
                startTime = mediaPlayer.currentPosition.toDouble()

                if (oneTimeOnly == 0) {
                    myseekBar.setMax(finalTime.toInt())
                    oneTimeOnly = 1
                }

                txt_small2.text = String.format(
                    "۰ %d : %d ",
                    TimeUnit.MILLISECONDS.toMinutes(finalTime.toLong()),
                    TimeUnit.MILLISECONDS.toSeconds(finalTime.toLong()) -
                            TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes(finalTime.toLong()))
                )

                myseekBar.setProgress(startTime.toInt())
                myHandler.postDelayed(UpdateSongTime, 100)
                btn_pause.setEnabled(true)
                btn_backword.setEnabled(false)


            }
            R.id.Id_pause -> {
                mediaPlayer.pause();
                btn_pause.setEnabled(false);
                btn_backword.setEnabled(true);
            }
            R.id.id_forward -> {
                val temp = startTime

                if ((temp + forwardTime) <= finalTime) {
                    startTime = startTime + forwardTime;
                    mediaPlayer.seekTo(startTime.toInt())
                }
            }
            R.id.Id_rewind->{
                val temp = startTime;

                if((temp-backwardTime)>0){
                    startTime = startTime - backwardTime;
                    mediaPlayer.seekTo(startTime.toInt());
                }
            }

        }
    }

    private val UpdateSongTime: Runnable = object : Runnable {
        override fun run() {
            startTime = mediaPlayer.currentPosition.toDouble()
            txt_small2.text =
                kotlin.String.format(
                    "۰ %d : %d ",
                    TimeUnit.MILLISECONDS.toMinutes(startTime.toLong()),
                    TimeUnit.MILLISECONDS.toSeconds(startTime.toLong()) -
                            TimeUnit.MINUTES.toSeconds(
                                TimeUnit.MILLISECONDS.toMinutes(
                                    startTime.toLong()
                                )
                            )
                )

            myseekBar.setProgress(startTime.toInt())
            myHandler.postDelayed(this, 100)
        }
    }


}

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