<div id="readability-page-1" class="page"><div>
                <p><a href="/m/category/Dev/Android"><span>Dev/Android</span></a></p><h3>JetpackCompose - SplashScreen API</h3>
              </div><p><cite>healthyryu</cite>
                <span> 2023. 11. 16. 19:14</span>
              </p><div>
                                <h4 data-ke-size="size20">과업 정의 :</h4>
<p data-ke-size="size16">- 스플래시 스크린은 3초 유지하면서 로고는 애니메이션 처리 한다.</p>

<h4 data-ke-size="size20">1. 라이브러리 추가</h4>
<div>
<pre><code>implementation("androidx.core:core-splashscreen:1.1.0-alpha02")</code></pre>
</div>

<h4 data-ke-size="size20">2. 컴파일 버전 맞추기</h4>
<div>
<pre data-ke-language="java"><code>android {
    compileSdk = 34
    ...
}</code></pre>
</div>

<p data-ke-size="size16"><span>Dependency 'androidx.core:core-splashscreen:1.1.0-alpha02' requires libraries and applications that</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;depend&nbsp;on&nbsp;it&nbsp;to&nbsp;compile&nbsp;against&nbsp;version&nbsp;34&nbsp;or&nbsp;later&nbsp;of&nbsp;the</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Android&nbsp;APIs.</span></p>



<h4 data-ke-size="size20"><span>3. Splash 화면을 위한 Theme 에서 스타일 적용</span><span></span></h4>
<p data-ke-size="size16"><span>기본 themes.xml</span></p>
<div>
<pre data-ke-language="bash"><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;

    &lt;style name="Theme.AnimatedScreenSplash" parent="android:Theme.Material.Light.NoActionBar" /&gt;

    &lt;style name="Theme.App.Starting" parent="Theme.SplashScreen"&gt;
        &lt;item name="windowSplashScreenBackground"&gt;@color/black&lt;/item&gt;
        &lt;item name="postSplashScreenTheme"&gt;@style/Theme.AnimatedScreenSplash&lt;/item&gt;
    &lt;/style&gt;
&lt;/resources&gt;</code></pre>
</div>

<p data-ke-size="size16"><span>android 31 버전의 themes.xml</span><span></span></p>
<div>
<pre data-ke-language="kotlin"><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;

    &lt;style name="Theme.App.Starting" parent="Theme.SplashScreen"&gt;
        &lt;item name="android:windowSplashScreenBackground"&gt;@color/black&lt;/item&gt;
        &lt;item name="postSplashScreenTheme"&gt;@style/Theme.AnimatedScreenSplash&lt;/item&gt;
    &lt;/style&gt;

&lt;/resources&gt;</code></pre>
</div>

<h4 data-ke-size="size20"><span>4. Manifest 에서 Theme 설정 변경</span></h4>
<div>
<pre data-ke-language="bash"><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"&gt;

    &lt;application
    	...
    	android:theme="@style/Theme.App.Starting"
        tools:targetApi="31"&gt;
        &lt;activity
            ...
            android:theme="@style/Theme.App.Starting"&gt;
            &lt;intent-filter&gt;
                &lt;action android:name="android.intent.action.MAIN" /&gt;

                &lt;category android:name="android.intent.category.LAUNCHER" /&gt;
            &lt;/intent-filter&gt;
        &lt;/activity&gt;
    &lt;/application&gt;

&lt;/manifest&gt;</code></pre>
</div>


<h4 data-ke-size="size20"><span>5. Splash 화면이 3초 유지하고 메인화면으로 넘어가기 위한 ViewModel 처리</span></h4>
<div>
<pre data-ke-language="kotlin"><code>class MainViewModel : ViewModel() {

    private val _isReady = MutableStateFlow(false)
    val isReady = _isReady.asStateFlow()

    init {
        viewModelScope.launch {
            delay(3000L)
            _isReady.value = true
        }
    }
}</code></pre>
</div>

<h4 data-ke-size="size20">6. 앱이 시작하는 Activity (MainActivity) 에서 SplashScreen 화면 처리</h4>
<div>
<pre data-ke-language="kotlin"><code>class MainActivity : ComponentActivity() {

    private val viewModel by viewModels&lt;MainViewModel&gt;()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        installSplashScreen().apply {
            setKeepOnScreenCondition {
                !viewModel.isReady.value
            }
        }
        
        ...
    }
}</code></pre>
</div>


