악역영애의 개발일지

앱을 실행시키면 Activity가 띄워질때까지 흰 화면이 보일것이다.

이것을 감추기위하여 splsh 화면을 추가해보자.

순서는 새로운 splash 전용 새로운 액티비티를 생성하고 해당 액티비티에 theme 로 splash 이미지를 걸어둘것이다.

1. 이미지 다운로드 및 추가

난 적당히 로고로 사용할 이미지를 다운받았다

https://pixabay.com

이미지를 프로젝트의 res > drawable 폴더에 추가한다

2. 로고 이미지 resource 화

이미지를 그대로 사용하기보다는 themes 에 추가하여 사용하는것이 재사용성에 좋다

우선 drawable 우클릭 -> New -> Drawable Resource File 선택 후 file name 을 splash.xml 로 설정한다

아래와 같이 코드를 바꿔준다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>

    <item android:bottom="0dp" android:right="30dp">
        <bitmap
            android:gravity="center_vertical|right"
            android:src="@drawable/logo" />
    </item>

</layer-list>

이미지를 xml resource 로 바꿔준것이며 바탕화면을 하얀색으로 바꾸고 이미지를 추가해주었다.

3. Themes에 해당 resource 추가

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.Basic_mobile" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>

    <style name="Theme.Basic_mobile" parent="Base.Theme.Basic_mobile" />

////추가////
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.Bridge">
        <item name="android:textSize">18dp</item>
    </style>
 ////추가////
    <style name="AppTheme.Splash">
        <item name="android:windowBackground">@drawable/splash</item>
    </style>

</resources>

4. Entry Activity 추가

empty activity 를 추가해주자. 파일명은 EntryActivity 이며 activity_entry.xml 은 건들지말고 EntryActivity.kt 파일만 수정한다

class EntryActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        goPageIntro()
    }

    fun goPageIntro() {
        Handler(Looper.getMainLooper()).postDelayed({
            val intent = Intent(this, IntroActivity::class.java)
            startActivity(intent)

            finish()
        },1500) //여기숫자로 splash 화면 초 설정 가능
    }
}

해당 액티비티에 들어오면바로 IntroActivity 로 이동하게 하는 로직을 추가했다.

5. AndroidManifest 수정

이렇게 만든 EntryActivity 가 앱 첫실행 시 로드되도록 AndroidManifest를 수정해보자

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" >

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Basic_mobile"
        tools:targetApi="31" >
        <activity
            android:name=".IntroActivity"
            android:exported="false" />
        <activity
            android:name=".MainActivity"
            android:exported="false" />
        <activity
            android:name=".EntryActivity" ////수정////
            android:exported="true"
            android:theme="@style/AppTheme.Splash" > ////수정////
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

이렇게 하면 logo 이미지를 resource 화 시키고 theme 에 등록시켜서 android:theme 으로 불러오기까지 완성!

추가적으로 오류사항을 발견했다. splash 화면을 넣었음에도, 상단에 basic_mobile 이라는 app name이 노출된다.

app name을 없애보자

6. app name 제거

themes.xml 파일을 수정해보자

....

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.NoActionBar.Splash">
        <item name="android:windowBackground">@drawable/splash</item>
    </style>
....

windowActionBar , windowNotitle 속성을 추가했다.

그리고 겸사겸사 다른이미지로 바꿈...

이렇게하면 더이상 app name이 보이지않는다.

예제로, 특정 버튼을 클릭하면 홈화면이 뜨도록 해보자.

나는 IntroActivity 를 생성하고 버튼을 클릭하면 MainActivity 가 뜨도록 수정할것이다.

1. Intro Activity 생성

지난 포스팅에서와 같이, Activity 는 화면이라고 이해하면 되겠다.

MainActivity 의 상위 패키지에서 New > Activity > Empty Views Activity 를 선택한다

새로운 Activity 이름은 IntroActivity 로 설정하자

Layout Name 은 자동으로 바뀔텐데 혹시 자동으로 바뀌지않았다면 activity_intro 라고 입력해주자

2. Intro 꾸미기

아래와 같이 깔끔하게 기본세팅해준다

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

</layout>

이곳이 Intro Activity 임을 알수있게 꾸며주자.

간단하게 텍스트를 추가해보겠다. 웹에서는 <input> 태그를 사용했다면, 안드로이드에서는 EditText, 혹은 TextView 를 사용한다.

EditText는 수정가능한 <input> 이고, TextVeiw 는 수정불가한 <p> 태그와 비슷하다

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

