Google I/O 2014 – Material science: Developing Android applications with material design

CHET HAASE : 안녕하세요, Material Science에 오신 것을 환영합니다 아니, 아니, 아니, 아니

다시 해봅시다 Android 개발자를위한 자료 디자인 이 세션의 요점은 다음과 같습니다 기술적 세부 사항 중 일부에 들어가기 실제로 그것이 무엇인지에 대한 개요 엔지니어의 관점처럼 보입니다 이번 주에는 많은 디자인 세션이 있습니다

이 세션 바로 전에 하나를 포함하여 그들은 재료 디자인의 아이디어에 대해 이야기합니다 우리가하고 싶었던 것은 이는 우리가 노출하고있는 실제 API의 관점에서 의미합니다 또는 Android 개발자로서이 제품에 연결하는 곳 재료 디자인 응용 프로그램을 만들 수 있습니다 그 일을하고 싶다면 해시 태그가 있습니다 피드백 URL이 있습니다

절대적으로 충격적이고 빛나는 의견이있는 경우 세션에 대해 언제든지 저에게 가십시오 우리가 어떻게 생겼는지 알고 싶다면, 당신은 실제로 무대를 바라 볼 수 있습니다 또는 우리의 그림이 Chet Haase입니다 ADAM POWELL : 저는 Adam Powell입니다 CHET HAASE : 둘 다 Android UI Toolkit 팀에 있습니다

이것은 기본적으로 UI Toolkit 위젯을 처리하는 팀입니다 애니메이션으로 렌더링하는 그래픽을 통해 그것들을 움직이고 GPU에서 침을 뱉는 실제로 모든 하드웨어 가속 명령 가능한 빨리 화면에 표시하십시오 그것이 팀이하는 일입니다 우리가 물질을 위해 구현해야하는 모든 것들 디자인 또한 정말로 빠르게 실행해야합니다 같은 팀이 다음과 같은 기능을 처리하기 때문에 흥미로운 거래 인 성과 측면으로 떨어져서

ADAM POWELL : 첫 번째 질문입니다 네가 물어볼 수도있는 이유는, 왜? 그래서 우리는 이미 기조 연설을 보았습니다 우리는 많은 화려한 효과를 봅니다 우리는 고집 센 디자인을 본다 성능 문제가 있습니다

그리고 UI를 실제로 팽창시키는 방법을 발견합니다 그래서 우리는 실제로 가지고 싶지 않습니다 그 부정적인 견해 우리는 이것이 무엇인지 확인하기를 원합니다 이는 사용자에게 중요한 문제입니다

그리고 모든 소재 디자인에서 하나의 큰 테이크 아웃이 있다면 하루 종일 보게 될 자료 아마 L 릴리스까지 여기 모두가 자신의 앱을 준비하기 시작하면서, 그 모션 문제입니다 무브먼트는 사용자에게 무엇이 할 수 있는지 가르쳐 줄 수 있습니다 그리고 그것이 어디에서 왔는지 UI에서 본 적이 있다면 아무데도 튀어 나와 뭔가 손가락 아래에서 밖으로 사라집니다 그것은 정말 초조 한 경험입니다

따라서 모션을 사용하여 우리는 계속해서 사용자를 가르 칠 수 있습니다 시스템이 어떻게 행동하고 무엇을 하는가? 그 시스템에서 기대할 수 있습니다 그래서 이것은 단서입니다 우리는 감동되고 움직일 수있는 것에 대해 단서를 줄 수 있습니다 실체처럼 보이게 만듭니다

이것은 카드가 실제로 우리에게주는 것들 중 하나입니다 그리고 이런 종류의 가상 객체들 몰핑하고 움직일 수없는 실제 객체를 시뮬레이트하고, 그 실체를 여전히 암시 할 수 있습니다 이것들은 당신의 카드, 종이 및 잉크입니다 지금까지 비디오에서 본 모든 것들 따라서 테이크 어웨이는 모션 플러스 유형 성이 동일합니다

사용자에게 더 이해하기 쉬운 UI 나는 너에게 줄 것을 원했어 이 석방과이 과정에 대한 간단한 정신 모델 실제로 재료 디자인을 구현하는 것은 나에게 달렸다 사실, 우리 팀 안에서이 일을하는 것은, 물건 가져 오기, 실제로 픽셀 디자인을 나타내는 화면에 나타납니다 프로세스는 기본적으로 아이디어를 취합니다 그 UX는 – 디자인 팀이 – 어디에서 그들은이 위대한 아이디어이고 패러다임이 있습니다

시스템이 있고 언어가 있습니다 그리고 그들이 생각해내는 멋진 것들이 모두 있습니다 실제로 기술 세부 정보로 변환합니다 엔지니어가 실제로 사용하는 기능 제공 할 응용 프로그램을 작성해야합니다 그래서 제가 사진을 찍는 방법은 – 그래서 우리는이 거대한 디자인 팀을 가졌습니다

그래서 우리는 위대한 예술가들에게 접근 할 수 있습니다 우리는 그들에게 이것을 나타내는 예술을 생각해 낼 것을 요청할 수 있습니다 아니면 실제로 직접 그릴 수 있습니다 이것은 분명히 그의 손을 맹렬히 흔들고있는 예술가이다 아름다운 무지개와 멋진 것들이 떠오른다

아티스트라고 말할 수 있습니다 베레모는 그 또는 그들의 프랑스어 중 하나를 포함 그래서 우리는 디자인 아이디어를 취합니다 그들은 공중에 떠있었습니다 엔지니어가 방에 들어가있을 때 매우 모호합니다

그들의 얼굴에 정말 당혹 스럽네요 이 모든 것이 무엇인지 궁금합니다 그들이 응용의 맥락에서 언어를 말할 때 그것은 말이되지 않습니다 그럼– ADAM POWELL : 자바라는 뜻인가요? 나는 그렇게 생각한다 자바 프로그래밍 언어라고 생각합니다

우리는 이것 이후에 미국 팀과 대화를하고 그걸 털어 놓을 것입니다 그러나 실제로 아이디어는 구체적인 요소를 취하는 것입니다 그들이 실제로 무엇을 계산하는지 그들이 떠 다니는 것에 대해 이야기 할 때 손을 흔드는 것을 의미합니다 그들이 잉크와 종이에 대해 말할 때 액션 버튼 실제로 그것을 특정 요소들로 번역한다 플랫폼에 필요한 기능을 제공하기 위해 필요한 플랫폼입니다

내가 생각하는 방식은 나는 생각한다 그것은 Nyquist Sampling 정리와 같습니다

커브를 샘플링 할 수있는 빈도 그러면 원래 곡선을 재구성 할 수 있습니다 그리고 나는 기술적 세부 사항에 들어 가지 않을 것이다 나는 그들을 이해하지 못하기 때문에 그러나 여기 같은 생각입니다 UX가이 아름답고 공간적인 곡선을 만들면 디자인 언어와 그들이 올 계획의 패턴을 그리고 당신이하고 싶은 것은 실제로 사용할 수있는 충분한 기능 그들이 어려움을 겪었음에도 불구하고 원하는 것을 얻으십시오

당신이 필요로하는 바삭 바삭한 요소의 관점에서 그래서 우리가 툴킷 팀에서 한 일 그것을 기능과 기능으로 변환하는 것이 었습니다 우리는 이러한 능력을 폭로해야했습니다 그리고 이것은 특징으로 끓었습니다 우리는 앞으로 몇 분 안에 얘기 할 것입니다

우리는 실시간 그림자를 할 수 있습니다 공유 영웅 요소를 사용한 활동 전환이 있습니다 우리는 순환적인 계시를 가지고 있습니다 디자인 회담에서 그 중 일부를 보았습니다 플로팅 액션 버튼은 더 큰 형태의 내용으로 드러납니다

우리는 더욱 생생하고 풍부한 목록을위한 RecyclerView 위젯을 가지고 있습니다 기능, 터치 피드백 UI에서 진행중인 작업에 대한 지속적인 피드백 그들이 그것과 상호 작용할 때 그리고 나서 우리는 항상 성능에 대해 연구하고 있습니다 게다가 ADAM POWELL :이 모든 것에서, 실제로 소재 앱을 어떻게 작성합니까? 음, 첫 번째 단계는 무언가입니다

이미 서면으로 익숙한 Android 앱이 내 활동의 테마입니다 그래서 themematerial이 첫 번째 단계입니다 이것을 선택하십시오 그것으로부터 상속받습니다

다른 요소를 사용하고있는 맞춤 테마가 있습니다 그리고 한번보세요 이 간단한 스위치 플립으로 앱을 어떻게 보이나요? 그리고 여러분은 그것에 대한 몇 가지 문제점을 수정해야 할 것입니다 거의 모든 주요 앱은이 시점에서 중요하지 않습니다 둘 중 하나와 일치시키려는 많은 작업을 수행했습니다

속이 빈 테마 또는 사용자 정의 테마 그것은 과거에 구현되었습니다 그리고 업데이트해야 할 것입니다 당신이가는 그 개별 요소 따라서 디자인을 구현하고 구현하는 것이 좋습니다 지침

그래서 이것은 새로운 거래 방법이 될 것입니다 레이아웃 및 색상, 새 측정 항목, 새 측정 값, 그리드 사용 거기에서, 그것은 정말로 대부분 표준 안드로이드 프로그래밍입니다 당신은 많은 도구를 사용하게 될 것입니다 너는 이미 거기에 익숙해 져있다 지원할 새로운 API가 있습니다

화면상의 특정 요소의 동작 및 정렬 당신은 전통적으로 많은 통제력을 갖지 못했다 과거와 같은 일들 액션 바에 위치합니다 그리고 필요에 따라 지원 라이브러리를 사용할 수 있습니다 여러분 중 대부분은 이미 이것에 익숙합니다 우리는 DrawerLayouts, ViewPager, 개발자 인 모든 위젯 이 시점에서 알고 있고 사랑하십시오

우리는 더 많은 것을 추가하고 있습니다 우리는 RecyclerView를 가지고 있습니다 조금 더 얘기하자면, 기본적으로 마무리되는 카드보기 L의 새로운 기능 중 일부는 그리고 당신에게 특별한 사용을위한 멋진 가을을 돌려 준다 기존 플랫폼 버전의 경우 그러면 필요에 따라 진행할 수 있습니다

새로운 플랫폼을위한 독점적 인 L API를 사용하십시오 버전뿐만 아니라 이것은 최신 그래픽 API와 같은 것입니다 그림자 주변 및 클리핑,보기에 대한 고도 설정 그래서 그들은 우주로 튀어 나올 수 있습니다 터치 피드백 잉크 잔물결이 있습니다 지금까지 동영상에서 보았던 것입니다

아이콘과 다른 드로어 블이 있습니다 상태 변경 사항을 애니메이션으로 만들 수 있습니다 이미 국가를 누르고 초점을 맞추는 데 익숙하다면 국가 등등 애니메이션 전환을 정의 할 수 있습니다 그 주들 사이에 그리고 일반적인 애니메이션의 경우 우리는 시각적으로 드러납니다

우리는 애니메이션 커브를 다루는 새로운 방법을 가지고 있습니다 그리고 물론, 당신이 본 활동 전환 그래서이 시점에서, 여러분 대부분은, 호환성은 어떨까요? 아무도 타겟팅 할 수 없기 때문에 L 이상 이 때 일부 사용자가 있어야하는 경우 물건 배송 따라서 이전 릴리스의 앱에서는 app compat 테마를 사용하십시오

이미 익숙 할 수도 있습니다 지원에서 호환성 작업 표시 줄 사용에서 도서관 우리는 이것을 밖으로 확장 할 것입니다 L에서 재질 디자인 요소를 커버 할 수 있습니다 물론 새로운 지원 라이브러리를 사용하십시오

상관없이 위젯, RecyclerView, CardView, 그리고 당신이 알고 사랑하는 다른 것들 CHASE HAASE : 이제 새로운 API에 대해 이야기 해 보겠습니다 UI 툴킷에서 공개 한 기능을 제공합니다 Adam이 이야기하고있는 중요한 요점 중 하나 당신은 디자인의 많은 기능을 얻을 수 있습니까? 표준 Android를 통해 이미 API라는 의미의 프로그래밍 사용 – 표준 레이아웃 및 측정 물건, 표준 드로잉 물건 새로운 API를 추가했습니다

그들이 사용하는 이유의 대부분은 실제로 우리 내부 용입니다 따라서 우리는보기를 팝업 할 수있는 능력을 가지고 있습니다 뷰 계층 구조 평면 위에 표고를 둡니다 그러나 우리는 이것을 표준 위젯의 일부에 사용합니다 반드시 응용 프로그램에 사용할 필요는 없습니다

그러나 당신이 원한다면 그들은 당신의 사용을 위해 거기에 있습니다 그래서 그 중 하나는 실제로 위젯은 새로운 L API가 아닙니다 그것은 실제로 그것보다 좋습니다 새로운 지원 웹 API입니다 ADAM POWELL : 맞아

다시 API 7의 모든 것에서이 기능에 액세스 할 수 있습니다 위에서 우리는 RecyclerView CardView를 사용할 수 있습니다 미리보기 초기에 살펴보십시오 RecyclerView는 무엇입니까? 당신은 이것에 대해 지금 많이 들었습니다 새로운 어댑터 지원 뷰의 기본 클래스입니다

기본적으로 원격으로 아무 것도 시도하지 않은 사람 이 시점에서 목록보기로 재미 있거나 복잡한 많은 벽에 머리를 두드렸다 매달린 광선, 날카로운 물건, 뭐든간에 당신은 그것을위한 은유로 사용하고 싶을지도 모른다 기본적으로 목록보기가 설정됩니다 완전하고 완전하게 통제하다 원하는 항목을 언제든지 배치 할 수 있습니다 그래서 재미있게 보시고 모든 것이 중계됩니다

모든 애니메이션이 손실됩니다 애니메이션의 중간 지점에 있었던 조회수 이제 화면 중간에서 벗어나 다른 데이터 항목에 바인딩됩니다 그리고 시도하고 사용하는 개발자로서 정말 실망 스럽습니다 어떤 종류의 정말로 풍부한 경험을 얻으 려합니다 복잡성 예산보다 훨씬 뛰어납니다

많은 방법으로 따라서 RecyclerView는보다 유연한보기를 제공합니다 기존의 대형 데이터 세트를 에 대한 ListView를 사용하십시오 이미 기능을 내장했습니다 어댑터가 어댑터가 위젯에 대해 항목이 구체적으로 추가 될 때 데이터 세트로 계속 진행 또는 항목의 범위가 제거되거나 제거 될 때 특별히 추가되거나 제거됩니다

그냥 말하기보다는 헤이, 내 데이터 세트가 바뀌었다 뭐가 바뀌 었어? 나는 모른다 너 알아 낸거야 그래서 이런 식으로 우리는 당신에게 줄 수 있습니다 항목이있을 때의 애니메이션과 같은 몇 가지 사항이 자동으로 추가됩니다

세트에 추가되거나 제거됩니다 CHOT HAASE : 튜토리얼을 하나 더 만드는 것을 피할 수 있다면 어댑터보기에서 무언가를 애니메이트하는 방법, 난 행복해질 꺼야 ADAM POWELL : 이것이 바로 여기의 아이디어입니다 따라서 사용자 정의 레이아웃을 수행 할 수도 있습니다 이 프레임 워크에서

많은 분들이 말씀하셨습니다 음, ListView는 훌륭하지만 가로로 스크롤하고 싶다면? 분배기가 작동하도록하려면 어떻게해야합니까? 조금 달라요? 만약 내가 비틀 거리는 그리드를 원한다면 특정 라인을 따라 줄 지어다? 그래서 우리는 그것을 제공합니다 우리는 다 방향 스크롤 기능을 제공합니다 기본적으로 개발자는 자신 만의 레이아웃을 플러그인 할 수 있습니다 관리자가 항목보기를 배치하는 방법을 정의 할 수 있습니다

이것은 RecyclerView의 일반적인 주제를 말하며, ListView가 실제로 모든 방식으로 확장 가능하도록 아니었다 CardView도 있습니다 이제 CardView는 조금 다른 접근 방식을 취합니다 RecyclerView에서 RecyclerView는 매우 일반화 된 구성 요소입니다

당신은 계속 나아갈 수 있습니다 CardView는 무엇인가 될 예정입니다 이 방법은 매우 특별한 유스 케이스를 해결합니다 호환 가능하며 최선의 근사치를 제공합니다 서로 다른 플랫폼 버전에서 의도 된 디자인의 따라서이 경우 표준 일관성있는 외관을 제공합니다

진짜 부드러운 그림자와 사용자 정의 된 둥근 뷰를 얻을 수 있습니다 당신의 둥근 모서리 등을 클리핑하고 L, 우리는 최선을 다해 가짜 버전을 제공 할 것입니다 그리고 모양 배경 pre L하지만 슬라이드에서 볼 수 있듯이 여기까지, 이것들은 실제로 꽤 유사하게 보인다 당신에게 디자인의 일반적인 의도를 부여합니다

이런 종류의 도구는 일종의 것입니다 당신이 표현할 수 있도록 더 많이 제공하고 싶습니다 구형 플랫폼의 재질 설계 CHASE HAASE : 그럼 이제 상대방에 대해서 이야기 해 봅시다 API 및 기능 사실 L 플랫폼에 있습니다 이전 자료는 지원 라이브러리에있었습니다

어디에서든 자유롭게 사용하십시오 귀하의 응용 프로그램에 대한 감각 특정 기능을 타겟팅하는 경우 당신의 적용을 위해, 특히 L, 우리가 소개 한 새로운 API에 액세스 할 수 있습니다 먼저, 그림자에 대해 이야기 해 봅시다 UX 그룹의 초기 비디오가 있습니다

그들이 원하는 공간을 탐험하면서 그 그림자는 실제로 같을 것입니다 그래서 우리는 이것을 볼 수 있습니다 그것이 실행되는지 보자 그래서 우리는 광원을 가지고 있습니다 그것이 지역 광원 인 것에 주목하십시오

우리는 카메라에 대한 직교 투영법을 사용합니다 똑바로보고 그리고 나서 우리는 복잡한 일을하는 카드를 가지고 있습니다 이러한 멋진 실시간 그림자를 주조합니다 그리고 책임있는 모든 엔지니어 60 프레임에서 이와 같은 것을 구현하기위한 심장 발작을 일으켰다

ADAM POWELL : 때때로 웃었다 CHET HAASE : 좋아하는 비디오 모의물이 여기에 있습니다 전체 출시 중 디자인 팀에서 나왔습니다 두 사람의 엔지니어는 그림자의 초기 프로토 타입 작업, 디자인 팀과 이야기를 나눴습니다 그리고 그들이 요구 사항에 관해 그들과 이야기하고있을 때 이 영역 광원을 가지고 있기 때문에 아마도 반올림해야합니다

아마도 직사각형이어야합니다 우리는 둥근 모서리를 확실히 원합니다 부드러운 그림자와이 모든 것들 분명히 60 프레임에서 두 번째 속도로 수행해야합니다 백그라운드에서 하이 엔드 워크 스테이션이 실행 중이었습니다

하이 엔드 애니메이션 소프트웨어는 이것을 렌더링합니다 단일 프레임은 30 초 만에 60 프레임을 초당 싶었습니다 전화로 그것은 너무 괴롭습니다 그림자가 어디에 있는지도 알 수 있습니다

그리고 그걸 렌더링하는 데 아직 오래 걸렸습니다 그리고 우리는 실시간으로 실제로 어떻게하는지 궁금합니다 그리고 나서 우리가 알아 낸 것 같아요 그래서 그림자 뒤의 아이디어는 당신은 당신의 견해를 높이고, 그 견해들을 그 견해 위에 올려 놓기 위해 계층 구조 평면 따라서 L에 살기 전에 모든 것을 생각할 수 있습니다

당신이 원한다면, 모든 것이 z에 있다는 것을 제외하고는 0이됩니다 모든 것이 같은 비행기에 있습니다 그것은 기본적으로 안드로이드의 평평한 땅입니다 음, L 버전에서 우리는 당신을 허용합니다 당신의 선택에 따라 그러한 견해 중 일부를 향상시킬 수 있습니다

해발 고도 또는 번역 z 값 또는 az 값 그들을 모두의 비행기 위에 올려 놓는 az 값 그 평평한 땅에 그러면 자동으로 캐스팅 할 수 있습니다 공중 광원으로부터의 그림자 우리는 그 세계보다 국지적으로 위치했습니다 이런 식으로하는 또 하나의 이점은, 알아내는 대신에, OK 자, 어떻게이 그림자 이미지를 빨리 그릴 수 있을까요? 이 일의 뒤에 대략 보이게하십시오? 뷰 볼륨에서 올바르게 수행하는 한 가지 이점 접근 방식은보기가 컨테이너 외부로 그릴 수 있다는 것입니다

범위 너가보기를 그리려고 노력했는지 나는 모른다 그림자를 던지거나보기를 확대하는 것처럼, 갑자기 비늘이 생기거나 밖으로 캐스팅됩니다 그 포함 관계 계층 구조의, 그때 그것은 잘립니다 그런 다음이 API를 사용하여 놀아야합니다

setClipChildren (false) 그리고 일종의 것들은 당신이 기대 한대로 가지 않습니다 그리고 그것은 모두 끔찍한 해킹입니다 따라서 해킹을하는 대신 실제로 육체적으로 정확하게하는 것 우리는이 3D 볼륨을 만듭니다

당신은 그곳의보기를 향상시킬 수 있습니다 그들이 원하는 볼륨으로 그릴 수 있습니다 z에서 올바른 순서로 정렬됩니다 그들은 올바른 순서로 그립니다 그림자는 그 아래에서 올바른 순서로 그려집니다

뷰 계층 자체 위에 ADAM POWELL : 그 외에도 많은 아마 당신이 정말로 당신의 견해에 맞는 z 순서를 원한다 스태킹을 시작할 때 과거에는 자식 순서를 재정의해야했습니다 그리기를위한 매개 변수

과거에는 학대를 당했을 수도 있습니다 뷰 그룹 내에서의 일반적인 아이의 순서 지정 바람직한 효과를 달성하기 위해, 이렇게하면 모든 번거 로움을 피할 수있는 아주 쉬운 방법이됩니다 CHASE HAASE : 그래서 우리는 몇 가지를 볼 수 있습니다 이 작업과 관련된 API의 기본적으로 입면 특성이 있습니다 이것은 그 물건이 사는 곳입니다

이것을 영구적 인 z 위치라고 생각할 수 있습니다 그리고 우리는 몇 가지 다른 속성을 가지고 있습니다 이는 번역 x 및 번역 y와 유사합니다 속성 비록 이것들이 애니메이션에서 더 많이 사용되지만, 일시적인 포스트 레이아웃 상태 당신은 다른 z 값으로 애니메이트하고 있습니다

그래서 예를 들어, 당신이 당신이 팝업하고 싶은 전망을 가지고 있다면, 당신은 그것이 언론 국가에있을 때 그 그림자를 확대하기를 원합니다 번역 z 속성에 애니메이션을 적용하면 긍정적 인 고도 값을 가졌는지 여부 다른 API도 있습니다 클리핑에 대 한 슬라이드에 표시합니다 그래서 그림자 자체의 모양을 설정할 수 있습니다

따라서 플로팅 액션 버튼을 생각해 볼 수 있습니다 이 원형 모양으로 음, 원형 그림자를 드리 우고 싶습니다 그렇지 않으면 환상이 무너집니다 따라서 API를 사용하여 모양을 설정할 수 있습니다

그림자를 던져 버린다 개요를 설정할 수있는 API도 있습니다 실제로 잘라내 진 것입니다 이 중 일부는 필연적으로 제약 조건이 주어집니다 우리가 운영하는 곳은 매우 제한되어 있습니다

임의의 경로 모양으로 잘라낼 수 없으므로 일부 세부 정보 SDK 문서에 있습니다 또한 클리핑 및 특히 API를 중심으로 우리가 풀 릴리스로 갈 때 아마 변화하기 쉽다 미리보기에서 우리가있는 곳을 볼 수 있습니다 그동안 석방하라 데모를 실행 해 봅시다

어떻게 작동하는지 볼 수 있습니다 데모로 전환 할 수 있다면 여기에 있습니다 당신은 내 아주 빨간 손가락 옆에, 나는이 카드를 끌 수 있습니다 실제로 틸트를 사용할 수 있습니다 이 일에 미묘한 차이를 느낄 수 있습니다

나는 약간의 음영이 있다고 생각한다 아마도이 프로젝터에 대해서는 너무 미묘 할 것입니다 그래서 당신은 이것이 실제로 예술가의 렌더링이 아니라는 것을 알 수 있습니다 그리고 그것은 30 초 프레임을 복용하지 않습니다 그래서 우리는 초당 60 프레임을 받았습니다

이것은 넥서스 5입니다 사실 많은 초기 작업이있었습니다 오래되고 느린 장치에서 수행됩니다 원래 Nexus 7이 프로토 타입 장치로 사용 된 것 같습니다 상황이 실제로 충분히 빠를 것입니다

그리고 다시 이것은 지역 광원입니다 실내의 그래픽 괴짜들, source local 당신이 할 수있는 많은 가정들이 있습니다 그것이 포인트 소스이고 그것이 무한했다면 그리고 우리는 여기서 그러한 가정을하지 않습니다

우리는 실제로 이러한 메쉬를 실시간으로 생성합니다 부드러운 경계가있는 그림자를 드리 우기 위해, 그것이 그들이 원하는 결과이기 때문입니다 그래서 합리적으로 잘 작동합니다 내가 보여줄 또 하나가 있습니다 Shadow Card Stack을 봅시다

따라서 이러한 스태킹 요소를 볼 수 있습니다 그들은 다른 z 값을 나타냅니다 그리고 그들은 더 크거나 더 작은 그림자를 던집니다 이 육체적으로 정확한 볼륨에서 기대하는 것처럼 ADAM POWELL :이 데모는 실제로 보여줍니다

네가 할 수있는 다른 사실들 기조 연설 중 본 또한 요소를 가질 수 있습니다 동일한 병합 된 평면의 일부이며, 3 차원 성격을 더 나누고 더 많이 차지하라 당신이 그들과 상호 작용할 때 CHASE HAASE : 우리가 슬라이드로 다시 전환 할 수 있다면 거기는

네 터치 피드백에 대해 이야기 해 보겠습니다 확실한 잔물결에 대해 이야기 해 봅시다 그래서 우리가 원했던 것 중 하나 일반적으로 UI에서 할 수 있습니다 – 사실, 우리는 엔지니어링 공간에서 그것에 대해 생각하고있었습니다

우리가 전반적인 디자인 언어에 직면하기 전에 재료 디자인의 변화 – 능력 무슨 일이 일어나고 있는지 더 많은 것을 사용자에게 알리기 위해 그들의 UI 상호 작용 특히, 버튼을 누를 때, 즉각적인 원자 상호 작용이 있습니다 눌려진 상태에서 눌려 지므로 상태 색상이 눌려집니다 좋았어 우리가 할 수 있다면 좋지 않을까? 변경 사항 중 일부를 애니메이션으로 만들어 정보를 얻으십시오

변화하는 국가들, 국가의 시간 기반 변화의 일종 그 주 실제 위치에 대한 자세한 정보는 물론 변경 되었습니까? 그래서 물결이 그렇게합니다 표준 위젯에 대한 터치 피드백 상호 작용 사용자 정의 위젯에서 사용하도록 선택한 경우, 눌린 상태에 대한 피드백을 제공합니다 일어나거나 일어나는 다른 주, 그래서 잔물결은 일종의 발산 물이 될 것입니다 뿐만 아니라 선택적으로 발산합니다 접촉 지점에서

그래서 당신은 실제로 리플을 얻을 수 있습니다 손가락을 밟은 곳부터 시작됩니다 훨씬 많은 상호 작용 정보 사용자가 실제로 무슨 일이 일어나고 있는지 이해할 수 있습니다 ADAM POWELL : 다시 한 번 말씀 드리겠습니다 모션의 원리와 그것이 실제로 어떻게 UI 이해에 도움이되는 일종의 이렇게하면 많은 방해 요소가 제거됩니다

당신이 오늘 UI에서 보는 깜박임 터치 영역 조명의 전체 파손 너가 조금이라도 만지 자마자 매우 가혹하게 위로 그것의 모퉁이 이렇게하면 사용자에게 조금 더 부드럽게됩니다 CHASE HAASE : 새로운 수업이 있습니다 이것을 가능하게하는 RippleDrawable이라고 불린다 그리고 이것은 기본적으로 내용을 래핑합니다

당신이 그 내용을 보여주고 그 다음에 드러내고 싶어하는 리플로 시간이 지남에 따라 당신은 선택적으로 당신이 리플의 특성을 변경하기 위해 설정할 수도 있습니다 이것은 자동으로 내장됩니다 버튼과 같은 많은 표준 도구로 이 기능은 활성화 된 응용 프로그램에서 볼 수 있습니다 머티리얼 디자인이 이미 있거나 RippleDrawable을 사용할 수 있습니다 코드에서 직접 인스턴스화 할 수도 있고, XML 리소스 또는이를 수행하는 쉬운 방법으로이 작업을 수행 할 수 있습니다

뭔가의 전경이나 배경을 설정할 수 있습니까? 선택 가능한 항목 배경으로, 그 선택을 자동으로 리플합니다 상호 작용 그래서 우리는 아이콘을 약간 변경했습니다 우리는 새로운 것을 추가했습니다 이 두 가지가있었습니다

하나는 상태 애니메이션 드로어 블이었고, 이것은 다른 PNG를 통해 실제로 애니메이션을 적용하는 기능입니다 이것을 키 프레임 애니메이션으로 생각할 수 있습니다 우리는 다른 이미지를 뒤집을뿐입니다 도중에 체크 박스와 라디오 버튼은 내가 생각하기에, L 미리보기에서 이것을 나타냅니다

그래서 지금까지의 데모를 본 적이 있다면 요 시스템 이미지를 실제로 플래싱하려면, 이 위젯이이를 통해 상호 작용하는 것을 볼 수 있습니다 기본적으로 상태에서 상태로 애니메이션을 적용하는 방법입니다 도중에 일련의 이미지를 통해 그리고 다른 하나는 상태가없는 애니메이터였습니다 이 위젯이 갈 때 말할 수있는 능력, OK

이 상태에서 그 상태로 이 임의의 애니메이션을 실행하고 싶습니다 일반적으로 객체 애니메이터 애니메이션을 제공합니다 여기 보이는 것처럼, 우리는 세 가지를 쌓아 올리고 있습니다 애니메이터 세트에서 우리는 말하고 있습니다

좋아, 나는 움직이기를 원해 내 객체의 다음 속성 나는 압박에서 압박에 이르기까지 상태, 그리고 앞뒤로 다른 상태 조합 훨씬 유연한 표현 방식 이죠 여기 있습니다 이 위젯이 통과하기를 바라는 행동 그것은 a 상태에서 b 상태로 진행됩니다

