제트팩 라이브러리 - 1

이윤설·2024년 8월 29일

안드로이드

Do it! 깡샘의 안드로이드 앱 프로그래밍 with 코틀린

목록 보기

16/26

1. 제트팩과 androidx

플랫폼 API

플랫폼 API는 ART(Android Runtime)에서 제공하는 안드로이드 앱의 핵심 라이브러리다. ART는 대부분 android 또는 java로 시작하는 패키지명을 사용한다.

ex) java.lang.String, java.util.Date

이전에 배웠던 것처럼 안드로이드 앱은 런타임 때 ART에 의해 실행되므로 ART에서 제공하는 플랫폼 API를 이용해 개발한다. 그런데 플랫폼 API를 이용하면 사용자 기기의 버전이 달라서 호환성 문제가 발생할 수 있다.

또한 플랫폼 API는 기본 재료일 뿐, 실제 앱을 개발할 때는 더 다양한 기능과 화면을 구현해야 한다. (요리에서 MSG 느낌)
따라서 구글은 2018년에 제트팩이라는 라이브러리 모음을 발표했다.

제트팩

Jetpack은 개발자가 중요한 코드에 집중할 수 있도록 권장사항 준수, 상용구 코드 감소, 여러 Android 버전과 기기에서 일관되게 작동하는 코드 작성을 돕는 라이브러리 묶음이다.

제트팩은 크게 3가지 목적으로 제공한다.
1. 앱을 개발하는 데 필요한 권장 아키텍처를 제공한다.
2. API 레벨의 호환성 문제를 해결한다.
3. 플랫폼 API에서 제공하지 않는 다양한 기능을 제공한다.

제트팩은 API 레벨의 호환성 문제를 해결해 준다.
예를 들어, 21버전에 추가된 Toolbar 클래스를 (android.widget.Toolbar)사용하면 원래는 호환성 문제가 발생하지만, 제트팩에서 제공하는 Toolbar 클래스를(androidx.appcompat.widget.Toolbar) 사용한다면 호환성 문제가 발생하지 않는다.
따라서 목적이 같은 클래스를 제트팩 라이브러리에서도 제공하면 대부분 제트팩의 클래스를 사용한다.

androidx 라이브러리

제트팩에는 androidx 패키지명으로 시작하는 다양한 라이브러리가 있다.
화면 구성에 관련된 라이브러리는 다음과 같다.

androidx.appcompat: 앱의 API 레벨 호환성을 해결한다.
androidx.recyclerview: 목록 화면을 구성한다.
androidx.viewpager2: 스와이프로 넘기는 화면을 구성한다.
androidx.fragment: 액티비티처럼 동작하는 뷰를 제공한다.
androidx.drawerlayout: 옆에서 서랖처럼 열리는 화면을 구성한다.

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

appcompat 라이브러리는 정말 자주 사용된다.
이 라이브러리는 안드로이드 앱의 화면을 구성하는 액티비티를 만들며 API 레벨의 호환성 문제를 해결해 준다.

툴바와 액션바

툴바(Toolbar)와 액션바(ActionBar)는 안드로이드 앱에서 UI의 일부분으로, 둘 다 앱 상단에 위치하며 주로 내비게이션, 제목 표시, 메뉴 등의 역할을 합니다. 하지만 둘 사이에는 몇 가지 중요한 차이점이 있다.

ActionBar (액션바)

기본 제공 컴포넌트: 안드로이드에서 기본적으로 제공하는 상단 UI 요소이다.
제한된 커스터마이징: 디자인과 기능을 커스터마이징할 수 있지만, 제한적이다. 기본적으로 앱의 제목, 아이콘, 옵션 메뉴 등을 표시한다.
Deprecated: 최신 개발에서는 Toolbar로 대체하는 것이 권장된다.

커스터마이징 가능: Toolbar는 ActionBar를 대체할 수 있는 더 유연하고 커스터마이징 가능한 UI 요소이다.
위치 변경 가능: Toolbar는 ActionBar와 달리 앱 내 어디에나 배치할 수 있다(예: 화면 하단, 상단).
더 많은 기능: Toolbar는 더 많은 기능과 디자인 옵션을 제공한다. 예를 들어, 버튼, 서브타이틀, 커스텀 뷰 등을 추가할 수 있다.

간단한 정리

ActionBar는 안드로이드의 기본적인 상단바(UI)를 의미하며, 기본 제공되는 기능이 많지만, 커스터마이징에 한계가 있다. 현재는 쓰이지 않는다.
Toolbar는 ActionBar보다 더 유연하고 커스터마이징이 가능한 UI 요소로, 최신 앱 개발에서는 Toolbar를 사용해 ActionBar를 대체하는 것이 일반적이다.