////추가////
    <TextView
        android:text="This is Intro"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</layout>

이렇게하면 우측 미리보기화면에 글자가 나와있는것을 볼 수 있다.

만약 layout_width, height 를 설정하지않으면 글자가 안보인다. 해당 설정을 해줘야만 보인다

여기에, 버튼을 하나 추가해보자.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <TextView
        android:text="This is Intro"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

///추가/////
    <Button
        android:text="버튼"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</layout>

이상하게도 버튼이 보이지않는다.

이럴때 필요한게 웹에서의 <li> 와 같은 기능이다.

안드로이드는 여러가지 요소를 세로, 혹은 가로로 나타나고싶을때 부모태그를 추가해줘야한다.

ConstraintLayout 을 쓰면 자동완성으로 아래와 같은 태가 보인다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

////추가/////
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:text="This is Intro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <Button
            android:text="버튼"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

width, height 를 match_parent로 해준다. 높이 넓이를 부모요소와 같게 하겠다는 뜻이다.

나는 텍스트와 버튼을 세로정렬로 해주고싶어서 orientation = vertical 인데, 세로정렬은 horizontal 이다

하지만 이렇게하면 버튼이 TextView를 덮어버리므로 버튼을 맨 아래로 보내고 TextView 를 정가운데로 보내보자.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:text="This is Intro"
            android:layout_width="wrap_content" ////수정////
            android:layout_height="wrap_content" ////수정////
            app:layout_constraintTop_toTopOf="parent" ////추가////
            app:layout_constraintBottom_toBottomOf="parent" ////추가////
            app:layout_constraintStart_toStartOf="parent" ////추가////
            app:layout_constraintEnd_toEndOf="parent"/> ////추가////

        <Button
            android:text="버튼"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"/> ////추가////
    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

이렇게 인트로 화면을 만들었다.

TextView 를 wrap_content 로 바꾼이유는, 상위요소 기준으로 가운데로 보내야되는데 넓이가 부모만큼 크면 어디로 보내야할지 모르게 된다.

그래서 TextView 범위는 content 를 감쌀정도, 작게 만들고 상위요소를 기준으로 해당 컨텐츠 위치를 조정하는 의미이다

3. Main Activity 로 이동하기

버튼을 누르면 MainActivity 로 이동시켜주려고 한다.

그러려면 버튼에 클릭이벤트를 주어야한다.

우선 버튼에 id를 할당하자.

//activity_intro.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:text="This is Intro"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <Button
            android:id="@+id/btn_go_main" //// 추가 ////
            android:text="버튼"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

해당 xml 의 이벤트등록 및 데이터바인딩은 모두 activity_intro.xml 의 짝꿍 IntroActivity.kt 에서 할수있다.

//introActivity

class IntroActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_intro)
        
        //버튼 정의
        val goMainBtn = findViewById<Button>(R.id.btn_go_main)
        
        //버튼 클릭 이벤트
        goMainBtn.setOnClickListener {
            val intent = Intent(this, MainActivity::class.java)
            startActivity(intent)
        }
        
    }
}

버튼 정의 부분을 보면

findViewById<Button>(R.id.btn_go_main)

findViewById  : id를 기준으로 찾을건데

<Button> : 버튼 요소이며

R.id.btn_go_main : id 는 btn_go_main 

버튼을 goMainBtn 이라는 변수에 넣고 클릭이벤트를 준것이다.

Activity 간의 이동을 할때는 intent 정의 후 startActivity 로 이동한다. 이것은 공식!

외전) 버튼 정의 우아하게 하기

버튼정의할때 위의 방법은 기초적인 방법이고...실무에서 자주 쓰이는 binding 방법으로 수정하

1) build.gradle 수정

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}
android {
    namespace 'com.example.basic_mobile'
    compileSdk 34
...
..
.

    kotlinOptions {
        jvmTarget = '1.8'
    }
    
    buildFeatures { ////추가////
        viewBinding = true
        dataBinding true
    }
}

buildfeatrures 를 추가해준다. 이것은 데이터바인딩을 하겠다는 의미.

build.gradle 수정하고 Sync now 를 클릭해준다.

2) IntroActivity 수정

class IntroActivity : AppCompatActivity() {

    private lateinit var binding : ActivityIntroBinding ////추가////
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

         ////수정////
        //binding 초기화 
        binding = ActivityIntroBinding.inflate(layoutInflater)
        setContentView(binding.root)
        
        //버튼 정의
        val goMainBtn = binding.btnGoMain ////수정////

