[Meal Box] Splash 화면 구현하기

2021 앱프로그래밍 수행평가 + 포트폴리오

Meal Box Github repository

Splash란?

앱이 처음에 실행될 때 로고화면이 나오고 메인화면으로 진입되는데, 이때 로고화면이 Splash다.

이번에 만들고 있는 앱인 Meal Box의 Splash를 띄우는 코드 ⬇

class MainActivity : AppCompatActivity() {

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            val intent = Intent(this,Splash::class.java)
            startActivity(intent) // 로딩 액티비티로 화면전환
        }
    } //MainActivity.kt에 적어주면 Splash화면이 뜨게된다.

🔎 FrameLayout이란?

View를 겹치게 사용하고 싶을 때 쓰는 레이아웃

 <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
   
 <View
        android:id="@+id/ellipse_6"
        android:layout_width="192dp"
        android:layout_height="189dp"
        android:layout_marginStart="280dp"
        android:layout_marginTop="500dp"
        android:background="@drawable/ellipse_6" />

        <View
            android:id="@+id/ellipse_9"
            android:layout_width="300dp"
            android:layout_height="271dp"
            android:layout_marginStart="170dp"
            android:layout_marginTop="600dp"
            android:background="@drawable/ellipse_9" />
   
</FrameLayout>

먼저 간단하게 선언해주고 레이아웃 안에 View를 넣으면 된다.

그럼 이렇게 View들이 겹쳐지면서 원하는 결과물이 나오게 된다!!

⚪ xml로 도형 만들기

• 화면에 필요한 원을 두 가지 방법으로 만들어보았다.

<!-- ellipse_6.xml-->

<?xml version="1.0" encoding="utf-8"?>
    <vector
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:aapt="http://schemas.android.com/aapt"
        android:width="192dp"
        android:height="189dp"
        android:viewportWidth="192"
        android:viewportHeight="189"
        >

        <group>

            <clip-path
                android:pathData="M192 94.5C192 146.691 149.019 189 96 189C42.9807 189 0 146.691 0 94.5C0 42.3091 42.9807 0 96 0C149.019 0 192 42.3091 192 94.5Z"
                />
            <path
                android:pathData="M0 0V397H398V0"
                android:fillColor="#FCCCCC"
                />

        </group>

    </vector> //1. Figma-Inspect 참고해서 만든 방법

 <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#FCCCCC"/>
    <stroke
        android:width="4dp"
        android:color="#FCCCCC"
        android:dashWidth="4dp"
        android:dashGap="2dp" />
    <padding
        android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="4dp" />

</shape> //2. android:shape="oval"을 사용해 만든 방법

---

사실 Splash 처음 써보는 건 아닌데 이렇게 정리하면서 더 Splash에 대해 잘 알게 됐고 FrameLayout을 모를 때에는 View가 자꾸 안 겹쳐져서 화났었는데 이렇게 해결방법이 있다는 걸 알게 되어서 뿌듯하다

그리고 도형도 첫번째 방법으로 다 해결하려고 했는데 몇개가 원이 아닌 사각형으로 떠서 강제로 oval 줘서 해결해버려서 다소 아쉬운 점은 있다