[Kotlin] 간단 메모장 만들기 1 #Intent #FloatingActionButton #다크모드

간단한 메모장을 만들어 보기로 했다.

 

- 대략적인 설계

 

MainActivity에서는 메모 리스트(이미지 썸네일 1개, 제목, 내용, 작성 날짜)를 볼 수 있고 해당 리스트를 클릭하면 상세보기를 할 수 있다. 메인에서 화면 전환은 Fragment로 할 예정이다.

메인에서 FloatingActionButton을 통해 WriteActivity를 생성한다. WriteActivity는 게시글을 작성하는 페이지로 이미지 여러 장을 추가할 수 있고 제목(한 줄)과 내용을 작성하여 DB에 저장한다.

 

개발에 앞서 Activity와 Fragment에 대해 찾아봤는데 이전엔 성능 때문에 여러 가지를 고려해서 사용했는데 지금은 Single Activity에 Fragment만 사용해서도 어플 제작이 가능하다고 한다. 그래도 여기서 게시글 작성 페이지는 다른 행동을 하는 페이지이기 때문에 따로 Acitivity를 사용했다.

 

MainActivity.kt

 

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
      	//WriteActivity가 생성될 때 애니메이션 추가 
        with(window){
            requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
            // set an slide transition
            enterTransition = Slide().also {
                it.slideEdge = Gravity.BOTTOM
            }
            exitTransition = Slide().also {
                it.slideEdge = Gravity.TOP
            }
        }
        //기본 생성자들
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //fab버튼 클릭시 새 액티비티 생성
        val fabButton :FloatingActionButton = this.findViewById(R.id.Main_FabButton_fab)
        fabButton.setOnClickListener { v: View? ->
            val intent = Intent(this, WriteActivity::class.java)
            //애니메이션 옵션 추가
            val options = ActivityOptions.makeSceneTransitionAnimation(this)
            startActivity(intent, options.toBundle())
        }
    }
}

 

애니메이션을 사용하려면 styles.xml에 아래 코드를 입력해야 사용 가능하다.

 

<item name="android:windowContentTransitions">true</item>

 

activity_main.xml

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

   <com.google.android.material.floatingactionbutton.FloatingActionButton
       android:id="@+id/Main_FabButton_fab"
       android:src="@drawable/ic_add_24dp"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_margin="16dp"
       android:layout_gravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

기본 xml에 FloatingActionButton만 추가했다.

이것을 사용하려면 Project Structure에 Dependencies의 app에 com.android.support를 추가해야 한다.

 

 

- 다크 모드 지원하기

 

styles.xml 

 

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
	색깔 이름들...
</style>

 

Theme.AppCompat.DayNight 로 바꿔주면 알아서 사용 가능하다. 다크 모드를 사용하려면 디자인 권장사항이 따로 있다.

 

 

색상 변경에 조심해야 한다.

 

참고: https://developer.android.com/guide/topics/ui/look-and-feel/darktheme?hl=ko

어두운 테마  |  Android 개발자  |  Android Developers

 

*추가

 

어두운 테마(다크 모드)를 사용할 때 색상을 다르게 하고 싶으면 res에 values-night라는 폴더를 하나 만들고 거기에 colors라고 원래 있던 파일과 똑같은 이름으로 만들어 준 뒤 안에 있는 내용도 똑같이 하고 색상만 바꿔주고 그 색상을 어플에 적용하면 테마가 바뀌면 알아서 색상이 바뀐다. 또 참고로 vector 이미지의 색상을 바꿔줄 때는 fillColor가 아니고 tint의 색상을 바꿔야 한다....ㅋㅋ