머티리얼 라이브러리

이윤설·2024년 8월 30일
안드로이드
0

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

목록 보기
20/26

Appbar

머티리얼 라이브러리란?

구글의 머티리얼 디자인(material design)은 모바일, 데스크톱 등 다양한 장치를 아우르는 일관된 애플리케이션 디자인 지침이다.

앱바 레이아웃 - 화면 위쪽 영역 꾸미기

앱바란 화면 위쪽의 꾸밀 수 있는 영역이다.
앱바는 단순 액션바나 툴바와 다르게, 화면에서 위쪽 영역을 다양하게 꾸밀 때 사용한다는 점에서 다르다.
앱바를 이용해 메뉴를 출력하는 툴바를 포함할 수도 있다. 또한 이미지나 문자 등을 함께 출력할 수도 있다.

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:background="?attr/colorPrimary"
            android:title="My Toolbar" />

    </com.google.android.material.appbar.AppBarLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

보통 앱바 안에 툴바를 넣어서 구현한다.

코디네이터 레이아웃 (Coordinator Layout)

코디네이터 레이아웃은 Android에서 제공하는 ViewGroup으로, 상호작용이 필요한 여러 뷰를 효과적으로 배치하고 관리하는 데 사용된다.

  • 복합적인 레이아웃 구성: 여러 개의 자식 뷰를 포함할 수 있으며, 자식 뷰들의 배치와 동작을 조정할 수 있다.

  • Behavior: 자식 뷰의 동작을 정의할 수 있는 Behavior 클래스를 지원한다. 예를 들어, 스크롤 시 상단의 툴바가 사라지거나 나타나는 효과를 구현할 수 있다.

  • LayoutParams: 자식 뷰의 위치와 동작을 제어하기 위해 CoordinatorLayout.LayoutParams를 사용한다. 이를 통해 자식 뷰의 위치, 크기 및 행동을 세밀하게 조정할 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/ct2"
                app:layout_collapseMode="parallax" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <!-- Sample content -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="This is a sample content"
                android:textSize="18sp" />

            <!-- Repeat the content to enable scrolling -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Scroll down to see the collapsing effect"
                android:textSize="18sp" />
            
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

-------------------------------------------------------------------------
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)

        supportActionBar?.title = "Collapsing Toolbar"
    }
}

코드 설명

  1. CoordinatorLayout: 최상위 레이아웃으로, 자식 뷰들의 상호작용을 조정해주는 레이아웃이다.

  2. AppBarLayout: 스크롤 가능한 뷰에 대해 반응하는 앱바를 구성하는 레이아웃이다.

  3. CollapsingToolbarLayout: 스크롤 시 툴바를 축소하고 확장하는 레이아웃이다. 여기서는 ImageView와 Toolbar가 포함되어 있다.

    • app:layout_collapseMode="parallax": 이미지가 스크롤 시 패럴랙스 효과를 적용받도록 설정한다.
    • app:layout_collapseMode="pin": 스크롤 시 툴바가 상단에 고정되도록 설정한다.

  4. NestedScrollView: 스크롤 가능한 컨테이너로, 스크롤 시 AppBarLayout과의 상호작용을 위해 app:layout_behavior 속성을 설정한다.

결과


이 레이아웃을 실행하면, 사용자가 콘텐츠를 스크롤할 때 이미지와 툴바가 축소되면서 CollapsingToolbarLayout의 효과를
경험할 수 있다. 스크롤을 위로 올리면 툴바가 다시 확장된다.

탭 레이아웃

