[Android] - androidx 라이브러리 (액션바,메뉴 구현)

이번 글에서는 androidx 라이브러리 중에서 appcompat 라이브러리에 대해서 써볼까 합니다.

📕androidx 라이브러리

• 화면 구성과 관련된 라이브러리
  • androidx.appcompat
    • 앱의 API 레벨 호환성을 해결
  • androidx.recyclerview
    • 목록 화면을 구성
  • androidx.viewpager2
    • 스와이프로 넘기는 화면을 구성
  • androidx.fragment
    • 액티비티처럼 동작하는 뷰를 제공
  • androidx.drawerlayout
    • 옆에서 서랍처럼 열리는 화면을 구성

 

📕appcompat 라이브러리

• 안드로이드 앱의 화면을 구성하는 액티비티를 만들며 API 레벨의 호환성 문제를 해결
• appcompat 라이브러리 선언
  • dependencies 항목에 appcompat 선언(자동 추가)
• appcompat 라이브러리 사용
  • 액티비티를 만들 때 AppCompatActivity 클래스를 상속받아서 작성

import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

}

 

📗액션바(ActionBar)

• 화면 위쪽에 타이틀 문자열이 출력되는 영역
• 내비게이션 아이콘, 액션 아이템, 오버플로 메뉴 등 출력

 

📗액션바 숨기기 설정

• thems.xml 파일 수정
  • parent 속성 변경

parent="Theme.MaterialComponents.DayNight.NoActionBar" <!--  액션바 숨기지 않기 -->
parent="Theme.MaterialComponents.DayNight.DarkActionBar"  <!-- 액션바 숨기기 -->

•  item 속성 추가
  • thems.xml 파일에서 <item name>으로 추가하면 됨.

📕메뉴

• 메뉴 추가
  • 액션바에 메뉴를 추가하면 액션바 오른쪽에 오버플로 버튼 생성
  • 오버플로 버튼을 클릭하면 메뉴가 아래로 확장됨.
• •  

• 메뉴 추가 방법
  • XML을 이용하는 방법과 코드상에서 직접 구현하는 방법
  • onCreateOptionsMenu() 함수
    • 액티비티가 실행되면서 처음에 한 번만 호출
    • 액티비티에 정적인 메뉴 구성할 때 사용
• 코드상에서 메뉴 추가
  • onCreateOPtionsMenu(menu : Menu?) 구현
  • menu?. add(groupId, itemId, order, title) 함수 호출
    • 직접 메뉴 항목 추가(itemId는 중복되지 않는 번호로 구성)

 override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        val menuItem1: MenuItem? = menu?.add(0, 0, 0, "배경색(빨강)")
        val menuItem2: MenuItem? = menu?.add(0, 1, 0, "배경색(파랑)")
        val menuItem3: MenuItem? = menu?.add(0, 2, 0, "배경색(노랑)")
        return super.onCreateOptionsMenu(menu)
    }

• 메뉴 선택 시 이벤트 처리
  • onOptionsItemSelected(item : MenuItem) 함수 구현
    • 선택된 메뉴 항목 : when 문에서 메뉴 항목의 id(itemId) 번호로 구분 
      •  그래서 itemId 같은 변수는 중복되면 안 됨.

override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId) {
            0 -> {
                baseLayout.setBackgroundColor(Color.RED)
                return true
            }
            1 -> {
                baseLayout.setBackgroundColor(Color.BLUE)
                return true
            }
            2 -> {
                baseLayout.setBackgroundColor(Color.YELLOW)
                return true
            }
        }
        return super.onOptionsItemSelected(item)
    }

• 해당 코드는 클릭된 메뉴 item에 따라 배경색을 변경하는 코드

 

리소스를 이용한 메뉴 구현

• menu 폴더 아래에 xml파일을 생성하고 거기서 item 요소에 추가될 메뉴 id 및 title을 추가해줌.

• OncreateOPtionsMenu 코드 상에서 inflater값을 가져오고 xml파일을 inflate 해준다.
  • 즉 xml파일에 있는 코드들을 객체화해서 사용하게 한다.
  • R.XX로 사용 가능함.

 

✔느낀 점

개인적으로는 코드 상으로 menu를 구현하는 것보단 res 파일에 menu에 xml을 새로 만들어서 객체화시켜서 사용하는 것이 나는 편리하다고 생각.