색칠하기 - 예제

<resources>

    <!-- Base application theme -->
    <style name="Base.Theme.AndroidLab" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">#FF0000</item>
        <item name="android:statusBarColor">#CC0000</item>
        <item name="colorAccent">#00FF00</item>
    </style>

</resources>

툴바의 색깔을 바꿀수도 있다.
툴바의 색깔을 바꾸려면 styles.xml을 만든 후 거기에 지정하면 된다.

업버튼

업버튼(Up Button)은 주로 안드로이드 앱에서 사용되는 네비게이션 요소로, 사용자가 현재 화면에서 이전 화면으로 돌아갈 수 있도록 도와준다.

1. 기능과 목적

현재 화면의 상위 계층으로 이동: 업버튼은 사용자가 현재 화면에서 더 상위의 화면으로 이동할 수 있게 해준다. 예를 들어, 상세 페이지에서 목록 페이지로 돌아가는 경우이다.

2. 업버튼과 백버튼의 차이

업버튼 (Up Button): 사용자가 현재 화면의 상위 계층으로 돌아가게 한다.
예를 들어, 상위 화면이 액티비티 계층 구조에서 이전 액티비티가 아니라 동일한 액티비티 계층 구조 내의 상위 화면일 수 있다.

ex) 업버튼은 유튜브 앱에서 현재 화면의 상위 계층으로 돌아갈 때 사용된다. 예를 들어, 특정 비디오를 보고 있을 때 화면의 상단에 있는 업버튼을 클릭하면 사용자는 해당 비디오를 포함한 채널 페이지로 돌아가게 된다. 이는 비디오가 채널 페이지의 하위 계층에 위치하기 때문이다.

백버튼 (Back Button): 사용자가 현재 화면의 이전 상태로 돌아가게 한다. 일반적으로 가장 최근에 방문한 화면으로 돌아간다.

ex) 백버튼은 유튜브 앱에서 가장 최근에 방문한 화면으로 돌아가는 데 사용된다.
예를 들어, 사용자가 비디오 목록을 보고 있다가 특정 비디오를 클릭해서 시청을 시작한 경우, 백버튼을 클릭하면 사용자는 다시 비디오 목록 화면으로 돌아가게 된다. 이는 사용자가 가장 최근에 방문했던 화면으로 돌아가는 것이다.

메뉴 구성

보통 메뉴를 구성할 때는, 액티비티의 메뉴는 대부분 정적으로 제공되므로 리소스 XML 파일로 구성한다. 메뉴를 구성하는 XML 파일은 res 폴더 아래 menu 디렉터리에 만든다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu1"
        android:title="menu1" />

    <item
        android:id="@+id/menu2"
        android:icon="@android:drawable/ic_menu_add"
        android:title="menu2"
        app:showAsAction="always" />
    <item
        android:id="@+id/menu3"
        android:icon="@android:drawable/ic_menu_search"
        android:title="menu3"
        app:showAsAction="ifRoom" />
</menu>

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu_main, menu)
        return super.onCreateOptionsMenu(menu)
    }

menu1:

app:showAsAction 속성이 없으므로, 기본적으로 툴바에 표시되지 않고 오버플로(점선 3개) 메뉴에 들어간다.

menu2:

app:showAsAction="always"로 설정되어, 항상 툴바에 표시된다.
이 아이콘은 +로 나타나고, 툴바에 직접 보인다.

menu3:

app:showAsAction="ifRoom"으로 설정되어, 툴바에 공간이 있을 경우 표시된다.
이 아이콘은 돋보기 아이콘으로 나타나며, 툴바에 직접 보인다.

오버플로 메뉴는 툴바에 표시되지 않는 항목들을 담는 메뉴이다.
현재 menu1만 오버플로 메뉴에 있다.
menu2와 menu3는 툴바에 직접 표시되므로, 오버플로 메뉴에 포함되지 않는다.

만약 툴바에 +, 돋보기 아이콘이 보이지 않고, 점선 3개를 눌렀을 때 menu1, menu2, menu3가 모두 보이길 원한다면, app:showAsAction 속성을 모두 never(기본값)로 수정해야 한다.

액션 뷰 이용

액션뷰는 액션바에서 특별한 기능을 제공하며 대표적으로 androidx.appcompat.widget.SearchView가 있다. 이는 검색 기능을 제공한다.

    <item
        android:id="@+id/action_search"
        android:icon="@android:drawable/ic_menu_search"
        android:title="Search"
        app:showAsAction="ifRoom|collapseActionView"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