        //버튼 클릭 이벤트
        goMainBtn.setOnClickListener {
            val intent = Intent(this, MainActivity::class.java)
            startActivity(intent)
        }
    }

}

binding 이라는 변수를 추가해주고, activity_intro.xml과 연결시킨다.

본인의 나는 activity_intro.xml 이라서 ActivityIntroBinding 이지만

만약 activity_sample,xml 이라면 ActivitySampleBinding 일것이다.

어짜피 자동완성되므로 괜춘.

4. 앱 실행 시 Intro Activity 실행

AndroidManifest.xml로 가서 앱 첫진입대상을 바꿔주자

<?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:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Basic_mobile"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity" //// 수정 ////
            android:exported="false" />
        <activity
            android:name=".IntroActivity" //// 수정 ////
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

이렇게하면, 앱 첫진입은 intro에서하고 버튼누르면 MainActivity 로 페이지 이동하는것을볼 수 있다.

만약 에러가 발생한다면 Logcat 을 확인하자

좌측 상단에 현재 내 에뮬레이터 기기가 맞는지 유의할것!!

디버깅이 필요하다면 벌레모양 클릭~

원하는 코드에 breack point 생성~

최종적으로 아래와 같은 동작을 확인할 수 있다.

1.  프로젝트 생성

안드로이드 스튜디오 -> New Project -> Empty Views Activity 

2. 화면 생성

Empty View Activity 로 프로젝트를 생성하면 아래와 같은 프로젝트를 확인할 수 있다.

자 이제 그러면 이 괴상하게 생긴 프로젝트를 뜯어보자.

애뮬레이터관련 세팅은 모두 완료했다고 가정하고, 프로젝트를 시작시키면 hello world 페이지가 나온다.

이 페이지는 어떻게 나온걸까?

1) activity_main.xml

바로 이곳을 통해서 나왓다. 이곳은 프로젝트를 생성하면 기본적으로 주어지는 페이지이다.

아래와 같은 파일이 보일텐데 겁먹지말고 우측의 Split 을 눌러주자.

그러면 아래와 같이 코딩을 할 수 있는 화면과 우측의 미리보기 화면이 제공된다

앞으로 개발할때는 이 화면을 기본으로 두고 개발하면 된다.

왼쪽 코드영역에서 TextView 태그를 자세히 보면 android:text = "Hello World!" 가 보일텐데, 이것이 앱에 보이는 글씨다.

그렇다면 어떤 원리로 이 화면이 나오게 되는걸까?

2) MainActivity.kt

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

onCreate 라는 함수를 통해서 View 즉 화면을 생성한다.

create 를 할건데, 어떤 view를 보여줄것이냐? setContentView( ) 괄호를 보여줄것이다. 

괄호에 들어가는 파라미터는 R.layout. ~~ 이런 형식인데 R은 root 라고 생각하자.

프로젝트 root 에서 layout 폴더에 들어있는 xml들을 해당 파라미터에 넣을 수 있다.

현재는 activity_main 밖에없으므로 R.layout. 을 입력하면 자동완성으로 acitivity_main 이 보여질것이다.

(activity_main 을 Ctrl +우클릭 혹은 Ctrl + Alt 해보면 activity_main.xml로 이동됨)

이렇게 activity 를 통해서 view 화면이 앱에 보여지는데 정작 MainActivity는 어디서 실행되는걸까?

3) AndroidManifest.xml

이곳은 안드로이드 앱권한, intro 화면 설정, Activity 종류를 나열하는 곳이다.

새로운 Activity 를 생성하면 이곳에도 추가된다.

<activity> 태그를 보면 name 으로 MainActivity 가 적혀있는데, 이 태그는 MainActivity 에 대한 설정이라는 뜻

그리고 intent-filter 로

이것은 앱을 실행 시켰을 때 처음으로 진입하는 진입점이라는 표시다.

즉 해석하자면, MainActivity 가 있으며 이것은 앱을 실행했을때 가장 처음으로 노출되는 화면이라는 뜻이다.

3. 구조 정리

이렇게 프로젝트 생성과 어떻게 앱 화면이 노출되는지 순서대로 살펴보았다.

주요 개념은 아래와 같다.

build.gradle

dependencies 추가

manifests

앱권한, intro, mainActivity, splash 화면 설정

java

Activity 파일 위치하며, 로직을 작성하는 곳

res

이미지, 레이아웃, 화면을 그리는 xml 파일 등 resources가 위치함

Preferences -> Android -> SDK location 설정

Project -> 버전선택