안드로이드 코드랩 [Android Codelabs : Material Design Components] 01

---

Android Codelabs 01

Material Design Components

안드로이드 코드랩 01

머티리얼 디자인 구성요소

 

---

이번에 Android GDG Korea 와 배달의민족에서 개최한 코드랩행사를 다녀온 후

'코드랩 (Codelabs)' 이라는것을 알게되었고

외국에서는 자주 이런 행사가 개최되어 정해진 시간동안 코드랩을 한다고 합니다

그래서 저도 이번 행사에서 배운 코드랩에 대한 정보제공 및 그 외의 코드랩도 실행시켜보면서

안드로이드 게시판을 채워나갈 예정입니다 :)

일단 이번 시간에 따라할 코드랩은

Building Beautiful Apps Faster with Material Components on Android

입니다

 

 

 

 

 

 

1. Material ? MDC ?

---

 

일단 Material Design은 구글에서 공식적으로 발표한 UI/UX 입니다

그 중에서도 개발자가 위의 Material Design을 잘 사용할 수 있도록 만든것이

MDC (Material Design Components) 인데요

공식 홈페이지는 https://material.io/components/android/ 이쪽으로 가시면 됩니다

한 10가지정도 존재하고 안드로이드 / IOS / WEB 분야로 나뉘어져 있습니다

그 중 한가지 부분을 코드랩 형식으로 따라해 보겠습니다

2. 이번 강좌에서 필요한 것 / 배울 것

---

Android Studio 2.3 이상

(저는 Android Studio 3.0 Beta Canary 9 버전으로 진행할 예정입니다)

/

ToolBar

AppBarLayout

CollapsingToolbarLayout

 BottomNavigationView

RecyclerView

GridLayoutManager

3. 일단 완성작을 봅시다

---

(후 맥에서 GIF 변환하는게 이렇게 불편할줄이야..)

일단 위쪽 ToolBar 부분이 정적으로 구성된것이 아니라 동적으로 구성되어 있습니다

즉, 어항의 이미지가 사용자 스크롤에 의해서 변하고있죠

이 부분에서는 앱의 간단한 설명이 위치할수도 있겠죠

사용자가 스크롤을 하는 타임이 길어지지 않으면서도

아래쪽으로 스크롤함으로서 보이지 않는 부분을 활용해

"Best Gifts for Teen Girls"

"Choose fun, exciting, and unique gifts every girl with love."

라는 내용까지 전달할 수 있는

아주 좋은 UI/UX 입니다

아래 Clothing Home Popsicles 부분의 BottomNavigationView가 위치해있으며

각 Clothing / Home / Popsicles 부분으로 전환하기도 하죠 :)

이런것들을 구글에서 제공한 Components 를 통해서 쉽게 만들 수 있습니다

4. 자 그럼 만들어봅시다

---

샘플코드 다운로드

자, 우선 샘플코드를 다운로드 하시면 됩니다

무작정 안드로이드 스튜디오로 바로 열지 마시고

경로를 주의하셔야 합니다!

demos \ codelabs \ building-beautiful-apps \ starter 쪽으로 열어야 합니다

혹시

Gradle sync failed: Minimum supported Gradle version is 4.1-milestone-1. Current version is 3.3. If using the gradle wrapper, try editing the distributionUrl in /Users/hyeon/Documents/material-components-android-master/demos/codelabs/building-beautiful-apps/starter/gradle/wrapper/gradle-wrapper.properties to gradle-4.1-milestone-1-all.zip

이런 비슷한 오류가 나신다면

gradle-wrapper.properties (Gradle Version) 에서 

distributionUrl 부분의 항목을

https\://services.gradle.org/distributions/gradle-4.1-milestone-1-all.zip

로 수정해주시고 다시 시도해보시기 바랍니다

starter 앱을 빌드하시게 되면

보석모양으로 된 'Shrine' 라는 앱이 설치됩니다

오른쪽은 starter 앱을 구동시킨 화면입니다

위에서 본 완성작과는 다르게

아직까지는 기능이 몇개 빠져있습니다

이제 코드랩을 진행하면서 하나하나씩 추가해보죠

4-1. Add a Collapsing App Bar

---

이 단계에서는

AppBar Layout

CollaspingToolBar Layout

Coordinator Layout

를 다룹니다

AppBarLayout 은 스크롤 위치에 따른 구성 가능한 동작을 제공합니다

CollaspingToolbarLayout 은 확장된 크기와 축소된 크기의 ToolBar를 제공합니다

