3차 프로젝트 : 기능 구현 시작

남궁현·2023년 8월 17일

내일배움캠프 안드로이드 코틀린

Android

목록 보기

8/15

월요일부터 3차 팀 프로젝트가 시작됐다. 나는 detailPage UI 구성과 화면 전환 기능 구현을 맡게 되었고 오늘 전체적인 큰 틀은 모두 완성을 했다.

BottomNavigationView

BottomNavigationView를 사용해서 인텐트를 넘기며 액티비티를 전환하는거 부터 구현을 시작했다. Fragment를 사용했으면 아마 더 가독성이 좋은 코드가 나왔을 거라고 생각했지만, 회의를 통해 Activity 여러개로 구현하자라는 결론이 나왔다.

detailPage_activity

먼저 툴바를 따로 만들어서 include해주었으며, 나중에 리스트뷰를 담을 viewpager2와 bottomnavigationView로 구성했다.
bottomNavigation을 쓰는 2가지 액티비티도 비슷하게 구성했으며, 같은 아이템을 공유한다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:orientation="horizontal"
tools:context=".DetailPage">

<include
    layout="@layout/detailpage_toolbar"/>

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager2"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/toolbar"
  app:layout_constraintBottom_toTopOf="@id/bn_"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent">
</androidx.viewpager2.widget.ViewPager2>

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bn_"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_navigation_menu"
    android:background="@color/white"
    app:layout_constraintTop_toBottomOf="@+id/fl_"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

bottom_navigation_menu

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:title="detail"
    android:enabled="true"
    android:id="@+id/menu_detail"
    android:icon="@drawable/ic_detail48" />
<item
    android:title="main"
    android:enabled="true"
    android:id="@+id/menu_main"
    android:icon="@drawable/home" />
<item
    android:title="myPage"
    android:enabled="true"
    android:id="@+id/menu_myPage"
    android:icon="@drawable/user" />
</menu>

Activity 전환

DetailPage.kt

class DetailPage : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.detail_page_activity)
    setCustomToolbar(R.id.toolbar)

    overridePendingTransition(R.anim.from_left_enter, R.anim.none);

    val bottomnavi = findViewById<BottomNavigationView>(R.id.bn_)
    bottomnavi.setOnNavigationItemSelectedListener { menuItem ->
        when (menuItem.itemId) {
            R.id.menu_detail -> {
                startActivity(Intent(this, DetailPage::class.java))
                true
            }
            R.id.menu_main -> {
                startActivity(Intent(this, MainPageActivity::class.java))
                true
            }
            R.id.menu_myPage -> {
                startActivity(Intent(this, MyPageActivity::class.java))
                true
            }
            else -> false
        }
    }

}

// 메뉴 아이템 툴바에 집어 넣기
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    val inflater = menuInflater
    inflater.inflate(R.menu.toolbar_menu,menu)
    return true
}
private fun setCustomToolbar(layout: Int){
    val toolbar = findViewById<Toolbar>(layout)
    // 툴바를 액션바로 지정
    setSupportActionBar(toolbar)
    val actionBar = supportActionBar
    // 액션바에서 앱 이름 보이지 않게 지정
    actionBar?.setDisplayShowCustomEnabled(false)
}

}

구글링을 했을 때 fragment만 쓰는 방법만 나와서 한참 생각했었다. 그런데 문득 생각난게 '그냥 버튼 눌릴 때 마냥 대충 인텐트로 넘기면 넘어가지 않을까?' 였고 생각한대로 구현을 해봤더니 됐다. 진짜 간단한거 오래 생각해서 너무 바보 같았다.
```
val bottomnavi = findViewById<BottomNavigationView>(R.id.bn_)
  bottomnavi.setOnNavigationItemSelectedListener { menuItem ->
      when (menuItem.itemId) {
          R.id.menu_detail -> {
              startActivity(Intent(this, DetailPage::class.java))
              true
          }
          R.id.menu_main -> {
              startActivity(Intent(this, MainPageActivity::class.java))
              true
          }
          R.id.menu_myPage -> {
              startActivity(Intent(this, MyPageActivity::class.java))
              true
          }
          else -> false
      }
  }
```
- bottomnavi라는 변수를 만들고 setOnNavigationItemSelectedListener를 사용해서 when문으로 아이디의 맞는 버튼이 선택될 때 startActivity로 인텐트를 넘겨주며 전환이 될 수 있도록 구현했다.
- fragment가 아닌 Activity이므로 3개의 Activity파일을 전부 똑같이 해줬다.