ADAM POWELL : 예를 들어 보겠습니다 누군가가 그것을 사용할 수있는 곳? CHASE HAASE : 예를 들어, 버튼을 터뜨릴 수 있습니다 클릭 할 때의 프레스 상태를 원한다면 버튼에 – 통조림 질문처럼 들렸습니다 그렇지 않았습니다 네가 그걸 물어볼 것이라고 기대하지는 않았다

너 왜 내가 여기서 생각하게 만드는거야? 따라서 버튼에 고도 속성을 설정할 때 누군가 그것을 눌러, 그럼 당신은 할 수 그것을하기위한 애니메이션을 설정하십시오 그래서 그것이 언론 국가에 들어갈 때 그것은, 나는 언론 국가에 갈거야 실행해야하는 애니메이션은 다음과 같습니다 번역 z 속성에 애니메이션을 적용하면 0에서 20까지

그런 다음 기본 상태로 돌아 가면 당신은 20에서 0으로 움직일 것입니다 생기 애니메이션에 대해 이야기 해 봅시다 그래서 다양한 것들이 소개되었습니다 미리보기 버전에서 완전히 다른 분야에서 보아라

그리고 우리는 가장 큰 것을 만들 것입니다 플로팅 액션 중 일부에서 본 공개 애니메이션 예를 들어 이전 대화에서 버튼 데모, 뿐만 아니라 당신에게 달려있는 다른 상호 작용 당신의 어플리케이션에서 확장 모양을 정의하는 그것 밑에 내용을 드러내고, 원형 공개처럼, 또는 결합 할 수 있습니다 이 원형, 더 둥근이 원형 애니메이션 보기를 복잡한 모양으로 정렬 둥근 난파 효과 나 뭐든간에 기본적으로이 애니메이션을 만들라고 말합니다 그것은 원형 공개입니다

여기에 집중 될 것입니다 반경 이 값에서 그 값으로 움직일 것입니다 그런 다음 애니메이션을 시작하면됩니다 매우 간단한 방법으로 애니메이터를 만들 수 있습니다 이것은 불투명 한 인터페이스입니다

거기에는 유연성이별로 없습니다 다시 말하지만, 우리가 실제로 겪고있는 제약 조건을 감안할 때 하드웨어의 종류에 따라 성능을 향상 시키십시오 우리가 가지고있는 이러한 기능을 특정 사용 사례로 제한합니다 우리가 찾는 것이 중요합니다

그래서 당신은 당신이 필요로하는 것을 할 수 있습니다 현재이 기능 집합으로 제한 될 것입니다 그래도 실현해야 할 중요한 것 이 중 일부는 비쌀 수 있습니다 그래서 우리가하고 싶었던 것들 중 하나 당신이 만들 수있는 슈퍼를 쉽게 만들 수는 없습니다 너의 모양에이 임의의 클립 항상 거기에 두십시오

엄청나게 비싸다 우리가 GPU를 통해 이러한 것들을 구현하는 방법 사소하지 않습니다 그래서 우리는 시간이 지남에 따라 애니메이션을 돌릴 것입니다 그리고 나서 그것은 끝날 것입니다, 그리고 우리는 단지 할 수 있습니다 솔직히 더 쉽기 때문에 사각형보기로 돌아가십시오

그래서 비싸다 우리는 당신이 매우 일시적인 상황에서 이것을 사용할 것을 기대합니다 너 어디서 움직이는거야? 그런 다음 애니메이션에서 다시 나옵니다 이전 릴리스에서도 비슷한 효과를 얻을 수 있습니다 Nexus 5에서 검색을 사용한 경우 – KitKat 릴리스가이 작업을 수행했습니다

그들은 보여줄 원형 공개가 있었다 일부 검색 결과 이것을 이미 할 수있는 방법이 있습니다 다시 말하지만, 거기에 성능 문제가 있습니다 당신은 실제로 그것이 귀하의 신청서와 귀하의 상황에 적합한 것입니다 하지만 이미 그림을 그릴 수 있습니다

비트 맵 쉐이더 애니메이션 커브 따라서 디자이너 중 한 명은 이 릴리스에서 원하는 엔지니어뿐만 아니라 더 임의적 인 시간 보간을 할 수있는 능력이었다 그래서 우리는 이미 능력을 가지고 있습니다 사실, 모든 애니메이션의 기본 동작 쉽게 쉽게 사용할 수 있습니다

그래서 우리에게는 미묘한 가속이 있습니다 그런 다음 미묘한 감속을합니다 그리고 그 효과가 얼마나 확대되었는지 미세 조정할 수 있습니다 그리고 가속화 할 수있는 다른 것들이 있습니다 당신은 모든 출구를 감속시킬 수 있습니다

그러나 일단 당신이 그것들을 지나면 그것은 그 것입니다 그리고 디자이너들은 정말로 생각하기를 좋아합니다 대신 커브의 관점에서 사물의, 2 차 및 3 차 베 지어 곡선과 능력 매개 변수를 조정하여 정확히 얻으려면 그들이 필요한시기 적절한 행동 이것이 우리가 플랫폼에서 구현 한 것입니다 특히 세 가지 애니메이션 타이밍 곡선이 있습니다

재료 디자인의 일부로 추천합니다 그리고 당신은 이것들을 여기에서 볼 수 있습니다 그들은 특정 곡선 매개 변수로 이들을 정의합니다 파일 이름을 맨 아래쪽에 붙였습니다 그래서 이것들은 당신이 단순히 애니메이션의 보간법을 참조하십시오

또는 실제로 매개 변수를 임의로 설정할 수 있습니다 그래서 당신은 그것을 여기에서 볼 수 있습니다 이 작업을 수행하기 위해 정의 할 수있는 XML 리소스가 있습니다 또는 코드에 직접 액세스 할 수 있습니다 당신은 기본적으로 단위 광장을 가지고 일하고 있습니다

이것은 전통적인 애니메이션 및 그래픽 방식의 일종입니다 사물을 정의하는 것 0 제로에서 1 제곱까지의 단위 제곱을가집니다 제어점을 생각할 수 있습니다 그 사각형의 두 구석에

그것들은 앵커 포인트입니다, 미안 해요 그런 다음 컨트롤 포인트의 위치를 ​​정의합니다 길을 따라 커브를 변화시키는 것입니다 사실, 당신은 훨씬 더 임의적 인 경로를 가질 수 있습니다 왜냐하면 우리는 실제로 거기에서 길을 가득 메우고 있기 때문입니다

그것은 단지 하나의 곡선이 아닙니다 복잡한 경로를 정의 할 수 있습니다 왜 그랬는지는 모르겠지만 그렇게 할 수는 있습니다 우리는 또한 현재 운동을 억제 할 수있는 능력을 가지고 있습니다 당신은 이미 이것을 할 수 있습니다

나는 2 ~ 3 년 전 블로그 포스트를 썼다 잘 모르겠다 유형 평가기를 사용하여 사물을 움직이는 방법에 대해 이야기하기 공간적 곡선을 따라서 쉬운 일이 아니 었습니다

그래서 나는 주변에 블로그 게시물을 썼습니다 설명했다 그리고 당신은 여전히 ​​그 접근 방식을 사용할 수 있습니다 그러나 우리는 또한 더 쉬운 방법을 원했다 API를 통해이를 수행하십시오

이제 할 수 있습니다 Object Animator에 새로운 생성자가 있습니다 원하는 경로를 지정할 수 있습니다 x와 y를 움직이는 데 따라 움직일 때 따라야 할 객체 같은 애니메이션의 일부 API 데모에는 경로 애니메이션 데모가 있습니다

SDK를 체크 아웃하면 해당 데모를 확인하십시오 그리고 그 주제에 대한 다양한 변형을 보여줍니다 활동 전환 그래서 이것은 상당히 큰 노력이었습니다 KitKat을 도입 한 전환 API를 기반으로합니다

전환 뒤의 아이디어는 애니메이션을 만드는 것입니다 훨씬 더 쉽고 자동적입니다 그들은 여전히 ​​사용자 정의 할 수 있습니다 그러나 큰 아이디어는 내 UI가 어떤 상태인지 알고 싶습니다 그리고 나는 어떤 상태가 될지 알고 싶습니다

대신에 모든 것을 애니메이션으로 적용 해주세요 모든 것을 위해 맞춤 애니메이션을 만드는 나 따라서 상황이 어디에 있는지 스냅 샷을 작성한 다음 레이아웃을 실행합니다 그리고 그것이 물건을 끄기 바로 전에, 당신은 사물이 어디에있게 될지 알아 낸다 그리고 나서 모든 것을 되 돌린다

그 변화를 대신 애니메이션으로 나타냅니다 그것은 전환이 작동하는 방식입니다 KitKat에서 나온 API입니다 그리고 이것이 지금 활동 전환이되는 방식입니다 잘 작동한다

동일한 모델을 기반으로하지만 너는 똑같은 방법을 지정해야한다 활동 간 애니메이션 그리고 그것뿐만 아니라, 알아낼뿐만 아니라 어떻게 시작에서 이러한 것들을 애니메이션으로, 출시 액티비티 및 아이템 애니메이션 방법 시작된 활동에 대해 알아볼 수도 있지만 공유 된 QUrl 요소 세트를 지정한다 기본적으로 와이어를 통해 던져집니다 그리고 알았어,이 이미지가 여기에 있었다

그리고 지금 거기에있을 것입니다 그리고 그것은이 다른 크기가 될 것입니다 변경 사항을 자동으로 애니메이션으로 나타낼 수 있습니다 그래서 정의하기위한 프로토콜을 생각해 냈습니다 좋습니다

여기 있습니다 우리가 이걸 정의하고있는 이름 그 다음 상대방 활동, 그 이름이 켄인지 알면 같은 요소 인 것에 대해 몇 가지 가정을하십시오 해당 요소는 자동으로 공유되고 자동으로 애니메이션됩니다 활동 전환을 통해 ADAM POWELL : 그 요약은 근본적입니다

이제는 이것이 당신에게 서로 다른 활동 사이의 프로토콜 동일한 응용 프로그램의 일부이거나 아닐 수도 있습니다 전환에서 특정 요소를 공유하기 하나에서 다른 하나까지 그럼 이미 할 수있어 당신 자신의 응용 프로그램에서 하위 활동이있다 세부 사항을 말한다

일부 미리보기 이미지보기 이렇게하기위한 기술이 이미 있습니다 우리가하는 일은 해킹을 적게하는 것입니다 프레임 워크에서 더 많은 코드화 API로 더 많은 것을 할 수 있습니다 쉽게 응용 프로그램 내부

그뿐 아니라 프로토콜을 통해 우리는 공유 영웅 요소의 이름으로 설립했습니다, 프로세스 전반에서 실제로 그렇게 할 수 있습니다 다른 사람의 활동을 시작하게 될 수도 있습니다 그리고 만일 그들이 그 공유 영웅 요소와 함께 무엇을해야하는지 안다면, 그런 다음 해당 활동 전환 애니메이션에 참여할 수 있습니다 이전 릴리스에서이 작업을 수행하는 방법을 알고 싶다면, 당신이 이것을 모든 곳에서하려고한다면, 거기에 고객 활동 애니메이션이라고 불리는 개발자가 있습니다 그리고 당신은 그 기술에 대해 생각할 수 있습니다

기본적으로 프레임 워크에 더 많이 구워진 것으로 사용됩니다 진짜를 위해 그것을하는 방법의 일등 시민으로 ADAM POWELL : 맞아 그리고 이것은 정말로 까다로운 많은 것들을 처리 할 것입니다 활동주기 자체를 둘러싼 다

활동이 다시 시작되면 다른 인트로 전환을 재생하고 있지 않다는 것을 다시는보고 싶지 않은 애니메이션 등등 CHET HAASE : 여기 코드 중 일부가 있습니다 실제로 코드가 포함 된 것보다 훨씬 많은 API가 있습니다 특히 사용자 정의 작업을 시작할 때 특히 그렇습니다 하지만 소개하기 만하면됩니다

당신이 어떻게 이러한 것들을 가능케하고 어떻게 실제로 이 애니메이션을 시작하십시오 이 항목을 테마에 넣으면 이 창 콘텐츠를 사용하도록 설정하라는 스타일을 정의하십시오 전환이나 코드에서 할 수 있습니다 – 매우 유사합니다 그리고 나서 기본 애니메이션을 사용할 수 있습니다 당신은 활동들 사이에서 희미해질 것입니다

간단한 페이드 아웃 페이드 인 또는 당신 사용자 지정 전환을 설정할 수 있습니다 사용자 정의 전환은 정의한 전환, 플랫폼이 제공하는 것, 내가 폭발의 전환을 원한다 모든면을 위쪽과 아래쪽으로 밀어 낸다 화면의 그래서 기존 활동에 대해 이러한 관습을 설정할 수 있습니다

뿐만 아니라 진입 활동 마지막으로 공유 요소가 무엇인지 정의 할 수 있습니다 세트는 당신이 전선을 지나가고 있다는 것입니다, 이름을 지정하고 전달한 다음 정의하십시오 이러한 요소에서 발생하는 전환 애니메이션 게다가 데모가 있습니다

마지막으로, 나는 새로운 전환이 있음을 언급하고자한다 이 작품의 일부로 쓰여졌다 이들은 일반적으로 전환에 사용할 수 있습니다 이미지 이동 기능이 있습니다 훨씬 더 유연합니다

이미지보기가 좀 괴팍하게 될 수 있습니다 길을 따라 크기를 조정하려고 할 때 이것에는 당신이 일을 할 수있게 해주는 능력이 있습니다 당신이 원하는대로, 스케일링 또는 이동중인 경우 이러한 장면 전환의 일부로 화면의 이미지를 슬라이딩 효과는 물건을 오른쪽에서 안팎으로 밀어내는 것입니다 그리고 왼쪽 폭발은이 비틀 거리는 지연으로 아이템을 폭발시키고 있습니다

그래서 당신은 멋진 효과적인 것들을 점차적으로 사라집니다 화면과 몇 가지 다른 장면 전환도 포함됩니다 그러나 간단한 데모를 살펴 보겠습니다 우리가 데모 장치로 전환 할 수 있다면 여기서 나가

그래서 이것은 API 데모입니다 이것은 몇 가지 방법을 보여주는 간단한 데모 일뿐입니다 분명히 내가 클릭하고있는 아이템들입니다 끝까지 실행되는 미리보기 이미지입니다 당신이 들어갈이 다른 활동

공유 요소로 공유합니다 다른 이미지를 애니메이션으로 볼 수 있습니다 그런 다음 목록 항목,에서 움직이는 텍스트 다른 활동 그리고 나서 이것은 데모입니다 다른 이야기의 일부로 쓰여졌습니다

2시 방향에 세부 정보가 추가됩니다 그리고 이러한 그래픽 기능 중 일부는 그리고 다시, 당신은 우리가이 일을 압박하는 것을 볼 수 있습니다 이 다른 활동을 시작합니다 그리고 우리는 두 번째 활동으로 들어갑니다 미리보기 이미지 공유, 해당 비트 맵 이미지 공유 그것은 공유 영웅 요소를 위해 넘어 가고 있습니다

우리가 슬라이드로 돌아 가면 멀리 가져 멀리 가져 ADAM POWELL : 그래서이 이야기를위한 테이크 아웃 우리가 당신에게 제공 할 것입니다 모두를위한 소재의 느낌과 느낌 프레임 워크의 기본 부분, 모두 버튼과 체크 박스, 그 밖의 모든 것

우리는 당신에게 이것들을 테마로하는 능력을 줄 것입니다 따라서 브랜드에 브랜드 색상을 적용 할 수 있습니다 많은 여분의 자산을 자동으로 생성 할 필요없이 귀하의 응용 프로그램 내에서 그러나 그것은 충분하지 않습니다 당신이 정말로해야 할 일은 디자이너와 함께 일하는 것입니다

디자인 가이드 그 자체로 작업하십시오 그리고 당신은 여전히 ​​글쓰기를 할 것입니다 응용 프로그램에 많은 사용자 정의 코드가 있습니다 응용 프로그램을 실제로 만드는 파트가 우리가 쓸 수없는 부분이 두드러지며 서로 다르다 너 아니면 다른 사람들을 위해 그들은 똑같은 것들이 될거야

다른 모든 응용 프로그램이 수행합니다 우리가하고 싶은 것은 당신이 도구를 순서대로 사용할 수있게해라 사용자에게 정말 독특한 경험을 선사합니다 CHASE HAASE : 자원 언급 할 가치가있는 리소스가 거의 없습니다

이미 이걸 보셨을 것입니다 디자인 사양이 있습니다 거기 있니? dandroidcom의 링크가 묶여 있습니다

이 정보 그리고 미리보기 사이트 자체를 확인하고 싶을 것입니다 SDK를 얻으십시오 그것을 막아라 장치 이미지가 시스템에 표시됩니다

그것으로 놀아 라 관심이 있으시면 제안 해 드리겠습니다 특히 우리가 말한 것에 대한 그래픽과 애니메이션 부분에서, 오후 2시에 우연히 나 한테 얘기 할 수있어 다시 [무관심]으로 무대에 올라 섰습니다 그리고 우리 모두에 들어가는 방법에 대한 기술적 인 세부 사항이 있습니다

이 물건들 중 일부가 작동하고 어떻게 될지 이러한 종류의 응용 프로그램을 만드는 데 사용됩니다 마지막으로, 피드백 URL이 또 있습니다 그리고 우리는 실제로 질문을 할 시간이 있습니다 그래서 몇 가지 마이크가 있습니다 마이크를 찾아 내고 질문을 해주십시오

아담 파웰 : 이리와 예 관객 : 그래서 빠른 질문입니다 우리가 어떻게 될지 알고 싶다 이전 버전의 Android에서이 기능에 액세스 할 수 있습니다

나는 분명히 그것을 볼 수 있다는 것을 안다 하지만이게 얼마나 많은지 알고 싶습니다 지원 라이브러리에서 지원됩니다 지원 라이브러리 버전 ADAM POWELL : 새 버전의 지원 라이브러리가 있습니다

Preview SDK로 지금 바로 나가기 그 중 일부는 사용할 수있게 될 것입니다 하지만 실제로 미리보기 SDK에 대한 자세한 내용은 자연 서식지에 새로운 API 몇 가지를 보여줍니다 그리고 다른 많은 이유 때문에 아마 일부 애플 리케이션을 연결시키지 않을 것이다 미리보기 SDK에 대해 야생으로, 관련이 있기 때문에 다른 많은 사전 출시 API 즉, 일단 최종 SDK 버전 사용할 수있는 앱 컴팩트 라이브러리 및 기타가 표시됩니다

시각적 인 스타일의 약간의 뒤의 항구의 약간을 가질 것이다 사용할 수 있습니다 그리고 우리는 물건을 계속 제공 할 것입니다 매우 구체적인 사용 사례를 수행하기 위해 CardView 라인을 따라, 그런 다음 RecyclerView와 같은 것들 그것은 당신이 모든 종류의 움직임을 모든 곳으로 가져올 수있게 해줍니다 이제 활동 전환과 같은 것들 쳇이 잠깐 얘기를 나눴 어 아마 당신은 사용할 수 없을거야 그래서 우리는 아마 앞으로 나아갈 것입니다

당신이 이미 알고 있고 사랑하는 몇 가지 단순한 fall backs 그곳에 CHET HAASE : 메모하는 것도 중요합니다 이야기의 초기에 나왔다 우리가 말하고있는 많은 것들 디자인에 대한 접근 방식으로 표준 Android 프로그래밍을 사용합니다 일부 새로운 애니메이션 기능, 이전 플랫폼의 API에 포함되지 않은 경우, 당신은 그들을 사용할 수 없습니다

그러나 달성 할 수있는 다른 방법이 있습니다 많은 경우에 그러한 종류의 효과 그리고 측정, 레이아웃, 색상, 그 물건, 당신은 매우 유사하게 보일 물건을 얻을 수 있습니다 어떤 사람들에게는 약간 다른 접근 방식이 될 것입니다 특히 새로운 애니메이션 기능을 제공합니다

ADAM POWELL : 맞습니다 뒤쪽의 마이크 관객 : 내 말 들리니? 예 예 ADAM POWELL : 네

관객 : 좋습니다 그래서 기조 연설과 내가 보았던 몇몇 데모에서, 나는 원형 이미지로의 움직임이 있음을 발견했다 조회수 우리가 사용할 위젯이 될 것입니까? ADAM POWELL : 네 우리가 단순한 드로어 블을 만들었던 지 기억하지 못합니다

또는 실제보기를 표시하지만 지원에 구성 요소가 있습니다 우리가 가서 적용 할 도서관 당신의 이미지에 그 원형 클립 CHAR HAASE : 반올림 된 비트 맵이 있습니다 지원 라이브러리의 드로어 블 그래, 그런 것 같아

그게 당신이 말한거야? 네 그것은 매우 간단합니다 우리는 플로팅 액션 버튼이나 팹 위젯을 만들지 않았지만, 왜냐하면 그것은 매우 단순합니다 기본적으로 이미지보기입니다 당신의 그림은 원형 이미지입니다

매우 간단합니다 당신은 그것에 대한 표고를 설정합니다 당신은 개요가 무엇인지 우리에게 말해주고 우리는 옳은 일을합니다 그것으로 실제로 CardView와 비슷합니다

나는 이것을 언급하고자한다 실제로 CardView 효과를 얻는 것은 매우 쉽습니다 사실, 우리가 한 이야기에서 보여줄 데모 나중에 오늘 표준보기를 사용하여 구현했습니다 나는 클릭하고 나는 적절히 그늘을 드리웠다 그것은 간단했다

특정 위젯에 넣는 이점 적어도 우리는 표준 패딩과 레이아웃을 가지고 있으며 또한 그 비슷한 모습을 가질 수있는 능력 이전 릴리스에서 느껴집니다 그래서 그것은 팹을위한 위젯을 만들만한 가치가있는 것 같았습니다 별로 관객 : 고마워 응, 그래

관객 : 그래서 활동 거래와 모든 것 정말 좋고 공통적 인 고통 점을 확실히 해결합니다 제가 알고 싶었던 점은 그 부분에 대한 지원이 필요하다는 것입니다 조각 거래 및 사물을위한 조각 경계를 넘나들며? ADAM POWELL : 네 나는 아직 그것이 미리보기로 그것을 만들었다라고 생각하지 않는다 예

예 아직 그러나 그렇다 우리가 정말로 어려운 문제를 해결하자마자 활동 전환, 다음 단계 프래그먼트 전이였습니다 그래서 나는 그것을 찾을 것입니다

관객 : 고마워 예 ADAM POWELL : 뒤에서 관객 : 그는 같은 질문을했습니다 나는 활동을 위해 한적했다

그러나 우리는 기대를 볼 수있다 아마 다른 미리보기에서 그것을 볼 수 있습니까? 내가 타이밍이 뭔지 모르겠다 나오고있는 다른 비트들 나는 L에서 그것을 볼 것을 기대한다고 말할 것입니다

관객 : 그러나 당신은 그것에 대해 연구하고 있습니까? 예 예 ADAM POWELL : 음 – 흠 관객 : 이제 우리는이 고도를 갖게되었습니다 객체에 대한 전환은 조작 가능성을 의미합니다

화면에있는 것들 끌어서 놓기 기능이 향상 되었습니까? L도 들려? ADAM POWELL : 어떤 종류의 드래그 앤 드롭 특별히 찾고 있어요? 청중 : 임의로 컬렉션을 재정렬합니다 오, 알았어 청중 : 좋은 이벤트 인터페이스 네

아담 파웰 : 네 그래서 RecyclerView로 해보겠습니다 기본적으로 일부 항목 터치 리스너를 적용 할 수 있습니까? 그것은 당신이 컬렉션의 수준에서 터치를 처리 할 수 ​​있도록, 특정 항목보기 수준보다 따라서 번역을 많이 수행 할 필요가 없습니다 부모까지 그리고 나서 다시 그것을위한 공간의 특정 지점에 그러면 훨씬 쉬워지기를 바랍니다

관객 : 네 그게 내가 원하는 바야 감사 뒤에서 ADAM POWELL : 뒤에서

청중 : 이해가 되나요? 기존 코드에서도 ListView를 변경할 수 있습니다 RecyclerViews에? ADAM POWELL : 그래서 그들은 대체로 호환됩니다 두 가지 중요한 차이점이 있습니다 첫째로 커서 어댑터에 익숙하다면 그것은 두 개의 뷰로 뷰를 만들고 분리합니다 다른 단계, 이것이 기본값입니다

RecyclerView에있는 상태 따라서 이러한 구성 요소를 분리 할 수있는 한 현재 ListView 어댑터에서 GetView를 가져오고, 그러면 그것은 쉬운 일 중 하나입니다 다음 작품은 전에 언급 한 것처럼, 더 풍부한 알림을 제공 할 수 있음 데이터 세트 변경의 본질에 대해 그래서 그러한 종류의 신호를 얻지 않고, 매우 거친 나뭇결보다는 ​​오히려 통보 데이터 세트 변경 호출, 그럼 우리는 애니메이션 만큼은 할 수 없을 것입니다 관객 : 그 때가 유일한 유익입니까? 그게 ADAM POWELL : 어느 쪽 이죠? 애니메이션? 청중 : 풍부한 통보 CHET HAASE : 그것은 더 새로운 것입니다 더 시원합니다 ADAM POWELL : 분명해야합니다

나는 그 질문을 이해하지 못한다고 생각한다 그래서 우리가 이전에 이야기했던 것들 중 일부부터, 우리는 어댑터를 통해 전환 할 때의 이점을 의미합니까? 또는 ListView에서 RecyclerView로 전환 본질적으로 동일한 UI가 무엇입니까? 관객 : 예 ADAM POWELL : 좋습니다 네 ListView가 여전히 사용자의 요구를 충족시키는 경우에는 꼭보십시오

이미해야 할 일보다 더 많은 일을하지 마십시오 이것은 대부분 모든 UI의 요구 사항을 해결하기위한 것입니다 훨씬 더 많은 것을 할 수 있기를 정말로 원하는 곳 복잡한 모션과 복잡한 터치 또는 항목을 사용하거나 사용자 정의 레이아웃을 수행하려는 경우 관객 : 네 감사

관객 : 너는 그 관계에 대해 어떻게 생각하니? 이 새로운 스타일과 기본적으로 어떻게 그것이 과도하게 쓰러지고 싸우는 것과 관련이 있습니까? 저의 견해로 볼 때, 그것은 우호적 인 것 같지 않습니다 ADAM POWELL : 일부 작품에 대해 이야기하고 싶습니까? 우리는 드로잉 명령을 재정렬하면서 일부 작업을 수행했습니다 그 중 일부가 들어올 것 같아서요 응 그래

우리는 툴킷 팀에서 많은 모자를 착용합니다 그리고 그 중 하나는 모두 성능에 관한 것입니다 이전 릴리스에서는 많은 작업이있었습니다 디스플레이 목록 최적화 및 오버 드래그 제거에 대한 정보 우리가 실제로 프레임 워크에서 자동으로 할 수있는만큼 그래서 당신이 가진다면, 보기가 완전히 완료되었다고합시다

그것보다 더 큰 또 다른 시각으로 가려졌다 그리고 완전히 불투명 해지면, 우리는 그 일을 과장 할 것입니다 우리는 무슨 일이 일어나고 있는지 모르기 때문에 그걸 그려 내고 싶다면, 우리가 그릴거야 갑자기 갑자기 2 배나 과장됩니다

아무것도하지 않고 이제 우리는 실제로이를 제거 할 수 있습니다 표시 목록에서 일부 후 처리를하기 때문에, 그래서 우리는 완전히 모호한 것으로 그려 내지 않습니다 그래서 많은 정보가 있습니다 이미이 재생 목록 최적화에 그 상황의 일부를 피하십시오

나는 더 많은 애니메이션과 더 많은 부자가 화면의 그래픽은 아마도 의미합니다 무슨 일이 일어나고 있는지 알고 있어야합니다 반투명 효과가 사라지는 경우 항상 화면 전체에서 그렇다면 더 많은 픽셀을 그릴 것입니다 네가 그렇게하지 않은 것보다 하지만 그것은 일종의 표준 Android 프로그래밍 기술입니다

화면에 무슨 일이 일어나고 있는지 알고 있어야합니다 오버 드로 감지기와 같은 도구를 사용하십시오 실제로 픽셀 수준에서 진행되고있는 것을 보여줍니다 당신이 그 위험을 극복하지 않고 있는지 확인하십시오 ADAM POWELL : 실제로, 우리는 많은 팀을 보았습니다

지금까지 소재 UI를 구축하기 시작하십시오 그리고 전반적으로 그들의 과다한 상황 이전 디자인과 크게 달라지지 않았습니다 소개를 시작하자마자 다시 다른 것 위로 미끄러 져 완전히 불투명 한 배경 스태킹을 많이 시작하면, 그렇다면 네가있는 곳이있다 조금 넘치는 것에 대해 생각하기 시작하고 싶어합니다

클리핑을 피하기 위해 할 수있는 일이 더 많습니다 우리는 할 수있는만큼 최선을 다하고 있습니다 자동으로 그렇게하는 프레임 워크에서 관객 : 제 생각으로 생각합니다 모든 디자인 원리가 중요합니다

누적 된 느낌 이를 성취하기 위해 몇 번에 걸쳐 물건을 쌓아야 할 것입니다 그리고 주위를 둘러 볼 수있는 좋은 방법이 있습니까? CHASE HAASE : 스태킹은 일시적인 상태에 가깝습니다 전 일이 전임으로서 많은 UI를 보지 못했습니다 서로의 위에 겹쳐서

ADAM POWELL : 글쎄요, Google Now 카드에있는 것들 그것은 서로의 위에 쌓일 것입니다 그러나 심지어 그 중 일부는, 그들이 무엇을 시작했는지 카드 중 일부가 함께 하나의 카드로 병합을 시작하십시오 컬렉션의 일부인 경우에는 일부 상세보기에서 나옵니다 그리고 그 중 일부는 일부 데모에 표시되었다고 생각합니다 게다가

관객 : 고마워 나중에 2 초 남았 어 질문을 위해, 우리는 모두 시간이 없다는 것을 의미합니다 고맙습니다 ADAM POWELL : 원한다면 우리가 여기있을거야

나중에 다른 질문을 할 수 있습니다

What's New in Android Studio UI Design and Debugging Tools (Google I/O'19)

[음악 재생] VADIM CAEN : 안녕하세요 우리 이야기에 일찍와 주셔서 감사합니다

Android Studio, UI 디자인 및 디버깅의 새로운 기능 도구 고맙습니다 [박수 갈채] 저는 Vadim입니다 Android Studio에서 디자인 툴을 작업합니다 JEROME GAILLARD : 저는 Android Studio 팀의 Jerome입니다