<h4 data-ke-size="size20">7. 애니메이션 처리</h4>
<p data-ke-size="size16"><span>- 적용할 애니메이션 작업 ( logo_animator.xml )</span></p>
<div>
<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@anim/overshoot_interpolator"&gt;

    &lt;propertyValuesHolder
        android:propertyName="rotation"
        android:valueFrom="0.0"
        android:valueTo="360.0"
        android:valueType="floatType" /&gt;
    &lt;propertyValuesHolder
        android:propertyName="scaleX"
        android:valueFrom="0.0"
        android:valueTo="0.4"
        android:valueType="floatType" /&gt;
    &lt;propertyValuesHolder
        android:propertyName="scaleY"
        android:valueFrom="0.0"
        android:valueTo="0.4"
        android:valueType="floatType" /&gt;
&lt;/objectAnimator&gt;</code></pre>
</div>

<p data-ke-size="size16"><span>- 애니메이션 적용할 Drawable 의 resource 적용 ( animated_logo.xml )</span></p>
<div>
<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_android_black_24dp"&gt;

    &lt;target
        android:name="animatedGroup"
        android:animation="@animator/logo_animator" /&gt;
&lt;/animated-vector&gt;</code></pre>
</div>

<p data-ke-size="size16"><span>- Drawable 의 logo 파일에 Target 적용할 이름 지어주기 ( ic_android_black_24dp.xml )</span><span></span></p>
<div>
<pre data-ke-language="kotlin"><code>&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="@android:color/holo_orange_dark"
    android:viewportWidth="24"
    android:viewportHeight="24"&gt;

	&lt;group
        android:name="animatedGroup"
        android:pivotX="12"
        android:pivotY="12"&gt;
        &lt;path
            android:fillColor="#FF000000"
            android:pathData="M17.6,11.48 L19.44,8.3a0.63,0.63 0,0 0,-1.09 -0.63l-1.88,3.24a11.43,11.43 0,0 0,-8.94 0L5.65,7.67a0.63,0.63 0,0 0,-1.09 0.63L6.4,11.48A10.81,10.81 0,0 0,1 20L23,20A10.81,10.81 0,0 0,17.6 11.48ZM7,17.25A1.25,1.25 0,1 1,8.25 16,1.25 1.25,0 0,1 7,17.25ZM17,17.25A1.25,1.25 0,1 1,18.25 16,1.25 1.25,0 0,1 17,17.25Z" /&gt;

    &lt;/group&gt;
&lt;/vector&gt;</code></pre>
</div>

<p data-ke-size="size16"><span>- android 31 버전의 themes.xml 에 애니메이션 적용</span></p>
<div>
<pre data-ke-language="kotlin"><code>&lt;style name="Theme.App.Starting" parent="Theme.SplashScreen"&gt;
	...
    &lt;item name="android:windowSplashScreenAnimatedIcon"&gt;@drawable/animated_logo&lt;/item&gt;
&lt;/style&gt;</code></pre>
</div>


<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="kakaotv" data-video-url="https://tv.kakao.com/v/442506860" data-video-thumbnail="https://scrap.kakaocdn.net/dn/fcZpA/hyUynrYCGy/3B2iRoB255rwTUljXjlaXk/img.jpg?width=1080&amp;height=1920&amp;face=0_0_1080_1920,https://scrap.kakaocdn.net/dn/jKfip/hyUyrA7Yal/fY75ip5PBABka7TVukmv81/img.jpg?width=1080&amp;height=1920&amp;face=0_0_1080_1920" data-video-width="500" data-video-height="889" data-video-origin-width="860" data-video-origin-height="1529" data-ke-mobilestyle="widthContent" data-video-title="'대부류 - [Dev u Ryu]'에서 업로드한 동영상" data-video-play-service="daum_tistory" data-original-url="">

<img src="https://scrap.kakaocdn.net/dn/fcZpA/hyUynrYCGy/3B2iRoB255rwTUljXjlaXk/img.jpg?width=1080&amp;height=1920&amp;face=0_0_1080_1920,https://scrap.kakaocdn.net/dn/jKfip/hyUyrA7Yal/fY75ip5PBABka7TVukmv81/img.jpg?width=1080&amp;height=1920&amp;face=0_0_1080_1920"></figure>

            
            
                </div></div>

