ActionBar와 Toolbar

jihyo·2022년 8월 8일

Jetpack

목록 보기
1/2
post-thumbnail

Jetpack

제트팩은 구글에서 안드로이드 앱 개발용으로 제공하는 추가 라이브러리 모음으로 3가지 주 목적으로 사용되며 .androidx로 시작하는 패키지명을 사용한다.

  • 앱을 개발하는 데 필요한 권장 아키텍처 제공
  • API 레벨 호환성 문제 해결
  • 플롯폼 API에서 제공하지 않는 기능을 제공

ViewModel, LiveData, Room, Paing 등의 라이브러리를 제공한다.

androidx 라이브러리

자주 쓰이는 화면 구성에 대한 라이브러리들이 있다.

  • androidx.appcompat : 앱의 API 레벨 호환성을 해결
  • androidx.recyclerview : 리사이클러뷰 화면을 구성
  • androidx.viewpager2 : 스와이프로 넘기는 화면을 구성
  • androidx.fragment : 프래그먼트 제공
  • androidx.drawerlayout : 측면에서 서랍처럼 열리는 화면을 구성

appcompat 라이브러리 - API 호환성 해결

화면을 구성하는 액티비티를 만들고 API 레벨의 호환성 문제를 해결하는 라이브러리로 gradle 파일의 dependencies 에 자동으로 선언되어 있다.

01 appcompat gradle

appcompat 라이브러리를 사용해서 액티비티를 만들면 플랫폼 API의 Activity가 아닌 appcompatAppCompatActivity 클래스를 상속받게 된다.

02 AppCompatActivity

appcompat 라이브러리를 제거하고 플랫폼 API의 Activity를 사용하는 것도 가능하나 안드로이드 버전이 올라감에 따라 appcompat 라이브러리를 이용하는 것이 호환성 문제에서 자유롭다.

액션바

화면 위쪽에 타이틀 문자열이 출력되는 영역

03 ActionBar

액티비티 화면은 크게 액션바콘텐츠 영역으로 구분된다. 액션바 구성은 필요에 따라 만들 수 있다.

04 ActionBar 구성

코드로 메뉴 구성하기

위에서 살펴본 오버플로우 메뉴는 정말 많이 사용한다. 그래서 이 메뉴를 구성하는게 중요하다.

05 Overflow Menu

액티비티에 메뉴를 추가하면 액션바 우측에 오버플로우 버튼이 나타난다. 이 버튼을 누르면 메뉴가 아래로 확장되어 나타난다.

메뉴를 추가하려면 onCreateOptionsMenu() 함수와 onPrepareOptionsMenu() 함수를 사용해야 한다.

onCreateOptionsMenu()onPrepareOptionsMenu()
액티비티의 메뉴를 구성할 때 자동으로 호출되는 함수. 두 함수의 차이점은 호출되는 시점이 다르다.

  • onCreateOptionsMenu()
    • 액티비티가 실행되면서 처음 한 번만 호출
    • 정적인 메뉴를 구성할 때 사용
  • onPrepareOptionsMenu()
    • 액티비티가 실행되면서 한 번 호출된 후 오버플로우 메뉴가 나타날 때마다 반복해서 호출
    • 메뉴가 홤녀에 나올 때마다 동적으로 구성할 때 사용

액티비티의 메뉴는 주로 사용자 이벤트를 처리할 때 사용하기 때문에 대부분 액티비티 내에 정적으로 제공한다.

06 onCreateOptionsMenu()

07-1 onCreateOptionsMenu 화면

07-2onCreateOptionsMenu 화면

onCreateOptionsMenu()

  • Menu(매개변수) : 메뉴바로 간주. add() 함수로 메뉴 추가
  • fun add(groupId: Int, itemId: Int, order: Int, title: CharSequence!): MenuItem!
    • itemId: Int : 메뉴 식별자. 어떤 메뉴를 클릭했는지 식별할 때 사용
    • title: CharSequence! : 메뉴의 문자열

사용자가 메뉴를 선택했을 때의 이벤트 처리는 onOptionsItemSelected() 함수를 사용한다.

매개변수는 이벤트가 발생한 메뉴 객체 MenuItem 이다. MenuItemitemId 속성으로 메뉴 객체의 식별값을 얻어 처리한다.

08 onOptionsItemSelected

실행 결과(로그)

09 menu clicked

함수 = when() 구문은 when 조건문으로 함수를 구현한 것이다. 코틀린에서는 단일 표현식 함수를 지원한다. 함수의 본문이 한 줄로 표현될 때 사용한다. = 뒤의 코드가 실행되고 그 결과가 반환된다.
위 코드는 item.itemId 가 참일 때 when 의 블록 안의 구문들이 실행되어 결과를 반환한다.

XML로 메뉴 구성하기

코드로 메뉴 구성이 가능하지만 대부분 정적으로 제공되기 때문에 XML로 구성하는 것이 용이하다.

먼저 res 폴더 아래 menu 디렉터리를 생성한다.

예시) menu_main.xml

10 menu_xml

11 showAsAction

  • <item> 태그는 메뉴에 해당
  • title 속성 : 메뉴 문자열
  • icon 속성 : 아이콘
  • showAsAction 속성 : 액션바에 아이콘으로 나타나게 할 때 사용. 3가지 값 중 선택
    • never : 기본값으로 항상 오버플로우 메뉴로 출력
    • ifRoom : 만약 액션바에 공간이 있다면 액션 아이템으로, 없다면 오버플로우 메뉴로 출력
    • always : 항상 액션 아이템으로 출력

위에서 XML로 작성했으니 액티비티 코드에 적용을 시켜야 한다.

MainActivity.kt

12 onCreateOptionsMenu()

inflate() 함수의 매개변수로 메뉴 XML 파일(menu_main.xml)을 넘겨주면 액티비티에 메뉴가 적용된다.

SearchView

ActionView 는 액션바에 특별 기능을 제공한다. 그 중에서도 검색 기능을 제공하는 SearchView 가 많이 쓰인다.

13 SearchView

14 SearchView

ActionView 를 메뉴에 적용할 때는 actionViewClass 속성을 사용한다. 위 코드처럼 사용할 ActionView 클래스를 등록하면 된다.

15 SearchView onCreateOptionsMenu()

findItem() 함수의 매개변수에 MenuItem 의 식별값을 주어 얻는다. MenuItem 에 등록된 ActionViewactionView 속성으로 얻는다.

검색 관련 이벤트 처리는 SearchViewsetOnQueryTextListner() 함수로 이벤트 핸들러를 지정한다.

ToolBar

ActionBar와 목적은 같지만 차이점이 있다.

  • ActionBar : 액티비티 창이 자동으로 출력하는 액티비티의 구성요소
  • Toolbar : 개발자가 직접 제어하는 뷰

01 ActionBar와 Toolbar 비교

Toolbar를 사용하는 이유
ActionBar를 이용하면 XML 파일에 작성하지 않아도 자동으로 출력되어 편하다. Toolbar는 개발자가 직접 제어하는 대신 다양한 기능을 제공한다.

Toolbar를 사용하기 위해서는 먼저 액티비티 테마 설정에서 ActionBar가 출력되지 않도록 해야 한다. 그리고 아래처럼 액티비티 화면 레이아웃 XML에 Toolbar를 등록해야 한다.

02 Toolbar XML 등록

이제 코드에 ActionBar의 내용이 Toolbar에 적용되도록 지정해야 한다.

MainActivity.kt

class MainActivity : AppCompactActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
    	...
        setSupportActionBar(binding.toolbar)
    }
}

0개의 댓글