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

سلام عزیزان باری دیگر با آموزش دیگر ازسری آموزش کاتلین  خدمت شما عزیزان هستیم . امروز می خواهیم آموزش ساخت splash screen یا همون اسپلش اسکرین را خدمت شما عزیزان آموزش دهیم . قبلا از همه چیز شما باید بدانید splash screen در کاتلین  چیه ؟ چه کاربردی داره و هدف از ساخت اون چیست ؟  همه ی این سوالات حول splash screen در کاتلین را در قسمت پایین برای شما توضیح خواهیم داد.

splash screen در کاتلین چیست و چه کاربردی دارد.

splash screen در کاتلین اولین صفحه برنامه هنگام باز شدن است  و این صفحه برای مدت زمان  مشخصی  ظاهر می شود . و معمولا اولین بار  که می خواهیم برنامه را راه اندازی کنیم نمایش داده می شود . و همچنین splash screen در کاتلین یا اسپلش اسکرین برای نمایش برخی اطلاعات مقدماتی اولیه مانند لوگوی شرکت و یا اسم برنامه و .. درست قبلا اینکه به صورت کامل بارگذاری کنیم استفاده می شود .   همچنین لازم است بدانید splash screen برای اندروید با Api های بالای 12 مورد استفاده قرار می گیرد .

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

حالا بریم سراغ ساخت splash screen در کاتلین ، ما این آموزش را نیز مانند بقیه آموزش کاتلین با ساخت یک پروژه کوچیک به شما آموزش می دهیم . در این پروژه ابتدا اسپلش اسکرین ما نشان داده می شود که همراه انیمیشن و progress bar است و بعد از مدت مشخصی که تعیین کرده ایم . به صفحه ی دوم هدایت می شود .

اولین کار ساخت یک Activity به اسم دلخواه که من splash screen میزارم . حالا سراغ فایل Xml Activity خود می رویم و کد های زیر را در آن قرار دهید .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E91E63"
    tools:context=".SplashScreen">

    <TextView
        android:id="@+id/Text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="250dp"
        android:text="SplashScreen"
        android:textColor="#fff"
        android:textSize="42sp"
        android:textStyle="italic"
        android:layout_centerHorizontal="true"
        />

    <TextView
        android:id="@+id/Text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="in"
        android:textColor="#fff"
        android:textSize="38sp"
        android:textStyle="italic"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/Text1"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="Kotlin"
        android:textColor="#fff"
        android:textSize="42sp"
        android:textStyle="italic"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/Text2"
        android:id="@+id/Text3"

        />

    <ProgressBar
        android:id="@+id/Id_ProgressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/Text3"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:indeterminate="true"
        android:minWidth="200dp"
        android:minHeight="50dp" />
</RelativeLayout>

در کد های بالا ما  سه تا TextView ساختیم و به همراه یک progress Bar که قرار روی TextViewهامون انیمیشن اعمال کنیم.

قبل از اینکه بریم سراغ  کد های Activity Main خودمون بریم تا انیمیشن هایی که برای نمایش TextView هامون ازشون استفاده کردیم روبسازیم .

مانند مبحت انیمیشن ها در کاتلین یک پوشه به اسم anim درست کنیم و سه تا فایل xml در آن درست کنید .

top_animation.xml :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
    android:fromXDelta="0"
    android:fromYDelta="-100"
    android:duration="2000"
    />
    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="2000"

        />
</set>

midle_animation.xml :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="-100"
        android:fromYDelta="0"
        android:duration="2000"
        />
    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="2000"

        />
</set>

bottom_animation.xml :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="100"
        android:duration="2000"
        />
    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="2000"

        />
</set>

بعد اینکه این قسمت هم تموم شد قبل از رفتن به قست َActivity Main یه کار دیگه هم مونده که اونم اینه بع بخش style .xml خود بروید و کد زیر را در آن قسمت وارد سازید

   <style name="Theme.Transparent" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowFullscreen">true</item>
    </style>

در قسمت بالا ما  یک style جدید ساختیم و برای اینکه این استایل را برای splass screen خودمون معرفی کنیم . به بخش AndroidManifest.xml خود بروید و کد های خودتون رو به صورت کد زیر تغییر دهید .

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.retrofit">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Retrofit">
        
        <activity android:name=".MainActivity" />
        <activity
            android:name=".SplashScreen"
            android:label="Splashscreen"
            android:theme="@style/Theme.Transparent">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

حالا بریم برای کد نویسی بخش Activityخودمون در این قسمت ما بعد اینکه ویجت های خودمون رو تعریف کردیم . برای هر کدام انیمیشن هایی را که ساختیم را اعمال کردیم و در اخر به کمک Handler  یک مدت زمان مشخص ثابت مانده و بعد از آن به صفحه ی مورد نظرمون هدایت می شود .

package com.example.retrofit

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.view.animation.AnimationUtils
import android.widget.TextView

class SplashScreen : AppCompatActivity() {
    lateinit var textTop: TextView
    lateinit var textMidle: TextView
    lateinit var textBottom: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash_screen)
        textTop=findViewById(R.id.Text1)
        textMidle=findViewById(R.id.Text2)
        textBottom=findViewById(R.id.Text3)
        val topanimation = AnimationUtils.loadAnimation(this, R.anim.top_animation)
        val midleanimation = AnimationUtils.loadAnimation(this, R.anim.midle_animation)
        val bootomanimation = AnimationUtils.loadAnimation(this, R.anim.bottom_animation)

        textTop.startAnimation(topanimation)
        textMidle.startAnimation(midleanimation)
        textBottom.startAnimation(bootomanimation)


        val intent= Intent(this,MainActivity2::class.java)


        val SplashScreenTimeOut=8000
        Handler().postDelayed({
            startActivity(intent)
            finish()

        },SplashScreenTimeOut.toLong())


    }
}

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

امیدوارم هر کجا که باشید موفق باشید و سرفراز .

یا علی