#0718 [안드로이드][코틀린] 계산기 앱 만들기 - 1

특강 때 쓰려고 간단하게 계산기 앱을 만들어보았다.

간단한 것 치고는 애니메이션에 비동기처리까지 있다...!!ㅋㅋㅋ

그럼 시작!

 

1. 모듈 불러오기

android {
    compileSdk 32

    defaultConfig {
        applicationId "com.example.calculator"
        minSdk 29
        targetSdk 32
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }

    //ViewBinding
    viewBinding{
        enabled true
    }
}

dependencies {
    //Lottie
    implementation 'com.airbnb.android:lottie:3.0.7'

    //RxJava
    implementation 'io.reactivex.rxjava3:rxandroid:3.0.0'

    //LiveData
    implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0'

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.appcompat:appcompat:1.4.2'
    implementation 'com.google.android.material:material:1.6.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}

뷰바인딩을 추가하고, Lottie, RxJava, LiveData 모듈을 추가한 후 싱크해준다.

 

2. 뷰바인딩 체크

package com.example.calculator

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.calculator.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    var activityMainBinding : ActivityMainBinding? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding!!.root)
    }
}

 

onCreate 전에 변수선언 되는지 확인한다. 변수선언이 되면 뷰바인딩이 잘 불러와진거다.

 

3. SplashActivity

package com.example.calculator.splash

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.calculator.databinding.ActivityMainBinding
import com.example.calculator.databinding.ActivitySplashBinding

class SplashActivity : AppCompatActivity() {
    var activitySplashBinding: ActivitySplashBinding? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        activitySplashBinding = ActivitySplashBinding.inflate(layoutInflater)
        setContentView(activitySplashBinding!!.root)
    }
}

        <activity
            android:name=".splash.SplashActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

splash 패키지를 추가한 후, new->activity->empty activity를 눌러 SplashActivity 액티비티를 새로 만든다.

2번과 마찬가지로 뷰바인딩 시켜준 후 제일 첫 화면으로 만들기 위해 AndroidManifest.xml 파일을 수정해준다.

 

4. 그림 추가

로고 이미지는 drawable에 넣고, lottie json파일은 raw 디렉토리를 만들어서 그 안에 넣었다.

 

5. activity_splash.xml

여기다가 이미지뷰를 추가하고, 로고 jpg파일을 설정해준다.

아래쪽을 제외한 양옆과 아래 세군데를 화면 끝과 맞춰준다(Constraint Layout).

이 다음에는 lottie json을 추가해야 하는데, lottie는 안드로이드 스튜디오에서 지원하지 않는다.

그래서 코드로 추가해줘야 한다.

코드 쓰고 디자인 탭으로 돌아가 경계도 설정해준다.

애니메이션을 너무 꽉차게 하면 안 예뻐서, padding도 30dp로 설정해준다.

코드와 완성 화면.

 

6. 3초 후에 메인액티비티로 전환되게 하기

 

여기서 RxJava의 타이머를 사용할 것이다.

Single.timer는 데이터 1개를 전달할 타이머를 선언한 것이다.

인자는 초단위로 3초 쉰다는 뜻이다

SplashActivity가 하는 일이 계산기를 띄우는 동안 애니메이션을 보여주는 것이기 때문에, 스레드를 새로 생성해야 한다.

그러므로 Schedulers.io()를 이용해 스레드를 하나 더 만들어 구독한다.

그 후 해당 데이터를 메인스레드에서 관찰하도록 시키고, 화면을 바꾼다.

 

백스페이스 눌러도 화면이 돌아가지 않도록 액티비티가 바뀔 때 이전 액티비티를 지워준다.

이걸 써주면 메인 화면에 새로운 테스크가 스택에 쌓이고, 원래 있던 화면은 스택에서 빠지게 된다.

 

7. activity_main.xml

 

메인액티비티의 xml을 만들어준다.

우선 디자인 탭으로 가서, 팔레트의 Text->number를 끌어와서 맨 위로 옮긴다.

그 후, 버튼 16개가 필요하므로 LinearLayout을 이중으로 넣은 후 버튼을 추가해준다.

근데 버튼이 4개밖에 보이지 않는다. 이는 레이아웃을 추가할 때 높이 설정을 match_parent로 해서 그렇다.

wrap_content로 바꿔주면 16개가 모두 잘 보인다.

vertical LinearLayout도 높이를 wrap_content로 바꿔준다.

EditText의 layout_width를 0dp로 설정하고, 가장 밖에 있는 LinearLayout의 constraint를 위쪽 제외하고 모두 parent로 당겨준다.

코드 윗부분과 디자인이다.

남은 부분은 다음 글에서 설명하겠다!