JOE BAKER-MALONE : 저는 Android Studio 팀의 Joe입니다 ASHLEY ROSE : 저는 Android 프레임 워크와 JetPack의 Ashley입니다 VADIM CAEN : 좋습니다 시작하기 전에 모바일 제품에 대해 약간의 이야기를합니다 어제 어쩌면 Android Studio 팀은 개선을 위해 모바일 제품에 중점을 두었습니다

Android Studio의 엔드 투 엔드 사용자 경험 Android Studio 개선은 수정 사항 만이 아닙니다 또한 사용 방법을 개선하는 방법이기도합니다 우리가 확인한 틈새를 채우십시오 우리의 도구 체인은 – 설계 할 때 – 새로운 레이아웃을 구축하고 새로운 탐색 기능을 구축합니다 이 레이아웃 사이에, 당신의 자원을 관리하고, 장치에서 런타임에 검사를 처리합니다

이 도구 체인을 사용하려면 전형적인 사용자 여행을 거치면서, Google Trips 애플리케이션을 구축하십시오 그리고 Jerome은 Layout Editor에 대해 이야기 할 것입니다 여기에서 볼 수있는 첫 번째 레이아웃을 작성하는 방법에 대해 설명합니다 제롬 가이 야드 : 감사합니다, 바딤 그래서 우선, 우리는 Google Trips 앱의 첫 화면, 레이아웃 편집기를 사용하여

레이아웃 편집기를 열면 이것은 화면의 종류입니다 너는 볼거야 여기는 단지 빈 레이아웃 일뿐입니다 우리가 할 첫 번째 일은 청사진 모드로 전환하는 것입니다 속도가 빠르면 빠르며 방금 만들려고 할 때 산만해진다

레이아웃상의 제약 넌 그냥보고 싶지 않아 구성 요소가 실제로 어떻게 보이는지 나는 팔레트에서 – 레이아웃에 필요한 모든 구성 요소를 드래그하여 어느 정도 확실한 곳에서 일단 내가 끝내면 그 시간이 온다

제약 조건을 만들 수 있습니다 좀 더 효율적인 건물 제약이되는 방법으로, 나는 그들을 하나 하나 만들 수 있었다 하지만 문맥 메뉴를 사용하면 한 번에 여러 가지 제약 조건을 만들 수 있습니다 예를 들어 여기서는 RecyclerView를 중앙에 배치하려고합니다 레이아웃 내에서

내가 할 수있는 한 가지는 RecyclerView를 마우스 오른쪽 버튼으로 클릭하는 것입니다 문맥 메뉴에는 옵션이 있습니다 수평으로 센터링의 그것이하는 일은 왼쪽 클릭 한 번으로 오른쪽 제약 조건을 RecyclerView가 중앙에 배치되도록합니다 일단 모든 제약 조건을 다 만들면, 이것은 내 레이아웃이 청사진 모드에서 보이는 것과 같습니다

분명히, 그것은 나에게 정말로 말하지 않는다 디자인에 비해 옳은 것을 만들면 지금 당장 나는 주어진다 이제 디자인 모드로 돌아가겠습니다 그것이 어떻게 생겼는지 보아라 디자인 모드에서는 보이지 않는 것을 볼 수 있습니다

내가받은 원래 디자인과 매우 흡사하다 그 이유는 RecyclerView 뷰 꽤 비어 있습니다 아시다시피, RecyclerView는 일반적으로 런타임에 데이터를 채우고, 하지만 그때는별로 도움이되지 않습니다 레이아웃을 만들고 데이터가 올바르게 표시되는지 확인하십시오 당신이 보게 될 것입니다

이 문제를 해결하려면 디자인 [? 도구?] 속성을 사용합니다 그래서 디자인 시간 속성, 당신은 간단하게 – RecyclerView에서 컨텍스트 메뉴를 다시 사용하십시오 샘플 데이터 선택기 등을 사용할 수 있습니다 샘플 데이터 선택 도구에서 미리 정의 된 템플릿 중 하나를 선택할 수 있습니다 RecyclerView 항목에 대해 귀하가 제공하는 정보

여기에서 첫 번째 이메일 클라이언트를 선택했습니다 그렇게하면 해당 RecyclerView에 대한 레이아웃이 생성됩니다 항목, 이메일 클라이언트 카드 그리고 동시에, 그것을 당신의 RecyclerView에 연결합니다, 그러면 레이아웃 편집기에 채워진 상태로 표시됩니다 물론 우리는 이메일 클라이언트를 구축하지 않습니다

RecyclerView에서 빌드하고자하는 것 그 여행 카드입니다 그래서 나는 그 RecyclerView 아이템을 편집하려고합니다 Trip 카드로 만들었습니다 자원 관리자 패널에서 – 여기에서 볼 수있는 왼쪽 편에, 바딤이 선물 할거야 너에게 훨씬 더 자세하게 – 간단히 말해서 RecyclerView 항목의 이름을 뭔가로 바꿀 수 있습니다

내 프로젝트에 더 적합한, 그리고 나 편집을 시작할 수 있습니다 리소스 관리자에서 레이아웃을 두 번 클릭하십시오 레이아웃 편집기에서 레이아웃을 열면됩니다 화면에서 볼 수 있듯이, 나는 꽤 많이 가지고있다 내 오른쪽 여행 카드에 필요한 모든 권리가있는 구성 요소, ImageView, 몇 개의 태그보기, 그러나 그들은 분명히 올바른 제약 조건을 가지고 있지 않습니다

그래서 모든 제약 조건을 삭제하고, 툴바에서 해당 버튼을 클릭합니다 그 작업이 끝나면, 나는 재구성 만 할 것입니다 모든 제약 한 가지 문제는 우리가 꽤 많은 구성 요소를 가지고 있다는 것입니다 작은 영역에서 서로 겹치기

그것은 약간 어수선 할 수 있습니다 그리고 우리는이 상황에서, 건물 제약 조건은 약간 어려울 수 있습니다 제약 조건을 드래그하는 것이 때로는 어려울 수 있습니다 올바른 대상, 올바른 구성 요소, 특히 구성 요소가 겹치는 경우 이제 우리가 할 수있는 일은 제약을 원하는 곳으로 직접 드래그합니다 연결하려는 구성 요소에서, 그런 다음 팝업 메뉴가 열리고 어떤 유형인지 묻습니다 설정할 제약 조건을 선택하십시오

정말 흥미로워 지네 제약 조건을 다음 위치로 드래그합니다 겹치는 구성 요소가 있습니다 그 상황에서, 우리는 여러 유형의 제약 조건을 사용할 수 있지만 겹치는 구성 요소를 선택하십시오 그 제약 조건을 첨부하고 싶습니다

그리고 그것은 그것을 훨씬 쉽게 만들어야합니다 경우에 제약 조건 레이아웃을 작성하는 방법 중첩되고 작은 구성 요소가있는 곳 도움이 될 수있는 마지막 방법 제약 조건을 효율적으로 만들 수 있습니다 구성 요소를 사용 중입니다 구성 요소에서 여러 구성 요소를 선택하는 경우 – 여기에서는 두 가지 텍스트보기를 선택했습니다

다시 컨텍스트 메뉴에서 마우스 오른쪽 버튼을 클릭하고 선택합니다 사용할 수있는 제약 조건 중 하나 당신은 하나의 제약 조건을 만들 수 있습니다 선택한 여러 구성 요소에 적용됩니다 그래서 여기에서 두 가지 제약 조건을 만듭니다 이 두 텍스트보기에서 동시에 우리가 모든 제약 조건을 다 만들면, 우리의 견해를 조금이라도 사용자 정의 할 때입니다

이를 위해 우리는 Attributes Panel을 사용할 것입니다 레이아웃 편집기의 오른쪽에 있습니다 우리는 Attributes 패널을 재 설계했습니다 Declared Attributes라는 맨 위에 새 섹션을 표시합니다 이 섹션에서는 모든 속성 구체적으로 설정된 선택한보기에 대한 그 견해에 대해서

바로 거기에서 모든 속성을 편집 할 수 있습니다 이미 설정된 해당 뷰에 새 속성을 설정하려면, 더하기 버튼을 클릭하기 만하면됩니다 해당 속성의 이름과 값을 추가하십시오 Attributes 패널에서 할 수있는 또 다른 일 Constraint Widget을 사용하여 여백을 설정합니다 귀하의 의견에 보고 싶어했을거야

숫자와 같은 실제 값만 설정할 수있을뿐만 아니라 증거금의 가치 ​​- 정의 된 맞춤 측정 기준을 설정할 수도 있습니다 프로젝트에서 그것이 우리가 @ dot dot dot option을 추가 한 이유입니다 드롭 다운의 맨 아래에 버튼을 클릭하면 자원 선택 도구가 열리고, 이미 가지고있는 특성 항목을 선택할 수 있습니다 프로젝트에서 정의하거나 바로 거기에 새로운 차원이 있습니다 일어날 필요가있는 마지막 한 가지 – 그 레이아웃을 보면서 – ImageView가 샘플 데이터로 채워지는 것을 볼 수 있습니다

하지만 단지 기본 샘플 데이터 일뿐입니다 Android Studio에서 제공됩니다 그래서 그것은 실제로 그 종류를 대표하지 않습니다 RecyclerView가 런타임에 수신 할 데이터의 양입니다 그래서 당신이 할 수있는 것은 당신 자신의 샘플 데이터를 설정하는 것입니다

그 ImageView에 cities라는 이미지를 cities라는 디렉토리에 추가했습니다 우리 프로젝트의 샘플 데이터 폴더에 있습니다 샘플 데이터 그림에 나타나는지 확인할 수 있습니다 샘플 데이터를 설정할 수 있습니다

우리의 원래 레이아웃으로 돌아가서, 우리는 이제 그것이 많이 보임을 볼 수 있습니다 당신이 가진 원래의 디자인과 더 비슷합니다 거기에서, 당신은 정말로 디자인이 제대로 구현되었으며 실제 데이터를 수신 할 때 작동합니다 장치에서 실행 중입니다 이제 우리는 첫 번째 제약 조건의 구축을 마쳤습니다

첫 번째 화면에서 계속 진행하고 싶습니다 우리의 응용 프로그램에서 우리의 다음 화면을 구축합니다 레이아웃 파일을 만드는 것만으로 돌아 가기보다는, 레이아웃 편집기에서 빌드하고, 우리는 네비게이션을 생각하고 바로 거기에서 시작하고 싶다 우리의 애플 리케이션의 흐름, 그리고 어떻게 첫 번째 화면이 전환됩니다 두 번째 화면으로 그렇게하기 위해 우리는 네비게이션을 살펴볼 것입니다 편집자

탐색 편집기는 시각적 도구입니다 이를 통해 Navigation Architecture를보다 쉽게 ​​사용할 수 있습니다 JetPack 라이브러리의 구성 요소 탐색 아키텍처 구성 요소의 방식 작품은 네비게이션 호스트 단편을 사용하는 것에 의존합니다 응용 프로그램의 기본 레이아웃

여기에 우리의 활동 주 레이아웃 파일, 우리는 Layout Editor에서 드래그 할 것입니다 NavHostFragment 팔레트 – 기본적으로 거기에 있습니다 그것을 디자인 표면 위로 끌어 올 것입니다 그렇게 할 때, 그것은 당신에게 선택을 요구할 것입니다 해당 NavHostFragment와 관련된 탐색 그래프 아직 탐색 그래프를 만들지 않은 경우, 그 대화 상자에서 바로 할 수 있습니다

우리가하는 일이야 이것이 레이아웃이 어떻게 생겼는지입니다 그것은 비어 있습니다 이 NavHostFragment가 있습니다 네비게이션 아키텍처 구성 요소 그것을 채울 것입니다 당신이로드 할 여러 단편들

그러나 두 번 클릭하면 탐색 편집기가 열립니다 이것은 네비게이션 에디터가 비어있을 때 보이는 것과 같습니다 우리가하고 싶은 첫 번째 일 첫 번째 화면을 시작 목적지로 추가합니다 우리의 애플 리케이션을 위해 대상 추가 메뉴에서 앱에있는 모든 레이아웃이 미리 선택되었습니다

그래서 우리를 위해, 우린 그 조각을 환영합니다 이전에 작업해온 레이아웃입니다 바로 거기에 놓으십시오 다음으로, 우리는 두 번째 화면을 추가하기를 원한다 그러나 이미 레이아웃을 만들지 않았기 때문에, 우리는 단순히 새로운 목적지를 만들 수 있습니다

추가 대상 메뉴에서 그렇게하면 생성의 가능성을 얻을 수 있습니다 새로운 프래그먼트 클래스와 그 관련 레이아웃, 이것이 레이아웃이 될 것입니다 두 번째 화면으로 사용됩니다 두 화면이 Navigation Editor에 있으면, 그들을 연결하는 시간이 온다

그것은 행동으로 할 수 있습니다 화면에 표시된대로 작업을 간단하게 만들 수 있습니다 또한 Attributes 패널에서 직접 탐색 편집기의 해당 동작에 대한 속성 중 일부를 설정하고, 애니메이션이 재생되는 것과 같습니다 그 동작을 통해 전환 할 때, 또는 뒤로 누르면 행동으로 할 수있는 또 다른 매우 흥미로운 일 한 화면에서 다음 화면으로 유형 안전 데이터를 전달합니다

그렇게하고 싶다면 다음과 같이 할 수 있습니다 수신 대상에 – 인수 섹션에서 더하기 단추를 클릭하십시오 속성 패널의 단순히 대화 상자를 열면 인수의 이름을 지정하십시오 인수의 유형 그것은 미리 정의 된 유형일 수 있습니다

또는 프로젝트에서 정의한 유형일 수 있습니다 당신이 원하는 어떤 물건이라도 물론, 네비게이션 그래프 만들기 앱 탐색을 완벽하게 지정하기에는 충분하지 않습니다 또한 약간의 코드를 작성해야합니다 그러나 당신이 볼 수있는 것처럼 그것은 꽤 간단합니다

여기, 나는 RecyclerView의 항목에 불과하다 OnClickListener의 경우 전환하려고합니다 그 행동을 끝내라 그래서 내가하는 일은 액션 객체를 만드는 것입니다 내비게이션에서 지정한 인수를 전달합니다

편집자 일단 행동을 취하면 나는 간단하게 탐색 라이브러리의 navigate 메소드 호출 실제로 전환을 수행합니다 그것이 실제로 정의한 전환을 수행하는 데 필요한 전부입니다 탐색 편집기에서 할 수있는 마지막 사항 나머지 네비게이션 흐름을 채우기 위해 자리 표시자를 사용하며, 그 순간에 귀찮게하고 싶지 않으면 새로운 조각 나중에, 그렇게 할 준비가되면, 당신은 단순히 돌아가서 레이아웃으로 대체 할 수 있습니다

지금은 실제로 빌드 할 때가되었다고 생각합니다 우리의 두 번째 레이아웃 보시다시피, 많은 이미지가 포함 된 레이아웃입니다 많은 자원이 필요합니다 우리는 어떻게 자원을 볼 것인가? 관리자는 우리가 그것을 구축하는 데 도움이 될 수 있습니다

VADIM CAEN : 나는 갭을 채우기 전에 이야기하고있었습니다 Android Studio에 존재했던 하나의 차이 리소스를 관리하는 방법이었습니다 문제가 무엇인지 살펴 보겠습니다 Android Studio 리소스 디렉토리 구조 프레임 워크를 위해 만들어진 것이지 실제로는 아닙니다 사용자에게 리소스를 얻을 때 디자이너에게서 보면 이렇게 보일 수도 있습니다

폴더가 많을 수도 있습니다 죄송합니다 먼저 Android Studio에서 다른 문제가 발생했습니다 전체 축소판보기가 없습니다 특정 Android보기

그래서 레이아웃, 벡터 잔해 또는 모양 – 미리 볼 수있는 유일한 방법은 하나의 레이아웃을 두 번 클릭하거나 하나의 파일에 두 번 클릭하는 것입니다 미리보기에서 확인하십시오 이 문제를 해결하기 위해 Android Studio에 도입했습니다 34 Resource Manager는 다음과 같은 새로운 도구입니다

리소스를 가져오고, 사용하고, 탐색 할 수 있도록 도와줍니다 보다 그래픽적인 방식으로 그것을 열려면 간단히 Resource Manager 버튼을 클릭하면됩니다 Android Studio의 왼쪽에있는 프로젝트 버튼 아래, 이 중립 창을 열 것입니다 한번 더 그래서 우리 문제로 되돌아갑니다

왼쪽에는 프로젝트 구조가 있습니다 오른쪽에는 디자이너가 우리에게 준 것을 가지고 있습니다 우리는 파일에서 다른 프로그램을 볼 수 있습니다 디자이너가 우리에게 준 것 어쩌면 그들은 자신이 좋아하는 디자인 소프트웨어를 사용했을 것입니다

기본 내보내기 옵션을 사용했습니다 폴더에 드로어 블 접두어가 누락되었을 수 있습니다 이름 또는 접미사 @ 2x와 함께 웹 형식을 사용했을 수도 있습니다 그리고 당신이해야 할 일은 @ 2x 접미사를 제거하는 것입니다

그런 다음 하나씩 하나씩 파일을 붙여 넣습니다 다른 문제는 폴더가 누락되었을 수 있으며, 그리고 당신은 문서로 돌아 가야 할 것입니다 이 특정 폴더에 대한 한정자가 무엇인지 기억하고, 그리고 당신은 올바른 순서로 그들을 넣어야합니다 Resource Manager와는 어떻게 작동합니까? 이제 전체 묶음을 끌어다 놓기 만하면됩니다 당신이 Resource Manager에 가져온 파일들, 자동으로 가져오고 이름별로 그룹화됩니다

여기에서 볼 수 있듯이 우리의 자원은 이름별로 그룹화되어 있습니다 올바른 한정어가 적용되었습니다 그래서 방금 무슨 일이 있었던거야? [박수 갈채] 고맙습니다 한정어를 식별하면 여기에는 웹 또는 Android가 파일 경로에있을 수 있습니다 우리는 단순히 해당 안드로이드 폴더를 만들 것입니다, 파일에있을 수있는 접미어를 제거하고, 프로젝트에 복사하십시오

