[Android/Kotlin] FLO앱 클론코딩(3) - Splash화면

요즘 블로그에 개발한것을 기록하는게 중요하다는것을 뼈져리게 느끼고있다.. 분명 그때는 이해했다고 생각했는데 갑자기 생각이 안나고 까먹는 순간이 오는데 그때마다 내가 작성한 블로그를 다시보면 기억이 난다

앞으로도 꾸준히 작성해야겠다!!

 

아무튼 이번시간에는 Splash화면을 만들어볼것이다

Splash은 앱을 실행할때 제일먼저 실행되었다가 사라지는 화면이라고 볼수있다

 

Splash화면을 만드는 방식에는 Handler를 활용해서 고정된 시간동안 보여주는 방식과

스타일(Theme)을 지정해서 보여주는 2가지 방식이 있다

Handler를 이용하는 방식은 지정된 시간동안 무조건 화면을 보여주기때문에 UX적으로 사용자의 시간을 불필요하게 뺏을수있다는 단점이 있어서, 스타일(Theme) 을 지정하는 방식을 주로 추천한다

 

여기서는 2가지방식을 다 해볼것이다

 

 

#  Splash 화면

 

1) Handler 사용

먼저 activity_splash화면을 디자인해준다

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="190dp"
        android:layout_height="90dp"
        android:src="@drawable/ic_flo_logo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

activity_splash.xml

 

activity_splash.xml

 

 

 

 

 

 

SplashActivity.kt 코틀린 파일을 생성하고 Manifest파일에 SplashActivity.kt을 등록한뒤,

intent-filter를  SplashActivity안에 넣어준다

intent-filter가 있는 해당 엑티비티가 제일 처음으로 실행되는 화면이된다

<activity
    android:name=".SplashActivity"
    android:exported="true">
    
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

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

AndroidManifest.kt

 

 

 

 

이제 SplashActivity.kt으로 돌아가서 코드를 짜준다

먼저 binding을 시켜주는 코드를 짜준뒤, 아래와 같이 코드를 짜준다

package com.example.flo

import android.content.Intent
import android.os.Bundle
import android.os.Handler
import android.os.Looper
import androidx.appcompat.app.AppCompatActivity
import com.example.flo.databinding.ActivitySongBinding
import com.example.flo.databinding.ActivitySplashBinding

class SplashActivity : AppCompatActivity() {

    lateinit var binding : ActivitySplashBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivitySplashBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // handler생성
        val handler = Handler(Looper.getMainLooper())

        // 1초뒤에 MainActivity가 나오도록 설정
        handler.postDelayed({
                            startActivity(Intent(this,MainActivity::class.java))
        }, 1000)

    }
}

SplashActivity.kt

 

이렇게하면 Handler를 사용한 Splash 화면구현은 끝이다

 

 

 

이제 Theme를 사용해서 Splash화면을 구현하는 방법을 사용해보겠다

2)  Theme 사용

 

우선 drawable에 splashed.xml이라는 파일을 생성해준뒤 아래와같이 코드를 작성해준다

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white"/>
    <item>
        <bitmap android:src="@drawable/ic_flo_logo"
            android:gravity="center"/>
    </item>
</layer-list>

splashed.xml

 

 

그다음 valuse -> themes 로 이동해서 아래와같이 코드를 적용해준다

background는 방금만든 splashed.xml을 적용해준다

</style>
<style name="SplashTheme"
    parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowBackground"> @drawable/splashed</item>
</style>

themes.xml

 

 

그리고 아까 Handler를 사용했을때 만들었었던 SpalshActivity.kt파일을 삭제해주고 Manifest파일로 가서 SplashActivity에 해당하는 코드까지 삭제해주고 Manifest에 Splash테마를 적용시켜준다

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

    <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.FLO">

        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:theme="@style/SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

AndroidManifest.xml

 

 

이제 MainActivity.kt으로 돌아가서 앱이 실행될때 테마를 원래의 테마로 돌려준다

onCreate밑에 이 한줄만 써주면 된다

// splash화면에서 원래의 테마로 돌려줌
setTheme(R.style.Theme_FLO)

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // splash화면에서 원래의 테마로 돌려줌
    setTheme(R.style.Theme_FLO)
    
    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)

 

 

이렇게하면 Splash화면이 실행되는것을 확인할수있다