대부류 - [Dev u Ryu]

류지훈

과업 정의 :
- 스플래시 스크린은 3초 유지하면서 로고는 애니메이션 처리 한다.
 
1. 라이브러리 추가
implementation("androidx.core:core-splashscreen:1.1.0-alpha02")
 
2. 컴파일 버전 맞추기
android {
    compileSdk = 34
    ...
}
 
Dependency 'androidx.core:core-splashscreen:1.1.0-alpha02' requires libraries and applications that
      depend on it to compile against version 34 or later of the
      Android APIs.
 
 
 
3. Splash 화면을 위한 Theme 에서 스타일 적용
기본 themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.AnimatedScreenSplash" parent="android:Theme.Material.Light.NoActionBar" />
    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/black</item>
        <item name="postSplashScreenTheme">@style/Theme.AnimatedScreenSplash</item>
    </style>
</resources>
 
android 31 버전의 themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <item name="android:windowSplashScreenBackground">@color/black</item>
        <item name="postSplashScreenTheme">@style/Theme.AnimatedScreenSplash</item>
    </style>
</resources>
 
4. Manifest 에서 Theme 설정 변경
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <application
    	...
    	android:theme="@style/Theme.App.Starting"
        tools:targetApi="31">
        <activity
            ...
            android:theme="@style/Theme.App.Starting">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>
 
 
5. Splash 화면이 3초 유지하고 메인화면으로 넘어가기 위한 ViewModel 처리
class MainViewModel : ViewModel() {
    private val _isReady = MutableStateFlow(false)
    val isReady = _isReady.asStateFlow()
    init {
        viewModelScope.launch {
            delay(3000L)
            _isReady.value = true
        }
    }
}
 
6. 앱이 시작하는 Activity (MainActivity) 에서 SplashScreen 화면 처리
class MainActivity : ComponentActivity() {
    private val viewModel by viewModels<MainViewModel>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        installSplashScreen().apply {
            setKeepOnScreenCondition {
                !viewModel.isReady.value
            }
        }
        
        ...
    }
}
 
 
7. 애니메이션 처리
- 적용할 애니메이션 작업 ( logo_animator.xml )
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@anim/overshoot_interpolator">
    <propertyValuesHolder
        android:propertyName="rotation"
        android:valueFrom="0.0"
        android:valueTo="360.0"
        android:valueType="floatType" />
    <propertyValuesHolder
        android:propertyName="scaleX"
        android:valueFrom="0.0"
        android:valueTo="0.4"
        android:valueType="floatType" />
    <propertyValuesHolder
        android:propertyName="scaleY"
        android:valueFrom="0.0"
        android:valueTo="0.4"
        android:valueType="floatType" />
</objectAnimator>
 
- 애니메이션 적용할 Drawable 의 resource 적용 ( animated_logo.xml )
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_android_black_24dp">
    <target
        android:name="animatedGroup"
        android:animation="@animator/logo_animator" />
</animated-vector>
 
- Drawable 의 logo 파일에 Target 적용할 이름 지어주기 ( ic_android_black_24dp.xml )
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="@android:color/holo_orange_dark"
    android:viewportWidth="24"
    android:viewportHeight="24">
	<group
        android:name="animatedGroup"
        android:pivotX="12"
        android:pivotY="12">
        <path
            android:fillColor="#FF000000"
            android:pathData="M17.6,11.48 L19.44,8.3a0.63,0.63 0,0 0,-1.09 -0.63l-1.88,3.24a11.43,11.43 0,0 0,-8.94 0L5.65,7.67a0.63,0.63 0,0 0,-1.09 0.63L6.4,11.48A10.81,10.81 0,0 0,1 20L23,20A10.81,10.81 0,0 0,17.6 11.48ZM7,17.25A1.25,1.25 0,1 1,8.25 16,1.25 1.25,0 0,1 7,17.25ZM17,17.25A1.25,1.25 0,1 1,18.25 16,1.25 1.25,0 0,1 17,17.25Z" />
    </group>
</vector>
 
- android 31 버전의 themes.xml 에 애니메이션 적용
<style name="Theme.App.Starting" parent="Theme.SplashScreen">
	...
    <item name="android:windowSplashScreenAnimatedIcon">@drawable/animated_logo</item>
</style>

JetpackCompose - SplashScreen API

댓글