최소높이(예: 56dp)가 되면, 자리에 고정되어 아래쪽의 View가 스크롤 되는 환경을 구성할 수 있습니다

CoordinatorLayout 은 스크롤 이벤트 및 위치가 변경되는 부분을 제공합니다

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support:cardview-v7:25.3.1'
    compile 'com.android.support:recyclerview-v7:25.3.1'
    compile 'com.android.volley:volley:1.0.0'
    compile 'com.google.code.gson:gson:2.2.4'

    // Add this:
    compile 'com.android.support:design:25.3.1'
}

다음으로는 해당 요소들을 사용할 수 있도록

dependencies에 위 항목들을 추가해야 합니다

현재 starter 예제코드에는

compile 'com.android.support:design:25.3.1'

부분만 추가하고 위쪽에 뜨는 메세지 중 'Sync Now' 누르시면 됩니다

자 이제 요소들을 사용할 준비는 끝났습니다

4-1-1. Add Coordinator Layout

---

첫번째로 Coordinator Layout 을 추가해보도록 하겠습니다

Coordinator Layout 은 FrameLayout과 같은 역할을 합니다

그러나 Coordinator Layout은 스크롤이나 기타 이동과 관련된 종속적인 View의 변경에 대해 대응할 수 있습니다

이렇게 구성하기 위해서는 Coordinator Layout을 최상위로 구성하면 됩니다

자 starter 을 열고있는 Android Studio 에서

app / res / layout / shr_main.xml 쪽으로 가봅시다

최상위 View가 FrameLayout 으로 구성되어 있는것을 확인할 수 있습니다

해당 FrameLayout 을 Coordinator Layout 으로 바꿔줍시다

그리고 추후에 사용할 부분을 위해

app에 대한 네임스페이스를 추가합니다

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- ... -->
 

starter 에서는  

xmlns:app="http://schemas.android.com/apk/res-auto"

부분을 추가하시면 됩니다

빌드 결과 FrameLayout을 사용했던 때와 UI적으로 달라진 부분은 없습니다

4-1-2. Wrap the Toolbar in an AppBarLayout and CollapsingToolbarLayout

---

자 이제 사용자가 MainActivity에서 아래쪽의 컨텐츠를 보기위해

스크롤 동작을 수행함에 따라서

ToolBar 컨텐츠를 조정시키기 위해서 AppBarLayout과 CollapsingToolbarLayout을 통해서

RecyclerView와 함께 동작시킬 것입니다

4-1-1 에서 진행했던 경로 그대로 유지하신 채

( app / res / layout / shr_main.xml )

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="400dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        style="@style/Widget.Shrine.CollapsingToolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">


        <!-- Wrap this view: -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"/>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

해당 코드를 심으시면 됩니다

그러면 다시 Android Studio 에서 위의 경로에서의 코드를 살펴보겠습니다

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/product_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="@dimen/shr_list_margin"
        android:layout_marginRight="@dimen/shr_list_margin"
        android:layout_marginTop="?attr/actionBarSize"/>

    <android.support.v7.widget.Toolbar
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>

</android.support.design.widget.CoordinatorLayout>

지금부터 android.support.v7.widget.Toolbar 을 CollaspingToolbarLayout 과 AppBarLayout 로 감쌀겁니다

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/product_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="@dimen/shr_list_margin"
        android:layout_marginRight="@dimen/shr_list_margin"
        android:layout_marginTop="?attr/actionBarSize"/>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="400dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            style="@style/Widget.Shrine.CollapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">


            <!-- Wrap this view: -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"/>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

이렇게요

기존의 Toolbar 부분이 CollapsingToolbarLayout로 감싸져 있고

그 상위요소로 AppBarLayout으로 감싸져 있는 부분으로 수정되었습니다

현재는 style 에 Widget.Shrine.CollapsingToolbar 요소가 존재하지 않아서 빨간색으로 보이는게 정상입니다

간단하게 설명을 하자면

AppBarLayout 요소의 layout_height이 400dp로 설정되어 있는 부분을 찾으셨나요?

해당 부분은 확장된 상태의 AppBar를 나타냅니다

앱 상단 툴바쪽에서 스크롤에 따라 어항이 나오는 부분있죠?

그 부분이 AppBarLayout 부분입니다

이후 아래 컨텐츠로 스크롤을 내릴때

일반적으로 지정되는 ToolBar의 높이는

휴대전화 기준 56dp (또는 태블릿 기준 64dp)로 자동 축소됩니다

---

이후 내용은 8월8일 저녁에 작성될 예정입니다