// mainActivity.kt
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu_main, menu)

        // searchView 설정
        val searchItem = menu?.findItem(R.id.action_search)
        val searchView = searchItem?.actionView as SearchView

        searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
            override fun onQueryTextSubmit(query: String?): Boolean {
                // 사용자가 검색어 입력 후 제출 버튼을 눌렀을 때 실행
                // 검색어 처리 로직 추가
                return false
            }

            override fun onQueryTextChange(newText: String?): Boolean {
                // 사용자가 검색어를 입력할 때마다 실행
                // 검색어 변경 시 처리 로직 추가
                return false
            }
        })
        return super.onCreateOptionsMenu(menu)
    }

app:actionViewClass="androidx.appcompat.widget.SearchView": menu3 항목을 SearchView로 설정한다. 이로 인해 사용자가 검색 아이콘을 클릭하면 SearchView가 펼쳐진다.
app:showAsAction="ifRoom|collapseActionView": SearchView가 툴바에 공간이 있을 때 표시되며, 아이콘을 클릭하면 펼쳐지고 다시 클릭하면 축소된다.
setOnQueryTextListener: SearchView에 리스너를 설정하여, 사용자가 입력한 검색어에 대해 실시간으로 처리하거나, 검색어 제출 시 특정 작업을 수행할 수 있다.
return false: return false를 사용함으로써, SearchView가 제공하는 기본 동작을 유지하면서도 추가적인 작업을 수행할 수 있다. 기본적으로 사용자가 입력한 텍스트에 대한 자동 검색어 필터링, 검색 UI의 상태 변경 등의 기본 처리를 계속하고 싶을 때 false를 반환한다. 즉, true를 반환하면 이벤트 처리가 중단되기 때문에, 기본 동작을 원하지 않거나 이벤트 처리를 커스텀하고자 할 때 사용한다.

정리

플랫폼 API: 안드로이드 앱의 핵심 라이브러리로, ART(Android Runtime)에서 제공한다. 호환성 문제 발생 가능.
제트팩(Jetpack): 안드로이드 앱 개발을 돕는 라이브러리 묶음으로, 권장 아키텍처 제공, 호환성 문제 해결, 다양한 기능 제공.
androidx 라이브러리: Jetpack에 속하는 라이브러리로, 다양한 화면 구성 기능을 제공한다.
appcompat 라이브러리: 안드로이드 앱의 API 레벨 호환성을 해결하며, 화면 구성에 자주 사용된다.
Toolbar와 ActionBar: Toolbar는 커스터마이징이 가능하고 위치를 자유롭게 변경할 수 있는 최신 UI 요소로, ActionBar를 대체한다.
업버튼: 현재 화면에서 상위 계층으로 돌아가는 네비게이션 버튼으로, 백버튼과는 목적이 다르다.
메뉴 구성: 메뉴는 XML 파일로 정의되며, app:showAsAction 속성에 따라 툴바에 직접 표시되거나 오버플로 메뉴에 들어간다.
액션뷰(SearchView): 툴바에 검색 기능을 추가할 수 있는 UI 요소로, 사용자가 입력한 검색어를 처리하는 기능을 제공한다.

이윤설

화려한 외면이 아닌 단단한 내면

이전 포스트

다이얼로그와 알림 이용하기

다음 포스트

제트팩 라이브러리 - 1

Do it! 깡샘의 안드로이드 앱 프로그래밍 with 코틀린

1. 제트팩과 androidx

플랫폼 API

제트팩

androidx 라이브러리

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

툴바와 액션바

ActionBar (액션바)

간단한 정리

색칠하기 - 예제

업버튼

1. 기능과 목적

2. 업버튼과 백버튼의 차이

메뉴 구성

menu1:

menu2:

menu3:

액션 뷰 이용

정리

다이얼로그와 알림 이용하기

제트팩 라이브러리 - 2

0개의 댓글

제트팩 라이브러리 - 1

Do it! 깡샘의 안드로이드 앱 프로그래밍 with 코틀린

1. 제트팩과 androidx

플랫폼 API

제트팩

androidx 라이브러리

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

툴바와 액션바

ActionBar (액션바)

Toolbar (툴바)

간단한 정리

색칠하기 - 예제

업버튼

1. 기능과 목적

2. 업버튼과 백버튼의 차이

메뉴 구성

menu1:

menu2:

menu3:

액션 뷰 이용

정리

다이얼로그와 알림 이용하기

제트팩 라이브러리 - 2

0개의 댓글