통합 SNS - Twice 개발하기 (5) Splash 화면 만들기

Intro

KaKao Talk Splash 화면

카카오톡을 실행시킬 때 이런 화면이 맨 처음 뜬 뒤 실제 기능을 사용 할 수 있는 메인 화면이 나온다.

사용자의 관점에서는 자신이 어떤 어플리케이션을 켰는지, 어느 회사껀지를 확인 할 수 있는 화면정도가 된다.

개발자 입장에서는 자신의 회사를 홍보 할 수있으면서, 어플리케이션의 비동기 초기화 작업을 진행하거나 각종 퍼미션에 대한 허락을 받는 페이지로 활용 할 수있다.

 

Twice에서도 Facebook, Twitter, Firestore에 대한 초기화 작업을 진행하는 시간이 필요하기에 Splash 화면을 만들어야 한다.

 

유의점

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

먼저 Splash 화면의 onCreate부분. Splash 화면은 setContentView 함수를 호출하지 않는다.

즉 초기화하는 Activity의 소스코드만 존재할 뿐 xml 파일은 만들지 않는다.

이유는

xml파일에 ImageView를 두고 width와 height 속성을 "match_parent"로 지정해 화면에 꽉 채워 src로 파일을 지정해 주는 방식으로 처음에 구현 했었는데. 아주 잠깐이지만 inflate 되는 과정에서 로고가 깔리기 전에 흰색 배경화면이 미리 깔려있는 모습이 보인다.

 

따라서 layout을 inflate 하는것이 아니라. 이미지를 background로 쓰고 있는 화면을 load해야한다.

 

Splash 화면 구현하기

1. Splash 이미지 준비하기

 먼저 로딩 화면에 사용할 어플리케이션 로고가 있어야 어떤 화면이 켜졌는지 확인 할 수 있다. 

 팀원이 포토샵으로 만들어준 Application의 로고.

 

 2. Splash 화면의 배경화면으로 만들기.

  로고 파일을 배경으로 사용하기 위해 drawable에 background_splash.xml 파일을 만든다.

  이 xml파일은 배경으로 사용할 색과 이미지를 layer-list로 묶어 하나의 배경으로 만들어준다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Back Ground -->
    <item android:drawable="@color/cardview_light_background"/>

    <!-- Logo -->
    <item
        android:gravity="center"
        android:height="280dp"
        android:width="310dp"
        >
        <bitmap
            android:gravity="fill_vertical|fill_horizontal"
            android:src="@drawable/logo2"
            />
    </item>

</layer-list>

  Logo를 불러오는 부분에서 gravity를 지정해주지 않으면 이미지가 화면 밖으로 나가거나 너무 작게 나오는 현상이 발생하기 때문에 꼭 gravity 속성을 넣어 가운데에 넣어주어야 한다.

 

  3. Style 생성하기

   배경으로 쓸 drawable 파일도 만들었으면 Style에 새로운 Style을 추가해주어야 한다.

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

res/style.xml에 NoActionBar을 상속받는 SplashTheme라는 스타일을 설정 해 준뒤

해당 스타일의 아이템으로 아까 만든 background_splash를 넣어준다.

NoActionBar 속성을 통해 앱의 ActionBar부분이없어 화면에 꽉 차게 이미지를 넣어 줄 수 있다.

이로써 해당 Activity에서 사용할 스플래시 화면의 배경 준비가 끝났다.

 

  4. Manifest.xml 파일에 등록하기

   Manifest.xml에서 Splash 화면으로 사용할 Activity의 theme 속성에 style을 지정해주면된다.

   Splash화면에서 화면이 돌아가게되면 OnCreate 함수가 재 호출되기 때문에 방지하기 위해 Orientation 속성을 지정해줬다. 만약 비동기 작업이 필요없거나 OnCreate 함수가 재 호출되도 문제가 없다면 해당 속성은 없어도 된다.

<activity
            android:name=".view.InitActivity"
            android:screenOrientation="portrait"
            android:theme="@style/SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

  

  5. onBackPressed Override ( 선택 )

   일단 이부분은 선택적인 부분으로 안해줘도 상관 없다고 생각한다.

   인스턴스의 초기화 부분이 아닌 앱의 종료를 방지하기 위한 부분

@Override
public void onBackPressed() {
    // To Prevent finish application by back-button
}

@Override
protected void onStart() {
    super.onStart();
}

   원래 코드는 onStart와 같이 super.OnBackPressed가 들어있어 스플래시 화면에서 뒤로가기를 누를 시 종료가 된다.

   앱의 안정적인 부분을 위해 해당 부분을 제거했지만 개인의 성향에 있어 굳이 수정을 안해도 된다고 생각은 한다.

 

Splash 화면을 만드는건 끝 어렵지는 않지만 앱을 만들 때에 있어서는 필수적으로 해주어야 하는 부분.

이번에 통과한 Summer Coding 2차에서도 1.3초짜리의 Splash 화면을 요구했기 때문에 알고는 있어야 한다고 생각한다.

 

전체 소스코드

Twice의 Splash 화면에 대한 Source 코드는 아래 GitHub에 공유되어 있습니다.

  InitAcitvity.java

https://github.com/GirlFriend-Yerin/Twice/blob/Develop/app/src/main/java/sysproj/seonjoon/twice/view/InitActivity.java

GirlFriend-Yerin/Twice