탭 레이아웃은 사용자 인터페이스에서 여러 페이지나 섹션을 탭으로 전환할 수 있게 해주는 구성 요소다.

  • 탭의 역할: 각 탭은 특정 콘텐츠나 기능을 나타내며, 사용자가 탭을 클릭하거나 선택하면 해당 콘텐츠나 기능이 표시된다.

  • TabLayout: Android의 TabLayout은 탭을 표시하는 뷰 그룹으로, com.google.android.material.tabs.TabLayout 클래스를 사용한다. 이 클래스는 탭의 추가, 제거, 선택 상태 변경 등을 지원한다.

  • ViewPager2와 함께 사용: TabLayout은 일반적으로 ViewPager와 함께 사용됩니다.
    ViewPager2는 스와이프 제스처를 통해 페이지를 전환할 수 있도록 해주며, TabLayout과 결합하여 탭 클릭 시 해당 페이지로 전환할 수 있다.

  • 커스터마이징: 탭의 텍스트, 아이콘, 스타일 등을 커스터마이즈할 수 있으며, 색상, 크기, 배경 등을 조정하여 앱의 디자인에 맞게 설정할 수 있다.

내비게이션 뷰 - 드로어 화면 구성


내비게이션 뷰는 앱 내에서 다양한 화면 간에 탐색할 수 있는 사이드 메뉴를 제공하는 구성 요소다.

  • 메뉴 항목: 내비게이션 뷰에는 메뉴 항목을 추가하여 사용자가 다양한 기능이나 화면으로 이동할 수 있게 한다.

  • 헤더와 풋터: 내비게이션 뷰에는 헤더와 풋터를 추가할 수 있어, 사용자 프로필 정보나 추가적인 정보(예: 앱의 버전 정보)를 표시할 수 있다.

  • 내비게이션 그래프: Android Jetpack의 Navigation Component를 사용하면 내비게이션 뷰와 내비게이션 그래프를 통합하여 화면 간의 이동을 정의하고 관리할 수 있다.

확장된 플로팅 액션 버튼

확장된 플로팅 액션 버튼(ExtendedFloatingActionButton)은 화면에 떠 있는 듯한 버튼을 제공하는 뷰이다.

Extended Floating Action Button(확장형 플로팅 액션 버튼)은 Android 앱에서 Floating Action Button (FAB)의 변형으로, 기본 FAB의 확장된 형태로 추가적인 UI 요소를 제공합니다. 이 버튼은 Material Design의 사용자 인터페이스 컴포넌트 중 하나로, 주로 주요 작업을 시각적으로 강조하고 쉽게 접근할 수 있도록 설계되었습니다.

주요 특징 및 사용 방법

  1. 기본 Floating Action Button (FAB)과의 차이:

    • FAB는 일반적으로 둥글고 아이콘만 포함된 버튼으로, 화면의 하단 우측에 고정되어 있는 경우가 많다.
    • Extended Floating Action Button은 기본 FAB에서 확장된 형태로, 텍스트 라벨을 추가하거나 버튼의 크기를 늘릴 수 있어, 사용자가 버튼의 용도를 보다 쉽게 이해할 수 있다.

  2. 디자인과 레이아웃:

    • 텍스트와 아이콘: Extended FAB은 버튼 내부에 아이콘과 함께 텍스트 라벨을 포함할 수 있어, 버튼의 기능이나 작업을 명확히 전달한다.
    • 디자인 속성: 버튼은 기본 FAB처럼 둥글지만, 텍스트를 추가하여 더 넓은 영역을 차지하고 사용자가 버튼의 목적을 쉽게 인식할 수 있도록 도와준다.
    • 애니메이션: 버튼은 화면에서 확장하거나 축소하는 애니메이션 효과를 제공하여 사용자의 상호작용에 시각적으로 반응한다.

  3. Android에서의 사용:

    • Material Components Library: com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton 클래스를 사용하여 구현된다.
    • 속성 설정: XML 레이아웃 파일이나 코드에서 버튼의 크기, 텍스트, 아이콘 등을 설정할 수 있다.
    • 동작 정의: 버튼의 클릭 이벤트를 설정하여 사용자가 버튼을 클릭했을 때의 동작을 정의한다.

출처:
https://www.youtube.com/watch?v=6SrKOBV_hx8
https://m2.material.io/components/buttons-floating-action-button#usage

profile
이윤설
화려한 외면이 아닌 단단한 내면
이전 포스트

액티비티 컴포넌트

다음 포스트

인텐트 필터

0개의 댓글