화면 전환시 애니메이션 효과

overridePendingTransition(나타나는 화면에 적용할 애니메이션, 기존 화면에 적용할 애니메이션)

overridePendingTransition를 활용해서 Activity 시작, 종료시 애니메이션을 구현했다.
밑에 주석에 써놓긴 했지만 애니메이션 xml을 만드는 방법이다.

duration : 애니메이션 완료에 걸리는 시간 millisecond 단위

fromXdelta : x축 애니메이션이 시작하는 위치 0 이면 정위치 -100% 이면 화면 왼쪽 100% 이면 화면 우측에서 시작

interpolator : 설정한 애니메이션이 실행되는 궤적의 프리셋

toXDelta : x축 애니메이션이 끝나게 되는 위치 값은 fromXdelta 와 같음

from_left_enter

왼쪽에서 시작되서 전환되는 액티비티가 나오는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--    duration : 애니메이션 완료에 걸리는 시간 millisecond 단위
        fromXdelta : x축 애니메이션이 시작하는 위치 0 이면 정위치 -100% 이면 화면 왼쪽 100% 이면 화면 우측에서 시작
        interpolator : 설정한 애니메이션이 실행되는 궤적의 프리셋
        toXDelta : x축 애니메이션이 끝나게 되는 위치 값은 fromXdelta 와 같음
        -->
<translate

    android:duration="300"
    android:fromXDelta="-100%"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toXDelta="0%"

    />

from_right_enter
오른 쪽에서 시작해서 전환되는 액티비티가 나오는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--    duration : 애니메이션 완료에 걸리는 시간 millisecond 단위
        fromXdelta : x축 애니메이션이 시작하는 위치 0 이면 정위치 -100% 이면 화면 왼쪽 100% 이면 화면 우측에서 시작
        interpolator : 설정한 애니메이션이 실행되는 궤적의 프리셋
        toXDelta : x축 애니메이션이 끝나게 되는 위치 값은 fromXdelta 와 같음
        -->
<translate

    android:duration="300"
    android:fromXDelta="100%"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toXDelta="0%"

    />

from_up_enter
위에서 시작해서 전환되는 액티비티가 나오는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--    duration : 애니메이션 완료에 걸리는 시간 millisecond 단위
        fromYdelta : y축 애니메이션이 시작하는 위치 0 이면 정위치 -100% 이면 화면 아래쪽 100% 이면 화면 위쪽에서 시작
        interpolator : 설정한 애니메이션이 실행되는 궤적의 프리셋
        toYDelta : y축 애니메이션이 끝나게 되는 위치 값은 fromYdelta 와 같음
        -->

<translate

    android:duration="300"
    android:fromYDelta="-100%"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toYDelta="0%"

    />

none
이동하지 않는 애니메이션

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
    android:duration="300"
    android:fromXDelta="0%"
    android:fromYDelta="0%"
    android:toXDelta="0%"
    android:toYDelta="0%" />

3가지 애니메이션을 만들어 준 후 바텀바 오른쪽에 있는 mypage에는 from_right_enter, 왼쪽인 디테일은 from_left_enter, 가운데인 메인은 from_up_enter로 지정해주었다.
- MainPage.kt 중 적용 코드
```
	overridePendingTransition(from_up_enter, none)
```