물론 한정자를 추가하려는 경우 (예 : 무작위로 지방, 그리고 프랑스어와 같은 임의의 언어, 프랑스와 같은 지역에서는 간단하게 여기에서 할 수 있습니다 그리고 당신은 명령을 기억할 필요가 없습니다 수동으로 폴더를 만들면 자동으로 생성됩니다 올바른 한정어로 이 시점에서 원하는 경우 파일의 이름을 바꿀 수도 있습니다 이제 우리의 자원은 Resource Manager에서 그룹화됩니다

한 번에 모두 볼 수 있습니다 따라서 기본적으로 하나의 리소스 버전 만 표시됩니다 하지만 리소스를 두 번 클릭하면 당신은 모든 다른 버전을 볼 수 있습니다 다른 한정자가 적용되면 분석 할 파일 유형 어떤 파일이 응용 프로그램에서 가장 많은 공간을 차지했는지 자, 이것은 제가 정말로 흥분되는 특징입니다

이제 SVG를 드래그 앤 드롭 할 수 있습니다 VectorDrawable로 변환됩니다 [CROWD CHEERING] 고맙습니다 그래서 여기에 파일 선택기가 열려 있습니다 나는 아무것도 선택할 필요가 없다

간단히 클릭하고 열 수 있으며 모든 SVG를 열 수 있습니다 가져오고 변환됩니다 또 다른 멋진 기능은 모든 레이아웃을 미리 보는 것입니다 이름으로 레이아웃을 인식하는 것이 어려울 수도 있습니다 따라서 레이아웃 탭에서 리소스 관리자를 열면, 모든 레이아웃을 볼 수 있습니다

당신이 찾고있는 것을 찾으려면 전에 말했듯이 도구 체인이 있습니다 이 전체 도구 체인을 함께 통합하려고합니다 우리가 한 것은 통합 된 것입니다 [INAUDIBLE] 레이아웃 편집기로

예를 들어 여기에 포함시키고 자하는 레이아웃이 있습니다 그래서 상단 부분 이 레이아웃을 레이아웃 편집기로 드래그 앤 드롭 만하면됩니다 [INAUDIBLE]을 만듭니다 Drawable에도 똑같이 적용됩니다

Drawable을 드래그 앤 드롭하면 ImageView가 생성됩니다 이 견해의 끝까지 빨리 감습니다 이전 레이아웃에서 볼 수 있습니다 우리 툴바는 올바른 색상이 아닙니다 우리가 할 수있는 것은 컬러 탭을 열고, 우리 프로젝트에 정의 된 모든 색상을 볼 수 있습니다

그 중 하나를 두 번 클릭하기 만하면됩니다 파일을 열어서 커서를 옮깁니다 여기서 색상이 정의됩니다 그런 다음 새로운 색상 선택기를 사용할 수 있습니다 시각적으로 색을 선택하십시오

색상 선택기는 RGB 및 HSB에서 작동하며, HSB를 선택한 디자이너와 함께 일한다면 값을 사용하거나 자료를 사용할 수 있습니다 이미있는 팔레트 이제 두 개의 레이아웃이 준비되었습니다 앱에서 실행하고 싶습니다 Ashley와 Joe가 우리에게 말하기를 다시 환영 할 것입니다

새로운 레이아웃을 검사하는 방법 [박수 갈채] JOE BAKER-MALONE : 감사합니다, 바딤 이제 개발주기의 다음 단계로 넘어갑니다 우리가 실제로 앱을 실행하게되면, 실제 데이터와 함께 작동하는 방법을보고 조정할 수 있습니다 우리가해야 할 수도 있습니다

이제 오늘, 레이아웃이 어떻게 작동하는지보고 싶다면 런타임에는 Layout Inspector 도구가 있습니다 Android Studio에서 레이아웃 속성은 스냅 샷을 제공합니다 한 화면의 전체보기 계층 구조, 및 속성에 대한 일부 정보 각보기에서 설정됩니다 하지만 지금은 많은 한계가 있습니다 이것은 부분적으로 안드로이드 프레임 워크의 데이터에 기인합니다 표시 할 수 있도록 Studio에 제공됩니다

이제 Android Q에서는 프레임 워크에 Studio에 대한 여러 가지 새로운 API 추가 더 많은 뷰 및 레이아웃 디버깅을 노출하는 데 사용 정보 Ashley는 새 API에 대해 곧 이야기 할 것입니다 프레임 워크 추가가 우리에게 충분한 지 확인하려면 우리가 원하는 정보를 사용자에게 보여주고, Android Studio 팀의 우리 부부 프로젝트 마블에서 약간의 시간을 보냈습니다 새 API를 채택하고 우리가 할 수있는 것을 확인하십시오 우리는 완전히 새로운 Layout Inspector 작업을 시작했습니다

내가 너에게 지금 보여줄 것은 일의 몰래 절정이다 우리는 지금까지 해왔습니다 자, 이것은 초기 작업입니다 최신 미리보기 빌드에는 아직 포함되어 있지 않습니다 그러나 차드가 어제 개발자 기조 연설에서 말했듯이, 우리는 미리보기를 좋아합니다

우리는 개발자 의견을 환영합니다 그래서, 우리는 당신의 손에 그것을 밖으로 가져갈 것입니다 최대한 빨리 자, 어떻게 작동하는지 봅시다 Google 여행 앱부터 시작하겠습니다

우리가 해왔 던 이제 에뮬레이터에서 실행 중임을 알 수 있습니다 우리는 물건을 끌어 올려서 사용자로부터 실제 데이터를 실행하고, 디자인 타임에 사용한 샘플 데이터가 아닙니다 여기서 아래로 스크롤하면 볼 수 있습니다 실제 데이터의 일부 여행 설명 우리가 샘플 데이터에서 가지고있는 것보다 상당히 길다 텍스트가 정렬되는 지점까지 우리가 의도하지 않은 방식으로 이미지를 지배했다

새로운 레이아웃 검사기에서 이것을 살펴 보겠습니다 새로운 레이아웃 검사기가 우리에게 제공하는 것을 볼 수 있습니다 레이아웃 검사기에서 현재 가지고있는 것과 유사한보기입니다 문제의 텍스트보기를 선택하면 여기, 그리고 오른쪽에있는 Attributes Panel을보고, 우리는 몇 가지 차이점이 있음을 알 수 있습니다 현재 레이아웃 검사기에서 가지고있는 것입니다

우선, 실제 속성 이름이 있습니다 이전에는 getter 메소드 모음이 있었지만 그렇지 않을 수도 있습니다 잘 실제 속성 이렇게하면지도를 훨씬 쉽게 찾을 수 있습니다 여기서 본 것에서부터 정의한 것에 이르기까지 자신 만의 레이아웃과 스타일로

두 번째로, 우리는 멋지게 형식화 된 속성 값 다양한 가치 유형에 대해 우리는 전에 그것을 항상 얻을 수는 없었다 예를 들어 ID, 열거 형을 볼 수 있습니다 가치, 색깔, 등등 세 번째로, 우리는 지금 몇 가지 정보를 가지고있다 그 속성 값이 설정되는 곳

따라서 우리는이 선언 된 속성 섹션을 볼 수 있습니다 여기, 우리가 Layout Editor에서 가지고있는 것과 비슷합니다 직접 설정된 속성의 경우 선택한보기에서 이제 텍스트 크기와 관련된 속성을 살펴 보겠습니다 이 옵션을 선택하면 기본 탐색 기능을 사용할 수 있습니다 여기에서 직접 키 스트로크를 선언하는 방법 해당 값이 설정되는 레이아웃 xml로 이동합니다

조금 더 작게 변경하십시오 개발자 기조 연설에서 들었던 것처럼, Android Studio 35 미리보기에서 이 새로운 변경 기능을 적용하십시오 이것 이후에 바로 그 부분에 대해 더 많은 것을들을 수 있습니다 Android 개발자 도구에서 새로 워진 이야기

하지만 지금은 에뮬레이터의 변경 사항을 확인하는 데 사용하겠습니다 우리의 애플 리케이션을 재배치 할 필요없이 실제로 새로운 레이아웃에서 업데이트가 즉시 표시됩니다 경감 님 Layout Inspector가 무엇을 미러링하고 있기 때문입니다

기기 라이브에서 발생합니다 우리가 여기서 다시 스크롤한다면, 레이아웃 검사기가 오른쪽으로 스크롤되는 것을 볼 수 있습니다 게다가 [박수 갈채] 예 다른 시나리오를 살펴 보겠습니다

앱의 어두운 테마를 구현하고 싶다고 가정 해 보겠습니다 여기서 우리는 밝은 배경색을 가지고 있음을 알 수 있습니다 배경색이 어디인지 알아 보겠습니다 에서 온다 우리가 여기에있는 단편 xml을 보면, 우리는 거기에 직접 설정되어 있지 않습니다

Layout Inspector를 살펴 보겠습니다 여기서 배경을 선택하면, 정말 잘 볼 수 있다면 우리는 배경색이 없다

이보기에서 직접 설정하십시오 왜 그럴까? 글쎄, 우리는 여기에서 가장 많은보기를 선택했습니다 배경색을 어느 정도 낮추어 놓을 수도 있습니다 뷰 계층 구조에서 그러나 어떤 시각이 설정되고 있습니까? 글쎄, 새로운 레이아웃 검사기가 우리에게 제공합니다

쉽게 찾을 수있는 방법 [크라우드 반응] [웃음] 3D보기에서는 어느 것이 쉽게 볼 수 있습니다 여기에서 무엇을 그리는가? 이제이보기를 선택하면 배경이 색상이 실제로 설정되어 있습니다 그러나 어떤 파일에 설정되어 있습니까? 이것은 선언 된 속성 섹션의 맨 위에 있지 않습니다 그래서 우리는 그것이이 견해에 직접적으로 설정되어 있지 않다는 것을 알고 있습니다

그러나 다시 한번 우리가 Attributes에서 속성을 선택하면 Panel, 거기에서 직접 탐색 할 수 있습니다 그것이 설정되는 곳으로 이 경우 스타일로 설정됩니다 그리고 우리는 그 스타일을 직접 탐색 할 수 있습니다 보기에 명시 적으로 참조되지 않는 경우에도 마찬가지입니다

우리가 본 3D 표현은 우리는 다른 방식으로 사물을 시각화하고, 여기서 유용한 정보를 계속 찾고 있습니다 예를 들어 초점을 맞추는 것이 유용 할 수 있습니다 한보기 및 그 자녀들에게 또는 무엇을 기반으로보기를 함께 그룹화하는 것이 유용 할 수 있습니다 그들이 정의 된 레이아웃 파일

이 화면의 예는 상단에서 볼 수 있습니다 우리는 RecyclerView 항목을 가지고 조각을 만든 다음, 활동 그리고 그 뒤에, 다양한 견해들 프레임 워크에 의해 정의됩니다 가벼운 새로운 레이아웃 검사기를 위해 더 많은 계획을 세웠습니다 저는 우리가 무엇을 생각해 낼 수 있는지에 대해 매우 기쁩니다

이제는 필요한 프레임 워크 변경 사항에 대해 이야기합니다 이것을 가능하게하려면 여기 애쉴리가 있습니다 애쉴리 로즈 : 고마워, 조 [박수 갈채] Android Q의 경우 세 가지 새로운 API가 추가되었습니다 이러한 새로운 검사 기능을 사용할 수 있습니다

우리는 모든 도면 명령을 수행 할 수 있습니다 화면에 프레임을 만들었습니다 그것을 직렬화하여 Studio로 다시 보내십시오 그래서 그것들을 재생할 수 있고 멋진 3D보기를 만들 수 있습니다 우리는 얼마나 길게 빨랐 는가? 뷰 계층 구조에서 뷰의 특성을 가져오고, 추가 메타 데이터를 추가 할 수 있습니다

그것을보다 정확하게 만드는 것입니다 그리고 우리는 리소스 프레임 워크에 몇 가지 새로운 API를 추가했습니다 속성 값의 출처를 보자 의사 결정에 대한 더 많은 통찰력 그 과정은 다음과 같은 경우에 적용되었다 해당 속성 값에 도달합니다

그럼 Skia Picture에 대해 이야기 해 봅시다 Skia는 UI 툴킷의 기초가되는 2D 그래픽 라이브러리입니다 이것은 실제로 슬라이드에 맞도록 단순화 된보기입니다 하지만 그것은 그리기 명령의 목록입니다 더 일찍부터 우리 여행 카드 중의 1 개를 형성하는 것에 들어간다

우리가 그것을 보았다면 그림자, 둥근 사각형, 이미지, 텍스트 – 그 모든 것들을 자산과 함께 그것을 렌더링하는데 필요한 이미지 데이터, 폰트 데이터 등을 포함한다 우리는 Skia에서 이것을 기본적으로 얻습니다 매우 빠릅니다 실시간 미리보기를 수행 할 수 있기 때문에 이걸 몇 초에 한 번하십시오 그것은 일반적으로 매우 작습니다

그러나이 문제는 우리가 스위치를 확대하려면 여기를 클릭하십시오 그것은 텍스트, 둥근 사각형, 그리고 서클 슬라이더 스위치에 대한 약간의 이미지 그것들이 어떤 관점에서 왔는지는 모른다 그들은 명령을 내리는 것입니다 그리기 명령을 그룹화하는 방법이 필요했습니다

그들이 어떤 시각에서 왔는지에 따라 우리는 렌더링 노트 API를 보았습니다 두보기의 기초가되는 조직 트리입니다 그리고 drawables– 우리는 각각의 렌더링 노트에 고유 한 ID를 추가했습니다 그런 다음이 고유 한 ID를보기에 노출 시켰습니다

Skia 그림 자체에 주석을 달았습니다 여기서 각 렌더 노드는 그리기를 시작하고 멈 춥니 다 스튜디오 측에서 보기가 시작된 위치와 중단 된 위치를 확인하고 연결할 수 있습니다 이 3 개의 그리기 명령은 다시 스위치보기로 돌아갑니다 또한 우리는 시작과 중지가 있기 때문에, 우리는 멋진 중첩 된 프레임 워크를 가지고 있습니다

HTML – 우리가 볼 수있는 모든 도면 명령이 다시 있습니다 단순화 된이 카드보기를 만드는 데 들어갔다 같이 [? 오랫동안도?] 그들이 시작하고 멈추는 전망, 우리는 중첩을 해봅시다 부동산 검사를 어떻게 수정하는지 조금 이야기 해 봅시다 Joe의 관점에서 일찍 – 모든 것이 게터 이름이나 메소드 이름이었습니다

그건 우리가 반사를 사용했기 때문이었습니다 런타임시 뷰 인스턴스 내부의 속성 반사는 세계에서 가장 빠른 것이 아닙니다 특히 휴대 기기에서 매우 복잡한 앱의 경우 전체보기를 렌더링하는 데 최대 몇 초가 걸릴 수 있습니다 계층

그래서 우리는 다음과 같은 접근 방식을 들여다 보았습니다 모든 것을 직렬화하는 메서드가 있습니다 그것은 조금 부서지기 시작합니다 보기에 새 속성을 추가하면 업데이트되지 않습니다 우리는 주석 처리기에 추가했습니다

그것은 우리가 반사를 유연하게 유지할 수있게 해줍니다 우리를 제공했다 특수 효과를 추가하기 만하면됩니다 새 게터를 추가하면됩니다 사용자 정의에 대해 어떻게 보일지 살펴 보겠습니다

이는 사용자가 누구에게나 관련이 있기 때문에 볼 수 있습니다 곧 라이브러리보기를 빌드하십시오 우리는 컬러보기를했습니다 속성은 색이며 주석을 달았습니다 InspectableProperty

주석 처리기가 보이면 그것으로 우리에게 조금 더 많은 맥락이 생깁니다 우리가 이전에 얻은 것보다 훨씬 낫습니다 그래서 우리는 Kotlin에 있고 @ColorInt 주석을 볼 수 있습니다 정수형뿐만 아니라 우리는이 정수에 색을 채웠다는 것을 압니다 그리고 그것은 단지 수치가 아닙니다

재산의 이름이 있습니다 우리는 속성 ID에 대한 추론을하는 데 사용할 수 있습니다 그것을 부르는 것 물론 우리는 주석에 대한 속성을 사용하여 추론하기 그 자체 그래서이 코드 생성은 어떻게 생겼습니까? 이 객체는 이 견해와 나란히 앉을 것이다

그 중 하나가 어떻게 생겼는지 살펴 보겠습니다 이것은 검사 동반자입니다 그것은 Q를위한 새로운 API입니다 두 가지 목적이 있습니다 하나는 클래스가 주어진 경우의 목록을 정의합니다

여기에 그 클래스에 정의 된 속성이 있습니다 이 경우 색상을 정의했습니다 지도 색상에 대한 호출을 살펴보면, 색깔이기 때문에 거기에 유형이 있습니다 우리는 속성 이름을 가지고 있고 유추했습니다 ID의 속성 R

attr 이것은 또한 우리가 – 추론 된 속성 ID가없는 경우, 또는 당신이 하나를 공급했다면 우리는 그것을 거기에 넣을 것입니다 내가보기에 Studio를 가르치면, 여기에 내가 가지고있는 속성이 있습니다 여기에 그들의 속성 ID가 무엇인지, 이것은 우리가 그 부분을 가능하게합니다 코드 완성 기능으로 이동하십시오

다음 단계는 실제로 우리가 보기의 인스턴스가 있으면 속성을 읽고 싶습니다 다시 말하지만, 우리의 견해가 Kotlin에서 정의되고 자바를 사용하고 있기 때문에 – 이것이 생성 된 코드이기 때문에 – 우리는 viewgetColor를 호출한다 직접 호출한다 getter에게 반사가 필요 없습니다

매우 빠릅니다 이를 통해 뷰 계층의 실시간 업데이트를 수행 할 수 있습니다 Studio에서는 우리가 가지고 있지 않기 때문에 우리가 전에했던 모든 추가적인 오버 헤드 우리를 얻는 모든 것이 현재의 가치에 달려 있습니다 우리가 말할 수있는 것은 여기에 우리가 가지고있는이 사랑스러운 푸른 색 텍스트 색입니다

우리는 그것이 무엇인지에 관계없이 말할 수 있습니다 그것이 런타임에 설정되었는지 여부 viewsetColor를 호출했을 수도 있습니다 또는 자원에 설정되어있는 경우

그러나 대부분의 속성 값은 자원에서 설정되며, 그래서 우리는 그 사건을 돕고 싶었습니다 우리는이 경우에, 그것은 위젯에 정의되어 있습니다 리소스에 API를 추가하여, 나는이 가치를 얻었다 그게 어디서 왔는지 말해줘 Google은 해당 데이터를 추적하여 전체 리소스를 통해 저장합니다

뼈대 또한, 우리는 통찰력을 얻고 싶었습니다 스타일이 어떻게 영향을 미치는지 그래서 자원 프레임 워크가 해결 될 때 속성 값 – 어떤 스타일을 적용할지 결정해야합니다 의사 결정 트리를 가져 와서 API를 추가하여이를 나타냅니다

근본적으로 고려 된 스타일 목록입니다 그러나 결국 사용되거나 사용되지 않을 수 있습니다 해당 속성 값을 해석하는 동안 이 모든 문제는 일시적인 현상입니다 왜냐하면보기, 일단 팽창되면, 그들은 그들의 관계를 잊는다 리소스

일단 그들이 건설되면, 그들은 그들이 어디에서 온 것인지 기억하지 못한다 개발자 옵션을 추가했습니다 속성 ID의 맵과, 그들이 왔던 곳, 스타일 해상도는보기의 테마에서 스택됩니다 그래서 스튜디오 – 준비가되었거나 관심이있을 때 재산으로 더 자세히 조사하고 싶어요 돌아와

보기로하고,보기에게 묻는다, 헤이, 어디에서 당신의 속성 값이 왔는지, 그들의 스타일은 무엇입니까? Q가 가진 모든 것을 꽤 많이 감쌌다 바딤과 제롬을 환영하고 싶습니다 우리를 감싸는 무대에 [박수 갈채] VADIM CAEN : 전체 툴 체인에 대해 들었습니다

그리고 집에 돌아갈 때 그것을 사용하기를 바랍니다 레이아웃 편집기로 레이아웃을 작성하고, 우리가 추가 한 새로운 기능 네비게이션 편집기로 네비게이션 만들기, 자원 관리자로 자원 관리, 새로운 레이아웃 검사기로 검사를 수행하십시오 올해 I / O에는 Android Studio 협상이 가득합니다 바로 뒤에 – 원형 극장에서 – 당신은 안드로이드 개발의 새로운 기능을 볼 수 있습니다

Tor 및 [? Ja ?] 그렇다면 당신은 2 단계의 Android 빌드 시스템의 새로운 기능 그것은 다른 쪽 위에있다 그것은 오늘 오후에 시작한다 여기에 빨간 점이 거의 없습니다 Android Studio 팁 및 트릭 제공 선별 된 엔지니어 및 프로젝트 매니저에 의해, 2 단계

마지막으로 내일, ConstraintLayout의 새로운 기능 Nicolas와 John의 모션 레이아웃 우리는 여기서 밖에 질문을 할 것입니다 와 주셔서 대단히 감사합니다 내년에 봐 [음악 재생]

드리블 탑 디자인 앱 만들기 Part #1 레이아웃 코딩

자 우리 첫 시리즈에서는 디자이너들의 성지라 불리는 드리블 닷컴에서 앱 컨셉으로 멋진 디자인을 하나 선정해서 디자인을 직접 앱으로 까지 구현에 보는 시리즈를 진행할 예정입니다 그러면 시작해 보겠습니다 우선 구글에서 Dribbblecom을 검색합니다 그리고 ui 로 검색을 하셔서 상단에 보이는 것 중에 네 번째 작품 아주 멋진앱이죠 정재성님이 제작하신 한국 분이신 것 같네요 제작하신 멋진 디자인을 직접 앱으로 구현을 해 보도록 하겠습니다 우선 GIF스크러버로 이미지를 따구요 첫번째 시간은 현재 보이는 이 화면 Html과 CSS로 우선 구성을 할 거구요 뒷 시리즈에서 자바스크립트와 프로그래밍을 이용해서 실제 앱으로 만드는 과정을 진행할 예정입니다 기본적인 개발은 크롬의 개발자 도구를 이용해서 진행이 될 예정이구요 깃 허브에서 무료로 제공하고 있는 아톰이란 에디터의 일부 도움을 좀 받을 예정이예요 atom

io 에 접속하셔서 무료로 다운로드 받아서 사용하실 수 있습니다 자 그럼 시작해 볼까요 우선 작업 폴더를 하나 만들어 보겠습니다 Dribbble Todo 라는 폴더를 만들고 일단 폴더엔 index html 아 이래서 계속해요 cml tel 써서 본 모양 잡으시구요 타이틀은 드리블 투두리스트 라고 정하고 그 다음에 스타일 파일을 하나 만들어 주겠습니다 스타일 점 CSS 그리고 링크 스타일 시트 stylecss 여기 세팅이 되었습니다 그럼 이번에는 만든 파일을 탐색기에서 열어 주시면 작업 준비 가 되었죠 F12를 눌러서 개발자 모드를 실행해 주시고 모바일 모드 아이폰X사이즈로 선택을 하셔서 작업 준비를 합니다 개발자 도구에 소스탭에서 애드 폴더를 추가 하시면 작업 한게 바로 적용이 되요 이렇게 선택을 하시고 권한을 승인 해주시면 이렇게 바로 들어왔죠 이렇게 되고 태그를 만들어 볼게요 div 컨테이너 를 먼저 만드시구요 상단에 헤더 영역 컨텐츠 영역, 카드 영역까지 총 3개의 div 를 만들게요 컨텐츠 카드 에어리어 세 가지 영역을 만들고 새로고침 보이시죠 영역이 그럼 이쪽에 소스를 추가해 놨기 때문에 이쪽에 스타일을 플러스 버튼을 누르고 계시면 스타일 시트를 고를 수가 있어요 그러면 스타일에 컨테이너가 추가됐고 소스에 확인를 해보시면 스타일의 추가된 게 보이시죠 이런식으로 작업은 계속 진행 될 예정 입니다 그러면 기본적으로 html , body 가로 세로 사이즈를 지정 해주시고요 마진은 0으로 기본을 잡아주면 됩니다 보이시죠 순서는 바꿀게요 컨테이너 컨테이너 싸이즈도 세로 사이즈를 지정해 줍니다 영역이 넓어진게 보이시죠 컨테이너에는 배경색을 이쪽에 개발자 도구를 띄워서 배경색을 캡쳐 합니다 실제 배경색은 아래쪽에 그라데이션이 들어가 있어서 아래쪽을 다시 복사를 해서 배경을 linear gradient 라고 해 주시고 이렇게 코마를 이용해서 직접 입력해주시면 이렇게 그라데이션이 배경이 똑같이 적용이 됩니다 그러면 일단은 준비가 됐어요 화면 크기를 좀 비슷하게 맞춰주시고 이번에는 전체 컨테이너에 이제 컬러를 포인트 컬러를 흰색으로 지정해주세요 헤더를 꾸며 보겠습니다 왼쪽 가운데 오른쪽 총 세개의 div를 만들어 줄게요 레프트, 타이틀, 라이트 가운데영역에는 투두라고 입력을 해주겠습니다 새로고침을 눌러보시면 글씨가 작죠 모바일 사이즈에 맞는 뷰 포트를 지정을 안해줘서 그런건데요 다른 사이트에 보시면 뷰 포트 샘플이 있어요 복사해서 메타 뷰포트 태그를 넣어주시면 커졌죠? 안쓰는 창은 닫아 주시고 화면에 보이는 아이콘은 폰트어썸 사이트에서 제공하는 폰트를 이용할 예정입니다 폰트어썸닷컴 이라고 입력을 하시고 폰트어썸을 사용하기 위해서는 스타트를 누르셔서 링크를 만들어 주셔야 되요 링크 주소가 나오죠 클릭해서 복사 네 준비가 됐습니다 그럼 바로 아이콘을 검색해서 사용하실 수 가 있어요 메뉴 이 부분을 클릭 에서 복사 하시면 되구요 복사해서 붙여놓고 이번엔 오른쪽에 써치 마찮가지로 이부분 클릭해서 붙여 넣으시고 F5를 눌러서 확인 아이콘이 나오는게 보이시죠 이번엔 아이콘이 나왔으니 스타일링을 해볼게요 패딩 20px 그리고 디스플레이 플렉스 가로배열로 만들어 주시구요 그다음 헤더 아래에 있는 div에는 공통적으로 torx 꼭 초 속성으로 예 안녕 을 해주시면 3개가 나란히 이렇게 가로배치 가 됐습니다 헤더에 레프트는 text-align left 그리고 타이틀은 text-align center 그리고 라이트는 text-align right 이렇게 붙여 주시면 구성이 됬죠 그러면 이번에는 글씨체를 먼저 초반에 맞춰줄게요 구글에서 구글폰트라고 검색 하시면 네 구글에서 제공하는 폰트를 사용할 수 있는데 이중에 가장 비슷한 모양의 roboto를 추가를 해주시면 사용할 수 있습니다 기본 폰트웨이트는 400 이고, 그담에 500을 추가로 이렇게 해주시면 링크 소스가 나오네요 링크 소스는 헤더에 붙여주시고 아래쪽에 폰트패밀리를 복사해서 사용하시면 폰트 패밀리는 html body 에 넣어줄게요 새로고침을 하시면 바뀐게 보이시죠 그러면 이번에는 하단에 컨텐츠 영역을 만들어 볼게요 컨텐츠 영역은 처음에 my image 이미지가 들어갈 자리구요 그리고 중간위치에 큰 글씨 영역이죠 h2 Hello Jane 그다음에 아랫쪽에 p 태그로 그리고 제일 아래 p 태그에는 투데이라는 클래스를 입력하겠습니다 모양이 나왔죠 우선 콘텐츠 영역부터 디자인 해줄게요 여백을 패딩 40픽셀을 주시고 마이 이미지 컨텐츠 안에 있죠 마이이미지는 백그라운드 흰색을 주시고 가로 50px, 세로 50px border-radius로 원형으로 만들어 주시고 그리고 그림자를 만들어 줍니다 10px 만큼 내려온 그림자를 이런 느낌으로 예 이정도 모양이 되겠네요 안의 이미지는 구글에서 iu 를 검색해서 이미지를 하나 골라볼게요 copy image adress background image url 복사한 것을 붙여 넣으시고 background-size : 100px background-position 이정도로 맞춰 주겠습니다 그리고 h2 h2는 폰트 사이즈를 좀 키우구요 30정도로 font weight 두께는 기본 400 이정도 해주시면 될 것 같아요 이번엔 p 태그 p 태그는 마진을 없애주시구요 컨텐츠의 p 태그만 따로 스타일링을 해줄게요 투명도를 05 정도 주시고요 이후에 배경 색에 계속 바뀔 거라 색상을 직접 지정하지 않고 반투명 주었어요 그리고 하단에 따로 투데이라고 클래스를 준 영역있죠? 그부분은 폰트 크기를 12px 정도 주시고 투명도를 다시 진하게 해주시구요 마진을 50 정도 좀 줄일게요 싸이즈를 45 정도로 해 주겠습니다 모양이 대충 나오죠 그리고 이번에는 하단에 카드영역 카드영역은 전체 영역과 그리고 카드 위치를 잡는 카드에이리어를 이렇게 카드라고 먼저 해주고요 그리고 실제 카드 안의 디자인 영역은 inner라고 지정을 해주겠습니다 그럼 inner안에 좌측에 카드아이콘 모양 만들어 주시고 오른쪽에 셋팅 버튼 만들어 주신 다음에 하단의 내용을 하나로 묶을게요 bottom 이라고 하나 묶고 그 안에 p 태그를 9 tasks h2 , personal 여기까지 준비가 됐고 이 아래 영역은 스테이터스 라고 하나로 묶어 주시구요 스테이터스에 오른쪽에 숫자 영역과 왼쪽에 실제 바영역 그려야겠죠 왼쪽은 트랙이라고 할까요 트랙과 트랙 안에 있는 바 그리고 오른쪽에 83 클래스를 'per'라고 따로 주겠습니다 html 은 준비가 됐어요 이제 그러면 카드 영역을 우선 크기를 잡아볼게요 어 크기 확인을 위해서 임시로 백그라운드를 반투명을 줘 보겠습니다 그러면 상단 여백에 있는게 보이실 상단 여백은 컨텐츠에서 만들어 준 거라 padding-bottom 만 좀 줄이구요 세로 사이즈를 잡아야 겠죠 세로 사이즈는 전체 영역의 100% 에서 상단 영역이요 빠진 만큼 딱 계산 할 거에요 그래야 나중에 이렇게 화면아 움직였을 때 틀어지지 않고 아래쪽 영역에 맞게 조절이 되기 때문에 칼큘레이터 ( calc )를 사용해서 100% 마이너스 300px 상단 영역에 맞게 조절을 해볼게요 345 정도가 적당 하겠네요 상단 영역을 제외한 나머지 영역을 꽉 채우겠단 뜻이에요 이정도로 잡아주시고 이번엔 카드 실제 안쪽 영역을 잡아줘 보겠습니다 카드도 마찬가지로 임시로 사이즈 확인을 위해서 임시 배경색을 반투명으로 지정을 하시구요 세로는~ 100% 마찮가지로 가로도 지정 해주세요 그 상단에 카드에어리어 영역에서 하단 여백을 만들어 줄 거에요 패딩을 상단은 0 그리고 좌우 양쪽에 40씩 주시구요 하단은~ 50 정도 하단 영역 이 위로 안 올라오죠 이거는 보더 박스(border-box) 설정을 안해서 그런건데요 박스사이징을 다시 소스를 돌아와서 스타일 제일 위에 별은 박스사이징(box-sizing) 보더 박스(border-box)로 지정을 해주시면 위에 올라온 게 보이시죠 보더 박스를 설정하면 사이즈 설정 된 안쪽으로 패딩 영역이 들어와서 전체 지정한 사이즈의 영향을 미치지 않고 스타일링을 할 수 있습니다 자 이번엔 카드는 배경색을 흰색으로 만들어주시고 아 죄송 합니다 카드의 inner 영역에 스타일링 해줄 거예요 카드

흰색으로 만들어 주시고, 세로 사이즈는 꽉 채워주시고 그리고 컬러는 회색으로 지정해 주겠습니다 여백을 위해서 패딩을 입력을 해주시고 border-radius를 이용해서 라운드를 만들어 주시면됩니다 이제 임시로 적용한 백그라운드 필요가 없으니까 두개 다 삭제를 할게요 이렇게 삭제를 하구요 이번에는 그림자도 만들어 줍시다 이런식으로 그림자를 만들어 주고요 모양이 만들어졌죠? 이번엔 아이콘을 만들어 줄게요 아까와 마찮지로 폰트 어썸에서 user라고 검색을 하시면 비슷한 모양의 아이콘이 나오죠 복사 해서 카드아이콘 영역 그리고 오른쪽에 dot 라고 입력을 해 주시고 마찮가지로 비슷한 아이콘을 복사 해주시면 됩니다 자 볼까요? 들어왔죠? 그럼 이번엔 카드 아이콘을 모양을 만들어 보겠습니다 카드 아이콘은 우선 테두리를 만들어 주시구요 좀 연하게 만들어 줄게요 가로사이즈 50, 세로 사이즈도 50px border-radius로 원형으로 만들어 주시고 텍스트를 가운데로 line-height를 이용해서 가운데로 만들어 주시구요 그리고 사이즈를 좀 키울게요 폰트사이즈를 키우구요 컬러는 배경색의 중간정도 색상으로 이렇게 지정 해주시면 모양이 만들어집니다 그리고 float left로 왼쪽으로 이번엔 셋팅 버튼 float right로 오른쪽으로 붙여주시고 양쪽으로 조절이 됐죠 그리구 이번엔 카드의 bottom 인데요 position absolute를 이용해서 바닦으로 붙여주세요 bottom zero 카드 바깥으로 빠져 나오는게 보이시죠 그거는 바로 상단에 있는 inner의 포지션 relative를 이용해서 이렇게 안쪽으로 모양을 잡아줄 수 있습니다 다시 bottom 으로 와서 가로 사이즈를 100%로 만들어 주시고 좌측으로 붙이고 여백을 만들어 주겠습니다 네 이제 모양 잡는건 준비가 됐어요 이번엔 카드안에 있는 h2는 마진을 줄여 볼게요 10으로 줄여 주시고 컬러도 좀 진하게 더 진하게 할까요 이 정도가 괜찮겠네요 스테이터스도 만들어 줍니다 스테이터스는 float right로 오른쪽으로 붙여주시고 그리고 폰트 크기는 20px 그리고 가상 엘리먼트를 추가를 해 줄거에요 단위가 % 이다 보니까 ::after 를 이용해서 content % 를 입력해주시면 예 나온 게 보이시죠 나중에 개발에서 스크립트로 숫자 만 바꿔줄 예정이라 이렇게 작업을 했습니다 이번엔 트랙 트랙은 background를 회색을 주시고 세로 사이즈는 4px 정도 오른쪽이 숫자 영역을 뺀 만큼 가로를 좀 조정을 할게요 calc 를 이용해서 30px 정도를 빼주시면 됩니다 자 그리고 다시 'per'로 와서 margin-top 마이너스 값을 이용해서 자리를 잡아줍니다 이번엔 바 영역인데 바의 길이는 따로 inline으로 입력을 해 줄게요 html에서 직접 이미 라인으로 스타일 width 83% 이렇게 해 주는 이유는 나중에 개발 적용할 때 보시면 카드마다 숫자에 따라서 바의 길이가 달라질거예요 그래서 감안을 해서 미리 인라인으로 이렇게 길이를 잡아 줬습니다 스타일은 스테이터스에 그리고 세로는 4 px 잡힌게 보이시죠 또 배경색은 전체 배경색을 이용할 겁니다 컨테이너에서 사용했던 배경색을 복사해서 붙여 넣으시고 그라데이션이 새로 방향인데 여기서는 가로 방향이죠? linear-gradient에 가로 방향으로 to left 라고 입력해주시면 준비가 됐습니다 이렇게 크기가 늘어나면 아래쪽으로 늘어나는게 보이시죠 완성된 카드를 두개를 더 만들 거에요 영상에 보시면 이렇게 총 3개가 보이죠 그래서 카드 영역을 복사를 해서 하나, 둘 그러면 아래쪽으로 구성이 된게 보이시죠 이것을 속성을 가로로 만들어 줄 거에요 이것 때문에 이렇게 만들어 놓은건데 카드에어리어에서 display 를 flex 바로 배치되는게 보이시죠 카드 고유의 사이즈를 이용 할 거라서 이렇게 정렬이 되면 안되잖아요 카드영역에서는 flex none 속성을 부여해 주면 네 고유의 사이즈로 지정됩니다 예 그림과 같이 여백이 좀 필요하겠죠 그래서 margin-right 15px 이정도 조절이 되면 비슷하게 나왔죠 실제 영역이 전체가 움직이기 때문에 영역을 좀 잡아 줄게요 overflow , auto 이렇게 일단 1차 준비가 완료가 됐습니다 다음 시간에는 이제 영상 에서와 같이 상세페이지와 이렇게 움직였을 때 액션들을 만들어야죠 자바 스크립트 강좌가 될 것 같네요 첫 번째 시간 여기까지입니다 감사합니다

Principles of mobile app design: Delight users and drive conversions – Google I/O 2016

JENNIFER GOVE : 안녕하세요 어떻게 모든이다? 관객 : 좋습니다

제니퍼 GOVE : 좋아 그런 멋진 군중 오늘 내 이야기에 모두와 주셔서 감사합니다 제 이름은 Jenny Gove이고 저는 User Experience Researcher입니다 여기 Google에서

나는 지금 Google에 10 년 동안 이달에 있었는데, 그게 우연이라고 들었는데 [클리핑] 고맙습니다 나는 그것이 우리가 몇 년의 시간과 일치한다고 들었다 I / O 컨퍼런스 개최 그래서 두 주년, 정말 재미 있습니다 그래서 오늘 오후에 우리는 이야기 할 것입니다

훌륭한 앱 개발 및 원칙 수립에 대해 귀하와 공유하고 싶은 모바일 앱 디자인, 그래서 당신은 당신의 사용자에게 훌륭한 경험을 할 수 있습니다 그리고 왜 이것이 중요한가? 글쎄, 중요한 이유는 죄송합니다 각 앱에는 150 만 개가 넘는 앱이 있습니다 우리가 알고있는 상점 거기에는 많은 경쟁이 있습니다

앱이 유용성 결함으로 고통 받기를 원하지는 않습니다 나는 유용성 결함과 사용자 경험 문제를 생각한다 일부 앱의 참여가 부족할 수 있습니다 예를 들어 25 %의 앱과 같은 것을 배웠습니다 때로는 두 번 이상 사용되지 않고 34 %의 앱 11 번 이상 열리지 않습니다

따라서 주변에 이러한 통계가 있습니다 앱 참여 및 재 참여와 관련하여 우리는 그 문제 자체에 대해 많은 연구를하고 있습니다 구글에서 우리가 가지고있는 특정 제품들 그러나 나는 그것이 정말로 우리에게 일하고 있다고 생각한다 우리의 사용자 경험과 우리의 애플 리케이션에서 사용성 문제

그래서 저는 여러분에게 세 가지에 대해 이야기 할 것입니다 남은 얘기들 나는 너에게 경험에 관한 이야기를 할 것이다 최근에 앱을 가지고 있었다 나는 너에게 한 연구에 대해 말할거야

정말 멋진 앱을 만드는 방법을 이해하기 위해 도망 쳤습니다 경험 그리고 저는 몇 가지 원칙을 다룰 것입니다 우리가 온라인으로 발행 한 내용으로 이해할 수 있습니다 앱을 만들기 위해 할 수있는 핵심 사항 더 나은 경험

그리고 그 원칙들 내에서, 나는 너를 위해 많은 자원이있어 뿐만 아니라 그 길을 따라 도울 수 있습니다 그래서 내 이야기 가족과 휴가를 보내고있는 동안 여기에 우리는 플로리다에서 멋진 시간을 보내고 있습니다 저와 저의 파트너이자 아이들입니다

그리고 우리가 휴가를 가기 전에 우리가 머물기 위해 일련의 호텔을 세웠다 그것은 스스로 운전하는 여행이었고 나는 이것들을 미리 예약했다 – 나는 그것을했다 내 노트북에 플로리다에 도착했을 때 많은 호텔이 발견되었습니다 새로운 기술 – 앱을 최대한 활용하기 시작했습니다

구체적으로 – 나에게주기 위해서 나의 여행 중에 정말로 매끄러운 약간의 경험 그들은 내가 체크인 할 수 있도록하는 일을 지금하고 있습니다 내가 도착하기 전에 – 비행기를 타듯이 – 그리고 내가 열 수 있도록 내 방으로 곧장 갈 수있게 해줘 문, 응용 프로그램과 함께

꽤 멋지다 나는이 새로운 것들로 꽤 날아 갔다 그들이 할 수 있었던 일 하지만 내가 휴가를 갔을 때 무슨 일이 있었는지, 체크인 통보가 왔어 내가 뭔가에 일렬로 서있는 동안 이렇게, 테마 파크의 롤러 코스터

그것은 나에게 물었다, 내가 체크인하고 싶어 했느냐? 그리고 나도 나에게 물었다, 나는 자기 자신의 방을 선택하고 싶어했다 또는 나는 그들이 나를 위해 선택할 수있게 했습니까? 음, 내가 예약했을 때 나는 기억한다 텍스트 필드가 있었는데, 나에게 물어 봤어 내가 요청을 받았 더라면 나는 바다가 보였습니다 왜냐하면 저는 다음 호텔에이 아름답고 깨끗한 해변이 있음을 알았습니다

나는 발코니가있는 방을 주문했다 저는이 멋진 경험을 정말로 원했고, 바다를 내려다 보면서 하지만 노트북에서의 경험이 이 앱의 경험으로 바꿀 것입니다 나는 지금 직면했다 나는 그것에 대해 약간 염려했다

그리고 나는 더 나은 기회를 가질 수있을 것이라고 생각했다 내 방을 선택하는 것보다는 그들은 나를 위해 선택합니다 항상 당신 손에 맡기는 것이 더 낫지 요? 그래서 나는 내 방을 선택하기로 결정했다 그들이 나에게 준 것은 휴대 기기에서 꽤 좋았습니다 실제로 효과가있었습니다

나는 그것이보기에 상당히 도전적 일 것 인 것처럼 보인다라는 것을 알고있다 부동산의, 그러나 그것은 아주 잘 작동했다 그들은 분명히 다른 방을 배치했다 그들은 방의 출입 여부를 명확하게 표시했다 하지만 단 한 가지 문제가있었습니다

그리고 그것은 호텔이 어떤 방향으로 향하고 있는지 전혀 몰랐습니다 바다 앞 그래서, 나는 줄을 서 있었고, 알아 내려고 노력했다 어떻게 해결할 수 있을까? 이제 실제로는하지 않은 몇 가지 해결 방법이 있습니다 그 때를 생각해보십시오

Google지도, 어쩌면 Google 이미지를 파악하거나 볼 수도 있습니다 이 경우 호텔은 다소 대칭입니다 그래서, 그것은 매우 까다로울 것입니다 나는 일종의 엄지 손가락 규칙을 사용하기로 결정했다 그리고 내가 생각하기에, 가장 많이 찍은 방을 가진 쪽 아마 바다를 마주하고 있었던 쪽이었다

그래서, 여기 730 방을 선택하기로 결정했습니다 그래서 우리는 호텔에 도착해서 모든 가방을 가져 갔고 너 무슨 일이 일어날 지 알지? 나는 이것 같이 조금 보인 전망을 얻었다 [웃음] 큰 실망 그럼 내가 뭘해야 해? 그런데 나는 다시 모든 길을 가야했다, 다시, 리셉션에 – 나는 내가 생각했다 우회로, 응용 프로그램을 사용하여 – 접수와 이야기

그들은 매우 도움이되었고, lovely 한 호텔이었고, 그것을 고쳤다 나를 위해, 그리고 결국, 우리는 위로 올라 갔다, 다른 마루, 호텔에 들어갔다 나는 전망을 얻었다 그것은 훨씬 더 같았습니다 아름답군, 응? 이것은 실제로 플로리다입니다

바하마처럼 보입니다 정말로, 정말로 멋졌다 그래서 인 – 게스트 서비스는 인간의 개입이 요구되었다 앱이 실제로 제공되지 않았기 때문에 내가 바라는 서비스 너무 잘 했어, 나는 정말로 내가 사용할 수있는이 새로운 기술로 찍은, 그러나 그것이 배달되지 않았기 때문에 그것은 짧아졌다

이 중요한 정보는 나를위한 것입니다 나는지도상의 정보가 필요했다 이 경우에는 바다의 전망이 필요했습니다 약간의 파도 방금 오리엔테이션이 필요했습니다

그래서 나를 위해, 그것은 매우 비판적이었다 이 아름다운 해변에 대한 내 견해, 이 주차장보다 그리고 그것은 훨씬 더 비판적이었을 수도 있습니다 내 휴가에 아주 친애하는 것보다 그것은 클라이언트를위한 이벤트 매니저 예약 일 수 있었지만, 아마 그것은 손님들을 위해 예약 된 사람들이었을 것입니다

결혼식이나 무언가를 위해서 한 가지 교훈은 분명합니다 우리는 개발자와 디자이너로서 전체 흐름을 이해할 필요가있다 우리 사용자가 겪고있는 그리고 그 부분은 부서집니다 이것은 정말로 시원하고 신기술이었습니다

그러나 나는 모든 것을 통해 백 트랙을 정렬해야했다 그 앱이 살 일걸요 날 구해줘 그래서 그 경험을 정말로 이해합니다 처음부터 끝까지

그리고 저는 모바일에서 생각한 것은 그 작은 것들입니다 우리는 우리가해야 할 것을 깨닫지 못한다 그래서 우리가 정말로 이해해야하는 이유입니다 사용자의 관점과 사용자의 경험 그래서, 제 이야기는 그런 것들에 관한 것입니다

그리고 우리가 그들을 어떻게 고칠 수 있는지 내가 너에게 약간의 역사를 알려줄 께 2 년 전, 우리는 많은 경험 특히 모바일 웹의 경우 문제가 많았습니다 사람들을 위해 그래서 우리는 대규모 연구를 수행했습니다

어떤 일이 일어나지 않았는지 이해하려고했습니다 모바일 웹 용으로 올바르게 구현, 우리가 더 잘할 수있는 곳, 우리는 모바일 웹을위한 25 가지 원칙을 발표했다 그것들은 정말로 잘 해냈습니다 사람들은 그것을 일종의 초기 단계로 사용했습니다 더 나은 사용자를 제공하기위한 좋은 방법 모바일 웹에서의 경험

하지만 그뿐 아니라 우리는 사람들이 우리에게 돌아와서 말했습니다 이것은 모바일 웹에 적합하지만 내 앱입니다 내 앱은 어떨까요? 내 앱에 대해 말해 줄 수 있습니까? 그래서 나는 다른 연구를하라는 부름을 많이 받았다 그리고 애플 리케이션에 대한 연구, 그래서 우리가 한 일 이죠 최근에는 연구에서 기본 앱을 살펴 보았습니다

오늘 내가 너에게 선물 할 원리들 그 일의 결과입니다 이 연구에서 우리는 특허를 이해할 수있었습니다 운 좋게 사용자 경험을하게하고, 운 좋게 행복하게 우리는 일부 회사가 더 나은 방법으로 구현 된 것들, 그 특허가 왜 더 잘 작동하는지 이해하십시오 그것들을 당신에게 가져 오십시오

그리고 이것을 잘 이해하는 것이 우리에게 중요합니다 그래서 우리는 원칙에 확신을 가질 수 있습니다 우리가 말하고있는 것, 그리고 너 자신의 제품에이를 구현하는 데 자신감을 가질 수 있습니다 그래서이 연구를하기 위해 우리는 회사와 파트너 관계를 맺었습니다 AnswerLab이라고합니다

그들은 사용자 경험 컨설팅 기반 샌프란시스코 그리고 우리는 그들과 협력하기 때문에 우리가 연구를 원했기 때문에 규모를 조정할 수있었습니다 꽤 큰 규모입니다 모바일에서 100 가지 앱에 대한 상호 작용을 연구했습니다 그래서 이들은 대형 소매점, 소규모 서비스 제공 업체를 통해 우리는 뉴스 앱을 보았고, 우리는 많은 다른 종류를 보았다

식료품 점과 같은 서비스, 여행 서비스, 소매업, 중소기업 우리는이 일환으로 게임을 보지 않았습니다 그것은 의도적으로 이루어졌습니다 왜냐하면 우리는 그것이 약화 될 것이라고 느꼈기 때문에, 또는 희석, 원리 우리는 게임이 아마도 완전히 다른 세트를 가지고 있다고 생각합니다 그걸 제외하고, 우리는 다양한 수직 계열을 조사했습니다

그리고 우리는 샌프란시스코, 시카고, 뉴욕시 이제이 연구에 참여한 103 명의 참가자가있었습니다 그래서 사용성 연구를 위해, 그것은 정말로 크다 그들은 개별적으로 실험실에 들어 왔고, 각각 90 분 동안 따라서 155 시간의 사용성 연구가 가능합니다

그래서, 만약 당신이 밤새도록 그리고 하루 종일 밤새 위로 머물렀다면, 그것은 거의 일주일이 될 것이고, 휴식을 취하지 않을 것이며, 실제로는, 그것은 일주일에 거의 4 주 정도가되었습니다 그래서, 실제로 큰 연구가 있습니다 그래서 우리는이 다른 수직을 커버 할 수있었습니다 그리고이 연구에서 우리는 무엇을 했습니까? 음, 사람들이 연구에 들어갔다 90 분 동안 그들은 정말 6 개의 앱을 사용할 수 있습니다

그것들 각각에 대해 좋은 일을하고 있습니다 그들은 그들과 함께 자신의 휴대폰을 가져 왔고, 그 이유는 우리가 그들을 원했기 때문입니다 전화에 정말 익숙합니다 그리고 우리는 어떤 문제도 원하지 않았습니다 다른 기기이거나 그렇지 않았습니다

뒤로 버튼 또는 그와 비슷한 것에 익숙합니다 그래서 Android는 약 50 %, iOS는 약 50 %를 차지했습니다 그리고 연구에 참여했을 때 우리는 무엇을 했습니까? 그래서, 우리는 다른 작업을하고 다른 시나리오를 설정했습니다 그들을 위해 우리는 그 일을 무언가로 만들기 위해 최선을 다했습니다

그들에게도, 그들이 할 수 없도록, 우리가 부르는 것을, 만족스러운 일을하는 것입니다 가능한 한 빨리 작업을 수행 할 수 있습니다 그들이 할 수있는 한 우리는 그들이 그 일에 관심을 갖길 원했습니다 그래서 우리는 그들이 관심을 갖는 것에 관해 종종 그들과 이야기했습니다

이 예에서 우리는 그들과 대화 할 수 있습니다 좋아하는 음식에 대해 이해하고 이해합니다 먼저 그들로부터 무엇인가, 그 전에 그들이 그것을 주문할 수 있는지를 물어보기 그날 저녁 저녁 그리고 우리는 그들이 큰소리로 말하게했습니다, 사용성 용어로 불리는 것이 무엇인지, 생각대로하는 프로토콜을 사용했고, 우리는 그렇게했습니다 그래서 우리는 그들이 고통의 포인트를 이해할 수 있었다

그들이 다른 업무를 수행 할 때 맞았다 그들이하고있는 일을 어디에서 물건이 원활하게 흘러 갔는지 이해하십시오 그렇게 해본 결과 우리는 데이터를 취했습니다 – 많은 데이터가있었습니다, 당신이 상상할 수 있듯이, 그 많은 유용성 자료 – 우리는 그것을 25 가지 원칙으로 정리했습니다 그래서 이것은 당신이 취할 수 있고 이해할 수있는 것입니다 자신의 앱에 적용 할 수 있습니다

우리는이 원칙들을 6 개의 챕터로 분류했습니다 하지만 내가 그들에게 들어가기 전에, 나는 우리가 실제로이 25 가지를 어떻게 얻었는지 설명합니다 그래서 그것을 25 가지 원칙으로 만들기 위해, 우리는 이것이 넓은 범위의 문제라는 것을 알아야했습니다 우리는 그것을 알아야만했다 상당히 일반적인 문제였습니다

우리는 25 가지 이상의 것들을 만났습니다 앱에서 문제가 있었지만 우리가 가장 큰 문제를 치고 있는지 확인하기 위해, 우리가 더 나은 방법을 구현 될 수있다 승인 그래서, 우리가 가지고있는 다른 장 앱 탐색 및 탐색, 앱 검색, 상거래 및 전환, 등록, 양식 입력 및 유용성 및 이해력 이제 우리는 25 가지 다른 원칙을 가지고 있습니다

하지만 여기서,이 이야기에서, 나는 단지 두 가지 원칙으로 갈 것입니다 각 챕터와 나머지 원칙들 온라인으로 사용할 수 있습니다 나는 또한 당신을위한 자원을 모아 봤다 일부 구현에 도움이되는 당신이 여기서 보는 것들 스크린을 찍을 좋은 시간이 될 것입니다

그것은 당신이 당신 자신의 시간에 들여다 볼 수있는 자원이기 때문에, 더 자세하게 이제 앱 탐색과 탐색부터 시작하겠습니다 따라서이 장은 실제로 사용자에게 내용을 안내하는 것에 관한 내용입니다 그들이 찾고있는, 빨리 그래서 우리는 일련의 핵심 원칙들을 모았습니다

효과적이고 유쾌한 앱 탐색을 만드는 데 도움이됩니다 이제 이들 중 두 가지를 살펴 보겠습니다 따라서 사용자에게 큰 도움이 될 수있는 기능 위치를 자동으로 감지하지만하지 않습니다 위치 기반 작업이 필연적으로 예외없이 현재 위치를 기반으로합니다 우리는 이것을 너무 자주 본 것 같아요

그래서 정말 대단한 일입니다 구현하고 도움을 줄 수있다 사용자가 무언가를 원할 때 끊김없는 경험 위치는 있지만 기본적으로 사람들을 활성화시키는 방법없이 과도하게 적용된 것을 보았습니다 해당 위치를 변경하십시오 그래서이 예에서 누군가 오늘 밤 호텔을 찾고 있습니다

그들이있는 곳 근처의 호텔을 찾고 있습니다 불행히도, 위치를 바꿀 수는 있지만, 그것을하는 유일한 방법은 아마도 설정을 통과하는 것입니다 우리는이 문제를 여행 앱뿐만 아니라, 소매 앱에서도 사용했습니다 우리는 무언가를 찾고 싶어하는 사람들의 유스 케이스를 보았습니다 상점에 있었지만 그 위치는 아마도 부모가 살고있는 곳 근처에서 그 가게 근처에 있었는지 알아 내고 싶었다

부모님 께 그 사실을 알릴 수 있도록 그래서 단지 이것을 제공하는 것입니다, 기본적으로 우리는 우리는 너무 많은 사용 사례를보고 있습니다 시나리오 밖이었습니다 여행에서 우리는 사람들이 나타날 곳을 보았습니다 그들의 교통 수단과 그들이 원했던 호텔 기차역의 다른 쪽 끝에 책을 썼다 라인, 그리고 그들은 지금 호텔을 예약 할 시간이 있었는데, 하지만 그들은 그들이있는 곳에 있지 않습니다

당시 호텔이 필요했습니다 훨씬 더 나은 시나리오는 여전히 사람들이 현재 위치를 사용할 수있게하고, 그러나 그들을 잘 변화시킬 수있는 자원을 제공해야합니다 근본적으로 위대하고 위대한 기술입니다 분명히 당신이 사용하도록 권장하지만, 그것은 과도하게 적용된 종류입니다, 화면의 일부를 사용하지 않고 부동산 사용자가 위치를 변경할 수 있도록합니다 그 자동 감지 위치를 사용하고 싶다면, Google Places API를 사용하면 현재 지원되는 위치를 알아 내려면 우리는 당신을위한 짧은 링크가 있어요

저 재료에 도착하기 위해서 앱 탐색 및 탐색의 또 다른 측면 우리가 애플 리케이션으로 공정한 비트를 본 것은 앱에서 모바일 웹으로 이동합니다 그리고 내가 작성한 방식으로 볼 수 있습니다 이것을하는 것에 문제가 있다는 원칙 그것은 app-to-web 전환이 필요한 곳에, 그래서 그들이 필요한 곳에 마찰이 가해지지 않도록하십시오

그래서 저는 여기 아이디어가 각각의 경우에 정말로 필요하다고 생각합니다 그것을 위해? Google은 여기 Google에서 기술을 만들기 위해 노력하고 있습니다 이 장면을 훨씬 더 부드럽게 만들기 위해 필요한 전환점 그것을하기 위해, 그러나 현재, 우리는 여전히 적어도 일종의 성능 저하를 봐라 그래서, 정말로 당신이 가지고 있는지 모바일 웹으로 사람들을 밀어 넣는다 그들이 지금 앱 경험에있을 때, 그런 다음 마찰이 없도록하십시오

따라서이 예에서 우리는 누군가 누가 비행기를 탑승하는지 이것은 아주 평범한 상황이 될 수 있습니다 사람들이 모바일 웹으로 이동합니다 그러나 우리가 자주 본 것은 단순히 여행 앱에있는 것이 아니라, 다른 시나리오에서도 우리는이 경험을 보았습니다 근본적으로 변한다

그래서 우리는 이런 것을 보았습니다 승인? 그리고 때로는 일어날 수 있다고 생각합니다 팀의 조직 구조 때문입니다 알다시피,이 앱 팀이 모바일 웹입니다 팀, 그리고 그들은 충분히 말하지 않았어, 그렇지? 그래서 저는 몇몇 회사들이 더 좋은 일을하고 있다고 생각합니다

이 팀은 함께 사용자를 계획 할 수있게합니다 경험, 모양과 느낌, 내용 배치 방법에 대해 설명합니다 그런 다음 실제 구현을 분리합니다 다른 플랫폼에서 따라서 더 나은 경험은 회사들은이 점에 대해 정말로 사려 깊다

그리고 그 모습과 느낌을 매우 매끄럽게 만들 수 있습니다 모바일 웹으로 바로 이동할 수 있습니다 안드로이드에서, 우리는 이것에 대해 약간의 연구를하고 있습니다 Chrome Custom이라고하는 몇 가지 기술이 있습니다 살펴 봐야 할 탭

그것은 당신을 활성화 시키는데 정말로 도움이됩니다 툴바 색상 변경, 종료하고 애니메이션을 입력하여 해당 앱에서 이동하는 전체 과정 모바일 웹에보다 원활하게 전달할 수 있습니다 두 번째 장으로 이동하십시오 따라서 앱 검색에서의 중요성 정말로 과소 평가 될 수 없습니다 이제 몇 가지 중요한 검색 구현에 대해 이야기 해 보겠습니다

따라서 검색 필드를 눈에 잘 띄게 표시합니다 우리는 모바일 웹 연구를했을 때 이걸 발견했습니다 검색의 중요성에 대해 따라서 가난한 사례에서 우리는 사람들이 그것을 찾을 것으로 기대하는 장소에서 검색, 그러나 텍스트를 찾기 위해 그것을 어떻게 기대할 것인가가 아닙니다 이리 우리가 본 연구에서 사람들은 수색을 위해 주위를 둘러보고있는 약간의 좌절을 가지고 있었다

때때로 그것은 메뉴 아래에 숨겨져 있었고, 가장 분명한 것 중 하나 인 것처럼 들리지만, 그러나 나는이 연구에서 내가 본 것에 대한 나의 요약이 무엇인지, 개발자와 디자이너가 구현하지 않았다는 것입니다 충분한 검색 필드 영구 검색 필드를 포함해야합니다 검색이 정말로 중요한 부분 일 때 앱에서의 내 경험에 대해 무슨 일이 일어나고 있는지 생각하는 사람들이 많이 있습니다 검색이 중요하다고 생각하지만 그렇지 않습니다

스크린 부동산을 바치는 것이 중요합니다 그러니 앱에서 확인해보세요 현재보다 현저하게 강조해야할까요? 아르? 그래서 우리는 이것에 대한 조언을 Material Design에두고 있습니다 그리고 우리는 지속적인 검색을하고 검색 필드에 넣고, 확장 검색도 있습니다 우리는 유리 모양의 아이콘을 가질 수 있습니다

물론 검색을 위해 확장되었습니다 앱에서 검색의 중요성에 대해 생각해보십시오 그리고 사람들이 얼마나 중요한지는 중요합니다 검색 유형에 대한 결정 구현해야합니다 그리고 구현 세부 사항을 위해, 검색 대화 상자와 검색 위젯이 있습니다

이 링크를 클릭하면 더 많은 정보를 얻을 수 있습니다 필터 및 정렬 옵션은 어떻게됩니까? 대단히 중요합니다 다시 한 번, 우리는 그들이 숨겨져 있거나 일종의 묻혀있는 것을 보았습니다 또는 더 아래로, 사람들은 그들에게 갈 수 없었다 그들이 필요로하는만큼

그것은 우리가 최근에 한 우리 연구가 보여준 것입니다 우리는 그것의 훌륭한 구현을 보았습니다 그러나 아직도해야 할 일이 더 있습니다 셔츠에 대한 결과 242 개, 필터링하거나 정렬 할 방법이 없습니다 따라서, 더 나은 구현은 정말 좋은 클리어 버튼

필터 사람들은 그것을 아주 분명하고 쉽게 볼 수 있습니다 그리고이 예는 의류에 대한 것입니다 이 패널을 모든 올바른 종류로 슬라이드했습니다 그 (것)들을위한 수색 선택권의

그래서 당신은 베스트 매치, 최신 콜렉션, 그런 종류의 것 내가 이런 필터를 보았을 때 한 가지는, 몇몇 회사들은 예를 들어 사이징을 실시하고 있었고, 재고가 없을 때, 그리고 그것은 사람들에게 문제를 일으켰습니다 그들은 그들이 이제까지 할 것인지 알지 못했기 때문에 재고가 그들의 크기가 그래서 여분의 작은 것을 빼앗긴다고 상상해보십시오 그냥 그것이 주식에 없었기 때문에, 사람들 그것이 다시 올지 모르겠다

그보다 나은 경험은 그들을 가능하게하는 것과 같습니다 아마 재고가 언제 돌아 왔는지 알아보기 위해 가입하십시오 그러나 확실히 그것을 보여주고, 그것을 안정된 상태로 보여준다 좋다 그래서 여기에 색과 가격 그리고 또 다른 한가지가 있습니다

나는이 디자인에 대해 좋아한다 필터를 지우거나 필터를 적용한 다음 패널을 닫으려면 맨 위의 별도 수표, 그래서 패널을 닫는 것에 대해 혼란스럽지 않습니다 않습니다 따라서이 주제에 대한 검색을 유지하면서, 사람들에게 검색을 돕는 다른 방법이 있습니다 그 중 하나는 사용자 정의 제안 추가입니다

이는 응용 프로그램의 데이터에서 만들 수 있습니다 그래서 그것은 사람들이 그들의 수색에 정말로 도움이 될 수 있습니다 또 다른 하나는 최근 질의 제안입니다 그래서 모든 기술과 시설 그 검색 경험을 향상시킬 수 있습니다 보다 깊이있는 검색 경험을 통해 생각해보십시오

좋은 주제입니다 상거래 및 전환 따라서 사용자는 앱이 정말 부드럽길 기대합니다 제품을 찾고, 학습하고, 구매하는 경험 그럼 몇 가지를 살펴 보겠습니다

이 연구에서 상거래 및 전환에 대한 정보가 공개되었으며, 전환 경험을하도록 돕습니다 따라서 비교 쇼핑 기능을 사용할 수 있습니다 이 예에서 왼쪽의 여기에 부동산 앱, 여기, 그리고 사람들에게 그냥 그들은 아래로 스크롤하여 볼 수 있습니다 다른 집에서 그들이 좋아하는 것, 그들은 기억에 의지해야하며, 사람들, 우리, 너와 나, 우리는 모두인지 주의자이다 우리는 우리의 두뇌를 그렇게 많이 사용하는 것을 좋아하지 않습니다 그리고 우리는 사용자가 자신의 뇌를 많이 사용하도록 만들고 있습니다

여기, 그들이 물건 등을 보았던 곳을 기억합니다 그러나 우리는 더 잘할 수 있고 그 중 일부는 할 수 있습니다 우리가 본 것은 사람들을 돕기 위해 이런 방식으로 우리는 사람들에게 북마크 아이템을 제공하게됩니다 그들은 그것을 보았습니다 그래서 그들은 그것을 비교할 수있었습니다

모바일에서이 작업을 수행하는 것은 여전히 ​​매우 어렵습니다 그러나 여전히 우리가 할 수있는 모든 일이 도움이됩니다 그래서 저는 여기서 당신을 보여 드리겠습니다 사람들이 비교할 수있게했다 그리고 나서, 당신은 그것이 꽤 제한되어 있음을 볼 수 있습니다, 전화의 크기와 함께,하지만 여전히, 당신은 그 정보를 모으는 것

그것은 그들이 다른 모든 가정을 무시할 수 있다는 것을 의미합니다 걱정하지 않고 침실을 비교할 수 있습니다 그들은 욕실을 비교할 수 있습니다, 가정의 비용, 기타 등등 우리는 이것이 필요하다는 것을 알고 있습니다 연구에서, 우리는 사람들이 이에 대한 대안을 취하는 것을 보았습니다

그래서 소매상에서 사람들이 장바구니에 품목을 추가하는 것을 보았습니다 단지 그들이 같은 장소에서 그들 모두를 볼 수 있도록 그리고 그 일을 생각하는 사용자가있었습니다 다른 사람들이 어려움을 겪었습니다 그래서 우리는 이것이 필요하다는 것을 압니다

비교 및 탐색 경험에 대해 생각해보십시오 앱 내에서 사람들이 필요로하는 것 그런 다음 결제 수단을 쉽게 추가하고 관리 할 수 ​​있습니다 나는 다른 날에이 사실에 대한 가난한 예를 실제로 발견했습니다 내가 물건을 사러 갔을 때였습니다

나는 다시 휴가를 가고 있었다 나는 휴가를 가기를 좋아한다 그리고 나는 예약을하고 있었다 임대 주택 그리고 카드를 업데이트해야 할 시점까지갔습니다

내 머리 속의 나의 모델은 음, 새 카드가 도착했다 이전과 같은 카드 일뿐입니다 그것에 날짜가 새겨졌습니다 내 마음 속에는 내 카드에 대한 내 정신 모델이 있습니다 그것은 같은 카드입니다

그냥 교체가 필요합니다 새로운 결제 수단이 아닙니다 그래서 기존 카드를 편집 할 수있을 것으로 기대했는데, 그러나 그것을 할 수있는 시설이 없었습니다 그래서 나는 개발자의 모델을 이해해야 만했다 새로운 결제 수단을 추가해야했습니다

이 예에서는 그 사람이 그들이 체크 아웃되고있는 지점까지, 하지만 카드를 편집하거나 새 카드를 추가 할 방법이 없습니다 그것은 다른 곳에서도 가능합니다 하지만 우리 대부분은 생각하지 않습니다 글쎄, 나는 아침에 일어나서 생각할 것입니다 해당 앱에서 결제 수단을 관리해야합니다

종류가 별개의 활동입니다 맞습니까? 우리는 필요할 때 그것을 생각하는 경향이 있습니다 우리가 돈을 낼 때 그래서, 여기에 문제가 있습니다 따라서이 예에서는 훨씬 좋습니다

기존 카드를 편집 할 수있는 옵션이 있습니다 새 결제 방법을 추가합니다 여기에 여러 가지 결제 수단을 제공하고 사람들을 유도합니다 매우 깨끗한 형태의 디자인으로, 여기, 사용자가 새로운 신용 카드를 추가하기로 선택한 경우, 원할 경우 카드를 스캔 할 수도 있습니다 그래서 그 경험을 멋지고 깨끗하게 만드십시오

이제 Google에서 제공하는 하나의 시설 Android Pay는 그 중 하나를 선택하는 방법입니다 지불 할 이 아이디어는 사용자에게 매우 간단합니다 사용자가 Android Pay를 통해 원활하게 결제 할 수 있으며, I / O에는 여기에 대한 이야기가 있다고 생각합니다 이 링크에서 더 많은 정보를 얻을 수 있습니다

그래서 등록 등록은 회사 및 개발자에게 매우 인기가 있으며, 그게 그렇게 보였으니까 우리가 사용자로부터 참여를 얻을 수있는 곳입니다 그것은 사용자가 우리에게 맡기는 곳입니다 우리는 오래 전부터 이러한 등록을 제공 한 사실을 알고있었습니다

장벽이 앞에있는 것은 사람들이 도달하기위한 커다란 장애물이 될 수 있습니다 먼저 뭔가를 제공하는 것이 낫습니다 그래서 그들은 그들의 편에서의 참여를 느낄 수 있습니다 회사에 다른 몇 가지가 있습니다

등록과 관련하여 오늘 이야기하고 싶습니다 그래서 우리는 사용자들이 로그인하고 가입하는 데 어려움을 겪고있는 것을 보았습니다 까다로운 일이지, 그렇지? 우리는 종종 사용자가 양식을 작성하는 것을 보았습니다 그들이 제공 되었다면 그들이 가입하기로되어있을 때 서명하고 있었고, 그 반대 아마 우리 모두에게 일어난 일입니다

그래서 우리는 더 나은 경험을 발견했습니다 사람들에게 로그인하거나 등록 할 수있는 옵션이 주어졌습니다 그 단어들은 매우 달랐고, 그것들을 구별 할 수 있었고, 우리는 그들을 올바른 길로 끌 수 있습니다 그래서 그들은 그 혼란에 빠지지 않았습니다 우리는 등록 및 신원에 대한 솔루션을 많이 보유하고 있습니다

Google에서 우리는 전체 ID 플랫폼을 가지고 있습니다 내가 너를 보라고 권하고 싶다 기본적으로 인증 시스템입니다 몇 가지 구성 요소와 다양한 선택 사항이 있습니다 만들다

그래서 이들 중 하나는 Android 용 로그인입니다 사용자가 동일한 자격 증명으로 로그인 할 수 있습니다 그들은 Google에서 사용합니다 전체적인 의도는 그 과정을 더 많이 만드는 것입니다 쉽고 간단합니다

그 이야기는 다른 방법이 있습니다 암호 인증을 마찰없는 경험으로 만드십시오 우리 모두는이 상황에 처해있었습니다 우리에게는 효과가 없으며 모바일에서는 상당히 고통 스럽습니다 비밀번호를 계속 입력하면 작동하지 않습니다

앱에서 더 악화 될 수 있습니다 이 곳이 사람들이 돌려 보내진 곳이라는 것을 알았습니다 모바일 웹에 연결 했지, 그렇지? 그럼, 당신은 다시 그 고리에있어, 그리고 그것은 더욱 악화되고 있습니다 그래서 우리는 하나의 솔루션에 대해 이야기했습니다 사람들이 로그인 할 수있게 해줍니다

우리가 보았던 또 다른 하나는 훨씬 더 대중적이되고 있습니다 지문 입력이고, 우리의 연구에서, 사람들은 이것에 대해 꽤 행복했습니다 그들은이 일을 아주 많이 좋아했습니다 그래서 나는 이것이 좋은 것으로 생각합니다 또한 구현 세부 정보가 더 있습니다

여기서 지원되는 장치에서 지문 스캔을 사용합니다 그리고 Smartlock은 우리의 정체성 시스템의 또 다른 부분입니다 그것은 당신이 자동으로 사용자에게 응용 프로그램에 로그인 할 수있게하고, 그들이 저장 한 자격 증명을 사용합니다 그것은 또 다른 좋은 것입니다 이 연합 신원 조항의 일부 그리고, 만약 당신이 사용자들과 멀리 떨어져 있지 않다면, Sign-in Hints도 있습니다

우리에게 자격 증명 API를 사용하십시오 로그인시 사용자에게 힌트를 줄 수 있으며, 사용자 이름과 이메일 주소 모든 것은 서명 허들과 같은 쉬운 일종의 방식으로 이루어집니다 그래서 폼 엔트리 양식 입력에 대해 디자인에서 이야기했습니다

년과 년 동안 우리는 데스크톱 양식 입력 작업을 많이했는데, 우리가 모바일 웹에 갔을 때, 우리는 다시 모든 것을 다시 배우어야했습니다 그 양식들이 실제로 정말로 작고, 양식을 작성하기 위해 확장해야합니다 항상 앱으로 조금 더 나아졌습니다 우리가 양식을 디자인했기 때문에 모바일 장치의 구매부터

그러나 나는 말하기를 기쁘게 생각한다, 나는 우리가 먼 길을왔다라고 생각한다 그러나 우리 연구에서 보았던 것들이 아직도 있습니다 개선 될 수있다 그래서 저는 이것을 사용자 친화적 인 형태로 분류했습니다 내가 본 것들 중 몇 가지는 여전히 사용자가 자신의 업무에 많은 작업을해야하는 일부 앱

여러 다른 필드에 커서 놓기 그들의 전화 번호, 그리고 이런 것들에 대해서, 사용자 측에서 많은 노력이 필요합니다 또한 양식 필드가 어떻게 나타나는지 보려고 지불하지 않았습니다 사용자에게 문제가되었습니다 그 (것)들을 위해 종류를 분류하는 것은 단단했다 그들이 다음에 채워야 할 것의 그들의 정신 모델 그것들은 좌절감을 일으켰고 확실히 마찰적이었습니다

포인트 더 나은 교전은 여기에서 더 많은 일을하고 있습니다 백 엔드에 따라서 사용자가 휴대 전화에 글을 쓰고 싶어하는지 숫자 사이에 대시가있는 숫자, 숫자 사이에 공백이 있으면 아니면 하나의 긴 필드 일뿐입니다 그리고 그것을 만들어라

그것은 우리를 위해 조금 더 많은 일을한다 개발 측면에서,하지만 그것은 사용자가 훨씬 쉽게 사용할 수 있습니다 그들이하는 일을 이해하고, 오류가 반환되지 않습니다 또한 오류가있는 곳에서도 인라인을 제공합니다 정말 도움이됩니다

여기 앱에는 양식을 현장으로 옮기는 정말 좋은 직장 사용자가 정보를 입력하면 이는 사용자에게 매우 유리한 결과였습니다 따라서 멋진 텍스트 필드를 만드는 방법에 대한 많은 정보가 있습니다 머티리얼 디자인을 통해 서로 다른 측면에 대해 많은 이야기 좋은 양식을 만드는 것 특히 장소에 대해서는 지역 정보 자동 완성 기능을 사용할 수 있습니다

Places API의 일부로 다시, 그리고 이것은 이러한 형태로 채우는 데 정말로 도움이 될 수 있습니다 위치가 필요한 필드 양식 디자인의 또 다른 측면은 키보드와 일치하는 것입니다 필요한 텍스트 입력 이것은 꽤 잘 알려진 일이며, 그러나 우리는 여전히 잘 수행하지 못하는 중요한 앱을 보았습니다

따라서 사용자가 신용 카드에 커서를 올리면 필드에 추가하고 앱에이 항목이 있다면 너는 그것을 조사해야한다, 그것이 옳은 일을하고있는 것인가? 이 예에서는 여기에 올바른 일을하지 않습니다 사용자는이 키보드를 그대로두고, 올바른 키보드를 얻을 수있는 방법이 없습니다 대개는 아니지만, 여기에 숫자 키를 치고 나서 그들은 상단에 숫자가있는 키보드를 갖게 될 것이고, 적절하게 설계하는 것과는 대조적으로, 한 번 커서가 안에 있으면 그 (것)들을위한 숫자 키보드 이렇게 작은 것들, 양식에있는 모든 작은 것들 실제로 추가하고 양식 디자인을 체크 아웃하십시오 이런 식으로 사람들에게 정말로 도움이됩니다

입력 방법 지정에 대한 정보가 있습니다 이 링크에서 찾을 수있는 키보드 유형과 올바른 키보드 그런 다음 마지막으로 유용성과 이해력을 살펴 보겠습니다 이것들은 당신이 할 수있는 작은 것들입니다 우리가 우리 연구에서 보았던 것, 애플 리케이션을 통하여, 사용자들에게보다 자연스러운 경험을 제공합니다

우수한 사용자 경험을 보장하는 데 중요 할 수 있습니다 사용자가 걸려 넘어 지거나 경험을 포기하지 않는 경우, 언제든지 이것은 텍스트 레이블 및 시각적 키 제공에 관한 것입니다 시각적 정보를 명확히하기 위해 그래서 이전에 이것을 보았습니다 제 이야기에서 저는 시각적 인 열쇠가 빠져있었습니다

그 그림 속의 파도가 필요해 호텔의 방향을 이해하는 데 도움이됩니다 이 예제를 보자 몇 순간을 가지고 자신을 결정하십시오 그 아이콘이 나타내는 것이라고 생각하는 것

그들 중 일부는 아마 다른 사람들보다 분명합니다 답을 봐야할까요? 여기에 우리가 간다, 그래서, 그것은 나의 여행, 책, 클럽, 그리고 계정이다 누구가 그 (것)들을 맞았 는가? 나는 아마 계정이 그렇게 나쁘지 않았다고 생각한다 그러나 우리가 본 교훈은 다시, 나는 그것이 지나친 일반화라고 생각한다 우리가주는 규칙은 아이콘이 모호하고, 텍스트 레이블이 꼭 필요합니다

문제는 말하기에 때 아이콘 모호하다 우리 모두는 서로 다른 수준을 가지고있다 이해와 관련하여 너는 내가 생각하기에, 너의 많은 아이콘들 애매하게 될 것입니다 나는 당신에게 모범을 줄 수있다

따라서 필터 아이콘을 알 수 있습니다 이런 식으로 보이니? 그렇게 보편적이라고 생각할 수 있습니다 그것은 아주 다른 방식으로 그려집니다 많은 다양한 앱에서 보편적으로 사람들 사이에서 이해되는 것을 발견하지 못했습니다 그래서 나는 우리가 우리의 수준을 바꿔야한다고 생각합니다

앱의 아이콘 수와 관련하여 설정 라벨이 필요한 사람들, 사람들이 그것을 이해할 것입니다 그리고 이것은 매우 훌륭한 곳입니다 간단한 AB 테스트를 수행하고 레이블 제공 여부와 차이점 레이블을 제공합니다 여기에 구현 세부 정보가 있습니다 단추에 텍스트와 아이콘을 사용하려는 경우

그래서 그걸 가지고 있다면 그리고 라벨을 붙이는 것에 대해 이야기하고, 항상 저를 깨닫게 해줍니다 내 응용 프로그램에 액세스 할 수 있습니다 여기에는 많은 가이드 라인이 있습니다 응용 프로그램에 액세스 할 수 있는지 확인하십시오

그리고 오늘 내가 들어가야 할 마지막 원리 컨텍스트에서 사용 권한을 요청합니다 그래서, 이것은 우리가 Android M으로 가능하게 한 것입니다 하지만 우리는 여전히 상당수의 앱을보고 있습니다 그것을 이용하고 있지 않다 잠시 동안 iOS가 가능할 수있었습니다

지금도 따라서이 예에서 사용자는 다운로드 및 응용 프로그램을 열고 그들은 즉시 묻습니다, 위치를 사용할 수 있습니까? 그래서 아마이 앱은 그들에게 제안되었습니다 다른 누군가에 의해 그들은 오, 이것이 정말 좋은 앱이라고 말했다 당신이 가정 장식에 대해 배우고 싶다면, 그리고 그것은 당신이 살 수있는 몇 가지 정말 멋진 것들을 가지고있어

그러나 우리와 비슷한 방식입니다 문제가되는 등록을 생각 하겠지? 당신이 그것을 앞쪽에 요구할 때 넘어서 오는 장애물입니다 이것은 사용자에게 똑같습니다 개발자들이 말하는 것처럼, 내 위치를 알려주는 것과 같습니다 내가 너에게 다른 것을주지 않기 전에, 그렇지? 사용자는 종종 '아니오'라고 말하려고합니다

그들은 왜 그 이유를 정말로 이해하지 못하기 때문에 그들은 단지 당신의 앱을 둘러보고 싶었습니다 그래서, 그걸하는 더 좋은 방법입니다 안드로이드 M 때문에 지금 할 수 있어요 런타임에 컨텍스트에서이를 수행 할 수 있습니다 이 예에서는 매장을 검색하는 사람들이 있습니다

사용자가 자신의 동기 부여가 있기 때문에 훨씬 나아질 것입니다 권리? 그들은 그 가게를 찾을 수 있기를 원합니다 그 다음에 일어나는 일은 그들에게 더욱 분명합니다 뒤에 오는지도가 있고 그것 묻는다, 위치를 사용할 수 있습니까? 음, 물론 그렇게 할 수 있습니다 권리? 너는 받아 들일 확률이 훨씬 높다

당신이 문맥에서 묻는다면 우리는 이것을 위해 많은 자원을 가지고 있습니다 우리는 작은 비디오와 구현 세부 사항이 있습니다 런타임에 사용 권한을 요청할 수 있는지 여부 그리고 그것은 단순히이 원칙에 불과합니다 왜냐하면 많은 사람들이 그것에 대해 알고 있음을 알고 있기는하지만, 우리가 최근에 공부 한 앱에서 많이 보았습니다

그것이 여기있는 이유입니다 그래서 내가 원칙의 끝으로 나를 데려다 준다 너와 갈거야 각 장을 살펴 보았습니다 이러한 원칙을 온라인에서 더 많이 찾을 수 있습니다

그들은 모두 Google에서 생각할 때 온라인 상태입니다 그리고 여기 당신과 관련된 짧은 링크를 만들었습니다 원칙에 향상된 모바일 사용자 환경 사실 여러 가지 원칙이 있습니다

내가 무엇이 있는지 말해 줄께 모바일 앱 원칙, 새로운 설정 25 가지 모바일 원칙 중 새 집합이 있습니다 소매업을위한 25 가지 원칙 – 웹과 앱 모두입니다 다시 한 번 연구를 했으므로 그 정보는 그런 다음 모바일 웹 원칙이 있습니다 이전에 게시 한 내용, 이미 보았을 수도 있습니다

이 링크의 모든 링크는 동일한 링크입니다 더 자세한 구현 정보가 필요한 경우 모바일 웹 사이트에서 우리의 웹 펀더멘털의 일부이기도하다 사이트 및 그 곳에서 제공 한 특정 링크 추가 개발자 구현 세부 정보를 제공합니다 내가 가기 전에 한 가지 더 이야기하고 싶습니다 연구의 이야기

그래서이 연구에서, 신용 카드 스캔 기능을 구현 한 지불하기 위해서 이제 우리는 연구에서 소수의 사람들이 전에 그것을 사용했고, 그것을 가로 질러 왔고, 그것을 좋아했다 그러나 이것은 상대적으로 새로운 기술이기 때문에, 우리는 그것을 만난 사람들이있었습니다 처음으로 이제 스캔이라는 단어에 대해 생각하면 가장 친숙한 단어입니다

경험, 나는 생각한다, 단어 스캔과 더불어, 내가 식료품 가게에 가서 신용 카드를 스캔 할 때입니다 권리? 그리고 바로 옆에 내 신용 카드를 걸고 있습니다 음, 다른 기계를 통해 퍼팅, 정말, 그게 스캐닝 내가 스캔이라는 단어를 알고있는 또 다른 곳 사진 복사기에 종이 넣고있다 더 오래 전의 일이지만 여전히 스캔, 서로의 위에 뭔가를 가하고

따라서 사용자는이 요청을받습니다 신용 카드 스캔 그것은 스캔이라는 단어를 사용하는 것입니다 그리고 만약 당신이 그들을 번역하려한다고 상상한다면, 종종 가장 먼저 묻는 것은, 우리 카메라를 사용할 수 있을까요? 음, 카메라가 할 일은 무엇입니까? 내 신용 카드를 스캔하는 중입니까? 음, 아마도, 나는 그것을 이해하지 못한다 그래, 그래, 내 카메라를 사용할 수있어

그런 다음 여기에 신용 카드를 보관 해달라고 요청합니다 자동으로 스캔합니다 좋아요, 지시에 따라 놀라지 마시고, 우리는 연구에서 세 사람이 이것을 보았다 그리고 그들은 기다리고 기다렸다 그들은 대단히 실망했다

그들은 지불하는 것이 아주 간단한 방법이라고 생각했기 때문에 그리고 이것은 단지 이해에 관한 것입니다 우리가 사람들에게하고 싶은 것과 사용하고있는 언어 간단하고 사용하기 쉽습니다 불행히도 우리는이 모든 것이 효과가 있다고 생각합니다

아직 작동하지 않습니다 그러나 그것은 말이 맞습니다 그들이하는 일, 그들이 무엇을하도록 지시 받았기 때문에 그래서 다시, 나는 그 시점으로 돌아 간다 사용자를 이해하고있는 앞에서 만든 경험, 끝에서 끝까지

흐름과 고통의 포인트를 이해합니다 정말 중요합니다 네가 경험을 쌓기를 원하기 때문에 당신은 당신의 사용자를위한 정말 좋은 앱 경험을합니다 사용자가 좌절하지 않는 곳, 좌절감의 종류가 아니라 내 앱을 사용한 후에 느낌이 들었고 내 호텔 방까지 갔다

내 창문에서 그 주차장을 봤어 앱 경험을 할 수 있기를 바랍니다 사람들이 인생이 정말로 마찰이없는 것 같은 느낌을 갖게한다 해변의 경치와 더 비슷합니다 그래서 저는 여러분에게 세 차례의 테이크 아웃을 해드 리고 싶습니다

그리고 이것들은 생각할 수있는 세 단계입니다 이 이야기 이후에 대해 앱을보고 앱을 감사합니다 25 가지 원칙에 위배된다 간단히 말해서, 우리는 이러한 경험들 각각에서 무엇을하고 있으며, 그리고 그것을 측정하고 있습니까? 그게 너에게 길고 긴 길을 가져다 줄거야

하지만 앱도 독특합니다 맞습니까? 따라서 주요 사용자 여정을 실제로 이해해야합니다 그 붕괴 지점을 이해하십시오 내 호텔 앱에 내가 제공 한 것 정말 흥분 되긴했지만 내게서 깨진 점들 결국에는 잘 작동하지 않게되었습니다

그리고 나서 마침내, 당신 자신의 사용자 테스팅에 대해 생각해보십시오 Google Ventures의 가이드 사용자 연구를 위해 많은 자원을 제공합니다 실제로 작은 규모의 방법으로 사용자 테스트를 수행하면 당신이 제공 한 좋은 것들을 볼 수 있도록 앱에서 축하하고 고통을 식별 할 수 있습니다 귀하의 애플 리케이션에 포인트, 그래서 당신이 그들을 해결하는 방법에 대해 생각할 수 있습니다 시간 내 주셔서 감사합니다

[음악 재생]

Build great Material Design products across platforms (Google I/O '18)

[음악 재생] JOHNATHAN CHUNG : 안녕하세요 우리 이야기에 오신 것을 환영합니다

제 이름은 Jonathan Chung입니다 그리고 저는 Material Design 팀의 UX 리드입니다 NIC BUTCHER :여보세요 내 이름은 닉 부처 야 그리고 저는 Design Relations 팀의 디자이너이자 엔지니어입니다

LARCHE : 나는 윌이야 저는 Material Design의 엔지니어입니다 JOHNATHAN CHUNG : 자리에 앉으세요 오늘 우리는 정말 어떻게 이야기하는지에 대해 기쁘게 생각합니다

플랫폼 전반에 걸친 훌륭한 소재 디자인 제품을 제작할 수 있습니다 그래서, Material Design이란 무엇입니까? 우리가 막 만든 모든 새로운 발표? 이전에 우리가 알고 있던 것에서 어떻게 진화 했습니까? 머티리얼 디자인은 이제 적응 형 디자인 시스템입니다 오픈 소스 코드로 뒷받침되는 팀은 고품질의 디지털 경험을 제공합니다 즉, Material은 당신을 돕습니다 정말 빠르고 아름답고 유익한 제품을 만들 수 있습니다

우리가 처음 출시 한 2014 년에는 제로 고객이 생겼습니다 이제 Material Design을 사용하는 150 만 개 이상의 앱이 있습니다 믿을 수 없어 그리고이 거대한 고객 수를 기반으로, 우리는 정말로 듣고 계속했습니다 우리의 시스템을 개선합니다

오늘 우리는 End-to-end 제품인 Material Theming을 출시했습니다 재료 디자인을 쉽게 만들 수있는 기능 자, 여러분 중 일부는 더 많이 배우기를 간절히 원합니다 하지만 아마도 당신 중 일부는 여전히 궁금해하고 있습니다 머티리얼 디자인이 당신에게 적합한 지 여부 귀하의 회사를 위해

그래서 나는 새롭게 걷는 것으로 시작할 것입니다 디자인 된 Materialio 사이트 그런 다음 Nick은 재료 도구 제품군을 시연합니다 공동 작업 및 맞춤 설정을 위해 제작 한 정말 쉽고 편리합니다

그러면 Will은 Material Components에 대해 이야기 할 것입니다 오픈 소스 코드 라이브러리 모든 플랫폼에서 사용할 수 있습니다 그래서 내가 왜해야하는지 세 가지 이유를 설명해 드리겠습니다 Material Design 사용을 고려하십시오 첫째, Materials Design은 개발자를위한 것입니다

우리에게 많은 피드백을 주셨습니다 앱을 적용하고 구축하는 것이 쉽지 않은 점 머티리얼 디자인을 사용합니다 이제 Material Theming 및 모든 도구를 사용하여 우리는이 새로운 기능을 지원하기 위해 구축했습니다 우리는 이제 창조하고자하는 열망을 갖게됩니다 개발할 코드에 눈을 돌려야합니다

머티리얼 디자인은 진정한 크로스 플랫폼 프레임 워크입니다 일관된 사용자를 만드는 것이 얼마나 중요한지 이해합니다 플랫폼 전반에서 작동하는 경험 따라서 머티리얼 디자인을 사용하면 사용자에게 도움이됩니다 여러 장치를 사용합니다

우리는 또한 고품질의 제품을 만드는 것이 오랜 시간이 걸린다 따라서 우리는 플랫폼 간 일관성을 장려하고 있으며, 또한 코드를 제공하고 있습니다 Android, iOS, 웹 및 Flutter에서 개발을 시작하십시오 이제, 우리는 그것을 시험에 적용 할 것입니다 이렇게 스크린을 만들 것을 상상해보십시오

그리고 아마도 여러분 모두는 전문가이자 전문가 일 것입니다 하지만 내 경험에 의하면, 화면을 구축 이것을 좋아하고 올바르게하려면 시간이 걸릴 것입니다 재료 디자인의 힘으로, 우리는 이제 그 어느 때보다도 쉽게 만들고 있습니다 여러 플랫폼에서 이와 같은 화면을 설계하고 구축 할 수 있습니다 그리고이 모든 마법은이 재 설계 된 사이트에서 바로 시작됩니다

새로운 사이트는 이제 디자인, 개발 및 도구로 나뉩니다 각 섹션에서 모든 위대한 자원을 찾을 수 있습니다 우리 팀이 당신을 위해 창조 한 디자인 지침, 도구, 리서치 통찰력, 오픈 소스 코드, 당신이 이름을 짓는다 우리는 시간을 좀 보냅니다 이 사이트는 현재 더 자세하게 설명되어 있습니다

디자인 섹션에는 여전히 모든 것이 있습니다 Material Design에 대해 좋아했습니다 모든 것이 있습니다 아무것도 사라지지 않았다 또한 가장 많이 읽은 기사 몇 가지를 소개합니다

페이지 상단의 콘텐츠를 빨리 찾을 수 있습니다 우리는 여전히 당신을 돕는 데 집중하고 있습니다 아름다운 디자인 제품, 배경없이 디자인 여기에서 기사를 볼 수 있습니다 우리가 당신을 위해 제공 한 것, 그리고 시스템 아이콘, 자신 만의 맞춤 색상 팔레트 생성, 당신의 브랜드에 맞는 서체를 고르십시오

UI에서 모양의 힘을 실제로 활용할 수 있습니다 마지막 섹션에서는 재료 연구에 대해 이야기합니다 우리는 Material Design의 모든 유연성을 보여 주며, 당신이 소매 용 건물이라면, 의사 소통을 위해, 또는 무엇인가 여행 앱만큼이나 복잡합니다 모든 것이 있습니다 그리고 우리는 그것을 테스트했습니다

그리고 체크 아웃 할 수있는 모든 것이 있습니다 머티리얼 디자인 가이드도 확장 및 향상되었습니다 재료 시스템, 재료 기초 및 재료로 변환 지침 머티리얼 시스템 섹션부터 시작하여, 우리는 Material Metaphors에 대한 일반적인 개요를 제공합니다 그런 다음 재단 섹션 다이빙 기본 관행으로 그래서 구조적인 것들을 언급 할 것이고, 타이포 그라피, 도해 법, 모양, 레이아웃 등

이제 지침 섹션에서는 전술 지침을 제공합니다 재료 제품을 만드는 방법에 대해 알아보십시오 이것에 관한 가장 좋은 점은 이러한 위대한 디자인 지침은 엔지니어링과 밀접하게 관련되어 있습니다 이제 다른 기능 중 일부를 살펴 보겠습니다 너를 위해 도움이 될 사이트에 제품을 만들 때

우리는 어떻게 상세한 사양을 가지고 있는지 압니다 엔지니어링 프로세스를 10 배 더 빠르게 만듭니다 그래서 우리는이 뷰를 제공하고 있습니다 Spec 뷰어 이 스펙 뷰어에서 우리는 이제 이 이미지에 대한 유용한 정보

오른쪽의 메뉴를 클릭하면, 다양한 유형의 모든 레이어에 액세스 할 수 있습니다 이 이미지에 대해, 당신은 단지 이미지 만 볼 수 있습니다, 측정, 텍스트, 색상, 모양 및 표고를보고, 이 UI에서 사용되는 여러 구성 요소를 확인하십시오 또는 우리가 추가했을지도 모르는 추가 노트 이 텍스트 주석을 살펴 보겠습니다 따라서이 주석에서, 여러분은 글꼴 이름, 크기 및 색상을보고, Google 팀이 구축 한 Google 글꼴 사이트로 연결됩니다

우리는 이러한 유용한 자원을 표면화하기를 정말로 원했습니다 워크 플로우의 맥락에서 당신에게, 그래서 당신이 필요로하는 모든 것이 바로 거기에 있습니다 이제 Google 글꼴 사이트로 이동하면 너는 다운로드하고 사용할 수있을 것이다 우리의 mock에서 사용되는 글꼴 우리는 또한 가장 효과적인 방법에 대한 연구를 수행했습니다

지침을 전달합니다 그리고 우리는 인터랙티브 한 콘텐츠 독자들에 대한 이해의 수준을 높였습니다 그래서 우리는 콘텐츠를 소개하기 시작했습니다 우리 기사에서 상호 작용한다 다음은 재료 팔레트 생성기의 예입니다

그것은 컬러 기사에 줄 지어 배치됩니다 이 도구와 상호 작용함으로써, 개선 된 색상 시스템에 대해 배울 수 있습니다 그래서 그것들은 우리가 가지고있는 새로운 특징 중 일부입니다 디자인 섹션에 추가 그러나 어떻게이 모든 것을 구축합니까? 그게 니가 여기있는 이유야

맞지? Develop 섹션은 이제 기능과 액세스 권한이 있습니다 Android, iOS, 웹 및 Flutter 용 오픈 소스에 모두 제공됩니다 플랫폼 협약을 존중하면서, 구성 요소가 제대로 작동하는지 확인하려고했습니다 Android뿐 아니라 다양한 플랫폼에서 사용할 수 있습니다 그리고 이들 구성 요소로 게임을 즐길 수 있습니다

우리 카탈로그에 아래로 스크롤하면 섹션이 표시됩니다 개발자 리소스 디자인 섹션과 비슷하게, 우리는 당신에게 필요한 자원을 제공하기를 원했습니다 귀하의 제품을 구축하는 데 사용할 수 있습니다

그리고 이것에 익숙하지 않다고 가정 해 봅시다 아래쪽으로 더 스크롤하면 이 작업을 시작하려면 자습서를 찾으십시오 기어를 도구 섹션으로 전환합니다 도구 섹션에는 모든 훌륭한 리소스에 대한 링크가 있습니다 갤러리를 시작으로 우리가 당신을 위해 만들었습니다

내가 사랑하고 디자인을 공유하기 위해 사용해온 부분이다 내 팀과 나는이 제품을 좋아한다 갱도 갤러리는 공동 작업을 매우 쉽고 매끄럽게 만듭니다

Nick이 갤러리에 대한 자세한 내용을 1 분 안에 알려줍니다 오른쪽에는 액세스 권한이 있습니다 양식화 된 아이콘의 다섯 가지 전체 세트 형식, 크기 및 밀도 범위에서 사용할 수 있습니다 하단에는 Material Theme가 표시됩니다 스케치 편집자

Theme Editor 란 무엇입니까? 이미 다른 회담 소식을 듣지 않았다면, Theme Editor는 플러그인입니다 브랜드를 체계적으로 표현할 수 있습니다 색상, 도해 법, 인쇄술, 그리고 모양 그리고 Theme Editor를 통해, 당신은 우리가 당신을 위해 제공 한 주제를 취할 수있을 것입니다 그것을 사용자 정의하여 사용자 정의하십시오

이러한 구성 요소 집합은 디자인에 사용할 수 있습니다 곧 또한 Theme Editor에 대한 유용한 정보 가이드 라인에 언급 된 모든 가이드 라인입니다 도구에 직접 통합됩니다 나중에 뭔가를 바꾸고 싶다면 어떨까요? 문제 없어

다음은 내부 색상에서 색상을 선택하는 예입니다 팔레트를 구성 요소의 전체 라이브러리에 적용합니다 나는 이것이 매우 유용하다고 생각한다 그리고 이것은 내 일을 그렇게 쉽게 만듭니다 이제, 나는 그것을 동료에게 넘겨 주겠다

닉, Theme Editor 사용법에 대해 더 자세히 이야기 해주십시오 고맙습니다 고마워, 조니 고마워, 조니 그래서 우리는 Material System, Foundation, 가이드 라인을 통해 고유 브랜드를보다 쉽게 ​​가져올 수 있습니다

귀하의 앱에 나는 당신에게 어떻게하면 좋을지의 예를 들려 줄거야 당신은 정말로 얼마나 쉬운 지 보여주기 위해 이것을합니다 해야 할 일이며, 특히 새로운 자료가 어떻게 나타나는지 보여줍니다 툴링은 설계 과정에서이 프로세스를 만듭니다 훨씬 더 빨리 개발할 수 있습니다

그래서 저는 올해 멋진 팀의 일원이었습니다 Google I / O 앱을 디자인하고 제작 한 사람 어쩌면 당신 중 일부는 그것을 사용했을 수도 있습니다 우리는 새로운 컴포넌트 리를 배치했음을 눈치 챘을 것입니다 여기에 하단 앱 바를 사용하는 것처럼 인셋 팹과

그러나 우리는 새로운 Material Theming을 모두 사용하고 싶지 않았습니다 우리가 원하지 않았기 때문에 오늘 큰 출시를위한 쇼를 망쳐 놓을 수 있습니다 오늘 우리가하는 일은 너를 걷는거야 Material Theming이 어떻게 할 수 있었는지 몇 가지 가능성을 통해 Google I / O의 상표를 훨씬 더 깊게 가져 오기 위해 적용됩니다 이 응용 프로그램에

그래서 Google I / O, 개발자 회의입니다 우리는 그것을 개발자 페스티벌로 거의 생각하고 싶어합니다 이 브랜드에는 장난기가 가득합니다 나는 특히 장난을 좋아한다 모션 스타일의 종류

또한 색상 표를 통해 표현됩니다 당신 주위에있는 모든 곳에서 볼 수 있습니다 또한 소프트웨어의 은유를 사용합니다 엔지니어링 세계, 레이어 및 스택과 같은 것들 그리고 우리는 일러스트 스타일에 영감을주기 위해 그것을 사용합니다

브랜드의 일종으로 그렇다면 이러한 요소를 앱 디자인에 어떻게 적용 할 수 있을까요? 그래서 나는 스케치에있다 이 파일은 테마 편집기에서 생성 한 디자인 파일입니다 조니가 방금 당신을 보여 줬어 Theme Editor가 많은 것들을 생성했다는 것을 알 수 있습니다 우리를 위해

그것은 구성 요소의 무리, 인쇄술, 스케일, 컬러 팔레트, 입면도 설정 및 아이콘, 등등 여기에서 Components View로 전환하면, 기본적으로 볼 수 있습니다 자료의 모든 구성 요소에서 일대일로 이 스티커 시트에서 나를 위해 생성 된 지침 여기, 내 디자인에서 사용할 준비가되었습니다 앱 바에서 모든 것이 있습니다 팹에서 카드로의 백 드롭

이름은 여기에 있습니다 이 구성 요소들에 대한 더 좋은 점은 그들이 Material Theming 시스템을 알고 있다는 것입니다 내가 의미하는 바를 보여 드리죠 테마로 다시 전환하여 여는 경우 스케치 플러그인 메뉴의 테마 편집기, 우리는이 테마가 현재 I / O, 일종의 인디고 프라이 머리, 그리고 청록색 악센트 색깔의 종류 색상 설정으로 들어가서 여기에서 Primary Color 섹션을 클릭하면, 그리고 나는이 원색을 바꾸어야했다

16 진수 코드를 직접 드래그하거나 16 진수 코드를 입력함으로써, 그것은 많은 효과를 가질 것입니다 내가 너를 그들을 따라 가게 해줘 우선, 이런 종류의 색조 팔레트를 보게됩니다 이 10 가지 색상의 색상이 생성되었습니다 내가 선택한 그 한 색깔에서

이것은 꽤 멋지다 나는이 작은 것에 괴짜 할 것이다 여기에 순진하지 않고 있습니다 선택한 색조 만 사용하는 것이 아닙니다 밝기를 변경하고 그런 식으로 팔레트의 종류,이 알고리즘 뒤에 디자이너가 색상을 선택하는 방법을 모방하려고 노력하고 있습니다

그리고 그것을 사용하여 멋진 색상 표를 고를 수 있습니다 잘하면 응용 프로그램 전체에서 훌륭하게 작동합니다 그래서 그것을 선택하면 테마의 전체 색상 팔레트 업데이트 중입니다 그리고 제가 다시 구성 요소로 전환하면,이 스티커 시트, 당신은이 모든 요소들이 테마 색의 변화를 알고 있습니다 그리고 그 변화는 모든 요소들로 흘러 넘칩니다

따라서 앱 바가 기본 색상을 선택하고 더 어두운 색상을 선택할 수 있습니다 상태 표시 줄의 음색 등, 그것은 꽤 강력합니다 그렇다면 우리가 생성 한이 라이브러리를 어떻게 사용합니까? 따라서 내 앱 디자인 파일로 전환하면, 이것은 I / O 앱의 일부 화면입니다 라이브러리의 구성 요소를 사용하여 디자인했습니다 저를 위해 Theme Editor가 생성되었습니다

Sketch의 라이브러리 기능을 사용하지 않은 경우, 꽤 멋지다 기본적으로 구성 요소를 공유하는 방법입니다 서로 다른 디자인 파일간에 또는 팀간에 공유 할 수 있습니다 그것은 매우 강력합니다 따라서 표준 스케치 삽입물을 사용하여 라이브러리에 액세스합니다

메뉴 그리고 제가 생성 한이 라이브러리로 스크롤합니다 그리고 바로 여기서 볼 수 있습니다 스티커 시트에서 우리가 방금 보았던 이러한 종류의 나무 구조로 배열됩니다 그래서 우리는 우리가 구성 요소의 다양한 변형, 구성 요소가있을 수있는 다른 상태로 내려갑니다

따라서 설계에 팹을 추가하려면, 메뉴에서 하나 잡을 수있어 내 디자인에 떨어 뜨려 라 그리고 오른쪽 경위 창에서, 재정의를 제공하는 것을 볼 수 있습니다 당신은 아이콘과 같은 것들을 바꿀 것입니다 따라서 Theme Editor를 통해 생성하면, 사용할 수있는 많은 구성 요소가 있습니다

그래서 우리는 그것이 생성 된 라이브러리를 이해합니다 그리고 그것을 당신의 디자인에 사용하는 방법 이러한 매개 변수 중 일부를 사용자 정의하기 시작하십시오 그래서 나는 나의 도서관으로 돌아가 Theme Editor를 열었다 그리고 내가 생각하는 첫 번째 매개 변수 중 하나 I / O 브랜드가 재미있을 수도 있습니다

I / O 로고에서 영감을 얻고 싶습니다 그 사이에 이런 종류의 탁월한 슬래시가 있습니다 나는 우리가 흥미로운 종류의 표면을 할 수 있다고 생각한다 모양 치료 그래서 기본적으로, 기준선에서, 우리는 이런 종류의 둥근 모서리 표면 모양

각도 설정으로 전환하겠습니다 대신에이 세 모서리의 선택을 취소하십시오 왼쪽 상단 모퉁이 반지름을 크랭크 업하십시오 여기 I / O 로고에서 영감을 얻으 려합니다 내 제품의 구성 요소에 깊이 삽입 할 수 있습니다

라이브러리에서 저장을 누르고 전환하면 내 디자인 파일에 스케치가이 작은 보라색 막대를 띄웁니다 모퉁이에서 기본 라이브러리에 업데이트되었습니다 이것을 클릭하면 diff가 거의 나옵니다 이것들은 모두 이러한 변화의 영향을받을 것입니다 그래서 그것들을 선택할지 말지를 선택할 수 있습니다

나는이 모든 변화를 가져갈 것입니다 이제는 형상 시스템을 알고있는 모든 구성 요소 업데이트 될 예정입니다 예를 들어이 하단 시트를 확대하면 당신은 그것이 커트 코너에서 픽업되는 것을 볼 수 있습니다 그리고 마찬가지로, 여기에있는이 제기 버튼에, 그것은 모양을 인식합니다 시스템의 일부 구성 요소는 다른 기능을 제공합니다

매개 변수를 선택할 수 있거나 가질 수없는 변형 체계 예를 들어, 여기에 표준 원형 프리젠 테이션을 사용하고 있습니다 그러나 Symbol 설정으로 들어가면 내가 선택한 곳으로 갈 수있어 다른 대안을 선택하십시오 만약 내가 매개 변수를 알고 싶거나 원하지 않는다면

예를 들어, 다이아몬드 또는 스퀘어 타입으로 픽업 할 수 있습니다 모양, 다른 모양 매개 변수에 데리러 것입니다 또는 원하면 원형으로 유지하도록 선택할 수 있습니다 그래서 그것들은 그들의 매개 변수를 고르지 않을 것입니다 유사 콘텐츠에 대해 말하면서 새로운 분산을 도입했습니다

텍스트 필드 중 우리는 곧 다시 돌아올 것입니다 내 디자인에서 바로 들어가서 선택할 수 있습니다 기본 텍스트 필드의 표준 종류는 무엇입니까? 다른 변형으로 전환 할 수 있습니다 내 스티커 시트에서 사용할 수있는 것들 그래서 거기에 우리가 간다

텍스트 필드의 다른 변형이 있습니다 바로이 윤곽선을 사용하면 더욱 분명합니다 살펴보고 싶은 다음 매개 변수는 활판 인쇄입니다 현재 I / O 앱은 Google Sans를 사용하고 있습니다 Google 브랜드의 서체 인 페어링 된 Roboto와 함께 나는 우리가 어떤 영감을 얻을 수 있다고 생각한다

그것은 개발자 이벤트입니다 그래서 저는 개발에서 영감을 얻으려고합니다 환경을 보호하고 모노 스페이스 글꼴을 사용해보십시오 이것이 Google 브랜드와 어떻게 작동하는지 확인하십시오 Theme Editor의 타이포 그라피 설정으로 들어가면, 테마 편집기에있는 여기에이 스케일이 있음을 알 수 있습니다 나를 위해 생성, 이런 종류의 의미 스타일을 제공 내 디자인 전반에 걸쳐 적용 할 수 있습니다

여기에있는 Google Sans를 선택하고 검색하면 모노 스페이스 (monospace)의 경우, 여기서 Roboto Mono를 사용할 것입니다 내 즐겨 찾기 중 하나, 그것은 어디서나 교환 할 것입니다 그 다른 폰트가 사용되었다는 것 내가 사는 곳마다 다른 곳이야 Google Sans의 다른 변형을 사용하면 수동으로 변경할 수 있습니다

그리고 그것은 흥미로운 것을 할 것입니다 여기를 보시면 Google Sans로 설정되어있는 동안 볼 수 있습니다 특정 글꼴 크기와 추적 및 무게를 가졌습니다 그리고 다른 글꼴, Roboto Mono로 전환했을 때, 해당 스타일에 대해 변경된 글꼴 크기, 추적 및 체중 그래서 여기에있는 것은 Theme Editor입니다

글꼴에 대해 꽤 영리합니다 글꼴의 특성을 살펴 봅니다 순서대로 광학적으로 수정하십시오 조화로운 스케일을 만들 수 있습니다 그래서 당신이 선택한 글꼴이 무엇인지 알 수 있습니다

x 높이 또는 획 두께가 다릅니다 또는 이와 비슷한 것을 보면, 사용하는 크기를 조정합니다 규모의 다양한 유형에 대한 이 조화로운 유형을 생산하기 위해서 모두 단지 글꼴을 선택함으로써, 그것은 저를위한 스케일을 생성합니다 그것은 꽤 훌륭하다

그래서 그것을 저장하고 내 앱 디자인으로 다시 전환합니다 다시 말하면, 도서관이 업데이트되었음을 ​​알려줍니다 나는 모든 변화를 가져갈 수있다 디자인 전반에 걸쳐 나는 다른 폰트를 마침내 사용하고 있었다 당신은 내 새로운 서체로 업데이트 된 것을 볼 수 있습니다

[박수 갈채] 테마 편집기로 이동하십시오 그래서 이러한 변화는 나에게 꽤 좋아 보인다 나머지 팀원들과 공유하고 싶습니다 머티리얼 플러그인을 사용하면 Theme Editor와의 긴밀한 통합을 얻으십시오 하지만 갤러리와도 정말 잘 통합됩니다

공동 작업을위한 도구 플러그인에서 바로 갤러리에 업로드하도록 선택할 수 있습니다 프로젝트 또는 하위 수집을 설정할 수 있습니다 그것을 넣고 곧바로 업로드 할 수 있습니다 한 번 업로드하면 준비가 완료됩니다

팀과 공유했습니다 그래서 나는 우리 팀과 공유 할 수있는 고유 한 URL을 얻습니다 그래서 갤러리에서 디자인 작품에 대한 개요를 얻을 수 있습니다 새로운 반복을 업데이트 할 수 있으므로 내 디자인이 어떻게 발전했는지 나는 논평 할 수있다

그래서 이것을 사람들과 공유 할 수 있습니다 다양한 디자인 기능에 대한 토론이 있습니다 그러나 나는 당신에게 내가 절대적으로 좋아하는 기능 중 하나를 보여 주겠다 이는 검사 모드입니다 이제 Inspect Mode를 사용하면 디자이너가 쉽게 작업 할 수 있습니다

개발자와 개발자를위한 핸드 오프 디자인에서 필요한 모든 정보를 얻을 수 있습니다 따라서 Inspect Mode를 활성화하면이 Inspector를 얻습니다 오른쪽으로 그리고 나서, 내가 가리 키거나 디자인의 항목을 선택할 때, 그것은 나에게 spec 일을 줄 것이다 근본적으로 나에게 자동으로 빨간 선을 그어 줄거야

그래서 그것은 나에게 크기, 위치 정보를 준다 그것은 선택과 모든 것의 몸과 사본을 나에게 준다 서체 정보 그것도 당신이 그들에서 사용하는 모든 아이콘을 데리러거야 소재 테마 그래서 어떤 Material Icons가 당신을 연결시킬 것입니다 Material Icon 사이트로 이동합니다

필요한 자산을 확보 할 수 있습니다 그리고 바로 거기에서 무엇보다도 갤러리는 구성 요소를 이해합니다 테마 편집기가 생성합니다 따라서이 팹을 여기에서 선택하면, 단지 말하지 않을 것입니다

이봐, 이건 파란색 동그라미 야 그것은 말할 것입니다, 이봐 요, 나는 그것이 팹이라는 것을 알고 있습니다 따라서 그것이 팹이라는 것을 알 수 있습니다 무엇보다도 플랫폼 링크 당 제공됩니다 문서를 참조하기 때문에 개발자 구현해야하는 구성 요소로 직접 이동할 수 있습니다

그리고 그들은 어떤 매개 변수도 주어질 것입니다 변경 사항은 구성 요소에서도 변경되었습니다 나는 이것을 충분히 강조 할 수 없다 더 이상 그림이 그림을 넘겨주는 것이 아니라, 이봐, 이걸 구현할 수 있기를 정말로 바란다 구성 요소 간의 밀 결합 Theme Editor와 Material Design 구성 요소간에 제공됩니다

그들은 동일한 구성 요소라는 것을 의미합니다 이 구성 요소를 사용한다는 의미입니다 이 매개 변수가 변경되었습니다 그래서 더 이상 추측하는 게임이 아닙니다 그래서 이러한 변화는 나에게 좋을 것 같습니다

@Will에 대한 Comment 기능을 열어 두겠습니다 이러한 변화가 갤러리에 업로드되었습니다 구현 준비 너에게 끝이야, 윌 LARCHE : 고마워, 닉

그는 위대하지 않습니까? [박수 갈채] 그래서 저는 엔지니어입니다 그리고 닉은이 갤러리 프로젝트를 나에게 공유했습니다 나는 링크를 얻었다 그리고 나는 그것을 클릭한다 그리고 나는 여기 들어올거야

그리고 나에게 Material Components 선적 서류 비치 자, Material Components 또는 MDC는 무엇입니까? Material Components는 오픈 소스 프레임 워크입니다 머티리얼 디자인을 구현합니다 Android 용 MDC, iOS, 웹 및 Flutter 용 MDC가 있습니다 Google에서 앱과 동일한 코드입니다

각각에는 수십 가지 구성 요소가 있으며 모두 닉이 더 일찍 이야기했던 시원한 것들을해라 오픈 소스이기 때문에 수수께끼가 없습니다 그들은 마법 상자가 아닙니다 보거나 사용자 정의 할 수있는 모든 것을 사용할 수 있습니다 그리고 우리는 코드를 기증 해 주시기 바랍니다

이제 Material Components의 새로운 텍스트 필드를 살펴 보겠습니다 어떻게해야합니까? MDC를 코드 기반에 추가하는 것은 매우 쉽습니다 Android 사용자는 디자인 지원에 액세스합니다 표준 지원 라이브러리 설정을 사용하여 Maven을 통해 라이브러리 웹에서는 노드 모듈 만 설치하면됩니다

Flutter에서 끝났습니다 Flutter에는 재질 구성 요소가 내장되어 있습니다 iOS에서는 CocoaPod를 사용할 수 있습니다 Pod 파일에 추가합니다 iOS에서 조금 더 자세히 살펴 보겠습니다

새 텍스트 필드를 구현하는 방법에 대해 설명합니다 따라서 MDC iOS의 모든 텍스트 입력란에는 입력 및 제어기를 포함한다 우리는 MDC 텍스트 필드와 아웃 라인 컨트롤러를 추가 할 것입니다 우리의 앱에 본질적인 콘텐츠 크기를 사용하여 레이아웃 할 수 있습니다

UI 텍스트 필드 대리자를 설정할 수도 있습니다 그리고 자리 표시자는 국경을 넘어서 뜰 것이다 MDC를 이미 사용하고 있다면 업그레이드가 매우 쉽습니다 이러한 새로운 디자인을 얻으십시오 CocoaPod를 사용하고 있다면, 포드 업데이트 MaterialComponents를 실행하십시오

그런 다음 컨트롤러 클래스를 변경합니다 예전의 수업에서 새로운 멋진 수업 중 하나에 이르기까지 그리고 너 끝났어 그런데이 텍스트 필드는 훨씬 더 우수합니다 이전 디자인보다 성능이 좋습니다 우리는 엄청난 양의 연구를 순서대로 수행했습니다

이러한 최적화 된 디자인, 많은 연구가 필요합니다 그리고 그것은 긴 형태로, 사용자가보고 상호 작용할 확률이 훨씬 높습니다 이 텍스트 필드는 이전 디자인보다 새로운 텍스트 필드 또는 자료에 대해 더 자세히 알고 싶다면 연구, 목요일 "Measuring Material"목요일을 볼 수 있습니다 12시 30 분에 iOS에서 이렇게하는 것은 쉬운 일입니다 하지만 안드로이드는 어떨까요? 글자 입력 레이아웃에 윤곽선 상자 스타일을 설정했습니다

요소입니다 웹에서는 요소를 바꿉니다 클래스 MDC 라인 리플, MDC 클래스의 요소 클래스 경로가있는 SVG가있는 노치 아웃 라인 MDC 노치 외곽선 경로 및 MDC 요소 노치가있는 윤곽 유휴 수정 자 클래스 MDC 텍스트 필드 개요를 잊지 마십시오 더 간단 할 수는 없습니다

그리고 Flutter에서 테두리를 윤곽선으로 바꿉니다 MDC Flutter에서 일하기 때문에 조금 편견이 있습니다 하지만 펄터가 완벽한 방법이라고 생각합니다 여러 플랫폼에서 재료 설계를 구현할 수 있습니다 한 번 해보면 iOS와 Android를 모두 얻을 수 있습니다

그리고 MDC가 바로 구워집니다 Flutter 용 기본 UI 프레임 워크입니다 새 프로젝트를 만들 때마다 이미 링크되어 있습니다 나는 그것을 좋아한다 이제 재료 텍스트 입력란 코드에 추가 할 수 있습니다

그러나 더 많은 것이 있습니다 거의 모든 재료 가이드 라인 구성 요소를 찾을 수 있습니다 자재 구성 요소 앱 바, 버튼, 카드, 칩, 대화 상자, 탐색, 탭, 잉크 잔물결 지금 수십 가지가 있습니다

그리고 오늘 Materialio/develop에서이 모든 것들을 이용할 수 있습니다 그리고 설계가 완료되지 않았기 때문에 항상 더 많은 것들이 추가됩니다 오늘은 디자인 리소스를 보여 줬습니다 오늘 Material

io에서 사용할 수 있습니다 Theme Editor, Gallery 및 Material Tools Suite의 사용법 브랜드를위한 디자인을 사용자 정의 할 수 있도록 도와줍니다 머티리얼 구성 요소가 만드는 방법 4 개의 플랫폼에서 이러한 디자인을 쉽게 구현할 수 있습니다 정확성과 용이성 그래서 당신이 I / O에 있다면, 그 밖의 무엇을 할 수 있습니까? 우리의 디자인 돔으로 갈 수 있습니다

디자인 리뷰 및 데모를 얻을 수 있습니다 박스 회담에 귀를 기울이십시오 그리고 당신은 또한 이야기를 보러 갈 수 있습니다 "Flutter가있는 코드 Beautiful UI 그리고 재료 디자인 " 우리는 Material Components를위한 30 개의 코드 랩을 가지고 있습니다

코드 랩에서 그리고 수요일 2시 30 분에 세션, "펄럭과 물질을 묻는다" 우리에게 와서 질문 할 수있는 곳 Flutter 앱에서 소재 디자인을 구현하는 방법에 대해 알아보십시오 고맙습니다

[음악 재생]

Data Binding – an easier way to connect android UI

안녕, 모두들 나는 파이살 아비드 야

나는 리그의 안드로이드 아키텍트 다 나는 너에게 여기에있다 Android 데이터 바인딩 지금, curently 당신이 listview를 만들 때 또는 recyclerview 어댑터 네가해야 할 일은 먼저 객체를 다운로드하십시오 당신은 아마도 Retrofit과 같은 것을 사용할 수 있습니다 JSON을 오래된 일반 자바 객체 POJO를 가져와 레이아웃 파일로 변환 그게 보통 의미하는 것은 톤과 톤 "findviewbyid"호출 여기 저기 그럼 확실하게해야 해

올바른 전망을 보이고 있다면 가시성을 망쳐 놓음으로써 시간이 많이 걸릴거야 자, 해결책이 있다면 어떨까요? 몇달 전에, Google I / O에서 Google, 오픈 소스 프로젝트 발표 안드로이드 데이터 바인딩 솔루션의 훌륭함 그 안드로이드 데이터 바인딩입니다 런타임에 실행할 필요가 없습니다 컴파일 타임에 실행됩니다 Android Studio를 사용하는 한 당신이하는 일은 몇 가지를 추가하는 것뿐입니다 그라데이션 플러그인을 설치하고 Android Studio 허용 컴파일러는 모든 컴파일 작업을 처리합니다

어댑터 생성하기 그게 너에게 어떤 의미인지 적은 코드 너는 너의 모든 것을 정말로 쓰고있어 레이아웃 파일 데이터 바인딩과 정말 흡사합니다 훌륭한 솔루션입니다 그리고 지금 우리가 보지 않는 이유는 무엇입니까? 내 노트북에서 어떻게 보는지 우리는 실제로 프로젝트에 데이터 바인딩 먼저, 우리가 개발할 샘플 앱 매우 간단한 앱입니다

보여줄 모든 것이 Hello World입니다 및 정수 정말로 사소한 것 같네요 하지만 네가이 일을했다면 정상적인 Android 개발에서 레이아웃 파일을 만들어야합니다 어댑터 만들기 findviewbyid를 두 번 그것이 제대로 재활용되고 있는지 확인하십시오 일단 다 끝났어

메모리 누출이 없는지 확인하십시오 Android 데이터 바인딩으로 매우 간단합니다 먼저해야 할 일은 그 buildgradle 파일에서 전체 프로젝트 당신은 다음의 두 줄을 포함합니다 이 gradle을 1

30 베타 버전으로 업그레이드 또한 데이터 바인더 플러그인을 추가합니다 다음으로하고 싶은 일은 애플리케이션의 buildgradle로 이동하십시오 추가 com

androiddatabinding 용 플러그인 당신이 이것을 얻지 못한다면 걱정하지 마라 화면보기 이 작업을 수행하는 방법의 맨 아래에 메모가 있습니다 웹 사이트에서 이를 위해 리사이클 뷰를 사용했습니다 그래서 나는 recyclerview 플러그인을 추가했다

내 buildgradle 리사이클 러 뷰를 사용하지 않는 경우 매우 가벼운 목록보기입니다 그것은 많은 최적화를 수행합니다 네가하고 싶은 다음 일은 모델 파일 만들기 여기에 간단한 객체가 있습니다 모델 파일 우리에게는 여기에 2 가지의 증언이 있습니다

우리는 이름이있다 int 나이 데모 용으로 이름을 공개 문자열로 남겼습니다 사적 끈으로서의 나이 getter 및 setter 변수 사용 이것이 우리에게 할 수있는 것은 레이아웃 파일 대신에 텍스트를 정수로 쓴다 우리는 실제로 나이를 문자열로 변환합니다 내가 두 번째로 의미하는 것을 보게 될 것이다

다음 것 너는 만들고 싶어 실제 레이아웃 파일 이 객체를 저장하는 객체 이것은 안드로이드 데이터 바인딩의 마법입니다 나는 여기에 레이아웃 파일을 만들었다 adapter_simple_projectxml 다른 레이아웃 파일과 비슷합니다 우리가 디자인에 간다면 그것은 본다 여기에 아무것도없는 레이아웃 파일처럼 오른쪽에, 내가 가지고있는 TextView 2 개를 볼 수 있습니다

TextView에 ID가 없다는 것을 알 수 있습니다 나는 그것을 필요로하지 않는다 당신이해야 할 한가지 Android 용 데이터 바인딩 레이아웃 클래스로 모든 것을 랩핑한다 이 클래스를 사용할 수 있습니다 Android를 적용 할 때 데이터 바인딩 플러그인

당신이해야 할 다음 일은, 데이터 바인딩 알리기 당신이 사용하는 수업 너는 여기에서주의 할 것이다, 나는 "sompleobject"라는 변수를 가지고있다 그리고 그것은 간단한 객체 클래스를 가리키고있다 우리는 이전에 만들었습니다 이제 나머지 레이아웃은 다른 레이아웃과 같습니다 Android 레이아웃

나는 LinearLayout을 가지고있다 및 2 TextViews 여기 흥미로운 것은 텍스트 값을 보면 두 TextViews 모두 참조가 표시됩니다 simpleobjectname 및 simpleobjectage 이제이 사실을 알게 될 것입니다

우리 시대 변수에 대한 게터와 세터 왜냐하면 우리가 단지 숫자 1, 정수 1 실제로 레이아웃을 찾으려고합니다 또는 문자열 값 정수 1을 참조하는 문자열 1보다는 여기에 몇 가지 텍스트 스타일을 추가했습니다 이전에 본 것처럼 ~을위한 푸른 색 이름 시대의 붉은 색 일단 우리가 그렇게하면, 우리의 어댑터를 만들 차례입니다 이 어댑터는 조금 특별합니다 우리는 findviewbyids를 많이하지 않습니다

또는 뷰의 조작 우리는 단지 가지고있다 간단한 리사이클 뷰 어댑터 확장 SimpleObjectHolder 우리는 그걸 두 번째로 살펴볼 것입니다 뷰 홀더를 만들 때 우리는 다음과 같은 클래스를 만듭니다 동적으로 생성 된 우리는이 클래스를 실제로 만들지 않았다는 것을 알 수 있습니다 AdapterSimpleProjectBinding 레이아웃 파일의 이름에 따라 AdapterSimpleProject 자동으로 생성한다

그래서 당신은 이것을 창조합니다 파일 당신은 DataBindingUtil은 정적 클래스입니다 레이아웃을 부 풀린다 이걸 언급 한 사람 파일 그리고 당신은 그것을 당신에게 넘깁니다 SimpleObjectHolder 우리가 지금보고있는 것 우리는 통과한다

바인딩 객체 홀더로서 우리가 만든 방법으로 BindConnection 우리는 SimpleObject를 전달한다 그리고 우리 바인딩을 말하다 내 간단한 개체 modle 걸릴 레이아웃에 바인딩합니다 bindingsetSimpleObject 다시 말하지만, 이것은 모두 동적으로 생성됩니다 AdapterSimpleProjectBinding 마지막으로, 다른 리사이클 뷰어 홀더와 마찬가지로 우리는 재정의 할 필요가있는 방법을 가지고있다

onBindViewHolder 홀더 값과 위치를 전달합니다 우리는 소유자를 데리고 우리는 bindConnection 우리는 모델을 전달한다 우리가 bindConnection에 들어가면 그게 우리가 방금 본거야 bindingsetSimpleObject 일단 끝나면 그게 다야

어댑터를 만들었습니다 필요 없음 findviewbyids 많은 날짜를 조작 할 필요가 없다 모든 것이 거기에있다 상자에서 작동합니다 그리고 네가 실제로 어떻게 생각해? 어댑터 할당 리사이클 러보기로 다른 어떤 것과 마찬가지입니다

당신이 한 Android 프로젝트 당신 리사이클 러 뷰의 인스턴스 가져 오기 몹시 떠들어 대다 여기에 모델 객체들 방금 for 루프가 있습니다 100 번 실행되는 "Hello World"를 지정합니다 나이 이전 동영상에서 본 것처럼 우리는 어댑터를 인스턴스화합니다 보통처럼 일반 Android 개발 우리가 LinearLayoutManager를 설정 한 recyclerView 다시, 일반 Android 개발과 마찬가지로 마지막으로 어댑터를 설정합니다

여기에는 새로운 것이 없습니다 그들은 모두 친숙해야합니다 새로운 유일한 것은 레이아웃 파일 새 데이터 바인딩 호출을 추가하십시오 당신은 그것을 가지고 있습니다 Android 데이터 바인딩을 본 것처럼 정말 강력합니다

그것은 많은 개발 속도를 높인다 네가하는 일 목록보기를 인스턴스화하려는 경우 일부 데이터를 보여줍니다 동영상을 시청 해 주셔서 감사합니다 다른 것이 있으면 당신은 자유롭게 나에게 다가 가라

에 Twitter, @ 파이살 알비드 그것은 아래에있을 것이다 나는 안드로이드 데이터 바인딩을 바란다

너의 삶을 편하게 해준다 고마워요 : D 그럼 앱을 열자 받은 새 알림이 있습니다 그것은 말한다 : Android Wear 프레스 그것이 전화 통보입니다 시계에서, 우리는 볼 것이다

그게 맞아 공고

The Components of Material Design (Android Dev Summit '18)

[음악 재생] CAMETON KETCHAM : 헤이 제 이름은 카메론 케 um입니다

나는 Material Design Components 팀 또는 MDC Android 그리고 뉴욕시 사무실에서 일합니다 GAUTHAM SAJITH : 내 이름은 Gautham Sajith입니다 MDC Android에서도 작업합니다 저는 샌프란시스코에 있습니다

CAMERON KETCHAM : 그리고 우리는 조금 이야기 할 것입니다 머티리얼 디자인 컴퍼넌트 (Material Design Components)와 앱 테마에 대해 알려드립니다 이렇게 빨리, 우리가 토론 할 것입니다 Material Design의 간단한 역사, Material Theming 머티리얼 디자인 구성 요소를 사용하여 색상, 유형, 및 Shape 하위 시스템, 이러한 하위 시스템 적용 방법 우리의 석방 과정으로, 그리고 조금 기여하고 있습니다 이렇게 빨리, 재료 디자인 도서관의 간단한 역사

머티리얼 디자인은 2014 년에 처음 발표되었습니다 그리고 디자인 도서관도 없었습니다 그런 다음 1 년 후인 2015 년 I / O에서 Google이 마침내 디자인 지원 라이브러리를 발표했다 재료에 대한 많은 코드를 가져 오는 데 도움이되었습니다 다음을 포함한 특정 구성 요소에 대한 설계 탐색 드로어, 플로팅 동작 버튼, 스낵 바, 등등

그러나 아직도 그다지 그렇게 많지 않았습니다 그리고 올해 I / O에서 우리는 Material Theming을 발표했습니다 보다 큰 엔지니어링을 목표로 그것 뒤에 팀 따라서 우리는 많은 구성 요소를 구현하는 중입니다 Material Design spec을 기반으로합니다

그래서 재료 Theming Material Design의 원래 문제점은 무엇입니까? 글쎄, 그것은 디자인 시스템의 훌륭한 초기 버전이었습니다 그것은 많은 경우에 효과가있었습니다 그러나 브랜드의 표현으로는 부족했다 그래서 여기에 이메일 앱의 예가 있습니다

다른 모든 앱과 비슷합니다 Material Design을 사용합니다 이메일 앱이라고해도 과언이 아닙니다 내 의견으로는 여기에 사물의 예가 있습니다

Material Theming으로 할 수있는 일 앱을 눈에 띄게 만들 수 있습니다 그리고 우리는 약간의 세부 사항에 들어갈 것입니다 이렇게 빨리, 어떻게 theming 작동합니까? 기본적으로 Material Theming은 시스템입니다 우리가 당신을 돕기 위해 디자인 한 당신은 당신의 애플 리케이션을위한 독특한 디자인 글꼴, 색상 등의 몇 가지 사항을 결정하면됩니다

모양 등등 그리고 이것은 사용할 수있는 Material Design 스케치 플러그인입니다 디자인 아이디어를 만드는 데 도움이 될 것입니다 앱을 개발하는 데 사용할 수 있습니다 해당 도구에 대한 자세한 정보는 material

io를보십시오 우리가 한 몇 가지 물질 연구가 있습니다 Material Theming의 예를 보여줍니다 그리고 당신은 그것들 모두가 아주 다르게 보임을 볼 수 있습니다 그리고 이것들이 material

io에 훨씬 더 많이 있습니다 GAUTHAM SAJITH : 멋지다 이제 어떻게해야하는지에 대해 이야기 해 봅시다 자료를 사용하여 실제로 시작하기 구성 요소 라이브러리 이 시나리오를 상상해보십시오

이 이야기를 통해 몇 번 돌아 오십시오 당신은 당신이 만든 상당히 평범한 앱을 가지고 있습니다 바로 직선 AppCompat에서 그리고 팀 메이트가이 재 설계를 요청합니다 머티리얼 디자인 스펙을 사용합니다

그럼 어떻게 할 건데? 따라서 귀하는 지원 라이브러리 디자인에 대해 잘 알고있을 것입니다 패키지,이 v28 버전, 우리 도서관을 사는데 사용할 수 있습니다 그리고 이것을 사용할 수 있습니다 그러나 더 이상 업데이트되지 않습니다 따라서 conductgoogle

android 소재를 사용해 보셔야합니다 라이브러리, 안드로이드 X 주목할 사실 하나 행동 안드로이드 지원 및 행동을 사용할 수 없습니다 Google Android 패키지가 함께 제공됩니다

따라서 Android X로 전환하려면, 개발자에게 멋진 리팩터링 도구가 있습니다 안드로이드 사이트 그러면 앱을 리팩터링하는 데 도움이됩니다 그런 다음해야 할 일은 우리의 Material Themes를 사용하고 있습니다 그래서 우리는 기존에 상응하는 주제를 제공합니다 AppCompat 테마

그리고 이러한 테마는 다양한 속성을 제공합니다 모양, 색상, 유형 테마 중 일부를 수행하는 데 도움을줍니다 우리가 얘기 할거야, 사용할 수있는 기본 스타일은 물론 모든 구성 요소에 걸쳐 예를 들어, 귀하의 테마가 AppCompat Light에서 확장되면, 전환하기 만하면됩니다 themematerialcomponents

light 그리고 당신은 우리의 모든 속성을 가져야합니다 뿐만 아니라 우리의 모든 구성 요소 스타일 제가 언급했듯이, 많은 새로운 속성들이 있습니다 우리가 소개 할 것입니다

우리 구성 요소를 사용하려고하면 이러한 속성이 정의되지 않은 경우, 당신은 런타임에 Theme Enforcement Error를 얻게 될 것입니다 스타일은 테마에서 이러한 속성을 찾기가 쉽습니다 그리고 그것들이 존재하지 않는다면 그것은 런타임에 충돌 할 것입니다 그래서 이것에 대한 해결책은 우리의 테마를 사용하는 것입니다 그것은 당신에게 모든 속성을 줄 것이다

전체 주제로 전환 할 준비가되지 않았다면 꽤 아직 – 당신은 속성을 얻고 싶습니다 스타일들 중 – Bridge 테마라고 불리는 것을 사용할 수 있습니다 그리고이 브릿지 테마가하는 일은 그들이 당신에게 제공하는 것입니다 스타일링을 수행하는 데 필요한 모든 속성 그러나 그들은 당신에게 어떤 기본 스타일도주지 않습니다

따라서 구성 요소 스타일을 하나씩 사용하도록 선택할 수 있습니다 전환 할 준비가되었습니다 예를 들어 Bridge 테마에서 확장하는 경우, BottomAppBar 스타일을 사용하도록 선택하려는 경우, 기본 BottomAppBar 스타일을 정의 할 수 있습니다 당신의 주제에 그런 다음 모든 BottomAppBars 머티리얼 구성 요소 스타일을 얻습니다

CAMERON KETCHAM : 이제 우리는 단지 몇 가지 새로운 구성 요소에 대해 조금 이야기 할 것입니다 Material Theming을 통해 우리는 몇 가지 새로운 것을 소개했습니다 BottomAppBar와 같은 BottomAppBar는 탐색 및 키 동작을 표시합니다 모바일 화면 하단에 있습니다 한 손으로 만하는 사람들에게 좋은 것은 무엇입니까? 엄지 손가락을 사용하여 장치와 상호 작용합니다

꽤 간단합니다 코디네이터 레이아웃을 사용하여 BottomAppBar 간의 모션 플로팅 액션 버튼이 있습니다 여기서는 BottomAppBar에 대한 간단한 XML 만 있습니다 할 수있는 일 중 몇 가지 FAB의 수직 오프셋을 설정합니다 FAB 크래들 여백을 설정할 수도 있습니다

FAB와 BottomAppBar 사이의 거리입니다 둥근 모서리 반경뿐만 아니라, 이는 BottomAppBar가 FAB를 충족시키는 모서리입니다 스크롤 할 때 BottomAppBar 숨기기를 사용할 수 있습니다 그리고이 정렬 모드를 설정할 수도 있습니다 자동으로 FAB에 애니메이션을 적용합니다

네비게이션하는 경우 유용합니다 다른 조각이나보기 사이 시각적 인 차이를주고 싶다 서로 다른 화면 사이 이미 툴바를 사용하고 있다면, BottomAppBar를 사용하면 쉽게 시작할 수 있습니다 도구 모음에 대한 지원 작업 표시 줄을 설정하는 경우, BottomAppBar 대신 설정하십시오

그리고 다른 모든 것은 같은 방식으로 작동합니다 그러나 On Menu Item을 사용할 수도 있습니다 Listener를 직접 클릭하십시오 BottomAppBar에 있습니다 GAUTHAM SAJITH : 우리는 또한 버튼의 개조 된 버전 소재 버튼 호출

스타일을 훨씬 단순하게 만들기 위해 개편되었습니다 따라서이 Material Button 구성 요소를 XML에 넣으면, 스타일이 지정된 버튼을 얻을 수 있습니다 그러나 전체 테마를 사용하는 경우, 실제로 XML에서 Button 태그를 사용할 수 있습니다 그리고 우리는 Custom View Inflation이라고 불리는 것을합니다 이 태그는 재료 버튼으로 자동 팽창됩니다

꼬리표 그런 다음 비활성화 된 상태를 설정할 수 있습니다 이 버튼에 그리고 모든 주들이 이관 할 것입니다 색상이 전송됩니다

이 버튼에 아이콘을 설정할 수 있습니다 아이콘 속성뿐만 아니라이 아이콘을 설정하면 스타일 그리고이 스타일은 선택 사항입니다 그러나 그것은 패딩을 약간 조정할 것입니다 단추에 대한 시각적 균형을보다 균등하게 달성 아이콘이있을 때

속성을 사용하여 아이콘 크기를 변경할 수 있습니다 개요 단추 스타일을 설정할 수 있습니다 우리가 사용하는 기본 스타일 중 하나입니다 이 헤어 라인 윤곽선 단추를 얻으려면이 단추를 제공하십시오 버튼의 배경색을 설정할 수 있습니다

배경 색조 속성을 설정합니다 여기에 색상 상태 목록을 제공 할 수 있습니다 따라서이 경우 버튼이 활성화되어 있으면 보라색으로 표시됩니다 사용 중지되면 회색으로 표시됩니다 다른 속성을 설정할 수 있습니다

획 너비, 획 색상, 코너 반경을 사용하여 스타일을 지정합니다 아이콘 전용 버튼 만 만들 수도 있습니다 이 경우 아이콘을 설정합니다 아이콘 패딩을 0으로 설정하는 것뿐만 아니라, 버튼의 중앙에 아이콘이 표시됩니다 또한 콘텐츠 설명을 설정하고 있습니다

이 버튼에 그래서 텍스트가 없으므로 접근성 측면에서, 콘텐츠 설명을 설정해야합니다 그래서 사람들은 버튼의 내용을 알게 될 것입니다 버튼에 리플 색상을 설정할 수도 있습니다 예를 들어 여기에 자주색 리플을 설정하면, 버튼에 적용됩니다

색상 상태 목록이나 16 진수 값을 여기에서 설정할 수 있습니다 보시다시피 버튼 위에 보라색 잔물결이 있습니다 하지만 알파가 이미 내재되어 있기 때문입니다 리플에 녹색 버튼 상단에 자주색 리플이 있습니다

그리고 이들은 몇 가지 예입니다 이 라이브러리에서 제공하는 다른 구성 요소 중 우리는 여러 종류의 칩을 가지고 있습니다 채우기 및 개요가있는 텍스트 필드가 있습니다 스타일, 암호 표시 및 숨기기 기능 및 문자 계수기 그런 다음 매우 맞춤 설정할 수있는 탭 레이아웃이 있습니다

게다가 CAMERON KETCHAM : 좋습니다 이제는 테마에 대해 조금 있습니다 MDC는 Android의 기본 테마에 크게 의존합니다 테마 및 스타일이 작동하는 방식을 간단하게 다시 살펴 보겠습니다

XML의 뷰에 직접 적용된 것은 먼저 사용됩니다 여기에서 속성을 변경하면 단일보기를 변경하십시오 스타일을 업데이트 할 수도 있습니다 따라서 스타일에 속성을 설정하면 이 스타일은이 스타일을 사용하는 모든보기에 영향을줍니다 스타일에 정의되지 않았거나 스타일이 설정되어 있지 않은 경우, 기본 스타일로 돌아갑니다

그래서 여기에서, 당신이 길을 바꾸고 싶다면 전체 구성 요소 그룹이 보입니다 기본 스타일을 설정할 수 있습니다 마지막으로 속성이 다른 곳에 정의되지 않은 경우, 테마를 살펴볼 것입니다 Material Theming이 정상적으로 작동하는 방식 최상위 수준의 속성 집합이 있습니다 당신은 타이포그래피, 색, 모양 등등

또한 모든 구성 요소의 기본 스타일입니다 그러나 더 세분화 된 제어가 필요한 경우, 당신은이 층들 중 어느 곳에서나 연결할 수 있습니다 단일보기의 색상 만 변경하고, 또는 특정 구성 요소 전체의 색상 만 표시 할 수 있습니다 여기에 우리의 Chip 스타일 라이브러리 예제가 있습니다 테마 속성을 참조하는 몇 가지 값을 정의합니다

그리고이 디자인의 힘은 사실에서 나온 것입니다 우리 도서관의 다른 스타일들이 참고할 수있는 것들 이 같은 속성 여기에 Button의 예제가 있습니다 그리고 이것들 둘 다 같은 모양의 외관을 가지고 있습니다 이것은 작은 컴포넌트 모양 모양입니다

즉, 우리가 룩을 업데이트하고자한다면 이 모양에 대한 우리의 응용 프로그램의 느낌 – 이 작은 구성 요소들에 대해서는 우리가해야 할 모든 것 이 속성을 테마의 한 위치에서 업데이트합니다 그리고 우리는 당신에게 그것을 조금하는 방법의 예를 보여줄 것입니다 각 테마 속성의 효과는 무엇입니까? 불행히도, 그것은 완전히 간단하지 않습니다 우리는 의미있는 방식으로 테마 속성을 적용하려고합니다 그러나 그것은 확실히 가능합니다

서로 다른 색상의 값을 선택합니다 같이 잘 어울리지 않을 수도 있습니다 아마 각 구성 요소에 대해 materialio를 확인해야합니다 어떻게 반응하는지 볼 수 있습니다

그러나 가능한 또 다른 간단한 것은 – 당신이 할 수있는 또 다른 간단한 해결책, 잠재적으로 디버그 테마를 만드는 것입니다 엉뚱한 값을 다른 속성으로 설정합니다 그리고 사물이 어떻게 보이는지보십시오 예를 들어 BottomAppBar 페이지가 있습니다 material

io 사이트에 있습니다 컨테이너 자체가 표면이라는 것을 알 수 있습니다 아이콘은 On Surface입니다 그리고 우리는 어떤 속성들에 대해서 이야기 할 것입니다 밖을 내다 볼 수있을뿐만 아니라 수정할 수 있습니다

다음 섹션에서 따라서 서브 시스템을 테마로합니다 우리는 현재 3 개의 테마 서브 시스템 인 Type, Color, 및 모양 그리고 이것들은 당신이 개발자로서, 앱을 테마로 조정해야합니다 다행히도 대부분의 사람들은 텍스트 출현에 익숙합니다

그러나 우리는 Material Theming, 테마 속성을 사용하여이 텍스트를 참조합니다 형세 다음은 툴바 예제입니다 이는 스타일이 아닌 Headline Six 속성을 사용합니다 직접

그리고 Body 1 속성을 사용하는 사본이 있습니다 이들은 우리가 정의한 유형 속성입니다 그래서 당신이 당신의 주제에서 이것들을 오버라이드한다면, 앱의 스타일과 모양을 설정할 수 있습니다 색상은 또 하나입니다 그리고 아마도 AppCompat Color에 익숙 할 것입니다

기본 및 색상 악센트 Material Theming의 경우, 우리는 더 넓은 범위의 색상을 가지고 있습니다 색상을보다 잘 제어 할 수 있습니다 앱의 다른 부분에 대해 확장 된 팔레트 색상의 의미 론적 이름입니다 Color Theming에서 작동합니다

맨 위에는 기본, 기본 변형, 2 차, 2 차 변형 그것들은 모두 브랜드 컬러입니다 그것들은 당신이 일반적으로 주제가되어야하는 것들입니다 앱 스타일 배경, 표면 및 오류 색상도 있습니다

스타일을 지정할 수 있지만 꼭 그렇게 할 필요는 없습니다 그리고 나서, On Primary, On Secondary– 색상의 변형에 관한 것 – 그들이 그릴 때 접근 가능해야한다 다른 색상 위에 그래서 예를 들어, On Primary는 원색 위에 그려 질 것입니다 따라서 위에 표시된 텍스트가있는 경우 기본 배경색은 기본 색상이어야합니다

이것들은 우리가 정의한 색상 속성입니다 새로운 것을 많이 볼 수 있습니다 우리는 AppCompat에서 나온 일부를 재사용하려고했습니다 그리고 우리는 우리가 사용하는 안드로이드 컬러 배경을 가지고 있습니다 그냥 일반 Android입니다

그 속성의 버전 모양은 당신이 테마로 할 수있는 또 다른 하위 시스템입니다 그리고 모든 것은 MaterialShapeDrawable에서 발생합니다 그래서 우리는 MaterialShapeDrawable 형상 가능한 구성 요소의 배경으로, 단추, 카드, FAB, BottomAppBar, BottomSheet, 칩, 등등 그리고 그것이 작동하는 방식은 모서리 및 코너 처리입니다

그래서 우리는 가장자리와 모서리 처리가 있습니다 둥근 모서리와 절삭 모서리에 대해 정의 된 거의 모든 버튼 또는 상호 작용 가능한 구성 요소입니다 당신이 찾을 수있는 그러나 당신은 언제나 당신 만의 것을 만들 수 있습니다 여기 코 틀린 코드의 예가 있습니다 둥근 모서리 처리를 정의합니다

그리고 그것을 MaterialShapeDrawable에 설정합니다 모든 것에 둥근 모서리를 적용하는 것 그리고 XML 버전도 있습니다 그래서 XML로하고 싶다면 우리는 Shape Appearance라는 새로운 속성이 있습니다 그리고 Text Appearance와 비슷합니다

여기에있는 속성은 코너 패밀리와 모서리입니다 크기 그리고 이것은 반경이 24dp 인 둥근 모서리로 설정됩니다 그리고 개별 구석을 무시할 수 있습니다 여기서는 왼쪽 상단을 재정의하는 것입니다

자르고 오른쪽 하단 구석에 구석 크기가 0입니다 XML에서도 동일한 작업을 수행 할 수 있습니다 한 가지주의해야 할 것은 우리가 Shape Appearance 여기에 오버레이, 기본적으로 동일한 것입니다 우리는 단지 속성을 정의한다 우리가 재정의하려는 따라서 테마 오버레이와 비슷합니다

즉, 소재가 버튼 자체는 기본적으로 모양 모양을 이미 가지고 있습니다 그리고 여기, 우리는 단지 좌상단을 설정하고 있습니다 오른쪽 상단 모서리가 0이되도록 dp로 자릅니다 다른 모든 것은 스타일에서 상속됩니다 버튼의 Material Theming의 핵심 아이디어 중 하나는 앱에 일관성을 부여합니다

그래서 우리는 이러한 모양 매핑을 정의했습니다 이들은 서로 다른 구성 요소 그룹입니다 앱의 일관성있는 모양을 유지하는 데 도움이 될 수 있습니다 모양을 통해 표면을 연결하여 느낌을 느낄 수 있습니다 따라서 작고, 중간이고, 큰 구성 요소가 있습니다

그리고 이것들은 당신이 당신의 테마에 설정할 수있는 속성입니다 따라서 모든 작은 구성 요소를 다시 정렬하려면 잘라낸 오른쪽 구석이나 다른 것을 가지고 있다면, 그렇게 할 수 있습니다 여기에 내가 말했던 것처럼, 우리는 작은 컴포넌트 스타일을 재정의하고 있습니다 그래서 우리는 작은 외양을 재정의했습니다 테마의 작은 컴포넌트 모양 모양 우리 스타일로

그리고 여기, 우리는 우상을 세울 것이다 그리고 우리는 여기에 부모를두고 있습니다 그래서 다른 모든 것을 상속 받게됩니다 다른 부분의 둥근 모서리 그림자는 우리가 언급하고 싶은 것입니다

볼록한 모양에 대해 기본 표고가 지원됩니다 API 21 이상을위한 롤리팝 사용 하지만 우리는 그림자를 모두 오목한 15의 API로 백 포트하고 있습니다 일반적인 경우의 볼록한 모양, 둥근 모서리 또는 절단 모서리뿐만 아니라 BottomAppBar의 경우 이것은 내부에 컷 아웃이 있기 때문에, 네이티브 쉐도우를 얻지 못할 것입니다 그래서 우리는 그라디언트로 그림자를 가짜로 만듭니다 GAUTHAM SAJITH : 이제 우리는 우리의 테마 서브 시스템에 대해 조금 들었습니다

앱에 실제로 적용하는 방법을 살펴 보겠습니다 다시이 시나리오로 돌아옵니다 이 AppCompat 앱을 적용하고 싶다고 가정 해 보겠습니다 이러한 테마 하위 시스템 중 그래서 우리는 무언가를 건설 할 것입니다

저렇게 조금 생겼어 그리고 분명히, 자신의 앱을 만들 때, 이보다 훨씬 더 아름답고 응집되어 보일 것입니다 그러나 우리는 우리만큼 많은 손잡이를 조정하고 있습니다 우리가 만든 기능의 일부를 보여줄 수 있습니다 그래서 당신이해야 할 첫 번째 일은 AppCompat Light No Action Bar 테마를 사용하는 경우, 머티리얼 구성 요소 테마로 전환 할 수 있습니다

이 경우 Bridge 테마를 사용하고 있음을 알 수 있습니다 이러한 구성 요소를 사용하기로 선택하기 때문에 하나씩 하지만 일반적으로 전체 테마, 일반 테마, 다리를 시험해보기 전에 먼저 어떻게 보이는지 보아라 테마 그러니 가장 먼저하는 일은 당신은이 테마 색 속성을 설정합니다

그래서 당신이 이미 알고있는 기존의 것들 중 일부 색상 1 차 및 색상 2 차입니다 그것들은 여전히 ​​존재합니다 그런 다음 새로운 테마 색 속성 중 일부 (예 : 색상) 1 차, 2 차, 컬러 서피스 및 컬러 서페이스 또한 설정됩니다 이 Color Secondary가 실제로 어디에도 나타나지 않습니다 귀하의 애플 리케이션에 아직,하지만 그렇게됩니다

다음으로 우리가하고 싶은 일은 머티리얼 버튼을 얻는 것입니다 그래서 우리는 AppCompat 버튼을 사용하기 전에 그리고 나서 테마에 Material Button 스타일을 설정하면, 모든 버튼이 머티리얼 버튼으로 바뀌어야합니다 XML 태그를 변경할 때 앞에서 언급했듯이, 전체 테마를 사용하고 있다면, 이 인플레이션은 자동으로 발생합니다 따라서 실제로이 XML을 전혀 변경하지 않아도됩니다

우리는 다른 기본 스타일들을 가지고있다 우리가 여기에 제시 한 것 모든 구성 요소에는 기본 스타일이 있습니다 테마로 설정할 수 있습니다 일반적으로 구성 요소 이름과 스타일에 불과합니다

예를 들어, 카드 스타일을 설정하려면, 테마에 Material Card View Style을 설정합니다 그리고 나서, 우리는 카드보기를 변경해야합니다 이 경우 XML의 Material Card View로 이동하십시오 그리고 나서 우리는 몇 가지 속성을 적용 할 것입니다 이 카드들에

예를 들어, 카드 높이, 스트로크 색상, 및 획 폭 그리고 그것은 모든 카드에 표시됩니다 기본 스타일을 설정하기 때문입니다 모든 카드는이 기본 스타일을 봅니다 그리고 기지를 바꾸고 싶다고 해

모든 버튼의 스타일 당신은 당신 자신의 Button 스타일을 정의하고 그것의 부모를 설정할 것입니다 기본 스타일 중 하나 인 아웃 라인 버튼으로 그러면 모든 단추가 개요 단추로 변경됩니다 이제 모든 버튼에 모양 테마를 적용 할 수 있습니다 그래서이 모양을 정의 할 것입니다

모양 모양 버튼 스타일 그리고 그 버튼 스타일에서는 오른쪽 모서리를 자르고 왼쪽 모서리를 설정하려면 반올림 그리고 코너 크기를 설정합니다 그리고 이제, 당신은이 화살 모양의 버튼을 가지고 있습니다 또한 Shape Appearance Overlay를 사용하여이 작업을 수행 할 수 있습니다

버튼에는 기본적으로 둥근 모서리가 있기 때문입니다 당신은 둥근 것을 설정할 필요가 없습니다 왼쪽 모서리 따라서 모양 모양 오버레이를 사용하는 경우, 당신은 변화하고있는 것을 설정할 수 있습니다 정상적으로 적용됩니다

그리고 나서, 우리는 아이콘 버튼을 갖고 싶다고 말합니다 이 아이콘 버튼 스타일을 정의 할 수 있습니다 패딩과 분 너비를 원하는대로 설정하십시오 그리고 이것을 XML로 직접 Button에 적용하고, 아이콘 및 컨텐트 설명을 설정할 수 있습니다 그리고이 공유 아이콘 버튼이 있습니다

그 공유 텍스트 버튼 BottomAppBar로 전환 할 수도 있습니다 그래서 BottomAppBar를 설정해야합니다 당신의 주제에 스타일 그런 다음 XML 레이아웃에서 최상위 앱 표시 줄을 제거하십시오

이 BottomAppBar를 여기에 추가하십시오 플로팅 액션 버튼을 추가 할 수도 있습니다 떠있는 동작을 추가하여이 BottomAppBar에 넣습니다 버튼을 레이아웃에 추가하십시오 그런 다음 Layout Anchor를 설정합니다

BottomAppBar의 ID를 가리키는 특성 이 FAB에는 AppCompat의 청록색이 있습니다 우리가 기본 부동 작업을 설정하지 않았기 때문입니다 버튼 스타일 한 번 설정하면 이제 그걸 볼 수 있습니다 컬러 보조 및 컬러 보조를 사용합니다

그리고 리플 효과도 있습니다 그런 다음 우리 카드의 내용에 대해 텍스트 스타일을 적용 할 수 있습니다 모든 텍스트를 Color On Surface, 이전에 있었던 것보다 우리는 소재 테마를 사용하려고합니다 오버레이, 잠시 후에 얘기하겠습니다

하지만이 소재의 테마 오버레이는 거의 해당 구성 요소의 모든 내용에 대한 테마를 설정합니다 따라서이 경우에는 Color Primary라는 텍스트를 설정합니다 Tertiary에서 텍스트의 색을 설정합니다 그래서 소재 테마 오버레이, 당신 Android 테마에 대해 들어 보셨을 것입니다 그것은 뷰의 하위 섹션을 스타일링 할 수있는 방법입니다

계층 그리고 이것의 한 가지 일반적인 사용법은 스타일에 있습니다 앱에서 어두운 색의 툴바라고 말하면됩니다 Android 테마의 단점은 기본 스타일에서는 작동하지 않습니다 예를 들어, 모든 카드 스타일을 지정하려면, 당신은 정말로 안드로이드 테마를 설정할 수 없습니다

따라서 소재 테마 오버레이는 속성입니다 우리가 정의한 것은 구성 요소가 지원하는 것입니다 기본 스타일로 작동합니다 그래서 이것을 기본 스타일로 설정할 수 있습니다 귀하의 구성 요소

그리고 구성 요소의 하위 뷰를 주제로 삼으십시오 마지막으로 TextAppearance 테마를 적용 해 보겠습니다 이전에는 제목에 하드 코딩 된 텍스트 모양이있었습니다 스타일 이제 우리는 새로운 TextAppearance로 전환 할 것입니다

속성 그리고 비슷하게, 본문도 마찬가지입니다 그리고 나서, 우리는 이것을 약간의 스타일에 적용 할 수 있습니다 예를 들어, Headline Six 예를 들어 코믹 샌즈가되기 위해서는 변경할 수 있습니다 앱에서 Headline Six를 사용하면 다음과 같이 보입니다

그렇다면 왜이 일을하는 데 문제가 있습니까? 최상위 속성을 사용하는 데 어려움을 겪는 이유 당신의 스타일 전반에 걸쳐? 이유가 뭐야? 그리고 일반적으로 우리는 이렇게합니다 앱 전체를 스타일링 할 수 있기를 원한다 이러한 최상위 속성 예를 들어, 팀원이 당신에게 다가 갔다고 말하십시오 "어이, 우리 브랜드의 색깔이 바뀌고있다 그래서 실제로 우리는이 블루스 대신이 적갈색을 원합니다

우리가 가진 것 "이라고 말했다 당신이해야 할 일은 이러한 최상위 색상 속성 중 하나입니다 그리고 당신의 전체 앱이 다시 열립니다 마찬가지로, 어두운 테마 또는 가짜 어두운 테마를 원한다면 일종의, 당신이해야 할 일은 변화입니다 이 두 가지 다른 색상 속성

그리고 구성 요소는 모두 적절하게 응답해야합니다 그리고 다른 모양의 앱이 있습니다 CAMERON KETCHAM : 이제 우리는 조금 이야기 할 것입니다 맞춤 구성 요소 및 만든 일부 구성 요소에서 스타일을 사용할 수 있습니다 방법에 관하여 진짜로 불가사의 한 아무것도 우리 구성 요소는 테마를 사용합니다

모든 기본적인 Android 테마입니다 따라서 구성 요소에서도 사용할 수 있습니다 기본 스타일을 만들어야합니다 그 기본 스타일 속성 전달하기 생성자에 입력하고 스타일 속성 가져 오기를 사용하십시오 그럼 그걸 살펴 봅시다

여기에는 테마 및 일부 속성에 대한 정의가 있습니다 여기에서는 기본 스타일 속성을 만듭니다 그것을 우리의 테마로 설정하십시오 그래서 우리는 내 사용자 정의보기 스타일을 가지고 있습니다 그리고 우리는이 widget

mycustomview 스타일로 설정합니다 우리는 우리 테마의 어딘가에서 정의했습니다 따라서 이것은 사용하는 모든 구성 요소가 이 내 사용자 정의보기 – 또는 이러한 내 사용자 정의보기는 기본적으로이 스타일을 사용합니다 또한 스타일을 지정할 수 있습니다 몇 가지 다른 속성

그리고 생성자에서 이들을 사용할 필요가 있습니다 다음은보기에 대한 생성자의 예제입니다 여기에서는 기본 스타일을 사용합니다 우리는 전에 만들었습니다 그리고 우리는 이것을 여기에 전달하여 그 밖의 아무것도 설정되지 않은 경우 기본 스타일을 선택할 수 있습니다

그런 다음 스타일 속성 가져 오기를 시작합니다 그리고 우리가 방금 만든 스타일러스를 전달합니다 원래의 스타일 속성뿐만 아니라 생성자에 전달됩니다 마지막으로 대체 스타일 인 속성을 찾기위한 최후의 수단으로 사용될 수 있습니다 그리고 나서, 그것들을 읽으십시오

이것이 구성 요소가 작동하는 방식입니다 그래서 당신은 분명히 스스로 할 수 있습니다 또한 사용 사례에 맞게 시스템을 확장하십시오 경우에 따라 더 많은 속성이 필요한 경우처럼, 당신은 그것들을 분명히 추가 할 수 있습니다 그것은 당신의 부분에 조금 더 많은 작업일지도 모른다

스타일을 업데이트해야하기 때문에 당신이 가진 모든 구성 요소 이러한 속성을 참조하기 위해 사용하는 경우, 우리가 작성한 구성 요소 그것들을 참조하지 않을 것입니다 그러나 당신이 그것을 필요로한다면, 당신은 확실히 그것을 할 수 있습니다 다음은 속성의 예입니다 그냥 만들어서 자신의 스타일로 정의하십시오 그런 다음 참조하십시오

테마에 정의한 다음 그것을 스타일이나 다른 곳에서 참조하십시오 그리고 지금, 우리의 과정에 대해 조금 있습니다 우리는 몇 가지 릴리스를했습니다 10은 7 월에 나갔다 – 7 월 20 일에 삭제되었다

그리고 그것은 잠시있었습니다 그러나 이제 Android X Jetpack 리팩터링 마무리로, 우리는 더 자주 석방 할 수 있습니다 지원 라이브러리에 묶여 있지 않기 때문입니다 그래서 우리는 우리의 방출을 가속화하려고 노력하고 있습니다 그리고 마침내 우리는 1

1 알파 1 10 월 31 일 잘라 그리고 우리는이 일을 더 자주하려고 노력하고 있습니다 적어도 한 달에 한 번 11 Alpha는 타입 테마, 컬러 테마, 우리가 말한 다크 테마 이것에 대해, 많은 버그 수정과 성능 향상 개량

향후 출시 될 예정인 내가 말했던 모양 주제를 가지고있는 것 11 Alpha에서는 Shape 테마 서브 시스템이 존재하지만, 실제로 구성 요소 중 어느 것도 응답하지 않습니다 그 주제 속성에 아직 그러나 다음 릴리스에서는 반드시 있어야합니다

우리는 대화 상자, 하단 시트 메뉴, 그런 종류의 것들이 모두오고 있습니다 그리고 문제를 제기하고 제출하는 한, GitHub은 코드가있는 곳입니다 따라서 당신이보기에 흥미있는 경우에, 그냥 GitHub에가 모든 코드를 살펴볼 수 있습니다 그것은 오픈 소스입니다

또한 GitHub에서 지침을 확인할 수 있습니다 버그 리포트를 제출하는 방법 우리는 무엇이 가장 잘 작동하는지 알아 내려고 노력 중입니다 지금 당장은 버그보고를하고 있습니다 이 issuetracker

google buginizer 구성 요소 그러나 우리는 다른 방법을 찾고있다 우리가 작업하고있는 것을 더 분명하게하기 위해서입니다 커뮤니티와 더 많은 것을 통합하려고합니다 여기 몇 가지 리소스가 있습니다

Materialio 사이트는 특히 Android 섹션에서 훌륭합니다 확실히 불화에서 우리를 확인하십시오 우리와 채팅하는 데 관심이 있다면, 또는 우리가 홍보를하도록 돕는 데 관심이 있습니다 – 무엇이든을위한 아이디어 와서 우리와 채팅하십시오

Stack Overflow에 태그가 있습니다 따라서 구현에 대해 질문이있는 경우, 너는 거기에 무엇인가 물어볼 수있다 우리는 그것을 지켜보고 있으며, 우리는 이에 응할 것입니다 그리고 우리는 몇 개의 코드 랩을 가지고 있습니다 이 GitHub 페이지에서 해당 코드 랩에 대한 링크를 찾을 수 있습니다

그리고 그것은 꽤 많이 있습니다 와줘서 고마워 GAUTHAM SAJITH : 감사합니다 [박수 갈채] [음악 재생]

Android app development tutorial #19( Android Xml Layout Design-2 )

지금 당신 당신 당신 좋아, 내 레이아웃 섹션 꿀벌 n을 완료했습니다 그리고 당신은 사용자가 볼 수 있습니다 섹션 리사이클 러가있는 내부 레이아웃을 제공했습니다

보기와 하나의 진행 막대가있는 리사이클 러 뷰는 모든 사용자 목록 괜찮아요받는 사람 메시지에서 여기 한 사람은 상대입니다 레이아웃은 부모 레이아웃이고 내부는 선형을 제공합니다 방향이 수평이고 내가 제공 한 안쪽의 레이아웃 오리엔테이션이 수직 인 또 다른 선형 레이아웃과 체중 중 하나는 영점 5이고 다른 하나는 괜찮습니다 편도 선형 레이아웃은 x에 대한 텍스트보기를 유지하고 다른 하나는 메시지는 괜찮아요

나는 배경을 chat background 이것은 드로어 블 내부에서 생성 한 셰이프입니다 폴더 괜찮아요 및 발신자에 대한 동일한이 차이를 한 적이 있다는 것입니다 그 부모의 끝은 부모의 오른쪽에있는 정렬이다 그것은 수령인에게 당신이 왼쪽에 부모 정렬을 볼 수 있다고 말했고 모든 것이 동일하고 단지 배경이 다른 것입니다 솔리드 및 솔리드 컬러 나는 사용하지만받는 사람 섹션에서 나는 획을 긋고 내가 제공 한 사용자 프로필에서 여기 상대 레이아웃과 동일하고 하나의 원형 이미지보기 내부 내가 평소에 가지고있는 외부의 Gradle 파일이고 텍스트보기입니다 사용자 이름을 보유하고 다른 사용자 이름은 텍스트보기로 연결되었거나 사용자의 상태를 볼 수 있습니다

그것은 오늘날 우리의 개요 인 온라인입니다 그래서 오늘 그 사람들이 업로드하고 있습니다 소스 코드도 그래서 내 설명에 소스 코드의 링크를 얻을 수 있습니다 그것은 오늘입니다 그리고 우리는 다음 강의로 계속 진행할 것입니다 내 채널을 더 구독하십시오

당신