Skils/Android

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

재한 2022. 11. 20. 14:26

이번 글에서는 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을 새로 만들어서 객체화시켜서 사용하는 것이 나는 편리하다고 생각.

저작자표시