Android #2 Advent Calendar 2018 의 4일째의 기사입니다.

대상자

Material Design을 왠지 사용하고 있던 사람

최신 Material Design을 알고 싶다 & 정보를 추구하고 싶다

대상이 아닌 사람

무언가의 커미터

목표

최신 Material Design을 추적하는 방법 알아보기

참조를 읽으면서 구현할 수 있습니다

가능한 한 소스는 Google에서 합니다. 보충으로 다른 기사를 사용합니다.

Material Design이란?

머티리얼 디자인에 대해 조금 알아보기 에서 소개되고 있습니다. Google이 발표했습니다. "디자인 가이드 라인"이라고합니다. 이 가이드라인에 따라 개발되고 있는 컴퍼넌트(뷰나 버튼)가 material-components입니다.

「 htps : // 마테리아 l. 이오/ 」 여러분도 아시는 MaterialDesign의 종합 사이트입니다.
What's new에는 진척이 걸려 있습니다.
또한 하단에는 리포지토리 링크가 있습니다. htps : // 기주 b. 코 m / 마테리아 l - 코 m 포넨 ts
오늘 이야기하는 것은이 저장소에 관한 것입니다.


보시다시피 개발되고있는 것은

android

ios

web

flutter

4 종류입니다. 이번 해설하는 것은 안드로이드에만 좁혀져 있습니다. (Android 이외 몰라서)

보니 웹이 스타 많네요. Android도 더 늘어라

역사

원래, Material Design이 발표된 것이 2014년 6월 25일의 Google I/O 2014입니다. 최근입니다.
I/O 2014 앱에 배우는 머티리얼 디자인
이 기사는 일본어로 의역된 기사입니다.

뉴스 사이트 기사

Material Design의 원칙
원칙은

레이어 개념으로 그림자 만들기

애니메이션

디자인을 사용자 작업에 중점을 둡니다

이후 이 원칙에 따라 Material Design이 개발되었습니다.

Material Design을 다루기 위해

카탈로그 앱

안드로이드 버전의 리포지토리는 카탈로그 앱이 있으며 복제하여 스마트 폰으로 움직임을 확인할 수 있습니다. ( 여기을 AndroidStdio에서 열기)

구성 요소 목록

이 페이지 는 지금 구현되고 있거나 혹은 향후 구현될 예정의 컴포트들입니다.
개발중인 이슈를 보는 것이 재미 있습니다.

Road Map

Road Map 에는 향후 구현될 예정인 Material Design 가 기재되어 있습니다. 안드로이드는 조금 개발이 지연된 것 같습니다.

정보 수집 사이트

Google Developer (KR)의 Material Design 태그

Release 브랜치

현재 1.1.0-alpha01까지 있습니다. 안정판은 1.0.0입니다. rc~ 는 Release Candidate(릴리스 후보판)의 약자입니다. 릴리즈을 RSS로 쫓으려면 htps : // 기주 b. 코 m / 마테리아 l - 코 m 포넨 ts / 마테리아 l - 코 m 포넨 ts - 안 d 로이 d / 레 에세 s. 나중에 m

isuue의 움직임을 쫓기 위해서는 Github의 Watch 기능도 좋네요. 이메일이라면 놓치기 때문에, Slack의 RSS 앱에 관리 시키거나 여러가지 있습니다만, 자신은 GH:Watch라는 Android 앱으로 정보를 쫓고 있습니다.

시험에 Chip을 사용해보십시오.

새로운 구성 요소 안에 Chip이 있습니다. 사용해 봅시다. 우선은 getting start 보다, Gradle에 이하를 기입.

  dependencies {
    // ...
    implementation 'com.google.android.material:material:1.0.0'
    // ...
  }

만약, 1.1.0-alpha01 를 사용하고 싶은 경우는 이렇게 됩니다.

  dependencies {
    // ...
    implementation 'com.google.android.material:material:1.1.0-alpha01'
    // ...
  }

또한 style.xml에서 Material Design용 AppTheme을 재정의합니다.

style.xml

<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
  </style>
</resources>

여기 을 참고로 XML 쓰기

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
  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">
  <data>
  </data>
  <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.chip.ChipGroup
      android:layout_width="match_parent"
      android:layout_height="438dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="8dp" android:layout_marginLeft="8dp"
      android:layout_marginStart="8dp" android:layout_marginEnd="8dp" android:layout_marginRight="8dp">

      <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Action"
        android:text="いぬ"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:id="@+id/chip"/>
      <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:text="ねこ"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/chip2"/>
      <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:text="きりん"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/chip3"/>
      <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:text="ぞう"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/chip4"/>
    </com.google.android.material.chip.ChipGroup>
  </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

결과

참고 기사 등

Google I/O 2015 동영상 번역 기사
이 기사도
Google I/O 2018에서 발표된 Material Design 업데이트
설명 동영상Android Studio: Chips - Material Components