[Instagram 클론 코딩] 로딩 페이지 만들기

첫 클론코딩 주제로 잡아본 인스타그램...
생각보다 필요한 아이콘이 많아서 애먹었다.

맨 처음으로 만들려고 한 것은 역시 시작 화면인 로딩 페이지.

실제 구현 화면인데, 필요한 것만 넣고 깔끔하게 진행했다.

xml 코드는 딱 로고를 띄울 ImageView 두 개만 필요하다.
요소가 적은만큼 xml 코드 역시 간단하다.

// acitivity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Scenarios.intro.MainActivity">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:src="@drawable/main_logo" />

    <ImageView
        android:id="@+id/text_logo"
        android:layout_width="110dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="15dp"
        android:src="@drawable/instagram" />
    
</RelativeLayout>

RelativeLayout을 사용해서 작성했고 첫 시작으로 나올 페이지라서 따로 만들기보단 MainAcitivity에 바로 작성해줬다.

이 글을 작성하는 시점에는 여러 페이지들이 추가돼서 MainActivity.kt에 다른 기능이 있는데, 이 화면만 완성되고 났을 때는 따로 메인 액티비티를 건들 게 없다.

그래서 로딩 페이지의 느낌이라도 주고자 HomeActivity.kt를 하나 생성해서 TextView를 하나 배치하고, 메인 액티비티에서 3초가 지났을 때 홈 액티비티로 넘어가게 작성했었다.

// MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        Handler().postDelayed({
            val intent = Intent(this, HomeActivity::class.java)
            intent.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION)
            startActivity(intent)
            finish()
        }, 3000)
    }
}

HomeActivity는 아직 딱히 작성할 내용이 없어서, 생성된 그대로 두면 된다.

xml을 사용해서 코딩을 한지 너무 오래돼서 레이아웃 배치를 어떻게 했었는지 기억이 안 났는데, 역시 구글링이 최고다.

다음에는 홈페이지 구현에 대해 작성해보겠다.