Android Performance Patterns: Android UI and the GPU

콜트 맥안리스: 좋은 앱을 만들기 위해서는 내부적으로 어떻게 작동되는지 알고 있어야 하지요 하드웨어 레벨에서 어떻게 돌아가는지 모른다면 효율적인 앱 만들기는 영 힘들겁니다

저 콜트 맥안리스가 앱 렌더링에 대해 알려드리죠 안드로이드가 GPU를 어떻게 사용하는지 안다면 앱 실행 상의 문제를 해결하는데 큰 도움이 되지요 가장 중요한 문제는 앱의 작업 결과가 스크린에 어떻게 보여지느냐 골치아픈 XML과 여타 마크업 언어가 유저가 보고 바로 이해할 수 있는 픽셀로 어떻게 전환되느냐 하는 것이죠 래스터화, 흔히 이미지화라고 하는 프로세스 덕분에 가능한 것인데요 문자열이나 버튼이나 패스나 각종 형태를 그러니까, 하이 레벨 언어의 오브젝트를 텍스쳐나 화면의 픽셀로 바꾸는 겁니다

문제는, 래스터화는 시간을 무지하게 잡아먹는 프로세스입니다 그래서 그 과정을 좀 더 빠르게 해주는 하드웨어가 기기 안에 들어있죠 그래픽 처리 유닛, 줄여서 GPU 90년대에 보급이 시작됐는데요 래스터화를 가속시켜 줍니다 GPU 자체는 기본 자료형, 주로 폴리곤과 텍스쳐를 써서 이미지를 나타내죠 이걸 GPU가 스크린에 그릴 수 있게 앱의 작업 결과를 넘겨 주는 게 CPU다 이거죠

안드로이드에서 이걸 하는게 오픈GLES라는 API인데요 앱 UI에 버튼이나 패스나 체크박스 등 오브젝트가 화면에 그려져야 할 때는 먼저 CPU에서 폴리곤과 텍스쳐로 변환, 그런 후에야 GPU에 넘겨져서 래스터화가 됩니다 그리고, 아마도 짐작하시겠지만 이 UI객체를 폴리곤과 텍스쳐로 전환하는 과정은 절대 빠를 수 없는 작업입니다 CPU에서 GPU로 넘겨주는 것도 시간걸리는 일이고요 그럼 오브젝트를 전환해야 하는 횟수와 CPU와 GPU간의 넘겨주기의 횟수를 최소화하는 게 답이죠

참 다행스럽게도,오픈 GLES API는 GPU에 자료를 보내고 보존할 수 있게 해줍니다 만약 똑같은 버튼을 다시 쓴다 하면 이미 GPU의 메모리에 메시가 있으니 오픈GL에 그리는 방식만 지정해 주면 됩니다 그러니까 기본 룰은, GPU에 데이터를 최대한 많이, 빠르게 보내고, 거기 놔둬요 최대한 오랫동안 데이터 수정이 없도록 GPU에 이미 있는 데이터를 다시 보내면, 시간만 잡아먹는 게 되잖아요? 안드로이드 시스템은 효율적인 렌더링에 목숨걸었습니다

예로 들면, 앱에서 쓰는 리소스는, 비트맵하고 나머지 그릴 거 말입니다 하나의 텍스쳐에 합해져서 GPU에 자동으로 넘겨지죠 동시에 9-패치 같이 자주 쓰이는 폴리곤 메시도요 이미 넘긴 리소스를 쓰는 화면을 그릴 때마다 폴리곤 전환을 할 필요가 없어요 그러니까 이미 GPU에 데이터가 다 들어 있어서 화면 그리기가 정말로 빨라지는거죠 하지만 UI 객체가 더 복잡해질 수록 이 프로세스도 복잡해집니다 예로 들면, 이미지 띄우는 건 CPU에 있는 이미지를 메모리로 옮겨서 다시 GPU로 넘겨주고 그리게 하는 건데요

여기서 패스를 쓰면 CPU에서 폴리곤을 줄줄이 만들어줘야 할 수도 있어요 악몽입니다 아니면 그 형태를 마스킹하는 폴리곤을 GPU에서 만들어야 하죠 텍스트 렌더링은 생각하기도 무서운데요 CPU는 문자를 텍스쳐로 래스터화해서 그걸 GPU에 보내줘야 하고 그걸 문자열의 문자 수만큼 반복해야 하죠

GPU 메모리에 있는 문자를 사각형으로 렌더링하게요 애니메이션은 이걸 여기서 더 꼬이게 합니다 그러니까, 비쥬얼을 어떻게 바꾸느냐에 따라서 GPU의 데이터를 새로 처리하는 코스트를 프레임 하나 하나마다 계속 계속 부담할 수 있습니다 이건 GPU 문제의 빙산의 일각인데요 안드로이드는 매 프레임마다 앱 화면을 전체를 갱신할 필요 없이 실제로 변경된 부분만 새로 그려서 발생 부담을 획기적으로 줄여 줍니다

물론, 안드로이드가 해야 하는 래스터화 전 CPU의 전환이나 넘겨주기 작업도요 하지만 여기서 주의할 점이 있습니다 유저가 앱을 순조롭게 사용하려면 코드 갱신, GPU 데이터 갱신 그리고 렌더링까지 매 프레임 16 밀리세컨드 그 안에 해내야 합니다 적어도 목표는 그러하니까 이 안드로이드 퍼포먼스 패턴 시리즈 나머지를 보셔서 앱의 렌더링이 매끈하게 흘러가도록 하셔야 하는 거죠 그리고 저희 구글+ 커뮤니티에 들리셔서 개발자 분들의 팁이나 충고 보시는 것도 잊지 마시고요 그리고 항상 침착하게, 코드는 단정하게 실행은 효율적으로, 잊지마세요

Android Design in Action: Sleep Monitors and Backward Compatibility

ROMAN NURIK : 안녕하세요 환영합니다

Android 디자인 실천 나는 Roman Nurik입니다 아담 코흐 : 아담 코흐 Nick Butcher : 그리고 Nick Butcher 오늘 우리는 잠에 대해서 이야기 할 것입니다

모니터 응용 프로그램 및 이전 버전과의 호환성 오늘은 많은 콘텐츠를 가지고 있으므로 우리는 수면 모니터를 시작하려고합니다 그래서 우리가 오늘보기로 결정한 앱 안드로이드로 수면했다 안드로이드로 잠자기라고합니다 앱 클리닉에서 검토 한 앱 중 하나입니다

레오 마이어 (Leo Meier)의 지난 금요일 그리고 Nick은이 앱을 자세히 살펴 보았습니다 닉, 네가 뛰어 내리고 싶니? 안드로이드로 수면에 대한 생각? NIC BUTCHER : 물론 이죠 안드로이드 (Android) 같은 잠은 당신을 모니터하는 응용 프로그램입니다 잠을 자고 알람을 울리면 깨울 것입니다 당신이 빛의 종류에있을 때 적절한시기에 수면주기

매우 세부적인 앱입니다 당신이 그것을 살펴 본다면, 그것은 전체 톤을 제공합니다 기능 및 구성 옵션 그리고 저자가 매우 반응적임을 알 수 있습니다 커뮤니티

그는 지난 몇 달 동안 15 번의 업데이트 소식을 전했습니다 매우 혼란스러운 달입니다 시각적 인 관점에서, 그들은 약간의 노력을 기울였습니다 Holo 디자인 가이드 라인을 향해 나아 간다 그러나 응용 프로그램의 전반적인 느낌은 그것은 매우 기능적이며 강력합니다

들어 와서 어떻게 작동하는지 이해하기가 어렵고 내가해야 할 일과 우선해야 할 일에 우선 순위를 매기고 정보가 중요했습니다 따라서 여기에서 응용 프로그램을 살펴보면 – 이 앱을 시작할 때 처음 보는 화면입니다 여기에서 다양한 알람을 생성 할 수 있습니다 잠금 해제하라는 메시지가 나타납니다 이 화면의 주요 기능 중 일부는 왼쪽 아래에 저기 있습니다

스플릿 – 액션 바,하지만 스플릿 – 액션이 아닌 종류 동시에 바 추가 할 기능 중 일부를 볼 수 있습니다 새로운 알람, 실제 수면 추적 모드를 시작하여 볼 수 있습니다 이전 밤의 수면에 대한 통계 그래서 우리는 시간이 부족하기 때문에 곧장 가야합니다

다시 디자인하고 우리가 요리 한 것을 보았습니까? 그래서 여기에서 우리는 우리가 한 것을 볼 수 있습니다 – 거대한 출발은 아니지만, 우리는 Holo는 응용 프로그램의 모양과 느낌 그래서 곧바로 표준 액션 바가 나타납니다 당신이있는 곳의 감각과 일부 행동을 찾으십시오 우리 중 일부를 재구성해야한다고 생각했습니다 기능이 조금,이 메인 화면 때문에, 알람 기능을 제공하는 동안 많은 기능이 있습니다

서브 스크린에 걸려 들게하는 종류 그리고이 앱이 두 가지 주요 목적을 가지고 있다고 느꼈습니다 적절한 시간에 깨우기위한 알람 설정 및 당신의 수면을 모니터링하고 어떻게 보는지 수면 패턴이 간다 그래서 나는 그걸 너의 주인공으로 띄우고 싶었어 옵션을이 두 개의 메인 탭에 추가하십시오

여기에서이 알람 및 통계 탭 보시다시피, 우리는 또한 정말로 강조했습니다 수면 트랙 버튼 그래서 하단의 작은 버튼 대신에 다른 옵션에 대해 동등한 가중치를 적용하면 이제 이 거 대 한 보라색 단추 그리고 마지막으로, 채색과 팔레트에 약간의 메모

초록색 하이라이트 중 일부가 너를 움켜 잡는 걸 발견 했어 초점, 말하자면, 나를 봐, 나는 분배 자다 나에게 약간 벗어났다 그래서 우리는 여기 팔레트를 약간 다시 꾸몄습니다 주식 경보에서 꽤 많은 단서를 얻고 있습니다

두 가지 이유로 안드로이드의 최신 버전에서 시계 첫째, 나는 그것을 좋아한다 나는 그것이 아름다운 애플 리케이션이라고 생각한다 논란의 여지가 있지만, 모두가 그렇게 생각하지는 않습니다 그러나 또한 약간 비슷한 방식으로 제공하고 있습니다

기능을 제공하므로 부트 스트랩에 도움이됩니다 이것들은 정신적 인 모델입니다 우리가 사용한 많은 사용자 인터페이스 요소는 재고 알람 시계 앱과 동일합니다 그래서이 애플리케이션으로 시작할 수 있기를 바랍니다 조금 더 빨라

네 색 구성표에 대해 언급하고 싶은 한 가지 이 네온 녹색에서 네온 보라색으로 전환하십시오 Android 디자인 공무원의 보라색 인 것 같습니다 색상 팔레트 나는 그것이 당신의 얼굴에 조금 덜하다고 생각합니다

여전히 매우 강조된 색상입니다 그것은 둔한 회색이나 흐린 푸른 색이 아니며, 더 조용한 곳입니다 그러나 눈이 조금 쉬워졌습니다 그리고 아마 심지어 한 가지 그늘을 갈 수도 있다고 생각합니다 네가 원한다면 더 어둡다

일부 장치에서는 너무 밝을 수 있습니다 그러나 나는 화면을 보는 것이 훨씬 쉽다고 생각한다 즉시 압도되지 않아야한다 네 NICH BUTCHER : 예

내가 말하고 싶었던 것 중 하나는 이것이 당신이 자러 가기 전에 당신이 보게 될 마지막 것 잠자리에 들기 위해서는 잠을 깨야합니다 그래서 보통, 이런 종류의 앱을 위해, 나는 즉시 원할 것입니다 그것을 라이트 팔레트로 변경하십시오 대부분의 앱에서 라이트 팔레트는 일반적으로 훌륭하다고 생각합니다

출발점 하지만,이 응용 프로그램의 경우, 당신이 원하지 않았기 때문에 너의 감정이 [무관심하다] 당신이 전화를 돌면 갑자기 너는 강도에 의해 눈이 멀었다 그래서 나는 음색을 아주 조용하게 유지하려고 노력했다 그런 종류의 전이 ADAM KOCH : 네비게이션 측면에서 나는 스탯과 알람을 거기서 최상위 레벨 탭으로 나눕니다

에 있던 가벼운 스플릿 – 액션 바에서 제거 이전 버전은 두 가지 주요 동작을 남깁니다 트랙 수면과 추가 NICK BUTCHER : 이전 샷에 포인트를 발견했습니다 당신은 작은 버그 드로이드 수치가 있다는 것을 알 수 있습니다 하단 구석에

그리고 그의 상태는 그것이 얼마나 가까운 지에 따라 바뀝니다 너는 자러 가야 해 그래서 지금은 낮이지만, 그는 그 사람 앞에서 [무관 한] 그러나 밤이 가까워지면서 그는 칫솔질을 시작합니다 치아 등등

그리고 그것이 유용하고 재미 있다고 생각하는 동안 – 나는 그것을 정말로 좋아한다 – 나는 때때로 당신의 버그 드로이드를 포함한 것을 발견한다 응용 프로그램 또는 안드로이드 또는 Droid의 이름으로 응용 프로그램은 일종의 게으르고 아마추어입니다 정말 외쳐하지 않습니다 이것은 완전히 전문적입니다 신청

나는 상호 작용을 통해 생각했습니다 그래서 같은 요소를 사용하여 같은 것을 사용하려고했습니다 차 당신이 후미 촬영에서 아주 미묘하게 볼 수 있다면, 거기에 수면이 많은 Z가 백그라운드에서 신청 여기 당신이 취침 시간에 가까워짐에 따라 아이디어가 생깁니다

Track Sleep 버튼에서부터 시작하거나 어떤면에서는 미묘하게 움직일 수 있습니다 여기는 매우 미묘합니다하지만 같은 종류의 정보가 있지만 약간 더 미묘한 방법으로 네 그리고 우리는 또한 아이콘을 변경하는 일을했습니다 그래서 우리는 아이콘을 수면중인 귀여운 버그에서 벗어나게했습니다

아주 일반적인 것에 droid 이것은 매우 일반적인 아이콘 일 뿐이지 만 다시 그것은 조금 더 알아볼 수있는 무엇인가이다 이는 앱에 조금 더 독특합니다 NICK BUTCHER : 멋지다 [알아들을 수 없는]

ROMAN NURIK : 다음 화면으로 넘어 가야할까요? 네 NICH BUTCHER : 예 알았어 그래서 다음 단계입니다 이 응용 프로그램을 생각한 주요 기능 중 다음 기능 너는 네가 어떻게 지내는지 많은 정보를 줄거야

거의 너무 많은 정보를 자고있었습니다 따라서 왼쪽 하단과 같이 그래프를 터치하면 여기에 여러 옵션이있는 후속 화면이 있습니다 그래서 우리는 여기서 Stat 화면을 골랐습니다 아주, 아주 긴 테이블 그리고 이것은 정보의 작은 표본이며, 왜냐하면 나는 앱을 오랫동안 실행하지 않았기 때문입니다

장소의 개발자 스크린 샷을 보면 하지만, 이것이 거대한 테이블이 될 수 있음을 알 수 있습니다 평균 통계 수치를 보여 주지만 요약 해 보았습니다 모든 시간에 걸쳐 이제, 나는 이것을 재 작성하여 생각해 보았습니다 나는 정말로 무엇을합니까? 신경 써? 나는 지난주의 통계에 대해서만 신경을 쓸거야

아마 그보다 더 오래된 것이면 실제로는 그렇지 않습니다 내 수면이 어떻게되어 가고 있는지 느끼는 데 많은 도움이됩니다 두 달 전에 무슨 일이 있었는지는 정말로 더 이상 관련성이 없습니다 그래서이 화면으로 해본 것은 제가 시도한 것입니다 요약 통계를 제공하십시오

그래서 나에게 가장 중요한 것은 이번 주에 대한 요약이다 마지막 7 일 동안 어떻게 지냈습니까? 달력에서 주 시작이 시작될 때마다 그래서 우리는 몇 가지 요약 통계를 뽑아 냈습니다 크고 대담합니다 그리고 당신이 주변에 있는지 여부를 나타 내기 위해 색상을 사용합니다

1 박당 평균 수면 목표 또는 귀하의 여부 수면 빚을 쌓아 그래서 여기서 우리는 OK-ish, blue를 위해 오렌지를 사용하는 것을 볼 수 있습니다 예를 들어, 잘 지내고 있거나 경고를 위해 빨강을하고 있습니다 충분한 수면을 얻는다 그래서 즉시 내가 이것을 볼 때, 나는 이것을 빨리 얻는다

무슨 일이 일어나는지 알려주는 스캔 가능한 화면 네 화요일에, 당신은 어떤 이유로, 아주 잘 전날 밤에 마을에 나갔거나 그런 식으로 NICK BUTCHER : 크리스마스가 너무 많습니다 파티

그래서 우리는 많은 정보를 의식적으로 강등했습니다 따라서 이전을 살펴보면 노이즈에 대한 다른 탭이 있습니다 그래프뿐만 아니라 어떤 종류의 상점도 포함하고 있습니다 되는 가치가있는 것 같지 않았다 최상위 정보 항목

그것은 소음을 더하는 것과 같았습니다 정말로 중요한 것을 깨닫게 해주었습니다 그래서 우리는이 몇 가지 항목을 단순화했습니다 우리가 너를 원한다면 일주일 내내 상하로 움직일 수있게 해준다 그것을 요약으로 돌리거나 각각으로 드릴 다운하십시오

우리는 여전히이 정보가 흥미 롭다고 생각합니다 그래도 그것을 원하는 사람들 그래서 여기서 아이디어는 각 요일에 탭할 수 있다는 것입니다 다음 화면으로 넘어갈 수 있습니다 그날 밤의 수면에 대해 자세히 설명해 줄거야

당신이 추적 했어 멋지다 NURIK : 멋지다 NICK BUTCHER : 여기 다음 슬라이드에서 그래프의 전체 롤 – 그래프로서의 모든 다른 날들의 그런 종류의 견해 didn''t는 정말로 많이 나에게 이야기한다 나는 그것이 매우 눈에 띄지 않는 것을 발견하지 않았다

당신은 정말로 그것을보고 말할 수 없었습니다, 오, 그것은 좋은 것이 었습니다 밤, 오, 그건 나쁜 밤 이었어 그러나 그래프 자체는 아주 멋지다 그래서 우리는 그들을 상세 화면으로 강등했습니다 따라서 이전 광고 항목에서 각 광고 항목을 건드린 경우 화면, 당신은 잠을 잘 수있게된다

얼마나 오래 당신이 실제로 잠을 자니, 얼마나 오래 깊은 잠에 있었는데, 몇 퍼센트 였고 너를 정확히 보여주는 정말 좋은 그래프 밤은 같았다 그곳에는 [INAUDIBLE] 정보는 수면을 기록 할 때 캡처 할 수 있습니다 얼마나 좋은 밤인지에 대한 평가 또는 의견을 말합니다 그래서 이것들은 진정으로 정보 계층 구조를 사용하여 다음 화면

[알아들을 수 없는] 로마 누리 크 (NANIK : ROMAN NURIK) : 그것은 단지 훌륭한 일이라고 생각합니다 매우 복잡한 화면 분할 – 복잡한 좋은 데이터를 가진 화면이지만 소비하기 쉽지 않다 그리고 당신에게 당신을 정말로 보이게 해주는 것을 보여줍니다 콘텐츠 또는 하나의 특정 콘텐츠에서 특정 일, 그리고 그것에 대한 모든 세부 사항을 볼 수 있습니다

나는 그것이 다른 유형의 좋은 조합이라고 생각합니다 그래프의 일부 내용, 일부 평균 내용, 일부 내용 그런 식의 데이터 잠재적으로 사용자가 주석을 제공 할 수있게하거나 추천을 제공합니다 어쩌면 당신은 무언가를 입거나 더 조용히해야 할 것 같습니다 누가 알아? 나는 수면제 나 그런 것

그러나 사용자에게 이러한 모든 유형의 구성 요소를 제공합니다 잠의 그들의 어느 날 밤에 정말로 흥미있는 고유 한 방식으로 제시 할 수 있습니다 아담 코치 : 네 개인적으로, 나는 당신이 사용한 인쇄술을 정말 좋아합니다

여기, 닉,이 화면과 다른 화면에서 그것은 단지 중요한 정보를 제공합니다 플러스 색칠 정말 도움이됩니다 그것은 당신이 그것을 훑어보고 무슨 일이 일어나고 있는지 보는데 도움이됩니다 NICK BUTCHER : 멋지다

그리고 우리가 이것을 위해 가지고 있었던 마지막 재 설계 아이디어가 있습니다 신청 그리고 그것은 다음과 같은 멋진 새로운 기능을 활용하는 것입니다 Android 42에서는 Daydreams라고 불렀습니다

그래서 당신이 알고 있지 않을 수도있는 사람들을 위해 Daydreams는 스크린 세이버 기능처럼 따라서 기기를 사용할 때 백일몽을 설정하면 도킹 또는 충전, 이것으로 걷어차십시오 – 화면 보호기 같은 종류 그래서 나는 정말로, 정말로 차가울 것이라고 생각한 것은 오히려 수동으로 애플리케이션에 들어가서 시작해야하는 것보다 자고있는 걸 추적 할 수 있다면, 사실, 대부분의 사람들이 저를 좋아할 것 같아요 밤에 전화를 연결하면 밤새 충전됩니다 그러니 그냥 백일몽을 시작하는 것으로 충분합니다

그러면 수면을 추적 할 것입니다 네가 아마 거기에 어떤 논리를 넣을 수있을 거라 상상해 오늘의 한가운데, 또는 이와 비슷한 것 데이 드림을 실제로 시작하지 않으실 겁니다 그러나 장치를 꽂고 넣는 행위 만 당신의 침대에서 아래로 기능을 시작할 수 있습니다

따라서 사용자가 부담해야 할 부담이 조금 있습니다 매일 밤이 응용 프로그램에 들어가려면 그것을하는 것을 잊지 마십시오 시작 버튼을 누르고 중지 버튼을 누릅니다 아침에 그렇게하는 것을 잊지 마십시오 내가 생각하는 프로세스를 자동화하기 위해 할 수있는 일 사용자를 더욱 규칙적으로 만들 것입니다

그들은 그것을 계속 사용하고 그들의 가치를 보게 될 것입니다 신청 그래서 백일몽이 멋진 방법일지도 모른다고 생각했습니다 네 그것은 수준을 높이기위한 또 다른 방법 일뿐입니다

이 응용 프로그램에서 마법의 느낌, 어디에서 할 수 있다면 자동으로 이러한 것들을 추적 한 다음 실행합니다 따라서 오후 9시, 오후 10시 이전에, 전원이 켜지거나 전화가 유휴 상태가되면 어쩌면 시계 만 보여줄 것입니다 간단한 시계 Daydream을 만드는 것은 상당히 쉽습니다 현재 시간과 현재 날짜 만 보여줍니다 그러나 어느 시점이 지나면, 추적 모드 및 시계를 보여줍니다

그리고 이것은 아마도 부드러운 소리처럼 연주 할 수있는 방법 일 것입니다 당신이자는 동안 배경이나 무언가 따라서이 앱은 이미이 모든 데이터 캡처를 수행하고 있으므로, 어쩌면 그것을 지능적으로 사용하여 개선 할 수도 있습니다 자고있을 때 자고, 어쩌면 소리 나 그런 식으로 그래서 여기에 많은 아이디어가 있습니다

백일몽 아이디어가 정말 좋다고 생각합니다 새긴 ​​금 아담 코치 : 네 그리고 물론, 당신은 백일몽도 그래서 당신은 여전히 ​​당신이 만질 수있는 뭔가를 가질 수 있습니다

하루 동안 크기를 조정하거나 그래프로 표시 할 수 있습니다 또는 그와 비슷한 것을 볼 수 있습니다 네 NICH BUTCHER : 예 전반적으로, 많이 좋은 앱과 기능

개발자가 우리가 던진 아이디어 중 일부가 마음에 들기를 바랍니다 아마도 그들과 함께 달릴 것입니다 네 그리고 당신이이 앱의 개발자이고보고 있다면, Google+ 또는 Google+에서 무엇을 생각하는지 알려주세요 이메일 또는 뭐든간에

그러나 우리는 확실히 당신과 이야기하는 것을 고대합니다 질문이 있거나 아이디어를 원한다면 또는 심지어 일부 sourcepsd 파일 또는 그 무엇이든 Google에서 앱을 검토하거나 앱을 살펴보고 Google에서 조롱해라, 근원을 원한다면, 그들은 항상있다 유효한– 라이센스 문제는 없습니다

우리는 그들을 당신에게 넘기겠습니다 Nick Butcher : 그리고 우리는 사랑으로 그것을합니다 나는 과거의 [재치가없는] 재 디자인에 대한 몇 가지 코멘트를 보았다 말하자면, 구글로부터의 슬랩 다운은 앱을 재 설계 하시겠습니까? 이 쇼가 아니야 이것은 그것이 무엇인지에 관한 것입니다

최고의 Android를 얻는 데 도움을 드리려고 함께 노력하겠습니다 당신이 할 수있는 디자인 네 그리고 우리가 리뷰 한 거의 모든 앱은 멋진 앱입니다 그들은 정말로 좋다

그들은 그들의 기능을 정말 잘 수행하고 있습니다 NICK BUTCHER : 좋아 우리는 계속 나아갈 필요가있다 네, 그렇습니다 코닥 : [INAUDIBLE]

그래서 15 분 남았습니다 우리는 역 호환성을 통해 비행 할 필요가 있습니다 그래서 우리는 이전 버전과의 호환성에 대해 많은 슬라이드를 가지고 있습니다 다행히도 많은 스크린 샷이 있습니다 그러나 시작합시다

그래서 우리가 전략과 팁에 대해 이야기하기 전에 하위 호환성, 특히 역 호환성 때문에 개발하기위한 것이 아닙니다 우리는 많은 훈련 세션과 그 모든 것들을 가지고 있습니다 개발자를 위해,하지만 이것은 정말로 디자이너를 더 타겟으로 삼았습니다 우리가 여기에 자신의 팁을 공유하기 전에, 나는 확실히 디자이너들, 디자이너들, 호환성을위한 설계 지침을 살펴보십시오 호환성을위한 가이드 라인의 페이지는 상당히 짧습니다

몇 가지 중요한 일에 대해서만 이야기합니다 레거시 메뉴 버튼, 동작 방법 오버플로는 여러 장치에서 작동합니다 그래서 당신이 전에 알고 있어야 할 것들이 분명합니다 실물 모형이나 뭐든에 뛰어 들었다 NICK BUTCHER :이 비디오를 바로 일시 중지하십시오

지금 가서 읽으십시오 우리는 기다릴 것이다 그리고 우리는 돌아 왔습니다 ADAM KOCH : 계속 나아 갑시다 네

우리는 많은 것을 처리해야합니다 그래서 이전 버전과의 호환성 이전 버전과의 호환성을 보는 방법은 각 앱의 화면을 확장 할 수 있습니다 전체 앱 또는 개별 위젯 – 각 화면, 시각적 스타일 및 동작, 기본적으로 시각 및 상호 작용 설계, 그것이 기본에 얼마나 가까운 지의 스펙트럼을 따라 작동한다 응용 프로그램의 버전

예를 들어 Android 40 용 앱 디자인이있는 경우 이상, 그리고 Holo 요소가 있음, 이전에 버전, 안드로이드 23, 진저 브레드, 프로 요, 어쨌든, Holo 디자인 중 하나를 선택할 수 있습니다 또는 완전히 사용자 정의 디자인 및 해당 장치에서 사용합니다 아니면 무엇이든 말할 수 있습니다

기기 기본값은 – 예를 들어 진저 브레드의 체크 박스는 파란색 대신 녹색 – 그 당시의 일부 기기에서는 마치 파란색, 빨간색 또는 뭐든간에 장치 기본값을 사용해야한다는 선택을 할 수 있습니다 아니면 중간에 뭔가를 선택할 수 있습니다 보통은 모든 것을 홀로 만드는 것이 조금 힘듭니다 진저 브레드와 프로 요로 돌아 가라

개발자는 매우 쉽습니다 장치 기본값을 사용하십시오 그리고이 하이브리드는 중간 어딘가에 있습니다 그래서 하이브리드 솔루션 – 당신은 그것에 대해 조심해야합니다 그래도 실제로 작동 할 수 있습니다

이 하이브리드 UI를 스크린 샷으로 가져 오는데, 구성 요소는 Holo이고 일부 구성 요소는 장치 기본 스타일링을 통해 작동 할 수 있습니다 그래서 우리는 그 두 가지 예를 보여줄 것입니다 그러나 이것은 실제로 우리가 어떻게 결정했는지를 보는 방법입니다 역 호환성 전략 당신은 스펙트럼을 따라 어딘가에 골랐다

그리고 당신이 선택한 곳에 따라, 함께 일할 필요가 있습니다 귀하의 개발자 가이 그러나 당신이 선택한 곳에 따라 그것은 개발자를위한 노력의 양, 그리고 확실히 그것 최종 결과가 변경됩니다 그러나 이것들이 다른 옵션 들임을 명심하십시오 정말로 올바른 선택은 없습니다

내가 전에 말했듯이, 당신은 그것을 정확하게 할 수 있습니다, 당신은 그것을 할 수 있습니다 이 다양한 옵션 중 하나를 사용하여 그것이 잘 작동하는지 확인하는 것은 당신에게 달려 있습니다 아담 코치 : 네 그것은 실제로 사이의 절충 일뿐입니다 이러한 다양한 옵션

왼쪽에 더 많은 노력이 필요합니다 스펙트럼, 그러나 당신은 더 일관된보기가있을 것이다 오른쪽에서 볼 수 있듯이 여전히 작동 할 수 있습니다 곧 스크린 샷에서 NICK BUTCHER : 조금만 더 노력하세요

거기에 도움이되는 도구가 있습니다 로마 누리 크 : 당연하지 그리고 우리는 거기에 더 많은 도구에 대해 이야기 할 것입니다 개발자 및 디자이너와 관련이 있지만 여전히, 확실히 도움이 될만한 것이 있습니다 그렇게 말하면서 홀로 많은 사람들이 우리에게 물어 봅니다

Android 40 이상? 결국, 나는 조기에 Holo를 사용하려고 노력해야합니까? 플랫폼의 버전? 그리고 우리의 대답은 '예'입니다 Holo는 최신 장치를 위해 설계된 것이 아닙니다 Holo는 모든 사람, 모든 인간을 위해 실제로 설계되었습니다 정말 인간 – 컴퓨터를위한 디자인 언어입니다

상호 작용뿐만 아니라 인간 – 안드로이드 40 플러스 상호 작용 어디에서나 사용할 수 있습니다 분명히 작동하게하려면 약간의 노력이 필요하지만 다시 디자이너로서, 당신은 그것을 생각만큼 적게 생각합니다 Android 4

0의 스타일링 안드로이드의 신원 이것이 중요한 부분입니다 또 하나의 중요한 경험은 플랫폼은 실제로 일관성이 있어야합니다 정말로 완전히 분리 된 디자인을해서는 안됩니다 진저 브레드와 아이스크림 샌드위치 용 앱

작업 표시 줄과 같은 것들이 표시되어야합니다 모든 장치에서 지속적입니다 에 완전히 다른 UI로 전환하면 안됩니다 이전 버전은 없습니다 내장 된 프레임 워크 구성 요소

그리고 다시 얘기하겠습니다 레이아웃, 핵심 레이아웃, 탐색과 같은 것들 – 탭 사이를 스 와이프하는 것처럼 핵심 상호 작용 – 예를 들어 연락처를 선택하는 기본적인 방법과 같습니다 그것들은 실제로 똑같이 행동해야합니다 다른 OS 버전 그리고 저는 그것을 디자인으로 생각합니다

그리고 마지막 요점은 정말로입니다 개발자에 대한 자세한 정보 – 그러나 기회 주의적이어야한다 핵심 경험을 넘어, 핵심 탐색은 실제로, 개별 체크 박스와 마찬가지로 앱의 핵심적인 느낌, 그리고 스피너, 그런 것들은 그것에 대해 기회 주의적 아무 것도 정말로 나쁘지는 않지만 명백하게 보이는지 확인하십시오 기회 주의적

그리고 자신이해야 할 위치에 자신을 두지 마십시오 모든 픽셀이 완벽합니다 잃는 전투 너무 많은 시간이 걸릴 것이고, 당신은 잃을 것입니다 정말로 중요한 것에서 초점을 맞추십시오

앱의 핵심 경험 그래서 우리가 계속하기 전에, 다른 점들, 얘들 아? 이 세 가지에 대해서? 닉 바우처 : 아뇨 코닥 : 가자 솔리드 가자 코닥 아줌마 :하자

언급 할 또 다른 것은 – 이것은 더 많은 것입니다 전술 쪽 큰 차이점 중 하나는 Android 40과 Android 23 및 그 사이의 스크린 샷 지형, 글꼴입니다

Roboto는 Android 40 이상에서 기본 설정이므로 Droid Sans가 다른 모든 곳의 기본값이었습니다 그래서 이것은 당신이 정말로 노력하려고해서는 안되는 영역입니다 Roboto를 Android 23에서 어디에서나 사용할 수 있습니다

사용자가 실제로 익숙한 이유는 그들의 눈이 거의 텍스트를 읽을 것으로 기대하는 것처럼 보입니다 자신의 장치에서 특정 방식으로, 그래서 당신은 정말 그냥 시스템 디폴트 폰트를 사용하십시오 좋은 점은 디자이너의 경우, 요소와 물건의 폭을 계획하면 분명히 얼마나 많은 문자가 들어갈 지 생각 해봐야한다 이 줄 또는이 UI 위젯 그리고 좋은 점은 Roboto와 Droid Sans가 메트릭 호환, 즉 동일한 것을 사용하면 안드로이드 2

3에서 Roboto와 Droid Sans의 텍스트 조각 기기 및 Android 40 기기를 사용하면 그들은 거의 같은 너비입니다 여기서 가장 중요한 것은 번역과 같은 것입니다 예를 들어, 독일어 버전 또는 독일어 문자열 무언가가 정말로, 정말로 넓다 생각하는 것이 더 중요합니다

여기에 올바른 글꼴을 선택해야합니다 따라서 그 차이를 예를 들어 Droid Sans와 Roboto가 영어로 제공됩니다 그리고 나서 – 이것은 다시 전술입니다 그러나 귀하의 프로세스에서는 디자이너에게 정말 중요합니다 장치 테스트 프로세스에 참여할 수 있습니다

따라서 일반적으로 품질 보증팀 또는 개발자가 될 것입니다 모든 장치를 보유하고 있으며 테스트의 일종입니다 모든 기기에서 APK를 사용할 수 있습니다 디자이너가 실제로 참여해야합니다 팀의 디자이너는 시각적으로 민감한 사람들

그래서 그들은 작은 단점이 무엇인지 알아낼 수있을 것입니다 따라서 디자이너로서 자신을 소개하려고 노력해야합니다 QA 프로세스 분명히 풀 타임은 아니지만 시간을 투자하여 확실하게 확인하십시오 이전 버전의 플랫폼뿐만 아니라 다양한 기기를 사용할 수 있으므로 그것이 보이는 것처럼 느껴 져요 NICK BUTCHER : 그리고 거기에 일련의 연속적인 다른 버전에서 앱을 테스트하는 통합 도구 스크린 샷을 제작할 것입니다

그리고 이전 버전에서 생성 된 스크린 샷을 살펴볼 수도 있습니다 또는 작은 기기 [INAUDIBLE]를 사용하면 도움이됩니다 너 [미천 한] 이게 뭔가야, 닉, 너 더 일찍 언급했지만 개발자가 당신에게 오는 경우 디자이너이기 때문에이 특정 UI를 수행 할 수 없습니다 Honeycomb 이상에서만 사용 가능 Android 4

0 이상 거기에는 항상 큰 변명이 아닙니다 거기에 훌륭한 라이브러리가 있습니다 그래서 당신은 생각할 필요가 없습니다 액션 바가없는 앱과 액션 바가없는 앱을 모든 Holo 구성 요소가있는 응용 프로그램 및 Holo 구성 요소를 사용할 수 없습니다

밖에있는 라이브러리가 많이있어서 도움이 될 것입니다 다음은 몇 가지 예입니다 그래서 액션 바 셰럴, 너를 많이 확신 해 익숙하다 기본적으로 액션의 거의 100 % 백 포트입니다

이전 버전의 플랫폼으로 바 HoloEverywhere는 실제로 당신에게 많은 표준을 제공합니다 스피너 및 텍스트 필드와 같은 위젯 스타일 실제로 캘린더, 캘린더, 캘린더, 보기, 그리고 그런 것들 너에게 많이 줄거야

이 라이브러리는 많은 정보를 제공합니다 이전 버전으로 백 포트하십시오 개발자가 당신에게 와서 말한다면, 나는 절대적으로 이전에 사용할 수 없기 때문에 작업 표시 줄을 사용하십시오 플랫폼의 버전은 그것을 극복합니다 그들에게 당신이 이용할 수있는 도구가 있다고 말해주십시오

어쩌면 그렇게하지 않는 것이 가장 큰 이유는 아닙니다 스크린 샷으로 이동하기 전에 추가로 생각, 이전 버전과의 호환성을위한 지혜 전략? 홀로 모든 것들 코모 ADAM : Holo 모든 것 Holo 모든 것 그러나 그것은 당신에게 달려 있습니다

그렇죠? 디자이너는 다양한 유형을 알고 있어야합니다 밖에 장치의 개발자, 도구를 알고 있어야합니다 그들에게있어 귀하의 앱에 대한 올바른 결정을하십시오 NICK BUTCHER : 좀 더 심각하게 말하면, 무한한 자원이라면, 아마도 [INAUDIBLE] 집 쓰기 앱의 버전 아이스크림 샌드위치, 진저 브레드에 집 쓰기, 프로 요의 집 그러나 모든 사람이 그렇게 할 수있는 자원을 갖고 있지 않다면, 당신의 노력을 스케이트 타는 곳으로 Holo에 대한 설계 및 진행, Roman의 말처럼 미세한 픽셀 백 포팅에 대한 기회주의 당신이 용량을 가지고, 제어 물건 알았어

알았어 그래서 시간의 이익을 위해서, 저는 우리의 생산자 실제로 약 5 분 안에 실행해야합니다 이제 일부 스크린 샷을 살펴 보겠습니다 그래서이 모든 스크린 샷은 우리가 느끼는 앱이 될 것입니다 옳은 일을해라

그러면 너는 그것이 그 보편적 인 홀로 (Holo)의 결합, 모든 종류의 순수한, 장치 기본값 및 중간 어딘가에 있습니다 따라서 이것은 작업이 필요 없습니다 이것은 진저 브레드의 상호 작용과 영상이며 젤리 빈 (Jelly Bean) 스크린 샷 이것은 편집 화면입니다

Holo 스타일을 어디서나 볼 수 있습니다 이는 동일하며 작업이 필요하지 않습니다 그리고이 모든 슬라이드는 나중에 사용할 수 있습니다 그리고, 그런데, 사람들, 자유롭게 뛰어 오르십시오 당신이 적합하다고 생각하는대로

그러나 이것 모두가 또 다른 예입니다 여기에는 순수한 보편적 인 모양과 느낌이 있습니다 이 패턴은 정말 좋은 예제 인 또 다른 앱입니다 거의 완벽하게 복제 된 작업 수행 방법 진저 브레드와 젤리 그리고 이것이 어디서 처음으로 볼 수있는 예입니까? 하이브리드 스타일이 있습니다

그래서 Gingerbread의 Play 스토어에서는 표준 텍스트 필드 및 사용자 정의 단추 스타일 ICS 이상에서는 홀로 텍스트 필드를 사용합니다 스타일링과 Holo– 글쎄, 실제로, 나는 또한 커스텀 버튼이라고 생각한다 그러나 다시 두 경우 모두에서 아주 잘 작동합니다 여기에는 구성 요소의 불일치가 분명히 없습니다

이것은 제가 지적하고자했던 한 가지 사소한 사례입니다 Holo의 시리즈 가이드에서 거의 모든 것을 여기에서 제외하고 작은 별들을 위해서 그래서 진저 브레드 (Gingerbread)에있는이 별들은 녹색으로 ICS에 있습니다 그들은 파란색이야 그리고 정말로, 다시 말하면, 그것은 스타일링을 공유하는 경험, 그리고 장치가 기본적으로 가지고있는 것을 사용합니다

이것은 I / O App의 예입니다 이것은 단 하나의 사소한 화면입니다 스타일링이 혼합되어 있습니다 실제로, 우리는 내년에 이것을 개선 할 필요가 있습니다 나는 이것이 더 나을 수 있다고 생각한다

그러나 이것이 공정하게 작동하는 곳의 예입니다 그렇지만 개선 될 수 있습니다 NICK BUTCHER : 그게 네가하는 일의 좋은 본보기 야 활판 인쇄술에 대해 이야기하면서, 드로이드 샌프란시스코는 진저 브레드 (Gingerbread)에서 집에서 보입니다 Roboto ICS에서 집처럼 보인다

ROMAN NURIK : 그리고이 모든 것들은 Droid Sans를 사용합니다 진저 브레드 (Gingerbread), 로보트 (Roboto) 등이있다 텍스트의 레서피 검색 앱에서 또 다른 빠른 예 필드는 왼쪽에, 텍스트 필드는 오른쪽에 있습니다 이것은 다음을 사용하는 예입니다 내 생각은 How About We에서 온 것 같습니다

온라인 데이트 사이트 – 진저 빵과 플랫폼을위한 Holo 스타일링의 혼합 기본 스타일 그리고 다시, 그것은 정상적으로 작동합니다 앱의 핵심적인 느낌과 경험은 실제로 유지 이 하나의 화면에 위젯이 혼합되어 있습니다 스타일링, 그래서 나는 그것이 여전히 꽤 잘 작동한다고 생각합니다

How About 우리의 또 다른 예 그래서 이것은 다른 경우 인 검색입니다 기본적으로 플랫폼에는 이러한 내장 검색 메커니즘이 있습니다 그래서 만약 당신이 [? ?] 검색 관리자, 이는 디자이너에게는 아무런 관련이 없지만 플랫폼 기본 검색은 진저 브레드에서 특정 방식으로 보입니다 실제로 사용자가 사용하려고 시도해야합니다

그 일에 정말로 익숙합니다 반면에 젤리 빈에는 또 다른 유형의 방법이 있습니다 검색보기라는 항목을 사용하여 액션 바 이는 자동 완성과 동일한 종류의 것을 보여줍니다 정말 매우 비슷합니다

구현은 개발자에게 약간 다릅니다 그러나 다시 한 번 사용자가 기대하는 바를 사용하고 있습니다 왼쪽에 표준 플랫폼 작업, 표준 작업 오른쪽에 막대기 물건 ADAM KOCH : Ted Search보기의 또 다른 예 진저 브레드 스타일링 ROMAN NURIK : 이것은 환경 설정의 한 예입니다

일반적으로 시스템 기본 스타일을 사용하려고합니다 거기서 당신 만의 스타일링을하고 싶지는 않습니다 가능한 경우 표준 환경 설정, 활동을 사용하십시오 당신을 위해 모든 것들을 할 기본 조각 모든 것을 주제로 한 작업과 같은 앱 홀로 스타일, 환경 설정에서, 그들은 여전히 ​​가을 다시 표준에 – 오, 여기 우리가 간다

너는 나를 때렸다 네 테드와 똑같아 테드와 똑같아 그리고 나서, 이것은 정말로 빠르며 말하기 쉽습니다

상황 별 행동에 대해 제프, 너가 가야한다면, 꼭 따라서 상황 별 행동 – 이것은 일종의 것입니다 논쟁의 여지가있다 문맥 액션 바를 일종의 backport합니까? 사소한 상호 작용이라고 할 수 있습니다

그리고 그것은 그것이 개발자에게 달려 있다고 생각합니다 그것이 쉬운 경우에, 그 후에하십시오 그렇지 않다면 핵심이 아니라면하지 마십시오 앱에서의 경험 이 경우 Pattern의 경우 핵심 메 커닉은 여기에서 작동합니다

패턴을 사용하여 사용자가 여러 선택을 할 수 있도록 허용 패턴이 여기에 의미가 있지만, 확실히, 나는 생각한다 아직 2 차적입니다 세부 정보 화면의 작업 그래서 당신의 백 포트를 전적으로 의무화하지 마십시오 문맥 액션 바 내가 ActionBarSherlock이 문맥 액션 바 백팩, 그래서 당신을 위해 명심해야 할 것이있다

그리고 이것은 I / O App의 예입니다 상황 별 액션 바를 백 포트하지 않기로 결정했습니다 그래서 여기, 길게 누를 때, 당신은 컨텍스트 메뉴는 이전 표준보다 더 표준 적입니다 버전의 플랫폼 패턴에서 다른 화면이 선택되었습니다

대화 상자의 기본 장치 스타일 그리고 그들은 실제로 플러스와 대화 상자에 부정적인 동작이 발생했습니다 Play 스토어에서 더 많은 정보를 얻었습니다 그게 마지막이야 예

승인 ROMAN NURIK : 그것은 이전 버전과의 호환성이었습니다 분명히 우리는 큰 주제를 다룰 수 없습니다 그러한 짧은 기간 너희들이 의견, 생각, 느낌이 있다면 온라인으로 무료로 게시 할 수 있습니다

우리가 놓친 것이 있다면, 우리는 다른 에피소드에서 언젠가 네 NICH BUTCHER : 예 어쩌면 우리는 후속 조치를 취해야 할 것입니다 네, 물론입니다

NICK BUTCHER : 많은 내용이 있습니다 ROMAN NURIK : Design News를 살펴 보겠습니다 아주 약간의 시간 첫째, Taylor는 언제나처럼 재 설계를하고 있습니다 그는 단지 영화 발매에 정말 멋진 재 설계를했습니다

내가 밀어 낸 마법사 호출기 예제를 사용하여 몇 주 전, 정말 멋지다 그리고 이것은 맞춤 카드 스타일입니다 여기에 구입 한 티켓 그거 정말 멋지다 분명히 우리는 최근에 공식 안드로이드 디자인을 시작했습니다

Google+ 커뮤니티 여기에 게시물의 몇 가지 예가 있습니다 아직 보지 못했다면 가입을 권유합니다 – 거기에서 나오는 많은 좋은 콘텐츠 NICK BUTCHER : 나는이 공동체를 사랑합니다 정말 높은 수준의 토론이 진행되고 있습니다 잘 했어

마지막으로, 닉, 너에 대해서 이야기하고 싶니? 안드로이드 슬라이드에 대한 두통 완화의 반응? 네 NICH BUTCHER : 예 이것은 정말 아름다운 프리젠 테이션입니다 나는 당신이 이것을 원할 경우 이것을 확인해 주실 것을 적극 권장합니다 좋은 요약 또는 온도를 어디로 가져 가는지 반응 형 디자인은 Android, 특히 웹에 있습니다

개발자의 관점 – 정말 좋은 프레 젠 테이션 난 그것을 추천 해 ROMAN NURIK : 굉장해 나는 그것이 쇼를위한 것이라고 생각한다 조정 한 모두에게 감사드립니다

우리는 다음 주에 보지 않을거야 이것은 실제로 2012 년 마지막 쇼입니다 2013 년에 언젠가는 당신을 보게 될 것입니다 튜닝에 감사드립니다 나는 Roman Nurik입니다

아담 코흐 : 아담 코흐 Nick Butcher의 안녕 ADAM KOCH : 좋은 휴가 보내십시오 모두들 해피 홀리데이

[음악 재생]

Google I/O 2010 – Android UI design patterns

>> Jim Palmer : 환영합니다 나는 Jim Palmer, 안드로이드 사용자 경험의 책임자입니다

팀 말하자면, 너무 흥미롭고, 디자인 세션을보기 위해 많은 사람들이 나올 것을 알기 위해 회의에서 디자이너를 만나러 왔습니다 그래서 와우, 거기에 대한 모든 지원에 감사드립니다 [박수] >> Jim Palmer : 오늘의 세션은 Android UI 디자인 패턴입니다 우리는 안드로이드의 성장에 대해 정말 흥분하고 있으며, 물론 모든 애플리케이션은 하기

그러나 정말로, 개발자 샌드 박스에 들러서 전화기의 벽을 확인하십시오 누구나 그 터치 기반 모바일을 의심합니까? 장치가 차세대 컴퓨팅 제품을 지배하게 될 것입니다 권리? 이것은 그것이있는 곳입니다 그래서 우리는 여기에있는 것이 기쁩니다 여러분이 비전을 실현하도록 도와주십시오

오늘, 내 소개 후 우리는 우리가 팀에서 탐구해온 새로운 패턴 중 일부는 시각적으로 디자인을 마치고 모든 것을 하나로 묶을 앱을 둘러보십시오 그게 뭐에요? 우리가 나아갈 곳에 대한 통찰력 더 나은 안드로이드 애플 리케이션을 만드는 데 대한 실질적인 조언으로 물론, 이것이 Google 인 경우, 우리가 작은 nerdy를 가지지 않았다면 옳지 않을 것입니다 길을 따라 질문 프레젠테이션을 진행하는 동안, 용어를 알아볼 수 있는지 알아 보려면 고전 수사학의 연설 형식입니다

Q & A에서는 이름을 지정할 수있는 사람에게 소장품을 줄 것입니다 괜찮아 그럼 여기서 세션으로 들어가 봅시다 작년 I / O 이후로 많은 일이 일어났습니다 기계적 인조 인간

너희들은 그 방출을 알고있다 : 도넛, Eclair, 넥서스 원을위한 Eclair의 업데이 트뿐만 아니라 곧 Froyo 그러나 사용자 경험 관점에서 볼 때 중요한 일 중 하나는 더 많은 하드웨어 프로파일 지원, 특히 다양한 화면 크기 및 밀도 보시다시피, 장치 벽 왜 그것이 우리에게 커다란 이익이되었는지를 보여줍니다 약 180dpi의 1/2 VGA 화면 인 G1에서 두 가지 버전을 추가했습니다 약 240, 250 dpi의 WVGA 결과적으로 Google은 시스템을 사용하여 자산을 목표로 설정하여 각 자산을보다 효율적으로 만들 수 있습니다 그래서 우리는 오늘 그것에 대해 이야기 할 것입니다

물론 또 다른 큰 변화는 개발자 커뮤니티에서 앱이 폭발적으로 증가했습니다 나는 너에게 알리고 싶다 우리는주의를 기울인다 무슨 일이 벌어지고 있는지, 우리가 제공하고있는 기존 도구를 어떻게 사용하고 있는지, 당신이 해결하려고하는 새로운 도전들과 그것들을 통합하는 것 우리가 채택하고있는 일부 패턴을 보면서 앞으로 나아갈 것입니다

실제 세션을 시작하기 전에 몇 가지 상황을 설명해 보겠습니다 사람들은 UI 그룹의 안드로이드 디자인 철학을 묻습니다 시작하려면, 우리는 여기에서 다소 이단 적이되기를 원하며, 좋은 UI는 간단합니다 개념 상 호소력이 있지만 단순한 어떤 의미에서의 의미 그것은 힘의 부재, 적응할 수 없음을 의미 할 수 있습니다

또는 성장할 수 있습니다 특히,이 개념은 종종 UI에 있습니다 마치 클릭 횟수 또는 터치 횟수로 계산 된 원 측정하면, 당신은 당신이 쓸모있는 제품을 갖게 될 것이라는 것을 확신하게 될 것입니다 사실, UI를 사용할 수있게 만드는 것이 명확하고 혼란 스럽습니다 좌절감과 일반적인 감각으로이 제품을 사용하는 방법을 모릅니다

그로 인해 총 클릭 수보다 더 많은 피해를 입 힙니다 따라서 기능에 과부하가 걸리거나 복잡한 상호 작용이 너무 많으면 좋지 않습니다 그러나 단순성보다 명확성에 초점을 맞춤으로써 우리는 제품을 얻을 수 있다고 생각합니다 사용하기 쉽고 강력합니다 이것이 우리가 생각하는 것 중 하나입니다

약 우리 철학의 또 다른 부분은 다음과 같이 사용하는 것입니다 사람들이 정말로 신경을 쓰는 내용에 가능한 한 많은 화면을 제공합니다 내용은 만족 스럽습니다 특히 사진, 음악, 상태 업데이트, 메시지 여부에 상관없이 콘텐츠를 제공합니다

물론 일반적인 작업을 넣어 UI의 명확성을 높이고 싶습니다 화면에서 클릭 가능한 항목으로 그리고 우리는 오늘 그것에 대해 이야기 할 것입니다 패턴 하지만 점점 더 많은 콘텐츠가 화면 자체에 표시됩니다 전통적인 UI 컨트롤뿐만 아니라 상호 작용을 유도 할 수 있습니다

그리고 왜 이것이 중요한가? 시간이 지남에 따라, 우리는 스크린의 시각적 인 복잡성, 알다시피, 박스와 모든 라인 내의 박스 그래서 그것은 또한 그것이 더 가벼워지는 것을 도울 것입니다 콘텐츠와 UI 간의 긴장감 Chrome은 일관성에 대한 토론에서 종종 펼쳐집니다 UI가 일관성이 있습니까? 최악의 경우, 이것은 모든 것을 만들자는 것을 의미합니다 같은 사람들은 무엇을해야하는지 알고 있습니다

우리 그룹에서 홍보 할 내용은 다음과 같습니다 상호 작용 일관성, 즉 존재하지 않고 할 수있는 것을 사용자에게 명확하게 보여줍니다 단조로운 허브 사이먼,인지 적 창시자 중 한 명 심리학은 "정보는주의를 끌고있다"고 말했다

또한 오늘날 사용자가 사용할 수있는 모든 옵션과 선택 사항으로 제품은 사용자의 참여를 유도합니다 따라서 상호 작용을 일관되게 유지함으로써, 치료 방법을 다양하게하고 시각적 표현과 시각적 즐거움을 추가하면 사용자가 귀하의 제품에 실제로 참여하십시오 마지막으로 모바일 장치는 바로 그 정의입니다 개인 우리는 항상 당신과 함께합니다

당신은 그것들을 끊임없이 사용합니다 그래서 사람들은 많은 실험을합니다 새로운 기기를 시험 사용해보고, 앱을 다운로드하고, 앱을 사용해 보았습니다 그들이하고 싶지 않고 할 시간이 없으면 끊임없이 물건을 재구성합니다 그들은 자신의 물건을 한 번 정리하기를 원하며 그 조직을 사용할 수 있기를 기대합니다

미래의 맥락에서 따라서 언제든지 제품을 미래에 활용할 것으로 기대하는 사용자 따라서 응용 프로그램은 다음과 같이 클라우드를 사용해야합니다 사용자가 상황에 머무르고 끊임없이 상황을 재현하지 못하게하는 접착제 물건을 세우고 바탕 화면이나 다른 장소에서 사용하는 것을 다시 설정해야한다는 것을 알고 있습니다 따라서 클라우드는 단지 정보의 원천이 될뿐만 아니라 시간을 줄이고 무엇이 중요한지에 초점을 맞춤으로써 사용자 경험 그들

결론은 다음과 같습니다 소크라테스, 진실에 대한 단순한 지식은 당신에게 설득의 예술을 제공하지 않습니다 그것은 분명히 당신이 사람들에게 행동하도록 동기를 부여하는 방법에 적용됩니다 이러한 맥락에서 나는 디자인이 당신과 당신의 사용자 사이의 의사 소통이라고 생각하길 바란다 단순한 기능만을 생각하지 않고 사람을 설득하는 방법을 설명합니다

시도하고 나서 제품에 계속 참여하십시오 어떻게 그걸합니까? 알아 보자 잠깐 들어가서 리처드를 데려 올께 Fulcher와 디자인 패턴에 대한 다음 섹션부터 시작하겠습니다 >> Richard Fulcher : 고맙습니다, 짐

그리고 오늘 여기있는 모든 이들에게 감사드립니다 그래서 디자인 패턴 우리가 그 말을 할 때 우리는 무엇을 의미합니까? 음, UI 디자인 패턴이 실제로 소프트웨어 디자인 패턴과 다른 것은 아닙니다 오늘 알다시피 되풀이에 대한 일반적인 해결책 일뿐입니다

문제 반드시 완벽한 해결책은 아닙니다 그러나 그것은 견고하고 신뢰할 수 있으며 광범위하게 적용 가능한 솔루션입니다 이러한 패턴은 설계 프로세스의 일부로 나타납니다 Google은 이러한 디자인을 생성하는 데 도움이되는 몇 가지 다른 작업을 Google에서 수행합니다

그 중 하나는 공식적인 사용자 조사를 수행하고 우리는 내부적으로 호출하는 것을 수행한다는 것입니다 dogfooding, 우리는 응용 프로그램의 초기 버전을 할거야, 우리는 그것을 팀과 공유 할 것이다 우리 직속 팀 밖에서 일하는 사람들이 그런 방식으로 피드백을 보내 게 될 것입니다 우리는 어떤 것들이 작동하는지 그리고 어떤 것들은 응용 프로그램 내에서 그렇게 잘 작동하지 않는지보기 시작할 것입니다 또 다른 방법은 언제든지 UI 디자이너를 함께 앉아서 각각을 볼 수 있다는 것입니다 다른 화면에서는 특정 솔루션을 얻는 경향이 있습니다 크리스나 크리스천이 한 일을 살펴 봐야 겠어

내가 살펴볼거야 나는 누군가에게 의사를 불러야한다 왜냐하면 그것은 병이 들기 때문이다 " 마지막으로 가장 중요한 패턴은 패턴이 나타나는 것을 보는 것입니다 개발 공동체, 함께 올라와

우리는 시장을 바라본다 우리는 그것에 도전하는 그 안의 것들을 볼 수 있습니다 그것은 우리에게 영감을줍니다 그리고 그것들은 우리가 생각할 때 도움이됩니다 음, 여기에 문제가 있거나 여기에 정말 흥미 롭습니다

그것을 해결하는 방법 그래서 내가 갈 수있는 패턴을 위해 오늘, 우리는 각각에 대해 약간의 세부 사항을 갖게 될 것입니다 우리는 제목을 부여 할 것이므로 정말 엄격한 어휘로 그들을 참조 할 수 있습니다 몇 가지 예를 들어 보겠습니다 그리고 이것들은 매우 일반적이며 충실도가 낮을 ​​것입니다

우리가이 시점에서 상호 작용에 초점을 맞추고 있기 때문입니다 궁극적으로, 시각적 우리는 그것이하려고하는 문제를 진술 할 것입니다 각 패턴에 대한 많은 권장 사항을 제공 할 것입니다 그래서 내가 다룰 다섯 가지 패턴은 대시 보드, 작업 표시 줄, 검색입니다

바, 빠른 액션 및 컴패니언 위젯을 제공합니다 처음에는 대시 보드가 있습니다 그래서 우리가 여기에 보여줄 모든 예제들에 대해, 나는 거짓되고 위조 된 어플리케이션을 만들어 냈습니다 알다시피, 안드로이드에 대한 열정을 가진 사람들을위한 도구 일종입니다 업데이트를 공유하고 제품 리뷰를 공유하십시오

그래서 우리는이 Android 광신자 응용 프로그램을 가지고 있습니다 우리는 여기서 대시 보드를 두 가지 다른 맛으로보고 있습니다 왼쪽에 세로; 오른쪽에 풍경 대시 보드가 문제를 해결하려고합니다 이 앱으로 무엇을 할 수 있고,이 앱으로 무엇이 새로운지

따라서 핵심 기능을 배치하려고하는 앱에 대한 간단한 소개입니다 앱에 특정 하위 작업으로 사용자에게 명확한 중간 지점을 제공합니다 그들을 위해 수행 할 수 있습니다 당신은 일종의 방식으로 생각할 수도 있습니다 앱이 출시되면 시장에 올릴 수있는 애플리케이션의 영웅 스크린 샷 은 끝났어

사용자가 볼 수있는 한 장의 그림이 무엇인가요? 시장에 출시 된 모든 앱을 빠르게 그들을 멈추고 말하자 알았어 나는이 일이 무엇을 할 수 있는지 얻는다 이것은 나를 위해 이러한 일을 할 것입니다 알았어, 알았어

풀 스크린이므로 많은 부동산을 가지고 있습니다 그리고 그것을 구성 할 수있는 여러 가지 방법이 있습니다 방금 설명한 예는 기능별로 분류되어 있습니다 리뷰 나 검색을 게시하는 것과는 다른 진입 점이 있습니다 그러나 당신이 더 많은 콘텐츠에 중점을 두었다면 아마 상상할 수도 있습니다

아마 카테고리별로, 대시 보드는 최고 평점 또는 가장 인기 있거나 최근에 추가 된 항목에 대해 이야기합니다 또는 더 많은 종류의 생산성에 중점을두면 계정별로 분리 될 수 있습니다 여러 계정을 지원하는 전자 메일 클라이언트 또는 IM 클라이언트 일 수 있습니다 그런 다음 대시 보드를 사용하여이를 표시 할 수 있습니다 대시 보드 사용 권장 사항

그래서 새로운 것을 강조하십시오 그것을 생각하는 좋은 방법은 – 예를 들어 돌아가십시오 – 아시다시피 레스토랑에 대해 생각해보십시오 당신이 정말로 즐기는 것 당신은 식당에 가면 메뉴 그리고 그것은 시간이 지남에 따라 변하는 경향이 없습니다

그러나 당신은 당신의 테이블에 앉아서 스페셜 세트를 얻을 것입니다 화면은 그 두 가지 종류의 게임을 시도합니다 너도 알다시피, 윗부분은 고정되어 있고, 믿을 만하다 너는 어디 있는지 알고있다 그것을 얻으십시오

밑 부분은 약간의 업데이트를 보여줍니다 이 사용자에게는 새로운 내용으로, 사용자에게 해당하는 콘텐츠 개념으로 돌아갑니다 또는 귀하의 응용 프로그램에 적합하지 않은 경우, 새로운 기능이 있습니까? 당신이 할 수있는 앱 사용자의 광범위한 커뮤니티에 새로운 것이 있습니까? 그들의 관심을 불러? 가장 중요한 선택에만 집중하십시오 사용자가 만들 수있는 우리가 여기서 제시하는 지침은 3-6입니다 내부적으로, 우리는 그 아이콘의 집합을 6 팩이라고 부릅니다

그것은 3 ~ 2 개씩입니다 6 가지 항목까지 3 가지 배열 가장 중요한 것을 전달하려고합니다 귀하의 애플 리케이션 않습니다 그리고 flavorful

이것은 화면의 부동산이 많은 앱 내부에서 드문 기회 중 하나입니다 브랜드, 정체성을 보여주는 종류의 게임을합니다 당신이 서비스이거나 당신이 서비스를위한 동반 앱이라면, 그것을 보여줄 수 있습니다 다음 패턴은 작업 표시 줄입니다 이 패턴은 I / O에서 보았습니다

사실 회의 애플 리케이션 따라서 작업 표시 줄은 화면, 맨 왼쪽에있는 연한 파란색 상자의 종류, 응용 프로그램이라는 것을 상상할 수 있습니다 상 제목이 있어요 그런 다음 오른쪽에는 일련의 작업이 있습니다

작업 표시 줄에서 질문을 해결하려고합니다 내가 어떻게 앱이나 할 일을 빨리 할 수 ​​있습니까? 상단에 고정 된 부동산 집합입니다 화면의 그것은 할 수 있습니다 앱 내부 콘텐츠 정확하게 툴바가 아닙니다

우리는 모든 항목을 거기에 두지 않을 것입니다 또한 메뉴를 대체하지 않습니다 몇 가지 항목을 가져 와서 항목을 올리는 것만으로도 충분합니다 제목 표시 줄을 대체합니다 내부에 제목을 넣을 수 있습니다

그렇게하면 제목 표시 줄에 빠른 동작 표시 줄을 바꿀 수 있습니다 앱 전체에 적용되는 액션에 가장 적합합니다 일부 후보자는 다양한 컨텍스트에서 사용하기를 원하는 검색과 같은 것일 수 있습니다 새롭게 하다 어쩌면 당신은 항상 작곡하는 방법을 원합니다

모든 컨텍스트에서 앱과 관련된 새로운 콘텐츠입니다 또한이 도구를 사용하여 대시 보드에 대한 빠른 링크 백업을 제공 할 수 있습니다 따라서 웹의 사용자가 이러한 종류의 개념에 익숙하다고 상상해보십시오 페이지 상단 왼쪽에있는 로고를 클릭하면 해당 앱의 집으로 돌아갑니다 우리는 여기서 동일한 자산을 가지고 있습니다

몇 가지 권장 사항 다시 한 번 강조하면 화면에서 주요 작업 만 수행 할 수 있습니다 좋은 리트머스 테스트는 사용자가 가져서는 안되는 행동은 무엇입니까? 메뉴를 눌러 내 앱 내부로 들어가시겠습니까? 그걸 한줌 앞으로 가져와 우리는 그것을 지침으로 삼 또는 그 이하로 유지하려는 경향이 있습니다 분명한

작업 표시 줄을 사용하여 장소감을 부여하십시오 Android에서 앱에서 장소까지 텔레 포트하는 것이 매우 쉽다는 것을 알고 있습니다 일련의 의도에 따라 앱에 앱을 추가합니다 맨 위에있는 작업 표시 줄을 사용하여 앱을 브랜드화하고이 의도를 따른 후에 사용자가 방문한 위치를 알려줍니다 사용자에게 그들이있는 위치와 어디에서 벗어날 수 있는지에 대한 느낌을 줄 수 있습니다

일관되게 사용하십시오 따라서 작업 표시 줄을 앱의 대부분의 화면에 표시되어야합니다 또한 작업 표시 줄에 작업을 수행 할 예정이라면 일관되게 명령을 내리십시오 같은 패턴으로 사용해보십시오 여기에서 저기로 검색을하지 마라

우리는 한 화면에서 다른 화면으로 이동합니다 그런 다음 문맥에 맞게 사용하지 마십시오 행위 우리는 당신을 좋아할 또 다른 패턴을 가지고 있습니다 그것을 고려해야합니다

그리고 그것은 빠른 행동입니다 빠른 동작을위한 두 가지 예제가 있습니다 왼쪽에, 당신은 일종의 빠른 것을보고있다 Android 광신자 커뮤니티의 누군가가 게시 한 업데이트를위한 액션이 나타납니다 오른쪽에서 다른 빠른 액션 팝업이 표시되지만 이번에는 연락처 프레임, 그것을 게시 한 사람의 이미지

빠른 행동은 말할 수있는 빠른 방법 일뿐입니다 음, 이걸로 내가 뭘 할 수 있을까요? 당신은 행동이 나타나고있는 화면상의 뚜렷한 목표를 가지고 있습니다 여기 왼쪽의 경우에는 실제로 오른쪽에 타겟이 있습니다 사용자가 탭하고 빠른 작업을 수행 할 수있는 "더"버튼처럼 보입니다 오른쪽 사진에서 사용자의 사진을 누릅니다

빨리 행동을 올리십시오 시각적 타겟이 중요한 이유는 Android에서 엄청난 것입니다 상황에 맞는 행동에 힘을 불어 넣을 수 있습니다 물건을 가진 것들, 그들은 그것을 즐깁니다 많은 사람들이 그 무대로 가지 않습니다

그들은 단지 그것을 완전히 의식하지 않고 단지 다른 모든 것으로 생각하지 않습니다 컨텍스트가 나타날 수 있습니다 따라서 화면 타겟을 제공하면 내가 여기서 할 수있는 일이 있는지 알아 우리는 이들을 최소한으로 파괴하려고 노력합니다 화면 컨텍스트 그들은 행동하는 아이템 위 또는 아래에서 일종의 팝핑을합니다

그들은 전통적인 문맥 항목 대화처럼 아이템을 은폐하지 않습니다 그리고 행동 자체는 매우 간단해야합니다 이상적으로는 의사 소통 할 수 있습니다 단지 아이콘 또는 아이콘과 단어 또는 두 개의 레이블이있는 아이콘입니다 액션이 실제로 즉각적이고 명백하게 나타나기를 바랍니다

팝업으로 사용자가이 사고에 빠지기를 바라지 말라 내가 할 수있는 일? 다시 말하지만, 그들이하고 싶어 할지도 모르는 가장 명백한 것에 집중하십시오 그리고 그것은 빠르고 재미 있어야합니다 오늘 일찍 대화에 참석 한 사람이 있다면 YouTube의 몇 명의 디자이너가 긍정적 인 사용자 경험을 제공 한 프리젠 테이션 그리고 그들은 일곱 가지 원칙을 세웠다 그리고 첫 번째 원칙은 빠르다는 것이 었습니다

그들은 실제로 빠른 것이 가장 중요한 특징이라고 말했습니다 나는 지금 당장 주장하지 않을 것이다 그러나 나는 빠른 가치가 있다고 생각합니다 그리고 그들은 좋은 주장을 한 것입니다 빠르다는 것은 제품이 왜 느려지는지 이해하지 못하는 신규 사용자와 제품이 베테랑 사용자뿐만 아니라 반응이없는 경우에도 일종의 퇴보를 준비합니다

누가 단지 그것을 통과하고 싶어하는지 따라서 신속한 조치가 두 가지 모두에 도움이되기를 바랍니다 신속한 조치를위한 권장 사항 이들은 내부 목표를 가지고 경쟁 할 때 걸음 걸이입니다 이번 업데이트로 돌아 가면 많은 일들이 진행됩니다

업데이트 한 사람이 있고, 업데이트 텍스트가 있고, 시간이 있습니다 업데이트에는 하이퍼 링크 또는 다른 것들이 포함될 수 있습니다 오른쪽에 예를 든다면 Brandi Shaffer의 업데이트를 활용하고 싶습니다 그만큼 사실 그 URL이 실제로 큰 목표라는 사실을 알기 때문에 내가 언론에 링크를 따르고 싶지는 않지만 실제로이 전향과 같은 것을하고 싶습니다 친구에게 업데이트

업데이트로 무언가를하는 측면에서 뚜렷한 목표를 부여합니다 왼쪽에있는 링크와 업데이트를위한 별도의 타겟은 이것으로 무언가를합니다 사람이이를 해결하는 데 도움이됩니다 가져 오기 만하면됩니다 가장 중요하고 명백한 행동

더 자세한 내용이 없을 때 사용할 수 있습니다 항목보기 노래 목록과 같은 것 내가 노래를 누르면, 나는 지금 당장 벗어났다 연주하고 음악이 시작되지만 노래에 대한 다른 것들은 없습니다

신속한 평가를 통해 평가를 받거나이를 친구에게 추천 할 수 있습니다 그 가지고있는 컨텍스트에서 사용하지 마십시오 다중 선택 좋은 예는 아마도 전자 메일 클라이언트 일 것입니다

메시지 목록 우리가 이메일과 Gmail에 접근하는 방식을 보면 장치에서 우리는 일련의 주요 체크 박스를 제공합니다 이 확인란을 클릭하면 그런 다음 무언가가 선택되면 화면 하단에 하단 버튼 막대가 나타납니다 선택 상태에서 취할 수있는 조치가 제공됩니다 해당 시스템을 사용하거나 빠른 동작을 사용하지만 두 가지를 섞어 사용하지 마십시오 오늘 제가 이야기하고 싶은 네 번째 패턴은 검색 창입니다

여기에 두 가지 예가 있습니다 왼쪽의 빈 검색이 나오고 사용자가 방금 아이콘을 눌렀습니다 검색 필드 왼쪽에 그리고 나서 그들은 팝업 선택기를 얻었습니다 그들이 원하는 검색 모드를 선택하기 위해 빠른 액션 팝업과 비슷합니다 친구를 검색하거나 리뷰를 추가 할 때 사용합니다

오른쪽에는 진행중인 쿼리가 있습니다 사용자가 타이핑을 시작했고 추천 제시되기 시작했다 따라서 검색 창은 어떻게하면 찾을 수 있습니까? 화면 상단에 고정됩니다 그래서 당신이 검색 바는 동일한 부동산을 대체합니다 그냥 뒤집어주세요

제안을 뒷받침해야합니다 그리고 당신은 또한 우리가 선택자라고 부르는 것을 사용할 수 있습니다 검색 모드를 변경합니다 내가 말한 팝업이야 모든 앱이 여러 검색 모드를 사용하는 것은 아니며 심지어 검색 모드가 여러 개인 경우 그 선택기를 사용하지 않기로 결정할 수도 있고 그 대신 여기에 제안 사항을 적어 둘 수도 있습니다 다른 검색 모드로 피벗을 제공하는 목록 몇 가지 제안

간단한 검색을 위해 검색 창을 사용하십시오 노래로 돌아 가자 우리가 말하고있는 목록 그것은 긴 목록 일 수 있습니다 참석자 중 하나 인 경우 누가 모토로라 드로이드를 가지고 있는지, 내가 특정 노래를 찾길 원한다면 나는 생각할지도 모른다

키보드를 열고 타이핑을 시작하면 키보드로 필터링됩니다 그리고 그게 효과가있다 당신이 키보드에 있다면 Nexus One을 사용 중이라면 해결 방법이 있습니다 그에 대한

당신은 메뉴 단추에 의지 할 수있다 그리고 키보드는 올 것이다 그러나 모두는 올라가지 않을 것이다 그것을 깨닫는다 따라서 검색 창을 사용하여 검색 할 수있는 방법이 있다고 말하면서 목록의 단순한 필터를 수행하더라도 사용자에게 가치를 제공 할 수 있습니다

풍부한 제안을 제시하십시오 라벨을 붙이지 마라 몇 가지 정보를 제공하십시오 내가 그 노래 목록에 있다면, 그것은 핑크 플로이드의 "돈" 또는 Eddie Money의 "돈" 정보의 두 번째 비트를 제공하십시오

그런 다음 동작을 일관되게 사용하십시오 화면에 검색 버튼이있을 수 있습니다 제조업체에 따라 기기에 검색 하드 키가있을 수 있습니다 너는 심지어 메뉴 내에서 검색 할 수 있습니다 그들은 모두 같은 곳으로 가야합니다

그들은 모두해야한다 검색 창을 표시하십시오 마지막으로 살펴볼 패턴은 동반자입니다 위젯 그래서 저는 여기에서 4 가지 종류의 일을했습니다

Android 광신자 앱용 위젯 그래서 당신에게 얼마나 많은 새로운 업데이트가 있는지 보여줍니다 최신 업데이트가 들어 있으며 메시지 작성을위한 빠른 링크가 있습니다 따라서 컴패니언 위젯은이 앱을 어떻게 만들 수 있습니까? 내 집 경험의 재미있는 부분? 따라서 앱을 지원하기 위해 노력하고 있습니다 콘텐츠 및 기능을 홈 화면으로 전달합니다

사용자가 집에있을 때 그들은 항상 자신이 원하는 것을 알 필요는 없습니다 때때로 그들은 단지 브라우징 이것은 응용 프로그램에 대한 일종의 이동을위한 기회입니다, "나를 데리러, 나를 데리러!" 또한 컴패니언 위젯을 사용하면 집이 더 맞춤화되고 더 맞춤화되었습니다 우리는 반복적으로 듣는다 사용자로부터 Android 경험에 대해 가장 높이 평가하는 것 중 하나 우리가 집에 얼마나 많은 통제권을 주는지; 우리가 그들에게 다른 월페이퍼를 갖게하고, 심지어 라이브 배경 화면; 우리는 많은 재미있는 지름길을 놓을 수있게되었습니다

그들이 가지고있는 폴더; 그들은 위젯을 가지고있다 그들은 일종의 물건을 사각형 격자는 왼쪽에서 오른쪽으로 작동합니다 너가 위탁의 종류에 할 수있는 무엇이든 사용자가 이미 가치있는 것으로 재생되고 있습니다 그래서 몇 가지 권장 사항 가치 제공 위의 간단한 앱 아이콘

해당 사용자 컨텐츠를 앞으로 가져 오십시오 위젯에서 모든 것을하려고하지 마십시오 작업에 대한 포인터를 가지고 있으면 좋지만 한 번 사용자는이를 선택하여 앱으로 가져와이를 수행합니다 작성 링크는 좋은 예입니다 그곳에

그들은 작성을 치고, 당신의 앱으로 가져 가서, 앱의 일부로 가져갑니다 작곡 활동을하고 거기에서 일하게하십시오 공간을 효율적으로 활용하십시오 큰 위젯을하고 싶다면 차가워 요 그러나 제안에 대해서도 생각해보십시오

사용자가 자신의 공간을 제한하는 방법에 대해 더 염려하는 작은 변형 위젯 집에있다 큰 앱 실행기가 아닙니다 그래서이 모든 것을 하나로 묶습니다 실제로 건물에 들어가는 상호 작용 중 일부는 좋은 안드로이드 애플 리케이션, 당신은 당신의 앱에 당신을 먹일 수있는 위젯을 가지고있다 대시 보드가 있습니다

앱이 할 수있는 모든 일들을 정리합니다 대시 보드에서 조치를 취할 수 있습니다 작업 표시 줄을 지원하는 다른 화면으로 이동할 수도 있습니다 작업 표시 줄이 피벗 할 수 있음 검색하려면 끄기 그런 다음 개별 화면에서 항목에 대한 빠른 작업을 지원할 수 있습니다

당신이 거기에 표시하는 항목 관심을 가져 주셔서 감사합니다 이제 우리가 상호 작용하는 것들을 다뤘으니 크리스천 로버트슨을 환영합니다 무대에서 시각 디자인에 대해 조금 이야기를 나누십시오 [박수] >> Christian Robertson : 좋습니다

그래서 Jim은 시작했다 안드로이드와의 마지막 I / O 이후로 변경된 많은 것들을 이야기함으로써, 그리고 흥미 진진한 것들이 많이 있습니다 그리고 우리가 실제로하는 것들 중 하나 흥분되는 것은 새롭게 태어난 장치의 다양성입니다 동시에 우리는 이것이 디자이너와 개발자에게 몇 가지 문제를 야기한다는 것을 알고 있습니다 Android 애플리케이션 제작 특히 새로운 화면 크기가 있습니다

고려하다 이제 마지막 세션에 참석했다면 픽셀 밀도의 개념 우리는 개발자와 이야기하면서, 우리가 가장 궁금해하는 곳은 픽셀 밀도가 어떻게 작동하는지입니다 이 예가 화면에 표시되는 것을 볼 수 있다면 왼쪽, 우리는 화면 크기가 약 3inches, 오른쪽, 3

2 인치, 왼쪽의 장치가 두 배 이상의 숫자를 가진 것을 알 수 있습니다 픽셀 그래서 Android는이 차이를 알고 있습니다 작은 공간에서 많은 픽셀을 가진 장치를 hdpi로 분류하고, 또는 고밀도 장치와 마찬가지로 mdpi 또는 중간 밀도에 대한 분류가 있으며, 저밀도의 경우에도 ldpi입니다 여기서 아이디어는 자산을 대략 동일한 물리적 크기

예를 들어 인간 크기의 손가락에 맞게 아이콘을 디자인하면 for – Hero 기기라고하고 Nexus One에서 애플리케이션을 가져 와서 실행한다고 가정 해 보겠습니다 당신은 아이콘이 실제 크기와 같고 여전히 실제 인간의 크기와 일치하기를 원합니다 손가락 그래서 안드로이드는 배후에서 몇 가지 일을합니다 한 가지 방법은 mdpi 자산에서 자산을 자동으로 확장하고 그 자산을 확장하는 것입니다 hdpi 화면 용

여기에 두 개의 자산이 있다는 것을 알 수 있습니다 왼쪽은 hdpi, 하나는 mdpi입니다 오른쪽에있는 크기가 같은 크기로 조정 된 것을 확인하십시오 많은 번짐 그래서 Android에는 다음과 같은 기능이 있습니다

그 이것이 개발자에게 보이는 것은, if 당신은 단지 여기를 보았습니다, 나는 hdpi drawables를 위해 추가 한 추가 디렉토리를 가지고 있습니다 아이콘이나 자산의 이름을 똑같은 이름으로 지정하면 Android가 올바른 작업을 수행합니다 그 고밀도 자산을 교환하십시오 그래서 이것은 약간의 추가 작업을 추가합니다

개발 프로세스가 필요하지만 실제로 이러한 이점을 활용하는 것이 가치 있다고 생각합니다 놀라운 고해상도 스크린 그렇다면 작업 흐름은 다음과 같습니다 자산 생산의 관점? 꽤 간단합니다 내가 너를 지나갈거야

몇 가지 잠재적 함정을 지적합니다 이것이 내 mdpi 자산이라고 가정 해 봅시다 나는 크기를 바꾸고 싶다 나는 그것을 확장하려고합니다 자 여기 매직 넘버는 150 %입니다

그래서 만약 나는 15의 배율로 배율을 조정하면 내 mdpi 에셋이 hdpi에 맞는 크기가됩니다 이제 주목할 점은 자산을 확장하는 경우 훨씬 더 쉽습니다 벡터 기반 이미 따라서 PhotoShop이나 Inkscape 등을 사용하든, 시작하든간에 벡터를 사용하면 나중에 비트 맵을 사용하는 애셋이있는 경우 나중에 벡터를 쉽게 만들 수 있습니다

소스를 재 인증해야 할 수도 있습니다 그래서 나는 이것을 확장하고 꽤 좋아 보인다 이 경우 PhotoShop의 샘플 알고리즘은 꽤 괜찮습니다 당신은, 하지만 때로는 한 픽셀 라인을 수직으로 늘리면 약간의 이미지가 생길 수 있습니다 비트 퍼지 및 그 것들을 청소해야 할 수도 있습니다

그래서 이것은 특히 사실입니다 9 패치 이미지 눈금을 확대하면 눈금을 정리해야합니다 점수; 그렇지 않으면 Nine-Patches가 작동하지 않습니다 다중 화면 크기를 지원하기위한 것입니다

작년에 변화 한 또 다른 점은 우리가 새로운 스타일을 시작했습니다 아이콘 지침 자, 우리가 무슨 일이 일어 났는지 보았습니다 시장에서 우리는 응용 프로그램의 수가 놀랄만큼 증가한 것을 보았습니다 너희들은 가지고있다

정말 열심히 일해 왔고 우리는 그것에 대해 정말로 흥분하고 있습니다 새로운 애플리케이션 스타일에 대해 생각할 때, 우리는 – 몇 가지 가이드 라인을 만들고 싶었습니다 이는 증가하는 응용 프로그램의 다양성을 지원합니다 그리고 그 다양성을 가능하게하기 위해, 우리는 다양한 모양, 재료 및 색상을 가진 아이콘 시스템을 만들었습니다 그리고 우리가 시스템을 함께 맞추는 데 필요한 몇 가지 통일 된 요소를 확립하고자 할 때와 마찬가지로, Android의 시각적 디자인을위한 품질 기준을 높일 수 있습니다

그래서 특성 중 일부는 촉각입니다 그래서 심지어 최소한의 아이콘 그들이 물질로 만들어진 것처럼 느낍니다 그들은 위쪽 조명, 매트 및 전방 향하고, 새로운 3D 실행기 메뉴에서 작업하는 데 도움이됩니다 또한 시각적 효과를 줄이기 위해 복잡성을 피하기 위해 synecdoche를 사용합니다 synecdoche는 응용 프로그램의 한 구성 요소를 가져올 곳입니다

이를 사용하여 전체 애플리케이션을 나타낼 수 있습니다 예를 들어 설정 아이콘은 간단합니다 하나의 설정 다이얼과 전체 제어판의 그림이 아닙니다 또는 계산기 아이콘이 간단합니다 계산기 전체의 그림 대신 키를 같게합니다

그래서 단순함을 유지하십시오 그리고 우리의 가장 큰 목표는 응용 프로그램 및 브랜드를 제공합니다 그래서 우리는 지역 사회가 무엇인지보고 싶어합니다 믹스에 추가됩니다 사실이 아이콘을 디자인 할 때 우리는 사람들이 커뮤니티에서 만들었던 독특한 아이콘의 대표 샘플을 가져 왔습니다

응집력이 느껴지는지보기 위해 그 둘을 섞어서, 우리는이 새로운 스타일처럼 느낍니다 실제로 그 확장을 가능하게합니다 괜찮아 그래서 개발자가 착륙하는 것을 돕기 위해 이 새로운 아이콘 스타일로 런처 아이콘 템플릿 키트를 제공합니다 그리고 내가 보여주게

어떻게 작동하는지 그래서 당신은 벡터 기반 심벌 마크 응용 프로그램에 적용하고 싶습니다 그래서 저는이 정사각형의 타일을 집어들 것입니다 내 브랜드의 색상과 일치하도록 변경할 수 있습니다

이 경우 나는 녹색을 좋아한다 나는 단순히 내 벡터 아트를 추가 할 것이다 어쩌면 여기에서 일러스트 레이터로부터 가져올 것입니다 과 그런 다음 키트에 포함 된 일부 레이어 효과를 적용하십시오 매우 빨리 심벌 마크

또는 내 로고에 기반한 무한한 아이콘 그래서 우리는 많은 것들이 있음을 인정합니다 브랜드의 아이콘을 사용하면 훨씬 더 렌더링을 원할 것입니다 이것은 사람들이 시작하는 데 도움이되는 유용한 방법입니다 따라서 Android의 장점 중 하나는 유연성입니다

그리고 우리는 그것을 믿는다 비주얼에 대해서도 마찬가지입니다 따라서 권장하는 아이콘 시스템을 활성화하면 다양성뿐만 아니라 뚜렷하고 브랜드화 된 애플리케이션을 구현할 수 있습니다 안드로이드에 대한이 비전 그리고 나는가는 크리스에게 배턴을 전달할 것입니다

이러한 새로운 디자인 패턴과 맞춤형 브랜드 자산에 대한 사례를 보여주기 위해 이야기를 계속할 수 있습니다 [박수] >> Chris Nesladek : 안녕하세요 저는 Chris Nesladek입니다 오늘 저는 여기에서 신청서를 데모하러 왔습니다 이 패턴 중 가장 좋은 것을 보여준 많은 사람들이 다운로드했을 것입니다

우리가 최근에 선적 한 기술을 연마했습니다 Android 용 Twitter를 살펴 보도록하겠습니다 그래? 그래서 우리는 대시 보드를 단단히 제자리에서 시작합니다 보시다시피 대시 보드를 사용하여 수행 한 한 가지 비결은 바로 Android 21에서 제공 한 라이브 월페이퍼의 장점을 사용하고 홈 화면

그것들은 트위터 구름이고 그것은 트위터입니다 새 그리고 눈치 채면 재미 있고 기능적이며 단지 집보다는 조금 더 좋습니다 리차드가 이전에 설명한 오리엔테이션 활동 저 새는 실제로 저를 지금 쳐다 보며 이상하거나 이상한지를 결정할 수 있습니다

하지만 그 말은 귀엽다 어쨌든 그것들은 실시간 경향 거품이기도합니다 다시 한 번 상단에 작업 표시 줄이 있습니다 사용자에게 방향을 지정하십시오

그래서 데모 할 다음 패턴은 분명히 액션 바 어떤 사람이 어떤 일에 대해 주된 활동이 될지를 말해 줄 수 있습니까? 트위터 응용 프로그램? >>> 트윗 >> Chris Nesladek : 우리가 간다, 트윗 따라서 새로운 액션 바 패턴을 사용하면 트윗 아이콘을 탭하여 작성 활동으로 이동하십시오 자, 여기서 가장 공통적 인 기능이 실제로 사용자를위한 화면 상에 있다는 것을 알 수 있습니다

보기에 좋아 그러나 우리는 메인 메뉴의 기능을 포기하지 않았습니다 제가 지적하고자하는 것은 당신이 가장 중요한 행동들을 표면화 할 수있는 반면, 메인 메뉴를 사용하는 Android UI 패턴의 풍부함을 잊어서는 안됩니다 차라리, 주 메뉴를 사용하십시오 원하는 경우 신속하게 사진을 업로드 할 수 있습니다

당신은 할 수 있습니다 – 나는 그렇게하지 않을 것입니다 사진을 찍거나 여러 장을 추가 할 수 있습니다 우리가 구현 한 선택 도구를 사용하여 "at"사용자 이름을 지정하면 더 쉽게 트위트 할 수 있습니다 그런데 또 다른 멋진 기능 중 하나는 기본 메뉴에서 호출하고 싶습니다 전환 할 수 있습니다

이 메시지를 통해 직접 메시지로 전환하십시오 그래도 대시 보드로 돌아가 봅시다 대시 보드로 돌아갈 필요가 없습니다 나중에 좀 속임수를 보여 드리겠습니다 그러나 우리를 앱 집으로 데려가는 Twitter 로고를 탭하면 대시 보드에 다시 나타납니다

이제 대시 보드에서 다음 패턴이 분명히 표시됩니다 검색 창입니다 이제 검색 할 때 – 불행히도 검색 제안을 받아야하지만, 그렇지 않습니다 권장대로 그러나 왼쪽 상단을 탭하면 트윗과 사람들 사이를 피벗 할 수 있습니다

그래서 새로운 검색 창 코퍼 버블 껍질로, 어쨌든 그것을 검색하고 싶습니다 검색 제안을 권장 할뿐만 아니라 내가 뭔가를 검색했다면 실제로 내 잡아라 그래서 제안이 있습니다 잘 했어, 제대로 구현 그리고 내가 트위터에 대한 Google I / O를 검색하면 내 기록을 보유하게됩니다

우리가 돌아갈 때 사진 찍고 탭하세요 거기는 구현 됨 바르게 다음은 빠른 행동이 될 것입니다

나의 좋아하는 패턴 사실, 빠른 행동은 열정이었습니다 왜냐하면 저에게 긴 언론 우리가 대화의 맨 위에 놓았을 때 매우 강력했지만 매우 파괴적이었습니다 행동하려고했던 데이터 빠른 행동으로 우리가 당신처럼 할 수있는 일 이 액티비티에는 스크린상의 어포던스가 있습니다

너는 그것을 탭하고 위로 레일을 내민다 행동하고자하는 데이터를 다루지 않는 행동의 이제는 Richard가 이전에 언급 한 것처럼 ListView 버튼 요소를 끄는 것이 좋습니다 따라서 사용자가 신속하게 링크를 탭하여 해당 링크를 실행 가능하게 만들 수 있습니다 이 뷰에서 오버 플로우 함수에 대한 주 메뉴를 사용하는 것을 잊지 마십시오 두드리기가 어렵다 이 목록보기 안에 트윗 메타 데이터 링크가 있지만 때로 사람들은지도에서 디자이너보기가 메인 메뉴

이제 대시 보드, 작업 표시 줄, 검색을 완료했습니다 바, 빠른 행동 다음 단계 – 우리는 이것을 통해 날고 있습니다 대시 보드, 작업 표시 줄, 검색 바, 빠른 행동, 옙 다음은 컴패니언 위젯입니다

트위터 앱의 컴패니언 위젯은 두 가지 방식으로 구현되었습니다 그것은 크고 작은 위젯으로 구현되었습니다 이 버튼은 단순한 버튼으로 구현되지는 않지만 오히려 하나의 버튼으로 구현됩니다 그와 관련된 행동 예를 들어 작은 위젯에서는 이것을 탭하고 해당 트윗에 답장하기 위해 작성된 짹짹으로 이동하십시오

아니면 – 오 – 오 우린 방금 잃었 어 하지만 돌아 왔어 또는 큰 위젯에, 당신은 그것을 사용할 수 있습니다 너의 자신의 무언가를 짹짹

괜찮아 따라서 대시 보드, 작업 표시 줄, 검색 창, 빠른 동작 및 화면 상에있는 내용을 다루었습니다 위젯 내가 너에게하고 싶은 마지막 두 가지 요점 오늘 우리가 당신의 질문을하기 전에 당신이 패턴을 생각한다면, 좋은 예가 될 것입니다 당신의 활동에 패턴을 쌓는 것에 대해 생각하는 것입니다

그래서 우리의 짹짹 – 여기에 우리의 프로필 섹션을 보면, 당신이 볼 수있는 것은, 난 그냥 화면 왼쪽 상단의 트윗을 두드렸다 그리고이 함수는 실제로 검색 막대 패턴입니다 일반적으로 디자이너로서이 뷰에서 탭을 사용하여 여러 항목을 피벗 할 수 있습니다 포인트, 데이터 세트 그러나, 그것에 대해 생각할 때, 그 거품 어떤 사람들에게는 더 친숙하고 더 빠르며 실제로 개발자에게 묻지 않아도됩니다

flickable 탭을 구현하는 것은 문제입니다 왜냐하면 기본적으로 사용자는 얼마나 많은 데이터 세트가 존재하는지 따라서 패턴 사용에 대해 생각한다면 창조적 인 방법으로 그들을 사용합니다 또한 작업 표시 줄이 놓여 있음을 볼 수 있습니다 빠른 동작과 메인 메뉴가 화면에 표시됩니다

따라서 우리는 풍부한 기능으로 더 많은 기능을 제공 할 수있었습니다 이는 Android 사용자 경험입니다 요컨대 그리고 그 위에 무엇이 더 중요한지 크리스챤이 말했듯이, 생각해보십시오 그리고 폴란드어로, 당신이 볼 수있는 것처럼, 당신이하고 싶은 것 – 우리는 실제로이면을 보게 될 것입니다

옆으로 – 당신은 여러 밀도를 지원하고자합니다 너는 약간의 일을해야 할거야 우리가 이야기했던 것처럼 자산과 함께 tweak 왼쪽에는 트위터의 htpi 버전이 있습니다 앱

그리고 오른쪽에는 mdpi 앱이 있습니다 이것의 mdpi 부분도 똑같이 도전적이었습니다 하지만 기본적으로 시간을 보내고 픽셀을 사용하면 두 밀도 모두에서 멋지게 보이도록 앱을 얻을 수 있습니다 그래서 그걸로 모든 것을 가져 가고 싶습니다 지금 당장 귀하의 질문을하고 싶습니다

당신의 마음에 무엇이 있는지보십시오 고맙습니다 [박수] >> Jim Palmer : 고마워, 크리스 우리는 무대에서 Mike (이름을 말함)를 질문에 대답하도록 초대 할 수 있습니다 청중으로부터 질문을하기 전에 Q & A 괴상한 질문을하고 싶습니다

수사학 장치를 누가 식별 할 수 있습니까? >>> (들리지 않음) >> Jim Palmer : 정말로 그렇습니다 Walter Kaufman의 영화 SYNECDOCHE가 있습니다 SYNECDOCHE는 무언가를 연관시키는 수사적 장치이며, 전체 또는 일부는 전체적으로 부분과 밀접한 관련이 있습니다

좋아 질문으로 넘어 갑시다 바닥에서부터 시작해 보겠습니다 그러면 웨이브를 불러올 수 있습니까? 그래서 우리는 볼 수 있습니다 예

>>> 안녕하세요 롤랜드 슈바이처 나는 앱 날씨 상황에 맞는 메뉴가 파괴적이라는 데 동의합니다 의 관점에서 그들은 종종 당신이 행동하려고하는 데이터를 은폐합니다

그러나 개발자의 관점에서 볼 때 프레임 워크의 일부이기 때문에 훌륭합니다 그래서 행동 바, 빠른 액션 바 및 그 종류의 패턴이 될 것입니다 – 기본 안드로이드 프레임 워크는 우리가 쉽게 구현할 수 있도록합니다 >> 짐 팔머 (Jim Palmer) : 마이크가 이걸 가져 가자 >>> 마이크 : 아마 우리가 따라 왔던 패턴은 응용 프로그램이 보통 조금 앞선 것입니다

이 프레임 워크는 UI 패턴의 관점에서 개척적인 작업이 진행되는 곳이기 때문입니다 그래서 프레임 워크는 우리가 일상적으로 생각하는 것과 일치하는 것으로 결정합니다 패턴 액션 바는 승자와 같습니다 따라서 애플리케이션에서 지원하기 쉽도록 만드는 것이 우리가 작업 중입니다

프레임 워크에 >> 짐 팔머 : 알겠습니다 고맙습니다 이쪽에서 이쪽으로 가져 가자 >>> 그게 다야

>> Jim Palmer : 그게 다야 큰 웨이브에서 하나씩 가져 가자 두 번째는 하드웨어 제조업체가 Google의 입장을 겹쳐서 재고 이상 자신의 UI 향상 안드로이드? 이것은 낙담 할 것입니다 미래에? 아니, 사실, 우리는 Android의 열린 사람들은 그것으로 자신의 일을 할 수 있습니다

우리는 제품과 디자이너 모두가 다른 제품을 볼 수 있다는 점에서 매우 좋습니다 사람들은 그것을합니다 그래서, 우리는 완벽하게 만족합니다 앞으로 계획대로 괜찮아

여기 >>> 그래 그래서 저는 다양한 장치에 대한 신속한 프로토 타입 작업을 많이하고 최근에 많은 작업을 해오 고 있습니다 기계적 인조 인간 그리고 제가 알아 채는 것들 중 하나는 정말 풍부한 UI를 빠르게 만들려면 웹보기를 포기하는 것이 더 쉽다는 것을 알았습니다

HTML, CSS 및 JavaScript를 사용하여 Google에서 사용할 수있는 많은 정보를 얻으십시오 편물 나는 네 생각이 무엇인지 궁금해 접근 방식과 웹 기술과 관련된 많은 것들을 사용한다면 그것을 원시 코드로 가져올 것입니다 >> Jim Palmer : 확실히 UI는 확실합니다

팀은 웹보기 및 특정 도구를 사용하여 프로토 타이핑을 수행했습니다 웹보기에서 전화에 넣어 확실히 차이가 있습니다 웹 뷰를 사용하면 전체 요소보다 분명히 얻을 수 있습니다 그러나 기본 크기 조정을 수행하고 앞으로 나아갈 때 이미지가 어떻게 보이는지 보는 데 좋습니다

장기적으로, 웹보기의 영향을 알고 있습니다 마이크가 한 발짝 더 나아갈 수 있다고 생각합니다 여기에 색상을 추가하면, 오늘 우리의 앱과 확실히 혼합됩니다 특정 기본 응용 프로그램을 사용하는 응용 프로그램이 있습니다 그 효과를 얻을 수 있습니다

내 생각에 아마 그걸 계속 볼 것 같아 믹싱의 종류는 앞으로 나아갈 것입니다 >>> Mike : Gmail 응용 프로그램을 사용한 적이 있다면, Gmail 대화를 볼 때 하나의 큰 웹보기가 표시됩니다 대부분의 콘텐츠는 이미 HTML 형식으로되어 있습니다 우리는 웹 디스플레이를 사용합니다

그러나 그것은 응용 프로그램의 나머지 부분과 잘 어울립니다 >> 짐 팔머 : 알겠습니다 이쪽에 >>> 개발자와 공유 할 지침 모바일에 응용 프로그램을 가져오고 기능 세트를 페어링하려는 사용자 모바일 전용이지만 발견 가능하다는 것인가? 자주 너무 많은 물건을 포장하면 귀하의 사용자는 모바일 버전을 받아들이지 않습니다 너무 적은 물건을 뒤로 가져 가면 다시 사용하지 않을 것입니다

그렇다면 균형이나 지침은 무엇입니까? >> Richard Fulcher : 저는 첫 번째 질문을 생각합니다 당신은 스스로에게이 모바일 컨텍스트에있는 사용자가 주어진다는 것을 물어볼 필요가 있습니다 일종의 작업이 변경 되었습니까? 그들에게 가장 중요한 것은 무엇인가? 그들이 집에서 일종의 외롭고 종류가 아닐 수도 있다는 점을 고려하면? 그래서 내가 할 수있는 권고는 당신이 할 수있는 모든 것들에 대해 생각하는 것입니다 모바일 컨텍스트에서 가장 가치있는 작업을 수행하는 지원 그 중 일부를 어떻게 확장 할 것인가에 대한 일종의 전략으로 생각합니다 두 번째 요점은 우리가 가진 것입니다 – 우리가 가지고있는 몇 번 우리는 당신이 가장 중요한 것을 최전선으로 가져 오기를 바랍니다

당신은 여전히 ​​깊고, 더 어둡고, 덜 빈번한 종류의 많은 것을 뒷받침 할 수 있습니다 물건을 사용했지만, 그냥 사용하지 마십시오 가장 클래식 한 유스 케이스를 종류별로 오염시키지 마십시오 그것들을 화면에 앞으로 밀어 넣는다 빠른 조치를 취하는 것이 큰 이유입니다

그 종류의 행동을 지원하기 위해 메뉴 서랍을 사용하는 큰 이유 >> 짐 파머 : 크리스, 색이 있습니까? 당신은 트위터를 가져 와서 정말로 그것을 훌륭한 앱 그 과정에 대한 모든 생각은 니가 그랬어? >> Chris Nesladek : 많이 지출했는지 확인하십시오 가장 중요한 일이 무엇인지 생각해보십시오 >> Jim Palmer : 그래, 내 말은 그게 진짜로 내려지는 것 같아

너 정말로해야 해 기본 사용자 스토리 또는 사용자 유스 케이스에 대해 열심히 생각하고 그렇지 않은지 확인하십시오 결국 그 얘기를 끝내라 우리는 이런 농담을하고 있습니다 때때로 사람들은 당신이 만들 수있는 특정 기능에 대해 논쟁 할 것입니다

에 대한 매우 합리적인 주장 그런 다음 한 달 후에 다시 보았습니다 가서 20 가지를 어떻게 추가 했지? 어딘가에서 어떻게 끝났는지 뒤에서 보면, 때로는 매 단계마다 논리적 인 것처럼 보이지만, 전체를 볼 때, 그것은 비슷합니다 그건 의미가 없습니다 밀접하게 밀착하는 것은 앱의 본질이 무엇인지, 즉 우리가 줄 수있는 최선의 지침

>>> Mike : 저에게 무언가를 추가하겠습니다 해결하려는 문제의 세부 사항을 모르지만 Android는 작은 화면을 가진 사용자의 복잡성을 도울 수있는 몇 가지 고유 도구 복잡한 공간을 관리하려고합니다 특히 위젯과 배경 작업 및 알림이 도움이 될 수 있습니다 따라서 장치가 오히려 업무를 수행하게함으로써 사용자가 작업을 수행하는 것보다 더 중요하며 사용자에게 흥미로운 것을 표면화하는 것만으로, 사용자가 많은 복잡성을 탐색하지 않아도됩니다 재미있는 일이 발생했을 때 알림 바에 뭔가 표시되면 전혀 탐색 할 필요가 없을 수도 있습니다

배경 처리 및 알림 만 허용 할 수 있습니다 풍부하고 복잡한 탐색 경험을 구축하는 것보다 내게 콘텐츠를 제공하십시오 장치에 이것은 툴킷에서 고려해야 할 또 다른 사항입니다 >> 짐 팔머 : 알겠습니다

웨이브에서 또 다른 문제를 설명하겠습니다 Android 자체가 개발자가 앱용 세련된 UI를 디자인하는 데 어떻게 도움이됩니까? 내가 생각하는 한 가지는 마이크가 말한 것입니다 우리 패턴은 앱에서 많은 탐험을합니다 우리는 우리가 정말로 의미있는 혁신을 추진할 수 있기를 원합니다 그들이 거기에있을 수 있도록 프레임 워크

그러나 크리스천이 지적한대로, 우리는 우리가 너희들을 더 돕고 싶다는 것을 알고있다 그래서 우리는 그의 아이콘 라이브러리와 다른 것들처럼 우리가 사용하는 것들을 출판하려고합니다 사이트까지의 일종의 물건들 그래서 우리가하는 일을, 우리가 공유하고 있습니다 가능한 한 많이

그것들은 두 종류의 콘크리트입니다 우리가 지금하고있는 것들 괜찮아 여기 >>> 나는 물건 만들기에 대한 질문이있다

그들은 클릭 할 수있는 명백한 clickable이다 그래서 ListView를 가지고 있다면 어쩌면 사물에 추가적인 세부 사항이 있고, 그렇지 않은 것도 있습니다 어떻게 나타낼 수 있습니까? 또는 트위터 응용 프로그램에서 나에게 트위터 로고가 클릭 가능 >>> 맞아 >>> 거기에 패턴이 있습니까? >> Chris Nesladek : 솔직히 말하자면, 실제로이 프로그램이 처음입니다

우리가 믿는 이러한 패턴을 가지고 배송됩니다 화면의 왼쪽 상단 부분은 클릭 할 수 있고 앱은 집에 있어야합니다 사실, 숨겨진 방법으로, 당신이 Froyo 이전에 우리의 시장 응용 프로그램을 보면, 그것은 실제적으로 tappable이었고, 다시 보이지는 않았지만, 사용자들에게는 정확하게 좋았지 만, 당신은 그것을 칠 수 있습니다 마켓 집에서도 첫 번째 장소로 돌아 간다 따라서 시간이 지남에 따라 생각할 수 있습니다

UI 스타일의 혁신적인 웹 스타일입니다 우리가 여기서 정말로 추진하려고 노력하고 있습니다 따라서 웹 사이트를 생각하면 왼손에 화면의 일부는 일반적으로 집으로 돌아갑니다 >> Jim Palmer : 그래, 괜찮아 부분적으로 장르 효과가 있습니다

패턴이 형성되면서 사람들이 배우는 것입니다 다른 제품에는 다른 장르가 있습니다 다른 플랫폼에서 배울 수 있습니다 네가하는 또 다른 요소가 있다고 생각해 그들이 시각적으로 말하면서, 그들은 모두 클릭할만한 것처럼 보입니다

그리고 이것은 시각 디자인 관점에서 우리가 많이 말하는 것들 중 하나입니다 Chris, 당신도 알다시피, Twitter app의 비주얼 디자인에서 보았던 모든 아이콘들은 반드시 주변에는 커다란 프레임이 있습니다 뭔가 만드는 사이에 선이 있습니다 배경이나 예술 작품과 비슷하게 보입니다 클릭 할 수 있습니다

우리는 그것을 저지하는 방법이 있다고 생각합니다 여전히 클릭할만한 것처럼 보일뿐 아니라 항상 완전히 필요하지는 않습니다 모든 Chrome을 사용해보세요 그래서 우리가 생각하기에 앞으로 우리에게 더 많은 것을 보아라 내 생각에, 그 방향은 궁극적으로, 화면에서 가능한 한 많은 것들이 클릭 가능해야합니다

왜냐하면 사람들 실험을하고 당신이 만질 때 일어날 것을 기대하십시오 괜찮아 여기 >>> 예, 오리엔테이션 지원에 관한 지침은 무엇입니까? 트위터 앱은 훌륭하지만 Droid가 있고 홈 화면을 보면 옆으로 – >> Chris Nesladek : 네가 말하는 것을 기쁘게 생각한다 개발자로서 선택의 여지가 있기 때문입니다

우리도 그렇습니다 우리는 그 풍경 방향을지지하지 않기로 결정했습니다 >>> 그리고 다른 예가 있습니다 안드로이드, 전화를 걸 때의 세로 다이얼러 그것에 대한 몇 가지 예가 있습니다

개발자의 설계에 달려 있습니다 결정은 당신이 오리엔테이션을지지 할 필요가 없다고 말합니까? 또는 그것에 대한 생각은 무엇입니까? >>> Mike : 일반적으로 더 많이 사용할 수 있습니다 두 방향 모두에서 더 좋습니다 하지만 특정 응용 프로그램이 많이 있습니다 게임의 감각을 회전시키지 못할 것입니다

그들은 초상화 레이아웃에 있어야합니다 다이얼러에는 실제로 디자인이 없습니다 그게 풍경에서 작동하지 않는 이유 주로 구현 시간입니다 우리는 양질의 경관 체험을 할 시간이 없었습니다

그래서 우리는 초상화가 절름발이 풍경보다 낫다고 생각했습니다 그 일은 많은 단계가있어서 꽤 복잡합니다 그러나 일반적으로 사용자는 두 방향 모두에서 장치를 사용하는 것을 좋아합니다 당신은 다른 장치의 부를 보았습니다 그래서 사람들은 여러 가지 방법으로 이러한 것들을 사용하고 있습니다

따라서 사용자에게 더 많은 유연성을 제공 할 수 있습니다 >>> 특히 장치에 키보드가있는 경우 그것은 우리가 고객의 요구 사항에 필요한 것입니다 키보드를 사용하여 풍경으로 이동하십시오 >>> Mike : 맞아

선택 사항이 아닌 키보드를 사용하려면 풍경을 사용해야합니다 그래서 당신은 훌륭한 경험을했습니다 >> 짐 팔머 (Jim Palmer) : 여기 웨이브 사실, 우리는이 질문을 받았다 아시다시피, 이건 구체적입니다

안드로이드가 해상도, 스케일링, 전화, 태블릿 우리는이 세션에서 약간의 시간을 보냈습니다 mdpi 및 hdpi에 대해 이야기합니다 이 시점에서 우리는 하드웨어를 배포하지 않습니다 태블릿 및 그 이상의 기기와 같은 대형 기기의 프로필 그러나 우리는 적극적으로 노력하고 있습니다

그리고 내가 생각하기에 실제로 여기에 몇 가지 복잡한 점이 있습니다 그래서 우리는 아직도이 일을하고 있습니다 이것의 한 부분은 단순한 해결 이상의 것입니다 스케일링 실제 레이아웃 크기 조정과 관련이 있습니다

레이아웃 차이가있는 브라우저처럼 상상할 수있는 앱이 있습니다 아주 최소한 다른 앱, 더 복잡한 방법 그 레이아웃 변경을 해결하고 싶습니다 또한, 조금 주름을 추가하는 것만으로 그것으로 모두, mdpi와 hdpi는 당신이 태블릿으로 이동할 때 중요한 두 가지가 아닙니다 또는 더 큰 스크린 크기

단순히 밀도, 정제를 복용하기 만하면됩니다 예를 들어, 더 이상 사용되지 않는 경향이 있습니다 똑같은 이미지와 그것들을 사용하면, 현재의 것을 사용해도 올바르게 보이지 않을 수도 있습니다 그래서 우리는 올바른 것이 무엇인지 평가하려고합니다 현재 이러한 기기를 이미 지원할 수 있으며 현재 태블릿이 출시되고 있습니다

제 생각에 우리가해야 할 일은 모든 문제를 실제로 보는 것입니다 우리가 옳은 대답이라고 생각하는 것으로 나와라 아직 아무 것도 발표하지 않았지만 나를 믿으 라 우리는 이해한다 우리는 확실히 일하고있다

그걸로 괜찮아 여기에서 질문해라 >>> 우선, 크리스, 안드로이드 플랫폼을위한 알맞은 트위터 앱 [박수] >>> 잘 했어, 크리스

>> Chris Nesladek : 고마워 >>> 그리고 버질 >>> 이제 우리는 멈출 수 없습니다 대화보기가 실행됩니까? 그게 바로 우리가 많이 가지고있는 주요 특징이기 때문입니다 >>> 뭐라고 요? >>> 대화 형식으로보기

트윗은 섬이 아닙니다 그들은 단지 물줄기의 일부입니다 >> Chris Nesladek : 잘 듣지 못합니다 >>> 미안해 이것은 짧은 사람들의 마이크입니다

트위터 앱 내부의 대화보기 Google을 위해, 그것은오고 있습니까? >> Chris Nesladek : Twitter 앱이므로 오픈 소스를 원한다 우리는 언제 TBD인지 모른다 그러나 개발자로서 개발자는 해당 코드를 사용하여 해당 작업을 사용할 수 있습니다 >>> 좋습니다 감사

그게 전부입니다 >> Chris Nesladek : 천만에 >> 짐 팔머 : 알겠습니다 여기 >>> 그래

Eclipse와 Android SDK의 통합은, 좋아, 정말 형편 없어 너희들에게 계획이 있는지 궁금해서 그것을 향상시키기 위해 [박수] >>> 특히 XL UI 빌더는 완전히 사용할 수 없습니다 인터페이스 빌더는 훌륭합니다

너 같이 뭔가하는 계획있어? 그? >>> Mike : 나는 실제로 듣지 않았다 내가 들었던 것은 형편없는 일이지만, 나는 무엇을 듣지 못했다 >>> 이클립스와 안드로이드 SDK의 통합, 정말 끔찍한 >>> 마이크 : 예 우리는 그것을 깨닫습니다

그리고 우리는 더 세련되고 정교한 도구를 개발하는 사람들이 있습니다 그러나 우리는 그것들을 아직 발표 할 준비가되어 있지 않다 >> 짐 팔머 : 알겠습니다 우린 여기서 끝내고있어 그냥 몇 가지 질문

>>> 3D에 관한 Android 정책은 무엇입니까? 3D가 나오기위한 지원이 있습니까? 너도 알다시피, 그 반원 한 명 부유 한 3D에 대해 더 자세히 이야기하고 있습니다 새보다 조금 높지만 안경에는 없지만 – 너는 가지고 있니? any – >> Jim Palmer : 가장 최근의 릴리스이므로, 아시다시피 3D를 사용하는 몇 가지 예가 갤러리입니다 갤러리는 사진 갤러리에는 거기에 효과가 일부 3D 물건뿐만 아니라 새로운 않습니다 Nexus One의 앱 실행기에는 3D 효과가 있습니다 거기에있는 도구들이 GL에 있습니다

우리는 그것에 대해 더 자세히 들어갈 수 있습니다 물론 우리는 모두 탐험에 관심이 있습니다 그 3D는 제대로 만들 수있는 까다로운 일입니다 여전히 사용 가능하고 시간이 지남에 따라 뭔가 처음에는 두 번 즐겁습니다

여러 번 사용하는 것보다 짜증이 나지 않습니다 그러나 저는 그렇습니다, 우리는 그것에 관심이 있다고 말할 것입니다 그리고 기본 기술이 지금 거기에 있습니다 마이크, 3D에 추가 할 게있어? 과학 기술? >>> 마이크 : 아닙니다 >> Jim Palmer : 그렇게 생각합니다

하나 더 >>> 많은 안드로이드 개발자들도 iPhone이나 BlackBerry 개발과 같은 다른 플랫폼을 사용합니다 그러나 비즈니스 측면에서 볼 때 여러 플랫폼을 지원해야합니다 제 질문은 디자인 패턴을위한 것입니다, 다른 계획으로 승격시킬 계획이 있습니까? 안드로이드 또는 안드로이드 넘어? >> 짐 팔머 : 그래,이 시점에서, 우리는 플랫폼에 맞는 패턴을 개발하는 것을보고 있습니다 개발자를 위해 여러 플랫폼에서 개발하고 있다는 것을 알고 있습니다

우리의 권고는 언제나 그렇듯이 디자인의 관점에서 볼 때, 더 많은 작업이 필요하지만 앱을 개발하는 플랫폼에 가장 적합합니다 에 대한 그래서 다른 경우가 있습니다 장르가 다르거 나 다른 플랫폼에서 스타일을 사용하는 것이 좋습니다 종종 뭔가를 움직이는 것만으로도 똑같이 작동하지 않습니다

당신은 조금 밖에 느낄 것입니다 우리가 지금 계획하고 있지 않다는 걸 알 잖아 패턴을 가져 와서 다른 플랫폼으로 내보낼 수 있습니다 괜찮아 오늘 그게 그 것처럼 보입니다

모두와 주셔서 감사합니다 그리고 모든 지원 [박수] >> Chris Nesladek : 잠시만 요 두 개의 수집품을 누가 원하니? 2 명이 남았습니다 Android는 언제 창립 되었습니까? 누가 알아? >>> (마이크 끄기)

>> Chris Nesladek : 아닙니다 나는 아직 그것을 듣지 않는다 2005 누가 그걸 말했어? >>> 바로 여기 >> 크리스 네 슬레 드크 : 좋습니다

다음 것 하나 더 좋은 질문이 뭐니? 마이크, 너 뭐야? 안드로이드에 관한 것 >>> 스케일링 비율 >> Christian Robertson : 그게 전부입니다

>> Chris Nesladek : 마법 배율은 얼마입니까? 괜찮아 고맙습니다

Android Wear UI Development Best Practices (Google I/O ’17)

AGA MADURSKA :여보세요, 제 이름은 Aga, Android Wear Support Library의 TL 중 하나입니다 OLI LAN : 나는 Oli Lan입니다

저는 Android Wear의 시계 얼굴 담당 수석 엔지니어입니다 여기 와서 반갑습니다 우리는 새로운 것들에 대해 이야기하게되어 기쁩니다 Android Wear에서 앱을 만들고 얼굴을 볼 수 있도록 도와줍니다 몇 가지 도구를 소개하겠습니다

합병증을 지원하는 시계 모드를 만드는 데 도움이됩니다 하지만 우선, 아가가 너에게 말할거야 지원에 대한 큰 변화에 대해 Android Wear 용 라이브러리 AGA MADURSKA : 감사합니다 따라서 스마트 워치가 처음 출시되면 많은 개발자들이 이 새로운 폼 팩터를위한 앱을 만들기 위해 애를 먹었습니다 작은 화면, 라운드 스크린, 처음으로, 또한 브리징 정보 전화에서 시계로

우리는 웨어러블 지원 라이브러리를 구축했습니다 이러한 문제를 해결하는 데 도움이됩니다 그리고 오늘, 저는 우리가 시작하고 있다고 발표하게 된 것을 기쁘게 생각합니다 오픈 소스 코드 웨어러블 지원 라이브러리는 Android 지원 라이브러리로 이동 중 소위 마모 모듈이 될 것입니다

이것은 Android Support Library의 다른 모듈과 유사합니다 그게, 잘하면, 너 이미 Core UI 나 Recycler View 또는 Design처럼 그래서 그것은 또 다른 모듈이 될 것입니다, 다시, 오픈 소싱 코드 Android 지원 라이브러리 260

0-beta1로 시작합니다 실제로 이틀 전에 시작되었습니다 그래서 당신은 거의 즉시 그것을 사용할 수 있습니다 코드에 쉽게 추가 할 수 있습니다 정규 종속성을 추가하기 만하면됩니다

다른 모듈과 매우 유사한 구조로되어 있습니다 그곳에 착용하고 베타 1을 착용했는지 확인하십시오 잘하면,이 변화는 당신을 행복하게 만듭니다 행복해야 할 몇 가지 이유가 있습니다 무엇보다 먼저, 내가 전에 말했듯이, 코드는 오픈 소스가 아닙니다

지금 리버스 엔지니어링을 중단 할 수 있습니다 그것은 모두 거기에있을거야 이제 API는 지원 라이브러리의 일부가 될 것이며, Android의 나머지 부분과 일관성을 유지할 것입니다 나머지 지원 라이브러리 Android에서 더 자주 출시 될 예정입니다

약 2 개월마다 지원되는 라이브러리를 지원하십시오 그리고 이것은 우리가 취할 수 있음을 의미합니다 더 많은 의견을 보내고 더 빨리 반응하십시오 우리가 전에 있었던 것보다 그러나 우리는 모든 코드를 한꺼번에 옮기지 않을 것입니다

그것은 생태계에 충격이 될 것입니다 모든 것을 움직이기 이제 UI 구성 요소부터 시작하겠습니다 그리고 저는 나머지 이야기를하기 위해 그것에 집중할 것입니다 첫 번째 패키지는 오픈 소스입니다

보기 패키지이거나 지금 진행 중입니다 위젯 패키지라고합니다 그리고 거기에, 우리는 라운드 친화적 인 UI를 구현하는 데 중점을두고 싶습니다 공간 효율적인 상호 작용 패턴을 제공합니다 따라서 우리는 개발자들이 직면 한 두 가지 주요 이슈를 목표로 삼고 있습니다

물건을 만드는 UI가 있었다 안드로이드에서 처음으로 라운드 스크린을 위해, 정말 작은 화면을위한 건물이기도합니다 아주 작은 화면 재산 그런 조건에서 좋은 UI를 만드는 것은 쉽지 않습니다 그래서 그것이 바로 우리가 먼저 집중하고있는 것들입니다

다음은 개선 된 방법에 대한 좋은 예입니다 전형적인 안드로이드 목록 당신은 이전에 안드로이드에서 아주 똑똑한 목록을 가지고있었습니다 모든 요소가 하나씩 차례로 나옵니다 맨 처음부터

우리가 여기 입은 것은 우리는 시계의 둥근 요인을 이용했습니다 커브를 따르기 위해이 목록을 채택했습니다 그리고 이것은 더 많은 정보를 제공한다는 것을 의미합니다 화면에 그냥 똑바로 목록으로 할 수보다 다음은 가장 친숙하고 친숙한 UI입니다

실행기가 있습니다 날짜 / 시간 선택기가 있습니다 새 주머니에 최근에 출시 된 – 새로운 책상 시계 앱 그런 다음 LifeSum을 얻었습니다 은 타사 앱의 좋은 예입니다

친숙한 UI를 제공합니다 그래서이 모든 것들은 화면의 곡률을 이용합니다 모두 UI에 더 많은 정보를 넣을 수 있습니다 그리고 일반적으로 사용하기에 더 즐겁습니다 그래서 이들은 우리가 원하는 종류의 UI입니다

당신은 미래에 건설 할 것입니다 또한 지원을 통해 이러한 UI를 구축 할 수 있도록 돕고 자합니다 도서관 그래서웨어 위젯 모듈을 만들 때 – UI 구성 요소 – 우리는 UI에 대해 생각하고있었습니다 일반적으로, 구성 요소의 관점에서 – 안드로이드 지원과 아주 흡사하게, 안드로이드 프레임 워크와 매우 유사합니다

도서관 따라서이 모듈을 통해 우리는 두 배로 늘리고 싶습니다 더 쉽게 만들 수있는 빌딩 블록 모음 개발자가 UI를 구성 할 수 있습니다 Android Wear에서 직관적이고 모국어 인 느낌을줍니다 유연하게 구축 할 수 있습니다

성격을 표현할 정도로 충분합니다 및 귀하의 응용 프로그램의 성격 그래서 우리는보기와 같은 작은 빌딩 블록을 모두 탐험하고 있습니다 이미지 뷰 또는 텍스트 뷰 우리는 또한 더 큰 것들을 탐구하고 있습니다

WearableRecyclerView 또는 SwipeDismissFrame 레이아웃과 같습니다 그리고이를 컴포넌트, 구체적으로 컴포넌트라고 부릅니다 그리고 이러한 구성 요소 – 이러한 더 큰 데이터 – 함께 UI를 구성하십시오 따라서 개발자가 될 수있는 곳입니다 우리 구성 요소와 견해를 재사용 할 것입니다

자신의 앱을 만들 수 있습니다 이러한 뷰와 레이아웃 중 일부는 이미 Android에 있으며, 일부는 구체적으로 구현해야합니다 마모 그것들은 우리가 원하는 것들입니다 위젯 UI 라이브러리의 마모 모듈에 넣으려고합니다

여기 시각화가 있습니다 UI에 대한 우리의 생각 재사용이 가능한 빌딩 블록입니다 맞춤식 또는 특수 케이스 인터페이스 바라건대, 그건 당신에게 큰 소식이 아니에요

그러나 나는 그것을 아주 명백하게하고 싶었다 이것이 우리가이 새로운 도서관으로 갈 것이라는 것입니다 다시 한번,이를 염두에두고 우리가 당신을 가능하게 할 수 있기를 바랍니다 좋은 인터페이스 – 기능적 인터페이스, 매우 부유 한 사람들 – Android Wear를 기본으로하지만 느낄 수있는 앱의 성격 그래서 이것은 꽤 긴 프로젝트입니다

마모 모듈의 전체 구성 시간이 좀 걸릴거야 그래서 나는 지금 내 남은 시간을 보내고 싶다 우리가 어디에서 일어날 지에 대해 조금 이야기하기 그리고 그것에 대한 타임 라인은 무엇입니까? 단계별로 그래서 우리는 기존의 모든 마모 UI 요소를 나누었습니다

크게 세 가지 범주로 나뉩니다 이미 마모 된 부품을 이전 할 것입니다 새로운 마모 모듈에 특정한 마모 특성을 가지고 있습니다 병합 할 일부 구성 요소 그것들은 유용한 구성 요소입니다

웨어러블 기기뿐만 아니라 핸드 헬드 기기에도 적합합니다 그래서 그들은 휴대폰에서 재사용 될 수 있습니다 그들이 착용 할 수있는 공간에서만 살 필요는 없습니다 그래서 우리는 그들을 프레임 워크로 졸업하거나 병합 할 것입니다 또는 다른 핸드 헬드 또는 일반 지원 모듈로 전송할 수 있습니다

그런 다음 마지막 그룹이 구성 요소입니다 우리는 더 이상 사용하지 않을 것입니다 그것들은 주로 입증되지 않은 모든 디자인 패턴과 관련 우리의 사용자들과 성공적이었습니다 그리고 저는 그것에 대해 조금 더 이야기 할 것입니다 그래서, 우선, 그 구성 요소에 대해 이야기하고 싶습니다

마이그레이션 할 것입니다 나는 그들에게 스포트라이트를주고 싶다 그것들이 가장 중요한 것들입니다 그들은 Support와 함께 시작하는 것들입니다 라이브러리 26

00-beta1 이것이 WearableRecyclerView입니다 우리가 사용한 멋진 곡목 목록을 제공합니다 실행기를 빌드하십시오

그리고 나서 우리는 BoxInsetLayout, 모든 UI를 화면에 맞출 수 있습니다 스크린 중앙 중앙 사각형에 기본적으로 정사각형 사이의 UI를 재사용 할 수 있습니다 그리고 둥근 시계 그런 다음이 SwipeDismissFrameLayout을 얻었습니다 꽤 흥미로운 사건이다

디자인 패턴을 캡슐화했기 때문에 당신이 사용하기를 원합니다 따라서이 패턴은 뒤로 버튼을 대체합니다 핸드 헬드 장치에 착용시, 뒤로 몸짓으로 단추를 사용하지 않습니다 우리는 당신이 당신의 견해를 쓸어 버리기를 바랍니다

그것은 개발자들의 구체적인 요청이었습니다 개발자 프리뷰 프로그램 기간 동안, 우리는이 구성 요소를 사용할 수있게 만들고 있습니다 웨어러블 지원 모듈에서 다음 그룹은 – 오, 죄송합니다 – 코드면에서 보면, 정말 간단한 짧은 슬라이드 여야합니다 WearableRecyclerView의 예제에서, 이 코드를 코드로 가져 오는 방법입니다

그리고 이것이 onCreate 메소드에서 사용하는 방법입니다 및 예를 들어, 활동 그래서 새로운 모듈로 이전 할 때, 우리가 할 수있는 변화가 거의 없다 코드 측면에서 당신에게 필요합니다 다행히도, 매우 간단하고 구현하기 쉽습니다

먼저 패키지 이름을 supportwidget–로 변경합니다 지원 라이브러리에서이 새로운 UI 마모 모듈을 구별 할 수 있습니다 그리고 두 번째로 우리가 소개 할 것입니다 API를 최소한으로 수정하여 기존 Android API 및 지원과 일치합니다

라이브러리 API 이것들은 더 나은 API이며, 잘하면, 일반적으로 코드가 더 건강합니다 앱을 매우 쉽게 업데이트 할 수 있습니다 정말로 큰 문제는 아닙니다 리모 커, 알았어

그래서 몇몇 수업들 우리가 합병하는 것들은 착용에만 적용됩니다 우리가 말했듯이, 내가 말했듯이, 병합한다 주요 프레임 워크 또는 다른 지원 라이브러리 모듈 그래서 여기에 우리는 대부분 아이콘으로 둥근 것들을 호출했습니다 때로는 내부

그들 중 많은 수가 있습니다 그들 모두는 똑같이 보입니다 거기에 별도의 UI 구성 요소가 필요하지 않습니다 별도의 종류의 레이아웃 조각 당신이 사용해야 할 또한 이미 원 이미지보기가 있습니다 핸드 헬드 용 지원 라이브러리

그래서 우리는 모든 추가 API를 사용할 것입니다 우리가 만든 것을 하나의 구성 요소에 병합합니다 그래서 정말로 강하고 단 하나의 종류 만 존재합니다 당신이 사용할 구성 요소 그리고 세 번째 그룹은 여기 있습니다

이 대화 예에 관해 이야기 해보십시오 행 아웃은 우리가 사용하지 않는 레이아웃 그룹입니다 그래서 그것들은 관련된 레이아웃입니다 성공을 입증하지 못한 사용자 패턴이 있음을 입증하지 못했습니다 우리 사용자들에게 인기가 있습니다

여기에서 우리는 2 차원 공간 모델을 취하고 있습니다 수직 또는 수평으로 이동할 수있는 곳 앱 또는 시스템 UI에서 선형 레이아웃으로 변형시키고 있습니다 여기서 수직으로, 다음과 같이 재료 디자인 원칙 그래서 관련된 모든 클래스들 그 2 차원 공간 모델은 더 이상 사용되지 않을 것입니다 이것이 바로 GridViewPager입니다

그것은 다른 액션 버튼, 액션 레이아웃, 그런 것들 그래서 이것은 당신의 의존성을 줄여 줄 것입니다 거의 모든 것을 포함합니다 우리가 2017 년에 할거야 그리고 여기에 나는 방금 이야기하고있다

오늘, 우리는 발표하고 시작합니다 처음 세 가지 핵심 구성 요소가있는 마모 모듈 다시 시작합니다 Android 지원 라이브러리 260

0-beta1 그 프로그램이 베타에서 졸업하면 오 런칭과 함께 – 우리는 현재 위치에있는 오래된 API를 더 이상 사용하지 않을 것이며, 그리고 나서 우리는 정말로 사람들을 격려 할 것입니다 새 API로 이동하십시오 그런 다음 정기적으로 버그를 수정합니다 마모 모듈의 업데이트 및 릴리스 안드로이드 지원 라이브러리

그리고 얼마 후, 2018 년 중반을 말하면서, 내년 중반, 우리는 시작할 것입니다 이전 API를 제거하여 우리가 다시 슬림화되도록 우리가 사람들에게 사용하기를 원하는 것들에 대한 의존성 그래서 나로부터 온 것입니다 그것으로, 나는 넘겨 줄거야 합병증에 대해 이야기하기 위해 올리에게

고마워, 애가 거기에 몇 가지 중요한 변화가 있습니다 [박수 갈채] 그래서 저는 우리가 추가하고있는 새로운 것들에 대해서 이야기 할 것입니다 시계 얼굴 개발자 용 그리고 이것이 시계 얼굴을 만드는 사람에게는 큰 승리이기 때문에 – 네, 공중에서 뛰어 내리는 또 다른 이유입니다

일몰의 보다 개인화 된 유용한 시계 모드 Wear 20의 핵심 부분입니다 이것이 지난 해 I / O에서 우리가 여기있는 이유입니다 Android Wear 용 Complications API를 선보였습니다

전통적인 시계 제작과 마찬가지로 착용시, 합병증은 시계면에 데이터를 표시하는 것입니다 그래서 이들은 모두 합병증의 예입니다 Complications API를 사용하는 앱은 데이터 제공 업체, 또는 시계 얼굴 일 수 있습니다 Android Wear는 둘 사이의 데이터 흐름을 관리합니다 따라서 API를 사용하여 얼굴을 볼 수 있습니다

임의의 데이터 제공 업체를 표시하도록 구성 설치되어 있습니다 이렇게하면 사용자가 정보를 입력 할 수 있습니다 한눈에 신경 쓰지 마라 그리고 데이터 공급자를 만드는 경우, 앱의 데이터를 모든 시계 모드에 적용 할 수 있습니다 이러한 모든 앱에는 이미 데이터 제공 업체가 포함되어 있습니다

합병증 Strava와 같은 피트니스 앱이 있습니다 Robinhood와 같은 금융 애플리케이션이 있습니다 AccuWeather와 같은 날씨 앱과 다른 앱이 많이 있습니다 따라서 시계 모드에 합병증 지원을 추가하는 경우 당신이 만들고있는 사용자는 이러한 앱 중 하나를 선택할 수 있습니다

기본 제공 업체뿐 아니라 설치된 경우 세계 시계, 다음 이벤트 및 배터리 수명과 같은 기능을 추가하는 것과 같습니다 모든 앱에서 그들에 대해 알기 많은 시계 얼굴에는 이미 합병증 지원이 추가되었습니다 Ultimate Watch 2– 독과 같은 더 추상적 인 스타일 및 슈퍼 커스터마이즈 가능한 스타일 Pujie Black처럼 그리고 약간 다른 것들이 있습니다

이동 중에는 [INAUDIBLE] [? 기분?] 컬렉션 – 외부의 고리는 복잡합니다 여기에 배터리 수명이 표시됩니다 그러나 그것은 또한 당신의 피트니스 진행 상황을 보여줄 수 있습니다 Mesh Turbine HD는 스포크에서의 합병증을 보여 주며, 화면 중앙에서 나오는 스크롤 텍스트 효과 그리고 Fit Cat에는 고양이가 있습니다

그러나 그것은 또한 자신의 스타일로 API 그래서 다양한 스타일이 있습니다 Android Wear의 시계 모드 이것이 API가 시계 모드를 완벽하게 제어 할 수있게하는 이유입니다 그들이 데이터를 그리는 방법에 대해 – 합병증이 완벽하게 맞는지 확인 새로운 흥미로운 표현 방법을 허용하는 것 정보 그러나 이러한 자유로 인해 합병증을 추가하기가 어려울 수 있습니다

시계 모드를 지원합니다 시계 모드를 만들면 액세스 할 수 없습니다 레이아웃 또는보기로 이동합니다 캔버스에 직접 그립니다 그리고 설정 UI를 직접 만들어야합니다

오늘, 우리는 이것을 쉽게하기 위해 몇 가지를 소개합니다 모든 종류의 텍스트를 그리는 데 도움이되는 TextRenderer가 있습니다 캔버스에 ComplicationDrawable은 완벽한 렌더링 솔루션입니다 합병증

새로운 설정 샘플은 사용자가 쉽게 구성 할 수 있도록하는 방법을 보여줍니다 합병증 및 스타일 또한 테스트 스위트 공급자를 사용하면 합병증이 올바르게 표시되는지 확인하십시오 첫 번째는 TextRenderer이고, 이것이 웨어러블 지원에 있음을 알았을 수도 있습니다 몇 달 동안

TextRenderer는 텍스트를 캔버스에 쉽게 그리게합니다 그리고 그것은 중요합니다 가장 유용한 합병증 유형들 짧은 텍스트 유형, 긴 텍스트 유형 및 범위 값 유형이 있습니다 짧은 텍스트 및 범위 값 유형의 문자열 짧은 것입니다 최대 글자 수는 최대 7 자 여야합니다

긴 텍스트에서와 같이 문자열은 길이가 될 수 있지만, 텍스트를 렌더링하는 데 어려움이 있습니다 두 경우 모두 여기 간단한 텍스트 예제가 있습니다 이 문자열은 7 자이며, 이 글꼴 크기에 잘 맞습니다 그러나이 문자열 역시 7 자입니다

그래서 이들 모두를 다루고 그것들을 적합하게 만들기 위해, 그리기 및 조정하기 전에 텍스트를 측정해야합니다 그에 따라 글꼴 크기 다음은 긴 텍스트 예제입니다 짧은 끈은 세로 중심에 잘 어울립니다 그러나 텍스트는 길이가 될 수 있으므로 쉽게 할 수 있습니다

상자 밖으로 흐른다 정적 레이아웃과 같은 것을 사용할 수 있습니다 이걸 도와 줘 하지만 중계하지 않도록 조심해야합니다 모든 프레임의 텍스트

TextRenderer를 사용하여 범위를 지정합니다 텍스트를 넣기를 원합니다 7 개의 문자가 맞지 않으면 때까지 글꼴을 축소합니다 더 긴 텍스트는 여러 줄로 흘러 갈 수 있습니다 끝에 줄임표가 붙습니다

이제 코드를 살펴 보겠습니다 따라서 시계 모드를 초기화 할 때, 이 단순한 생성자를 사용해 TextRenderer를 작성해, TextPaint를 전달하면됩니다 TextPaint는 글꼴, 텍스트 크기, 색깔 – 그런 것들 이제 TextRenderer는 레이아웃과 같은 것을 캐시하기 때문에, 각 필드에 대해 하나를 만들어야합니다 여기에 본문이 있습니다

우리는 또한 제목을 가지고 있습니다 필드간에 TextRenderer를 공유하지 마십시오 이제 그리기를 원할 때 렌더러에 텍스트를 설정합니다 그래서 당신은 setText를 호출합니다 그리고 텍스트를 얻기 위해 getText를 호출합니다

지금 이것은 현재 시간을 필요로합니다 당신이 그릴 때마다 이것을하는 것 TextRenderer를 사용하든 사용하지 않든 상관 없습니다 그리고 그것은 몇 가지 합병증 때문에 시간에 의존한다 그래서 세계 시계 합병증을 상상해보십시오, 텍스트가 바뀌고, 시간에 따라

텍스트를 설정하면 범위를 그립니다 당신이 지정합니다 이제 텍스트와 경계를 전달하는 것이 좋습니다 TextRenderer는 텍스트를 놓기 때문에 항상 이렇게 무언가가 바뀌면 다시 밖으로 나가십시오 그것은 때때로 당신이 TextRenderer에 변경이 있음을 알릴 필요가 있습니다

페인트의 텍스트 크기를 변경하는 경우와 같이 발생했습니다 그리고 그것은 페인트가 다른 대상이기 때문입니다 TextRenderer에서 가져옵니다 자, 텍스트를 더 크게 만드는 코드가 있다고 상상해 봅시다 무언가가 일어날 때

이 경우 requestUpdateLayout을 호출해야합니다 TextRenderer에서 조정할 수 있도록합니다 이제 TextRenderer가 할 수있는 또 하나의 기능 항상 렌더링을 조정합니다 화면에서는 대기 모드에 대해서도 마찬가지입니다 이 모드에서는 많은 시계 모드가 흑백입니다

색 이모티콘과 같은 것들을 원하지 않을 수도 있습니다 TextRenderer에 알려야합니다 장치가 주변 모드로 들어갔 기 때문에, InAmbientMode 시계 모드에서 변경하면 inAmbientMode Boolean을 TextRenderer에 전달하십시오 TextRenderer입니다 텍스트를 렌더링 할 때마다 사용하는 것이 좋습니다

직접 캔버스에 그러나 만약 당신이 텍스트를 원한다면 그러나 전체적인 복잡성이 그려져있다 표준 방식으로 당신을 위해? 그것이 바로 새로운 ComplicationDrawable이 나오는 곳입니다 ComplicationDrawable은 모든 것을 렌더링 할 수 있습니다 6 가지 주요 합병증 유형 중 그리고 그것은 당신을 위해 모든 레이아웃과 스타일링을 처리합니다

예를 들어, 짧은 텍스트를 렌더링하려면해야 할 일이 있습니다 이 같은 합병증 CompletionDrawable이 없으면, 데이터가 도착하면 이미지를 디코딩해야합니다 포함되어 있습니다 또한 이미지를 캐시해야합니다

두 번 이상 해독하지 않으려는 경우 이제 그릴 때마다, 먼저, 당신은 해당 데이터가 활성 상태인지 확인해야합니다 그리고 그것은 몇몇 합병증 데이터 특정 시간 프레임 내에서만 관련이 있습니다 예를 들어, 다음 회의를위한 것이라면, 회의가 끝난 후 그것을 보여주고 싶지 않습니다 그리기 위해서, 우리는 배경을 그립니다 이미지를 그리고 텍스트를 그립니다

아마도 TextRenderer를 사용하고있을 것입니다 ComplicationDrawable을 사용하면 훨씬 간단합니다 데이터가 도착하면 드로어 블에 전달합니다 setComplicationData를 호출하여 그리고 모든 프레임에서 draw를 호출합니다

그것은 drawable입니다 이제 TextRenderer와 마찬가지로 다른 drawable과 마찬가지로, ComplicationDrawable은 범위 내에서 그립니다 그리고 레이아웃은 범위 모양에 맞게 조정됩니다 그래서 여기 당신은 사각 경계 내에서, 순환 합병증이 생깁니다 반대로 넓은 범위는 알약 모양을 나타냅니다

아이콘의 위치가 두 경우 모두 다르다 스타일 매개 변수를 설정하지 않으면, 기본보기를 얻을 수 있지만 배경색과 같이 설정할 수있는 많은 것들 – 코너 반경, 뭔가 더 갖고 싶다면 광장과 원처럼 테두리를 변경하거나 테두리를 전혀 사용할 수 없습니다 색상을 변경할 수 있으며 서체를 변경할 수 있습니다 CompleicationDrawable을 만들 수 있습니다

간단한 생성자를 사용하여 프로그래밍 방식으로 프로그래밍 할 수 있습니다 그런 다음 활성 모드에 대한 스타일 옵션을 설정할 수 있습니다 주변 모드 용 그러나 당신이 설정하기 위해 많은 스타일링을 가지고 있다면, 대신 XML을 사용하는 것이 더 쉬울 수도 있습니다 이 작업을 수행하려면 API 레벨 24를 사용해야합니다 그러나 당신이 그것을하는 한, 이제 드로어 블을 표준 방식으로 팽창시킬 수 있습니다

이제 렌더링 할 컨텍스트가 필요합니다 그래서 우리에게도 그걸 drawable에 전달해야합니다 그리고 그렇게하면 XML이됩니다 이런 식으로 보일 수도 있습니다 따라서 최상위 수준의 속성이 적용됩니다

주변 및 활성 모드 모두 – 주변 모드에서 오버라이드되지 않는 한 주변 구역의 속성에 따라 드로어 블에 전달해야 할 몇 가지 사항이 있습니다 앞서 언급했듯이 물론, 당신은, 그것을 합병증 데이터를 제공해야합니다 따라서 onComplicationDataupdate에서 시계 모드의 경우 데이터를 수신하는 곳입니다 그 데이터를 드로어 블에 전달하십시오 당신은 또한 합병증 드로어 블을 말할 필요가 있습니다

장치가 주변 모드로 들어가고 나갈 때 그 이유는 drawable handle 당신을위한 스타일의 변화 따라서 setInAmbientMode를 호출하면됩니다 그것이 바뀔 때마다 그리고 드로어 블에게 화면의 특정 속성이있는 경우 따라서 LOW_BIT_AMBIENT 모드를 사용하는 경우, 또는 BURN_IN_PROTECTION이있는 경우 드로어 블에 다음과 같이 말합니다 이러한 속성에 대한 렌더링을 적용 할 수 있습니다

그리기 위해, 지금 처음이라면, 또는 뭔가가 변경된 경우 경계를 설정해야합니다 그래서 경계를 설정하면 setBounds 복잡성 드로어 블에 이제 여기에 전달하는 범위 시계면 경계에 비례하여 정의되어야합니다 따라서 화면 너비의 4 분의 1에 위치한다고 말할 수 있습니다 건너서

고정 된 치수를 사용하지 마십시오 시계의 크기가 매우 다양하기 때문에, 그래서 절대적인 방법으로 물건을 정의하고 싶지는 않습니다 그럼 너는 필요할거야 ComplicationDrawable에 이 방법에도 시간이 걸리므로 최신의 정확한 값을 얻을 수 있습니다

이것이 바로 ComplicationDrawable에 있습니다 그래서 실제로 합병증을 추가하는 것이 훨씬 쉬워졌습니다 시계 모드를 지원합니다 이제는 ComplicationDrawable이 가장 큰 추가 기능입니다 착용 할 수있는 지원

그러나 다음 두 가지를 샘플로 사용할 수 있습니다 시계의 요구에 맞게 조정할 수 있습니다 얼굴 첫 번째 설정입니다 합병증이있는 시계 모드 구성 방법을 포함해야합니다

일반적으로 시계 모드 설정에 있습니다 그러나 복잡한 UI를 설정 UI에 묻어두면, 사용자에게 불편할 수 있습니다 주변 상황을 바꾸고 싶다 LG Watch 스타일 및 지원의 경우, 우리는 파트너들과 함께 일했습니다 사용자가 합병증을 설정하기위한 비주얼 인터페이스 또한 다른 설정에 빠르게 액세스 할 수 있습니다

그래서 여기에 어떻게 설정되어 있습니다 맨 위에는 시계의 이미지가 있습니다 얼굴이 명확하게 표시된 합병증 슬롯 이를 통해 사용자는 어디에 있는지 알 수 있습니다 데이터가 나타납니다

공급자 아이콘은 현재 무엇이 있는지 보여줍니다 각 슬롯에서 선택됩니다 아래에서 아래로 스크롤하면 다른 모든 설정을 참조하십시오 이제 배경 이미지가 특별한 경우입니다 기술적으로, 그것은 합병증입니다

큰 이미지 유형을 사용합니다 그러나 연구 결과에 따르면 사용자는이 점을 더 잘 이해하고 있습니다 별도의 항목으로 그래서 이것은 시계 부분에 보이는 것과 같습니다 그리고 이제 그것을 실제로 보자

따라서 사용자는 해당 슬롯 중 하나를 탭하기 만하면됩니다 상단에 그것은 합병증 공급자 선택기를 엽니 다 각 슬롯에서 원하는 것을 신속하게 선택할 수 있습니다 목록을 작성하는 것보다 훨씬 쉽습니다

왼쪽 슬롯, 오른쪽 슬롯, 위쪽 슬롯 등이 있습니다 실제 시계 모드에서이 기능을 사용하려는 경우, ustwo look 또는 Moods Collections 다운로드 Wear 20을 실행하는 모든 시계에서 이러한 시계 모드는 모두이 UI를 사용합니다 이제 업데이트 된 UI에서 구현 된 UI를 확인할 수 있습니다

시계 얼굴 샘플 AnalogComplicati onWatchFaceService를 확인하십시오 샘플에서 새로운 내용으로 업데이트되었습니다 우리가 오늘 소개하고있는 것이기 때문에 지금은 ComplicationDrawable을 사용합니다

구성 UI는 AnalogComplicati입니다 onConfigActivity 그리고 UI에 표시되는 항목 AnalogComplicationConfigData에 정의되어 있습니다 복잡 그 수업을 잠깐 살펴 보겠습니다 그래서 여기에서이 방법을 찾을 수 있습니다

데이터를 가져 와서 어댑터를 채 웁니다 그리고 설정 항목 목록을 반환합니다 따라서 설정 목록의 항목을 정의합니다 따라서 최상위 항목은 아마도 PreviewAndCompli가 될 것입니다 cationConfigItem

슬롯이있는 시계면의 모습입니다 그런 다음 배경 옵션을 사용할 수 있습니다 우리는 더 많은 옵션을 가지고 돌아올 수 있습니다 실제 샘플에는 이것보다 몇 가지 세부 사항이 있습니다 이것이 설정입니다

이제 합병증 지원을 추가했다고 가정 해 봅시다 당신의 시계 얼굴에 모든 것이 작동하는지 어떻게 확인할 수 있습니까? 대부분의 합병증 유형에는 처리해야하는 필드의 여러 조합입니다 예를 들어 시계 모드가 짧은 텍스트를 지원하는 경우 텍스트가있는 아이콘의 형태 일 수있는 합병증, 또는 텍스트 일 ​​수도 있고 또 다른 텍스트 일 ​​수도 있습니다 또는 단 하나의 텍스트 조각

테스트 스위트 제공 업체는 쉽게 확인할 수있게 해줍니다 모든 조합은 시계 모드에서 잘 어울립니다 따라서 테스트 스위트를 설치할 때, 데이터 제공 업체 목록에 표시됩니다 그리고 당신이 그것을 선택할 때, 당신은 선택할 수있을 것입니다 검사 할 합병증 유형

짧은 텍스트를 선택한다고합시다 시계 모드에 표시되는 방법은 다음과 같습니다 그리고 나서 당신이해야 할 일은 합병증을 두드리는 것입니다 다른 조합을 통해 순환합니다 그래서 이들 모두는 짧은 텍스트 합병증입니다

시계 모드가 짧은 텍스트를 지원하는 경우, 이 모든 것을 올바르게 렌더링해야합니다 이것은 긴 텍스트 예제이고, 긴 텍스트의 경우, 더 많은 조합이 있습니다 따라서이 기능을 사용하면 정말 유용합니다 모든 것이 제대로 작동하는지 확인하십시오 텍스트 및 제목, 텍스트 및 제목 만있는 아이콘, 또는 이미지도 포함됩니다

우리는 GitHub에서 테스트 스위트 제공 업체 오픈 소스를 공개하고 있습니다 어떻게 작동하는지 알 수 있도록 원하는 경우 자신 만의 테스트 케이스를 추가 할 수 있습니다 시계 모드가 아닌 데이터 제공 업체를 구축하는 경우, 너도 이것 좀 봐 왜냐하면 그것은 각각에 대한 제공자의 좋은 예이기 때문입니다 다른 합병증 유형 중 그게 전부입니다

그래서이 네 가지 도구는 시계에 복잡성 지원을 훨씬 간단하고 쉽게 추가 할 수 있습니다 얼굴 그들을 보내주십시오 여기 I / O에서 시험해 볼 코드 연구소가 있습니다 또는 dev 사이트에서 샘플을 확인할 수 있습니다

또는 Android Studio를 통해 또는 웨어러블 지원의 새 버전을 사용할 수도 있습니다 바로 시계 앞에서 직접 시도해보십시오 그리고 당신이 생각하는 것을 저희에게 알려주십시오 [박수 갈채] 그래서 이것은 우리의 존재를 요약 한 마지막 슬라이드입니다 – Google I / O 2017의 Android Wear Presence 어제의 이야기를 9:30 AM에 보지 못했다면, 그것은 기록됩니다 플랫폼이 어떻게 작동하는지에 대한 일반적인 개요였습니다

그리고 올해 플랫폼에 새로 추가 된 것들 그리고 오늘의 강연도 녹음됩니다 I / O가 끝나면 다시 돌아올 수 있습니다 고맙습니다

Google I/O 2013 – Android Design for UI Developers

Roman Nurik : 좋습니다 우리는 좋다

나는 우리가 갈 준비가되어 있다고 생각한다 모두에게 감사드립니다 UI 개발자를위한 Android 디자인 오늘 우리는 이야기 할 것입니다 우리가 developerandroid

com/design에서 문서화 한 몇 가지 멋진 패턴을 구현하는 방법에 대해 알아보십시오 내 이름은 Roman Nurik입니다 나는 Android 개발자 관계 팀에 있습니다 >> Nick Butcher : 안녕하세요, 저는 Android 개발자 관계 팀의 Nick Butcher입니다 우리는 여러분이 멋진 응용 프로그램을 만들 수 있도록 UX와 디자인에 중점을 둡니다

당신 중 일부는 매주 화요일마다 YouTube에서 주간 YouTube 쇼를 진행하는 Android 디자인을 통해 우리를 알 수 있습니다 멋진 Android 애플리케이션을 디자인하는 방법에 대해 이야기합니다 그래서 오늘은 약간 다르다 우리는 코드에 훨씬 더 집중할 것입니다 이것은 개발자입니다

회의 멋진 애플리케이션을 설계하는 것뿐만 아니라 멋진 애플리케이션을 구축하는 방법에 대해서도 이야기 할 것입니다 >> Roman Nurik : 오늘 우리는 세 가지 주요 주제를 다룰 것입니다 첫 번째는 앱 탐색입니다 최신 패턴 중 일부와 기존 탐색 패턴 중 일부에 대해 이야기합니다

밖에있다 그럼 닉이 얘기 할거야 >> Nick Butcher : 너에게 모두 말해 줄께 반응 형 디자인에 대해 그것이 무엇인지, 왜 신경 써야하는지, 어떻게 건물에 갈 수 있는지 그것은 귀하의 애플 리케이션에

>> Roman Nurik :주의를 기울이면, 너희들이 랩탑에있어,이 세션의 한 섹션에 집중한다면, 제발 닉 그래서 그가 이야기 할 때마다 그 말을 들어라 >> Nick Butcher : 압력이 없습니다 >> Roman Nurik : 토론을 마치겠습니다 Holo 시각 언어의 시각적 특성을 구현하는 방법 Holo 스타일과 테마의 일부입니다

먼저 앱 탐색에 대해 이야기하고 우리? 그래서 우리가 네비게이션에 대해 이야기 할 때마다 당신은 두 가지 다른 방법에 대해 생각합니다 탐색 중요한 길 중 하나가 측면 내비게이션입니다 기본적으로이 방법 하나의 컬렉션에있는 형제 요소 또는 종류간에 전환 할 수 있습니다 또는 앱의 최상위 섹션

아마 당신 중 많은 사람들이 알고 있듯이 액션 바는 는 측면 탐색에 대한 액세스를 제공하는 하나의 메커니즘 또는 하나의 도구입니다 그래서 당신은 행동 모음의 탭이나 회 전자와 같은 항목을 사용하여 형제 섹션에 대한 액세스를 제공 할 수 있습니다 액션 바 구현 방법에 대해서는 언급하지 않을 것입니다 우리에게는 좋은 훈련 수업이 있습니다 developer

androidcom/training에서이 작업을 수행하는 방법에 대해 설명합니다 효과적인 구현 항해 측면 네비게이션 구현 제발, 정말 끝내 봐요

우리 작업 표시 줄에 대한 호환성에 대해 이야기하고 싶습니다 많은 사람들이 알고 있듯이 API 11 아래의 플랫폼 버전에서는 사용할 수 없습니다 그러나 Google에서는 ActionBarCompat라는 항목은 작업 표시 줄 및 모든 버전에 대한 액세스 권한을 제공합니다 21 이상

기본 API는 여기에 활동, 프래그먼트 활동, 조치 표시 줄 가져 오기가 있습니다 액션 바 compat에 대한 API는 유사합니다 코드의 전체 구조는 변화 다른 수입을 교환하고, 클래스와 사물의 다른 이름으로 바꾸고, 너 끝났어 그래서 이것은 현재 사용할 수 없습니다, 나는 언급해야합니다

이것은 여전히 ​​무언가이다 우리가 작업하고있는 그것은 곧 가능할 것입니다 I / O 앱을 올바르게 사용하고 있다면 지금 그것은 액션 바 compat 라이브러리를 사용하고 있습니다 그것은 나중에보다는 오히려 빨리오고있다

처럼 나는 안드로이드 21 이상에서 사용할 수있을 것이라고 말했다 당신은 그것들에 그것을 사용할 수있을 것입니다 기본적으로 모든 장치가있는 버전입니다 여기에 매우 중요한 메모가 있습니다

이미 ActionBarSherlock을 사용하고 있다면 Jake Wharton의 경이로운 라이브러리가 있습니다 호환성의이 버전으로 전환해야한다고 생각하지 않아야합니다 도서관 이것은 경이로운 도서관입니다 그것은 API 측면에서 매우 유사 할 것입니다

ActionBarCompat는 새로운 앱을 추천합니다 새 앱을 만드는 경우 ActionBarCompat 기본적으로 이것은 행동 바에 대해 생각하고있는 경우, 호환성 때문에 사용하지 않으면 더 이상 그 변명이 없습니다 >> Nick Butcher : 변명의 여지가 없습니다 그냥 사용하십시오

Roman Nurik : 맞아 다른 구성 요소 ViewPager입니다 우리는 측면 탐색에 대해 이야기합니다 또한 왼쪽 및 오른쪽으로 스 와이프하는 것에 대해 생각합니다 또는 스 와이프 뷰 패턴

이제 ViewPager는 원뿔 구현의 일종입니다 무늬 우리 교육 수업에서는 매우 잘 다루어 져서 우리는 들어 가지 않을 것입니다 거기에 많은 세부 사항 내가 여기서 언급하는 이유는, 만약 당신이 어떤 종류의 수평 페이징을 사용하거나 이런 종류의 원뿔 구현을 구축했습니다

>> Nick Butcher : 탭을 볼 때마다 슬쩍하게 생각하십시오 Roman Nurik : 맞아 우리는 어제 공식화 된 새로운 패턴을 다루고 싶습니다 탐색 서랍이라는 Android 디자인 가이드에 대한 업데이트에서 따라서 탐색 서랍 메인 네비게이션 용입니다 앱에 서로 다른 섹션이있는 경우 탐색 서랍은 다음과 같습니다

네가 가지고있는 다른 도구 나는 모든 지침에 대해 이야기하지 않을 것이다 이리 모든 문서가 게시됩니다 탐색 서랍 섹션을 클릭하면, 당신은 모든 것들을 볼 수 있습니다

나는 말할 것입니다 – 여러분 중 많은 사람들이 Google Play 뮤직에서 본 것입니다 기조 연설의 일부인 탐색 서랍은 당신과 약간 다른 스타일을 가지고 있습니다 배고 있다 콘텐츠를 방해하지 않습니다 작업 표시 줄은 고정되어 있습니다

슬라이딩 안함 콘텐츠가 방해가되면이 콘텐츠가 실제로 앱의 크롬 콘텐츠 상단에있는 작업 표시 줄과 같은 크롬 조각입니다 그래서 내용은 안정적입니다 이것이하는 또 다른 일은 보존을 돕는 것입니다 수평 제스처 공간

따라서 콘텐츠에 스 와이프와 같은 것들이 포함되어있는 경우 그런 것들은 여전히이 패턴과 매우 잘 호환됩니다 >> Nick Butcher : 액션 바에 대해 당신이 말한 것과는 대조적으로, 밖에있는 다른 커뮤니티 라이브러리 중 일부는이 공식으로 이동하는 것을 고려할 수 있습니다 라이브러리는 권장 사항 인 모든 우수 사례 및 UX를 구현하기 때문에 용도 그래서 정말로 고려해야합니다 Roman Nurik : 맞아

너에게 보여주고 싶다 이게 어떻게 생겼는지에 대한 간단한 비디오 활동 내용은 왼쪽, 베젤, 그것은 조금 동안 최고점에 이른다 물론 상호 작용할 수 있습니다 그럼 너도 한 번 스 와이프 할 수있어 그것을 숨기기 위해서

작업 표시 줄의 왼쪽 상단 영역을 터치하여 표시하거나 숨길 수 있습니다 잘 그래서 이것에 관한 독특한 작은 것들이 많이 있습니다,이 패턴, 그리고 우리는 몇 가지 새로운 기능을 사용하여이 패턴을 구현하는 방법에 대해 이야기 할 것입니다 어제 발표 된 지원 라이브러리에 탐색 서랍을 구현하려면 가장 먼저해야 할 일은 최상위 레이어를 DrawerLayout으로 대체하는 액티비티 컨텐츠입니다 API 4 이상에서 작동합니다

기본적으로 모든 장치가 있습니다 이 DrawerLayout 두 명의 자녀가 포함되어 있어야합니다 두 명의 자녀가 있어야합니다 첫 번째는 실제 활동입니다 함유량

이전에 당신이 가진 모든 것들 그리고 두 번째 아이 DrawerLayout의 실제 서랍은 슬라이드 아웃해야하며 일반적으로 진행됩니다 ListView 또는 GridView 또는 무언가가 될 수 있습니다 일반적으로 ListView 자, 너 이 너비를 원하는 너비로 고칠 수 있습니다

어딘가에 추천합니다 너비는 240dp ~ 320dp입니다 물론 장치에 따라 차이가있을 수 있습니다 큰 화면 장치에서는 약간 큰 서랍이 필요합니다 이제, 그것은 당신을 얻습니다 – 단지 그것을하면 당신은 모든 닦는 물건을 얻을 수 있습니다

그것은 많이한다 너를위한 것들 그러나 서랍의 또 다른 중요한 부분은 서랍의 액션 바 그래서 우리는 지원 라이브러리 r13의 일부인 다른 구성 요소를 가지고 있습니다 ActionBarDrawerToggle

그것은 기본적으로 친절한 도우미 메서드 또는 도우미 클래스의 관계입니다 서랍과 함께 작업 표시 줄 그래서 당신은 단순히 새로운 것을 만들 수 있습니다 – ActionBarDrawerToggle을 구체화하십시오 그것에게 활동을주십시오 서랍 레이아웃 자체를 지정하십시오

아이콘에 표시 할 아이콘을 지정합니다 왼쪽 상단은 해당 아이콘이 탐색 서랍에 대한 맞춤이며 기본적으로이 동작을 설정하기 때문입니다 bar drawer는 DrawerLayout의 DrawerListener로 인스턴스를 토글합니다 자, 하나의 빠른 메모 아이콘에 대해서 다운로드가 가능합니다

우리는 Holo light와 Holo dark를 모두 가지고 있습니다 그리고 다운로드 할 수있는 모든 밀도 이것을 사용자 정의해야합니다 색상 변경하기 따라서 테마에 맞게 맞춤 설정해야합니다 중요한 다른 것 – 액션 바 서랍 토글의 매우 중요한 부분은 당신이 패스해야한다는 것입니다

활동의 onOptionsItemSelected 메소드를 통해 이것은 실제로 처리됩니다 작업 표시 줄의 왼쪽 상단 영역에서 버튼 누르기를 처리합니다 기본적으로 클릭하십시오 기본적으로 탐색 서랍 용입니다

그게 전부 야 필요한 주 코드 정말 쉽습니다 너희들은 절대적으로 사용을 시작해야한다 그것은 귀하의 애플 리케이션에 대한 이해가된다면

다시 말하지만, 이것은 모두 지원 라이브러리에서 사용할 수 있습니다 어제 밀린 r13 그래서 마지막 탐색 기록은 다음과 같습니다 위로 탐색 그래서 우리는 작년에 네비게이션에 대한 이야기를 전했습니다

작년에 Adam Powell과 Rich Fulcher로부터 올해 우리는 당신에게 조언과 요령을주고 싶었습니다 위로 구현하기 위해 가장 먼저해야 할 일은 작업 표시 줄에 위쪽 버튼을 표시하는 것입니다 여기에서이 방법을 사용하면됩니다

자, Jelly Bean, 안드로이드 41에서, 당신은 할 수 있습니다 자동으로 – 또는 시스템이 자동으로 프레스를 처리합니다 당신은 간단히 각 활동 및 시스템의 상위 액티비티 이름이 당신을 데려다 줄 것입니다 네가 누를 때 올바른 곳으로 이전 버전의 플랫폼의 경우 이 메타 데이터 요소를 사용하여 동일한 값을 제공하십시오

그 점에 주목할만한 가치가 있습니다 사용자가 누를 때 어디로 가야하는지 사용자 지정해야합니다 오히려 취급보다는 모든 위로 물건, 자신의 두 가지 방법을 무시하십시오 getParentActivityIntent를 재정의합니다 메소드를 사용하여 플랫폼을 알리면 방문 할 활동을 알 수 있습니다

또한 맞춤 설정할 수 있습니다 당신이 그 활동에서 처리 할 수있는 엑스트라를 제공함으로써 어떤 일이 일어나는가? 그럼 너 너 onCreateNavigateUpTaskStack 메서드를 재정 의하여 기본적으로 사용자 정의 할 수 있습니다 핵심 업무 이외를 탐색 할 때 예를 들어 당신은 Gmail과 같은 것에서 앱을 얻습니다 누르는 것은 앱 내에 있어야합니다 이 무슨 일이 일어나는지 사용자 정의하자

전체 구조를 여전히 반영한다는 것을 알 수 있습니다 귀하의 앱에 대해 어떻게 그 활동에 참여했는지 알 수 있습니다 그래서 그것은 네비게이션을위한 것이라고 생각합니다 나는 갈거야 나는 닉에게 물건을 건네 주어 반응하는 디자인에 대해 이야기한다

>> Nick Butcher : 고마워, 로마 안드로이드의 기쁨과 힘의 부분은 다양합니다 장치의 작은 전화기, 큰 전화기, 태블릿, 그 사이의 모든 것 개발자가 어쩌면 당신의 UI가 다른 것에서 멋지게 보이는지 확인하기가 어려울 수 있습니다

크기가 큰 장치 운 좋게도 안드로이드는 처음부터 다루어졌습니다 이러한 종류의 차이는 크기가 큰 장치입니다 그래서 거기에 멋진 트릭이 많이 있습니다 RelativeLayout 레이아웃 가중치 등은 확장 가능한 UI를 구축하는 데 도움이됩니다

나는 네가 이미이 모든 것을 사용하고 있습니다 이 문제는 UI를 위아래로 확장한다는 것입니다 지금까지만 너를 잡을거야 나는 당신이 의지한다면 당신이 마주 칠지도 모르는 이슈를 개괄 할 것이다 스케일링 기법과 그 주변에서보다 효과적으로 작업 할 수있는 방법에 대해 설명합니다

따라서 규모를 조정하는 경우 발생할 수있는 문제 중 하나는 다음과 같습니다 지나치게 넓은 레이아웃이있는 곳 여기에서는 텍스트와 이미지를 전체적으로 실행합니다 장치의 너비와 그것은 상당히 불편한 독서 경험을 만들어 낸다 스캔하기가 어렵다

45 ~ 75 자의 선 길이를 목표로하는 것이 이상적입니다 더 이상은 없습니다 매우 불편하고 사용하기 쉽지 않을 것입니다 우리는 자동으로 훌륭한 툴링을 가지고 있지 않습니다 선로 길이를 감지

하지만 멀티 구성 편집기를 사용하면 아이디어를 얻고 레이아웃이 다양하게 보이는지 육안으로 검사하십시오 다른 장치의 이번 호에 실린 당신이 찾아야 할 힌트는 layout_width = "match_parent"와 같이 자신이 타이핑 할 때마다 멈추고 생각하십시오 어떻게하면 더 큰 장치로 확장 할 수 있을까요? 이것이 과도하게 이어질 것인가? 긴 줄 길이 문제? 다른 도전 과제는 다음과 같습니다 당신은 매우 불균형 한 UI로 끝납니다

이 예제 애플리케이션에서는 여기에 있습니다 우리 모든 콘텐츠가 일종의 것임을 알 수 있습니다 왼쪽 상단에 단단히 묶여 있습니다 코너는 거대한 공간을 떠난다 당신이 사용하는 경우이 문제가 발생할 수 있습니다 목록 기반 응용 프로그램

그리고 당신은이 거대한 양의 공백을 다른 것에 갖게됩니다 측면에서 볼 수 있습니다 당신이 정말로 이상적으로 가고 싶은 것은 균형 잡힌 모습입니다 당신은 당신의 어플리케이션에서 뒤로 물러 설 수 있고 전체적인 균형을 원할 것입니다 귀하의 콘텐츠 배포

놓친 기회가 마지막 것입니다 앱이 실행 중일 때 더 큰 장치에서는이 여분의 공간과 여분의 공간을 활용하는 것이 좋습니다 콘텐츠를 먼저 넣어보고 실제로 즐기십시오 다음은 응용 프로그램의 예입니다 많은 이미지를 보여줍니다

이미지가 매우 작아서 보이지 않습니다 잘 사용 가능한 공간의 양에 실제로 반응하지 않는 그런 수치 장치에 표시하고이를 보여줍니다 그래서 그것들은 당신이 겪을 수있는 몇 가지 도전들입니다 확장 방식으로 접근하십시오

여기에 전략이 있습니다 첫 번째 전략은 조합입니다 이것은 기기에서 사용할 수있는 공간이 더 많습니다 다른 콘텐츠를 결합합니다 휴대 전화 나 작은 기기의 경우 레이아웃이 두 ​​개인 경우 충분한 공간을 확보하십시오

이미 수용하고 있다면 이런 종류의 레이아웃을 만드는 것이 더 쉽습니다 조각 파편들은 꽤 잘 덮여있었습니다 나는 너를 데려 가지 않을거야 그들은 당신의 앱을 줄이기 위해 빌딩 블록을 사용하고 있기 때문에 개인을 쉽게 정의 할 수 있습니다

블록을 만들고 다르게 배치하십시오 코드를 한 번만 코딩하고 이동해야합니다 약 이런 종류의 세부 사항을 구성하려면 다음을 수행 할 수 있습니다 이 트릭 대체 레이아웃을 사용하십시오

이러한 모든 작업에는 단일 조각 채우기가 포함됩니다 전체 화면을 규모가 큰 기기의 경우 동일한 작업을 무시하고 둘 다 포함합니다 즉시 파편 layout-w 리소스 한정자를 사용하고 있습니다

600dps의 기기 의 너비 대신에이 구성을 선택하십시오 모든 것을 쓰는 것보다 쉽고, 이것을 사용하고 있습니다 주형 이 코드를 사용하여 마스터 세부 흐름을 만듭니다 마법사를 통해 작업하십시오

주기 그것은 당신의 물건에 달려있다 활동을 생성합니다 이 종류를 만드는 것이 훨씬 쉬워졌습니다 의 레이아웃 Roman Nurik : 주목할만한 가치가 있습니다

현재 Android 스튜디오에서 사용 가능하며 Tor는 우리에게 말할 수 있습니다 사용할 수 없습니다 그러나 우리가 거기에서 그것을 얻기 위해 노력할 무언가입니다 이것은 중요한 도구입니다 >> Nick Butcher : 그리고 이러한 조합 접근법을 구축하는 또 다른 도구는 또 다른 관습입니다 어제 지원 라이브러리의 r13에서 시작된 레이아웃이 방금 나갔습니다

그것은 SlidingPaneLayout입니다 이러한 2 열보기를 작성하는 데 사용하는 SlidingPaneLayout입니다 너는 이것이 내 주인 인 것을 본다 이것은 나의 상세한 창이다 충분한 공간이 있다면, 놓을 것입니다

서로 옆에있어 오른쪽의 경우와 같이 그렇지 않은 경우 겹칠 것입니다 그래서 하나는 서로 위에 있습니다 손가락을 가로 질러 미끄러지 듯 움직이면 마스터가 나타납니다 창을 다시 클릭하고 뒤로 또는 뒤로 슬라이드하여 겹쳐진보기로 이동할 수 있습니다

그것은 가치가있다 이것이 DrawLayout과 다른 점에 대한 차이점을 설명합니다 이 두 개의 창은 실제로 같은 비행기에서 그래서 크롬이 정상을 가로 질러 오는 항해 끌기와 달리, 이것들은 콘텐츠 창이 있습니다 그들은 함께 움직여 매우 단단히 연결되어 있다고 생각할 수 있습니다

>> Roman Nurik : 요약하면 서랍 레이아웃은 기본 앱 탐색을위한 것입니다 Chrome과 콘텐츠의 종류가 다릅니다 이것은 내용에 관한 모든 것입니다 이것은 효과적으로 마스터 세부 정보 흐름을 처리하고 다양한 방향 및 태블릿에서 단순화하는 도구입니다 >> Nick Butcher : 굉장해

이 SlidingPaneLayout을 구현하려면 루트 레이아웃으로 정의하십시오 두 아이를 줘 첫 번째 아이는 그 주인 또는 왼손을 형성 할 것입니다 두 번째 자식이 내용 창으로 사용됩니다 레이아웃 너비를 정의합니다 그 두 가지 너비의 합계가 사용 가능한 공간의 양을 초과하는 경우 장치에, 그들은 겹쳐서 당신은이 슬라이딩 동작을합니다

장치가 충분하면 방, 그것을 나란히 보여줄 것입니다 또한 레이아웃 가중치를 1로 설정할 수 있습니다 콘텐츠 창은 표시 될 때와 같이 추가 공간을 채우기 위해 확장됩니다 그 자체로 콘텐츠 창의 layout_width를 최소 크기라고 생각하면됩니다

이 반응 형 레이아웃을 구축하는 쉬운 방법입니다 이것이 조합형 전략을위한 것이 었습니다 계속 진행할 다음 전략은 매크로 리플 로우 (macro reflow)라고 부르는 것입니다 이 리플 로우의 아이디어는 콘텐츠의 주요 블록을 재정렬하십시오 그래서 여기에 우리가 볼 수있는 예가 있습니다

가로 방향으로 더 큰 장치에 표시하면 콘텐츠 블록을 실제로 과도한 회선 차선이나 불균형 한 컨텐츠를 갖는 문제를 피하십시오 너 여기있어 조각을 사용하여 볼 수 있습니다 우리는 단지 한 번만 내용을 정의했으며 매우 간단하게 다른 레이아웃은 방위를 지정합니다 가로 일 때 그들은 쌓일 것입니다

서로 옆에 그들이 초상화에있을 때, 그들은 서로의 위에 쌓일 것이다 정말 간단하지만 큰 차이를 만듭니다 그래서 알기위한 다음 전략은 우리가하는 것입니다 마이크로 리플 로우 호출

따라서 이러한 주요 블록을 사용하고 이동하는 것보다, 실제로는 개별 블록을 살펴보고 그에 따라 표현을 변경하려고합니다 얼마나 많은 공간을 레이아웃해야하는지 이러한 종류의 미세 리플 로우는 우리가 차원 파일이라고 부르는 것 바라건대 많은 사람들이 이미 이것을 사용하고 있습니다 내가 원하는 누군가가 그렇지 않은 경우를 대비하여 강조하기

이 접근 방식은 차원 파일을 엄청나게 사용하므로 많은 사람들이 이것을 사용하고 있습니다 레이아웃에서와 마찬가지로, 누구도 열심히 노력하지 않기를 바랍니다 문자열을 레이아웃에 코딩 할 수 있습니다 레이아웃 구성과 당신의 크기와 치수 등등 너는 정말로 그 모든 것들을 넣고 싶다

두 가지 이유로 치수 파일이나 스타일에 저장하십시오 첫째로, 이것들을 재사용 해 보겠습니다 일관성있는 마진을 가질 수 있도록 앱 전체에서 서로 다른 화면에서 동일한 크기 응용 프로그램 전체에 일관된 텍스트 사이징이 가능합니다 둘째로, 당신은 재정의 서로 다른 크기의 장치에 대체 크기와 치수를 제공하십시오 이 예에서 우리는 텍스트 크기와 여백 및 줄 간격에 대한 표준 치수를 정의했습니다

이 치수 파일에서 정의하고 응용 프로그램의 '다른 화면 더 큰 장치를 사용하면 다양한 크기를 제공 할 수 있으므로 실제로 동일한 레이아웃을 사용하기 쉽지만 텍스트 사이징 및 기타 여백 크기를 늘리거나 줄 간격을 조정하여 더 큰 장치에서 더 나은 환경을 경험할 수 있습니다 >> Roman Nurik :이 기능을 사용하면 더 큰 장치에서 화면을 재구성하여 재조정 할 수 있습니다 네가 나아갈 때 떨어져서 당신은 곁눈질하고 당신은 화면을 보며, 당신은 모든 것을 볼 수 있습니다 왼쪽 상단

이러한 유형의 접근 방식은 실제로 재조정에 도움이됩니다 매우 중요합니다 특히 태블릿 UI의 경우이 기술을 사용하십시오 >> Nick Butcher : 특히 Nick Butcher가 여기서 부르는 한 가지 점이 있습니다 이 예에서는 SW를 사용하고 있습니다

또는 가장 작은 너비 한정자 이것이하는 것은 장치의 가장 작은 너비를 봅니다 세로 방향의 너비입니다 단지 그것을 사용합니다 그래서 그것은 방향 불가지론 자입니다

여기에 이것을 사용하기로 선택한 이유는 이러한 차원 중 일부입니다 당신이 장치를 회전 시켰기 때문에 바뀌 었습니다 텍스트 크기를 바꾸기 위해 다시 레이아웃 할 때 장치를 회전 시키면 텍스트 크기를 변경하면 혼동을 일으킬 수 있습니다 SW, orientation agnostic 한정자와 같은 것을 사용하면 치수를 안정적으로 유지할 수 있습니다 일부 측정 기준은 변경됩니다

그래서 이런 종류의 마이크로를하는 몇 가지 예가 있습니다 리플 로우는 마진 포인트입니다 때로는 조합이나 리플 로우를 사용하여 이동할 수 없거나 외설물에 더 많은 내용을 표시하지만 여전히 불균형 또는 지나치게 길게 피하고 싶다 선 길이 대신 페이지 여백을 도입 할 수 있습니다

이렇게하기위한 기술 MarginPoint라는 콘텐츠 컨테이너에 스타일을 설정하고 있습니다 우리는 그것을 사용할 것입니다 스타일을 사용하여 내용 컨테이너의 레이아웃 너비를 제공합니다 더 작은 장치에서 스타일 여기에 부모와 일치하는 말을하려고합니다 너가 최대 다량까지 도달 할 때까지 자랄 것이다 크기에 도달하려면 여기에서 600dps를 사용합니다

그 크기에 도달하면 클램프하고 결코 커질 수 없습니다 또한 레이아웃 중력을 센터에서는 콘텐츠를 가운데에 배치하고 이러한 여백 포인트를 사용하므로 과도하게 넓거나 불균형 한 느낌을 받으십시오 Roman Nurik : 2 개의 빠른 포인트 w600dp 수식어, 한정어를 사용하는 것이므로 그 너비가 화면의 너비가 아니라 콘텐츠의 너비 콘텐츠에 여분의 여백 또는 여백이있는 경우 또는 전환을 결정하기 위해 수학을 수행 할 때이를 고려해야합니다

포인트 내가 원했던 또 다른 요점은 모든 시나리오에서 이것이 작동하지 않을 수도 있다는 것입니다 그 경우에 따라 휴대 전화에서 태블릿 및 전체 화면 활동에 대한 대화 상자를 사용하는 것은 물론, 전화 크기 UI 그 방법은 ThemeHolo

DialogWhenLarge 테마를 사용하는 것입니다 사용자 정의 유사한 자원 규정 자 기반 접근법을 사용하는 것 >> Nick Butcher : 이런 종류의 미세 리플 로우 접근법을 제공 할 마지막 지점입니다 목록에서 그리드로 전환 중입니다 따라서 앞서 언급 한 것처럼 ListView는 불균형을 느낄 수 있습니다

대형 장치로 성장할 때 그리드 표시로 전환하는 것이 좋습니다 당신은 그것을 위해 작동하는 내용을 가지고 있습니다 일관된 키가 있거나 매우 큰 것이 있습니다 당신이 포함 할 수있는 그래픽의 시각적 인 종류, 이것은 정말로, 정말로 잘 작동 할 수 있습니다 이렇게 건축하기 위하여 이런 종류의 접근 방식은 ListView를 사용하는 대신 GridView를 형세

그런 다음 열 수에 대해 정수 리소스를 사용합니다 그런 다음 장치의 크기에 따라 표시 할 열 수를 정의하십시오 기본적으로, ListView 표현을 제공하는 단일 열로 이동합니다 대형 장치의 경우, 두 개 이상의 열까지 단계별로 조정하십시오 어댑터의 변경 사항을 존중하기 만하면됩니다

그래서 어댑터에서, 당신은 매우 동일한 정수 리소스를 쿼리하고 얼마나 많은 GridView가 개별 항목에 대해 다른 레이아웃을 사용하고 팽창하기를 원하는 열 그래서 그것은 하나의 열 또는 여러 열의 격자 스타일 레이아웃의 목록 스타일 항목이 될 수 있습니다 전망 >> Roman Nurik : GridView 및 ListView는 매우 유용합니다 API 측면에서 유사합니다 둘 다 상속됩니다 둘 다 AbsListView 클래스의 하위 클래스입니다

따라서 ListView와 GridView를 서로 다른 경우로 전환하면 잘 앱에서 자유롭게 그렇게 할 수 있습니다 >> Nick Butcher : 멋지다 그것들은 당신이 확장 가능한 접근 방식과 어떻게 반응 형 디자인이 당신을 도울 수 있습니다 그리고 내가 원했던 한 점 우리가 방금 말했던 그런 종류의 전략들 모두에 대해 휴대 전화 레이아웃 및 태블릿 레이아웃에 대해 이야기합니다

그들 각각은 내용에 기초를 두었습니다 그것 콘텐츠 우선 접근 방식을 취했습니다 따라서 콘텐츠를 정의함으로써, 이러한 전환점은 엄격한 장치 용어처럼 미래를 생각하지 않고 자기 자신을 조금 증거 해 크기와 모양 또는 방향의 종횡비가 누구인지 아는 사람 장치가 곧 돌아올 것이며 응용 프로그램에서 그들과 대처해라 콘텐츠를 먼저 배치하고 콘텐츠 크기에 대해 생각함으로써, 어떤 장치가 함께 제공 되든간에 가장 적합한 장치를 선택하게됩니다

그것을 위해 이제 로마로 돌려 주겠다 Holo 시각적 언어 구현에 관한 프로 팁 Roman Nurik : 너무나 시각적 인 말로, 몇 가지 다른 것을 의미합니다 그냥 정말 빠른 박람회 나 배경을 추측합니다

Android 30, Honeycomb, 안드로이드에 대한 UI를 재 설계하거나 다시 생각해 보았습니다 언어 그리고 내가 할 수있는 두 가지 주요 교리가있다 Holo 시각적 언어에 대해 지금 당장 생각해보십시오

그것을 구현하는 과정 첫 번째는 콘텐츠 대 크롬에 초점을 맞추고, 그래서 우리는 콘텐츠에 대해 우리가 사용할 수있는만큼 많은 픽셀을 사용하고자합니다 상자와 경계선과 크롬 같은 것을 보여주는 것보다 뒤에있는 기계가 아닌 정보를 보여주는 것에 초점을 맞춘 것과 같습니다 그것은 모든 것을 작동하게 만듭니다 두 번째 신조, 나는 그것이 하위 신조라고 생각한다

처음에는 공간과 타이포그래피에 중점을두고 계층 구조를 전달합니다 테두리와 상자 같은 것들보다 그래서 우리가이 과정을 진행할 때, 그것이 영향을 끼치기 때문에 염두에 두십시오 이 결정의 일부 그래서 당신이해야 할 첫 번째 일은 Holo를 구현하고 Holo 시각적 언어를 응용 프로그램에서 사용하고 Theme

Holo를 상속받습니다 테마 또는 그 자손 중 하나 한 가지주의해야 할 점은 이것이 사용할 수 있다는 것입니다 API 11 이상에서는 Android 30 이상이므로이를 완화하기 위해 할 수있는 한 가지 방법은 기본 테마에 대해 이러한 종류의 전환 동작이 있어야합니다

너는 주제를 물려받을 수있어 홀로 라이트, 예를 들어, API 11 이상에서 사용할 수 있고 그 다음에 ThemeLight 만 있으면 어디서나 사용할 수 있습니다 플랫폼의 다른 버전에서

>> Nick Butcher :이 트릭은 실제로 기본 테마 기본 테마의 상속 된 테마와 서로 다른 전환점을 사용하는 것이 편리합니다 일부 플랫폼 비헤이비어 다른 API 수준에서 도입 된 것일 수 있습니다 이 기본 테마 비헤이비어를 사용하면이를 계층 구조에 삽입 할 수 있습니다 정말 편리합니다

>> Roman Nurik : 우리는 I / O 응용 프로그램에서 이것을 많이 사용합니다이 응용 프로그램은 어느 시점에 공개 될 것입니다 아주 빨리 우리는 이것을 어떻게 활용하는지 볼 수 있습니다 우리가 ActionBarCompat 라이브러리를 릴리스 할 때 처리 할 것이라고 언급하고 싶습니다 귀하의 활동 테마 또는 귀하의 응용 프로그램 테마에 대한 당신을 위해이 많은 것들

단순히 ThemeAppcompatLight를 상속하지만 파일 이름이 변경 될 수 있습니다 오히려 이 스위치를 켜면 이걸 상속받을 수 있습니다 이것은 곧 다시 올 것이다

일단 ThemeHolo 주제를 물려 받았다면 우리는 더 나은 방법을 알아 내야합니다 그 일단 당신이 그 주제를 물려 받았다면, 그 자원을 사용할 때입니다 프레임 워크는 무료로 제공합니다

네가 좋아하는 가장 좋아하는 것 중 하나 인 Nick, 프레임 워크에 기대다 무료로 제공하는 것을 사용하여 재 구현할 필요가 없습니다 이 모든 것을 처음부터 >> Nick Butcher : 닉 부처님 약간의 세부 사항을 간과 할 수 있기 때문에 재고 UI가 보이는 방식을 모방하려고합니다

실제로 작성한 스타일과 동일한 스타일을 재사용 할 수 있습니다 똑같은 일관된 행동을 취하십시오 나는 Rich Fulcher로부터 그 말을 훔쳤다 고 생각한다! Roman Nurik : 맞아 그래서 한 가지주의 할 점은 다음 몇 개의 화면에서, 다음 슬라이드 몇 장, 우리는이 물음표 android 콜론 구문을 사용할 것입니다 기본적으로 테마 속성 참조입니다

우리는 기본적으로 테마에 저장되며, listPreferredItemHeightSmall과 같은 차원 파일이든, 작은 목록 항목의 표준 항목 높이 또는로드와 같은 스타일 리소스 스피너 예를 들어, 큰로드 스피너 또는 불확정 – 불확정 진행률보기에서는 진행률 막대를 만들고 그 스타일을 물음표로 설정하기 만하면됩니다 Android 진행률 표시 줄 스타일 큰 특성, 테마 특성 예를 들어 드로어 블을 사용하려는 경우 드로잉을 모두 내장합니다 예를 들어 drawableTop과 같이 listChoiceIndicatorSingle 드로잉을 사용할 수 있도록 테마 TextView 또는 drawableLeft 등의 속성 그래서 정말로 당신은 무료로 많은 물건을 얻습니다 나는 너를보기 위해 확실히 조언한다

androidRAttr 자바 클래스에 대한 문서에서, 나는 생각한다 여기에는이 모든 것이 포함되어 있습니다 당신은 당신의 애플 리케이션에서 사용할 수 있습니다

그래서 저는 그것에 대해 조금 이야기하고 싶습니다 공간 및 활판 인쇄용 자료 첫 번째는 공간입니다 이 화면을보십시오 그래서 저는이 스크린의 근본적인 문제가 시각적으로 부족하다는 점에서 생각합니다

계층 구조, 시각적 구조 그냥 떠 다니는 요소가 있습니다 이 거대한 공간에는 어떤 종류의 계층 구조도 없습니다 그래서 한 가지 방법으로 우리는 이것이 분배기를 도입하는 것을 고칠 수 있습니다 그래서이 분배기들은 기본적으로 그것뿐입니다, 그들은 화면의 다른 부분을 나눕니다

정말 최소한의 금액을 사용하는 종류의 상자와 경계선을 사용하는 대신 계층 구조를 도입 할 수있는 픽셀 수 이러한 분배기를 구현하는 것은 매우 간단합니다 show dividers 속성을 설정하기 만하면됩니다 선형 레이아웃에서 중간에이 구분선을 다른 어린이들 사이에 그립니다 그런 다음 그 공간에 그릴 드로어 블을 제공합니다 여기에서 볼 수 있듯이 시스템은 표준 드로어 블을 제공합니다

공간 그것도 주목할 가치가 있습니다 계층 구조를 도입하기 위해 구분선을 사용하는 것 외에 표준을 여전히 사용해야합니다 16 dp 여백 및 디자인 가이드에서 언급 한 표준 48 dp 시각적 리듬과 그것은 정말로 당신의 스크린에 리듬과 같은 구조와 종류를 확립하는데 도움이 될 것입니다 그래서 디바이더에 대해 이야기하고 싶었던 또 다른 사항은 디바이더 패딩입니다 그래서 당신이 제공한다면 구분선 패딩 속성은 여기에 8dp입니다

실제로는 위에 약간의 공간을 그립니다 그리고 분배 자의 아래쪽이나 왼쪽과 오른쪽에 위치하게됩니다 계층 그래서이 경우 우리가 설정하지 않은 것을 상상해보십시오 텍스트와 삭제 아이콘 사이의 구분선에 채우는 구분선 그것은 단지 테이블처럼 보입니다

그것은 단지 사물의 격자처럼 보일 것이고 명확하지 않을 것입니다 진짜 계층 구조가 무엇인지 그러나 패딩을 도입하자 마자 즉시 이것들이 일련의 목록 항목이고 각 목록 항목 내에 두 개의 분리 된 터치 대상 리 포커싱이라는 주제와 함께 크롬이 아닌 콘텐츠에서, 우리는 버튼을 위해서도 그렇게하기를 원합니다 우리는하지 않는다

단추 주위에 테두리와 상자를 그리기를 원한다 방법 이 테두리없는 버튼 스타일은 매우 일반적으로 디바이더와 함께 사용되므로 UI를 단순화하는 데 정말로 도움이됩니다 정말 크롬을 통해 콘텐츠에 집중하는 데 도움이됩니다 그래서주의해야 할 것은 경계가 없다는 것입니다

따라서 경계선을 설정하는 데 디바이더가 필요하지만 버튼을 터치 할 때, 당신이 터치 영역임을 나타 내기 위해 불이 켜집니다 너가하는 일이야 에 연기 그래서 그것들을 사용하기 위해서 간단하게 이미지를 만듭니다 버튼 또는 버튼을 클릭하고 해당 스타일을 borderlessButtonStyle 테마 속성으로 설정합니다

이것은 무료로 모든 것을 제공합니다 또 다른 유형 – 테두리없는 변형 버튼은 버튼 막대이므로 대화 하단이나 화면 하단에있는 경우 두 가지 작업, 선형 레이아웃에서이 버튼 막대 스타일을 사용할 수 있으며 자동으로 분배기를 만들고 가중치를 올바르게 적용하십시오 실제로, 그것은 가중치를 적용하지 않습니다 신경 쓰지 마 따라서 자동으로 이러한 구분선이 추가되고 버튼 막대를 사용할 때는 버튼 순서를 올바르게하십시오

기본 버튼은 항상 오른쪽에 있어야하며, 따라서 삭제 대 삭제 또는 삭제 대 취소 비록 그것이 부정적인 행동 (예 : 삭제)이라 할지라도, 선호하는 항목이 실제로 오른쪽에 있어야합니다 Android 40부터 매우 중요합니다 이상

그래서 그 버튼 모음 스타일을 사용하고 각각 그 버튼의 – 나는 그 버튼의 길을 너무 많이 말하고 있었다 >> Nick Butcher : 모든 의미를 잃어 버렸습니다 Roman Nurik : 네 각 단추 buttonBarButtonStyle을 적용해야합니다 누군가 내가 방금 몇 번이나 말했는지 계산할 필요가 있습니다

단어 버튼 20 대입니다 어쨌든, 매우 간단합니다 다시, 이것은 아주 적은 코드입니다 너 정말 많이 하는게 아니야

너는 단지 스타일을 설정하는거야 >> Nick Butcher : 프레임 워크에 기대어 프레임 워크에 기대어 놓습니다 Roman Nurik : 네, 가져 가세요 다시 말하지만 터치 강조가 있습니다 생각해 볼 또 다른 사항은이 터치 피드백을 버튼이 아니며 레이아웃의 종류 또는 뷰 계층 구조를 가질 수 있습니다

Reto는 오늘 아침 일찍이 세션에서이 점을 언급했습니다 나는 그것을 포함시키지 않을거야 하지만 실제로 drawable 인 selectableItemBackground를 사용하면 드로어 블 (drawable)로 해석되며, 이를 전경이나 배경의 배경으로 사용하는 것은 정말 좋은 방법입니다 그렇게 또한 목록을 사용하는 경우 list selector 속성을 사용하여 거기에 사용할 올바른 드로어 블을 제공합니다

>> Nick Butcher :이 터치 피드백이 얼마나 중요한지 강조하고 싶지 않습니다 목발과 크롬을 뒤로 젖히면, 사용자는 무엇이 상호 작용하고 무엇을합니다 상호 작용이 필요한 것은 무엇이든 정말로 필요합니다 당신이 만질 때마다 반응합니다 이런 것들을 사용하면 실제로 의사 소통을 할 수 있습니다

그 또한, 당신은 상호 작용할 수 있습니다 경계 상자를 사용하지 않고 경계선없는 단추를 사용할 때, 터치하면 전체 대화식 범위가 강조 표시되므로 다음에 사용자가 다시 방문 할 때 요소에 이미 상호 작용할 수있는 모델과 캔트 Roman Nurik : 맞아 그래서 또 다른 중요한 holo 시각적 언어의 시각적 요소는 목록 제목입니다

목록 제목은 기본적으로 목록 항목의 다른 그룹을 분리하는 것들, 그리고 그들은 정말로 14sp이어야합니다, 대담한, 모든 대문자, 예를 들어 작업 표시 줄 탭처럼, 그리고 그들은 2 dp 구분 기호가 있어야합니다 아래에 따라서이 모든 것을 실제로 파악할 필요는 없습니다 밖으로 물건을, 당신은 실제로 그냥 ListSeparatorTextViewStyle을 사용할 수 있습니다 TextView에 설정하고 자동으로 스타일링을 얻으십시오 이 작업을 사용자 정의하여 브랜드의 액센트 색상, 그런 다음 꼭 그 값을 사용하십시오 이것은 훌륭한 도구의 일종이다

공개를 위해 사용하려면 목록의 공간, 목록의 콘텐츠 자체가 필요합니다 그래서 우리는 공간에 대해 많이 이야기했습니다 나는 잠시 이야기를 나누고 싶다 타이포 그라피는 홀로 시각 언어에서 매우 중요합니다 안드로이드 4

1 우리는이 강력한 견고한 타이포그래피 팔레트를 제공했을 것입니다 그래서 Roboto의 새로운 가중치와 분산을 사용하여 실제로 의사 소통을 돕습니다 텍스트 크기를 사용하여 구조와 계층 구조를 전달하는 대신 가중치를 사용하여 그걸 할 수있는 좋은 방법 이죠 따라서 두 가지 간단한 노트는 얇은 것을 사용하지 않습니다 정말 작은 텍스트

큰 표제에 가장 좋습니다 또한 빛은 머리글에 가장 적합합니다 응축 된 물은 정말 좋아요 뉴스 기사 제목 라이트는 본문 텍스트에서 잘 작동하지만 당신이 사용해야하는 최소 크기의 종류를 알고있을 필요가있다

>> Nick Butcher : 규칙에 따라 규칙적으로 또는 약간만 켜고 싶을 것입니다 더 큰 타입의 크기는 당신이 서고 싶은 것들을 위해 얇고 어쩌면 더 큰 빛을 예비합니다 본질적으로 더 큰 크기를 가지고 있음에도 불구하고 더 가벼운 유형은 정말 좋아 보인다 >> Roman Nurik : 빠른 메모입니다 Android 4

1 이상입니다 이걸 사용하고 싶다면 이전 버전의 플랫폼에서는 Google 글꼴에서 이러한 글꼴을 다운로드 할 수 있으며 가져올 수 있습니다 프로젝트에 추가하십시오 하나의 마지막 빠른 메모, 또 다른 중요한 부분 Holo 시각 언어의 또 다른 장점은 당신만큼 공간을 많이 차지하는 풀 블리드 이미지입니다 콘텐츠 전용으로 사용할 수 있습니다 당신이 가끔 실행하는 것들 중 하나는 모든 사진이 동일한 가로 세로 비율로 표시되는 것은 아니므로 이미지를 사용할 수 있습니다

전망 일관된 종횡비로 이미지보기를 사용하고 이미지에 놓을 수 있습니다 크기를 이미지보기에 입력하여 자르기를 가운데로 맞춰 실제로 이미지가 맞는지 확인하십시오 멋지게 이미지보기에서 귀하의 레이아웃과 엉망의 일종하지 않습니다 여기서 주목해야 할 것은 이것이 어떤 경우에 자르기를 끝내는 것입니다

당신 그건 정말 좋은거야 베이컨 사진이나 고기 같은 것들은 괜찮아 풍경 눈이 잘리는 사람들의 사진에는 좋지 않습니다 그 소름 끼치는 종류

따라서 센터 작물 기술은 UI가 잘 정렬되고 잘 맞는지 확인하는 데 매우 좋습니다 이러한 풀 블리드 이미지를 사용하는 경우 이미지 사이에 구분 기호를 사용하는 것이 가장 좋습니다 매우 가벼운 구분 기호, 아마도 하나의 dp 또는 너무, 정말 다른 색 이미지가 서로 섞이지 않습니다 그래서 전에 – 그것은 많은 것들을 덮을 것이 었습니다 그리고 분명히 훨씬 더 많습니다

우리는 모든 것을 다 커버 할 수는 없지만, 내가 원하는 마지막 것 덮개는 홀로 자산을 생산하는 것입니다 그래서 우리가 보았 듯이 XML을 사용할 수 있습니다 앱에 많은 애셋을 실제로 제공하는 일부 스타일링 도구 하나, 당신은 아이콘과 PNG 파일 등등을 여전히 필요로합니다 그걸위한 세 가지 도구가 정말 좋습니다 첫 번째는 Android 저작물 스튜디오입니다

작업 표시 줄 및 알림 아이콘에 대한 아이콘을 생성합니다 적절한 크기 조정, 착색 불투명도 등 두 번째는 액션 바 스타일 생성기입니다 귀하의 앱에 브랜드의 액센트 색상을 지정한다고 가정하면 그렇게하면이 악센트 색상을이 도구에 넣으면 자동으로 생성됩니다 작업 표시 줄, 탭 표시기 및 선택 가능한 항목 배경 물건

자동으로 이러한 종류의 악센트 부호가있는, 누르고 집중된 상태 >> Nick Butcher : 그리고 오른쪽 계층 구조는 당신은 당신의 프로젝트에 들어가기 만하면됩니다 슈퍼 간단합니다 Roman Nurik : 네 그리고 마지막으로 같은 확인란과 버튼에 대해 똑같은 작업을 수행하는 Android 홀로그램 색상 도구 그런 것들

자, 저는 제프와 이 두 가지 도구를 작성한 Jerome은 개발자 샌드 박스에 있으므로 버그가있는 경우 보고하고 괴롭히지 그들은 정말 멋진 사람들입니다 네가 원하면 데모,이 모습의 라이브 데모, 확실히 그들을 확인하십시오 >> Nick Butcher : 그들은 훌륭한 도구입니다 그냥 사용하십시오

>> Roman Nurik : 현저한 버그는 없습니다 나는 그것이 우리의 대화를위한 것이라고 생각한다 고맙습니다 다시 한번 오기를 바랍니다 나는 우리가 할 수없는 빠른 shoutout을하고 싶다 지금 당장 질문을 해보지 만, Nick과 나는 둘 다 Android 플랫폼 업무 시간 내에있을 것입니다

여기서 우리는 질문을 할 수있을 것입니다 나는 또한 우리가 안드로이드를 가지고 있다고 언급하고 싶다 디자인 실천 라이브 디자인 실습 내일 오후 2시에 뭐야? 원하는 경우 컴퓨터 도구를 사용하지 않고 처음부터 앱을 디자인하는 방법을 배우려면 그냥 스케치하고 와이어 프레임, 분명히 오후 2시에 그것을 확인해 보러 갈거야 >> Nick Butcher : 그리고 라이브 스트림을 원격으로 시청하는 사람들에게, Google+에서 실제로 활발히 활동하고 있으므로 Google+를 팔로우하거나 Android에 가입하세요

디자이너 커뮤니티 Developers 커뮤니티도 좋습니다 그리고 대화에 참여하십시오 해시 태그 #ADiA 및 #AndroidDesign 태그에 Android 디자인 실천에 동참하십시오 매주

매우 감사합니다 [박수]

Building a Responsive UI in Android (Android Development Patterns)

MIKE DENNY : 정말 뭔가가 있습니다 앱을 얻는 것에 만족합니다

기기에서 멋지게 보입니다 하지만 11,000 개 이상의 다른 Android 기기가 있기 때문에 11,000 개의 다른 레이아웃을 만들어야한다는 것은 아닙니다 멋지게 보이는 앱 만들기 반응 형 UI 원칙을 사용하는 경우가 아닙니다 당신은 내가 이안이나 조안나가 아니라는 것을 눈치 챘을 것입니다

내 이름은 Google Design의 디자인 대변자 인 Mike Denny입니다 팀 먼저 첫 번째 것들 특정 휴대 전화 및 태블릿에 대해 생각하기 너를 곤경에 빠지게 할 뿐이야 다양한 기기가 있습니다

그다지 큰 차이가 없다 휴대 전화와 가장 작은 태블릿 대신, 얼마나 많은 공간에 대해 더 일반적으로 생각하십시오 당신은 함께 일해야합니다 이것은 3 개의 다른 풍미에서 올 수있다 – 너비, 높이 및 최소 너비

폭은 매우 중요하며 UI 디자인 및 빌드에서 중단 점의 기초가됩니다 예를 들어, 600 dp 너비가 첫 번째 지점입니다 거기서 당신은 나란하게 요약하는 것을 고려할 수있었습니다 및 상세 수준보기 조금이라도 낮 으면 각 레벨을 제공하지 않을 것입니다 가치있는 충분한주의

반응 형 UI를 설계 할 때 높이는 덜 일반적입니다 하지만 수직 스크롤과 같은 용기가 사용하기 어려울 것입니다 한 번에 하나 또는 두 개의 요소 만 볼 수있는 경우 제한된 높이로 인해 가장 작은 너비, 높이 또는 너비와 달리, 회전 민감하지 않도록 설계되었습니다 두 값 중 작은 값 이렇게하면 사용할 수있는 공간의 양을 더 잘 알 수 있습니다

앱이 남아 있는지 확인하는 쉬운 방법입니다 장치가 회전 할 때 일관성이 유지됩니다 당신은 당신의 사용자를 강요하고 싶지 않다 매번 네비게이션 구조를 다시 배우기 장치를 회전하십시오 이것은 다중 창 세계에서 특히 중요합니다

앱의 크기가 조정되면 너비, 높이 및 최소값 너비가 업데이트 될 것입니다 태블릿에서 전체 화면으로 이동할 수 있습니다 초상화 중심의 전화에 해당하는 금액까지 공간의 가치 좋은 반응 형 UI가있는 곳은 다음과 같습니다 매끄러운 전환을 만들 수 있습니다

일반적인 패턴의 숫자가 있습니다 당신은 그 반응 형 건물을 만들 때 고려할 것입니다 숨겨진 내용을 화면에 표시하는 등의 UI 크기가 커지고 탐색 패턴이 변형됩니다 또는 목록에서 그리드로 전환 할 때, 화면을 여러 섹션으로 나란히 나눕니다 특정 요소 리플 로우, 크기 확대 또는 개별 요소의 여백, 또는 심지어 특정 요소의 위치를 ​​변경 떠 다니는 액션 버튼처럼 디자인에 대한 자세한 내용은 블로그 게시물을 확인하십시오

반응 형 UI 및 특정 패턴 당신은 더 나은 애플 리케이션을 구축하는 데 사용할 수 있습니다

Adobe XD Design An App Prototype UI | XO PIXEL

이봐 요, 픽셀! 이번 주 튜토리얼에서 나는 당신 자신 만의 인터랙티브 디자인 방법을 보여줄 것이다 어도비 XD에서 애플 리케이션 프로토 타입

이 응용 프로그램을위한 디자인은 매우 근사하고 현대적입니다 내 블로그 xopixelcom을 방문하여이 자습서의 기사를 읽으십시오 이제 시작하겠습니다 Adobe XD에서 대지 도구를 클릭하고 사전 정의 된 대지에서 'Android Mobile'을 선택합니다

크기 (오른쪽 패널) 작업 공간에는 총 2 개의 대지가 있어야합니다 이제는 아트 보드를 만들어 Adobe Illustrator에서 그라데이션 배경을 만듭니다 360×640 픽셀이며 그라디언트 도구를 사용합니다 선형 그래디언트를 만드는 데 사용되는 두 가지 색상은 파란색과 녹색입니다

그래디언트가 만들어지면 복사하여 Adobe의 첫 번째 대지 위에 붙여 넣습니다 XD 이제 우리는 첫 번째 대지에서 작업 할 것입니다 먼저이 앱에 이름을 지정해 보겠습니다 캔버스 상단에서 122px 아래로 로고를 배치하십시오

그런 다음 사각형 도구를 사용하여 283x47px 크기의 사각형을 그립니다 로고와 첫 번째 사각형 사이에 35 픽셀의 공간이 있어야합니다 직사각형의 모서리를 27 픽셀만큼 둥글게 만듭니다 사각형 모양을 두 번 더 복제하여 총 3 개를 만들어 놓습니다 서로 아래에 각각 21px 간격을두고 처음 두 직사각형을 흰색으로 채운 다음 불투명도를 20 %로 설정합니다

마지막 사각형에는 채우기가없고 흰색 2 픽셀 경계가 있습니다 이제 우리는 몇 가지 아이콘을 추가 할 것입니다 먼저, 왼쪽 상단 구석에 햄버거 메뉴 아이콘을 추가 할 것입니다 그런 다음 메일 아이콘을 첫 번째 사각형의 왼쪽에 추가합니다 두 번째 직사각형에있는 사람 아이콘을 클릭합니다

또한 모든 텍스트 상자와 버튼에 대해 텍스트를 추가 할 것입니다 마지막으로 3 개의 소셜 미디어 아이콘 (Instagram, Facebook, Twitter)을 추가 할 예정입니다 하단에 이제 우리는 두 번째 대작 작업을 시작할 것입니다 먼저, 첫 번째 대지에 디자인을 복사 한 다음에 붙여 넣습니다

두 번째 대지 전체 디자인을 이동하여 일부만 표시되도록하십시오 그런 다음 전체 대지에 맞게 그라디언트 배경을 슬라이드합니다 프로토 타입 효과를 추가하면 메뉴가 슬라이딩하는 것처럼 보입니다 아웃

햄버거 아이콘을 삭제하고 그 자리에 'X'아이콘을 추가하십시오 '로그인'텍스트와 마지막 두 개의 소셜 미디어 아이콘도 삭제할 예정입니다 슬라이드 아웃 메뉴를 만들려면 왼쪽에 222×640 픽셀의 사각형을 그립니다 아트 보드 이 직사각형의 채우기 색상은 검은 색이고 불투명도는 60 %로 설정됩니다

그런 다음 텍스트 도구를 사용하여 메뉴에있는 링크를 작성합니다 앱 디자인을 대화식으로 만들기 위해 프로토 타입 모드로 들어갈 것입니다 그런 다음 햄버거 메뉴 아이콘을 선택하고 와이어를 드래그하여 연결합니다 두 번째 대지에 슬라이드 오른쪽, 느긋함, 02 초 설정이 가능합니다

두 번째 대지의 경우 'X'아이콘을 선택하고 와이어를 드래그합니다 슬라이드 왼쪽, 안쪽, 02 초 설정으로 첫 번째 대지로 이동합니다 마지막으로 앱 프로토 타입을 테스트하려면 재생 아이콘을 클릭하고을 클릭 한 다음 메뉴 아이콘을 클릭하십시오 메뉴를 열고 닫는 것처럼 보입니다

이것은 정말 멋지다! 나는 당신이이 튜토리얼을 즐겼기를 바란다 마음에 드시면이 비디오에 큰 점수를주십시오 xopixel을 구독하면 이처럼 멋진 디자인 비디오를 얻을 수 있습니다 다음 주 비디오에서 보자!

What’s New in Android Design Tools – New Features for Rapid UI Development (Google I/O ’17)

[음악 재생] JOHN HOFORD : 안녕하세요 저는 존 호 포드입니다

그리고 이것은 니콜라스 기수입니다 우리는 모두 ConstraintLayout, Android Studio 디자인 화면 니콜라스가 우리에게 약간의 소개를 해줄거야 모든 것에 니콜라스 로어 : 안녕하세요, 모두들 그래서 우리는 조금 이야기 할 것입니다

일반적으로 Android Studio에 대한 내용과 조금 더 ConstraintLayout에 대해서도 마찬가지입니다 여기서 우리의 목표가 무엇인지에 대한 간단한 요약은, Google 개발자까지 – 우리가 원하는 것은, 정말로, 당신의 삶을 많이 만들고, 훨씬 낫지, 그렇지? 그리고 우리는 당신이 무엇을 듣고 싶습니다 모든 의견, 아이디어, 요청을 말해야합니다 그러나 무엇이든, 우리는 실제로 그것을 조사하고 있습니다 그리고 우리는 빨리 움직이려고 노력합니다

지난 해 I / O에서 우리는 안정적인 버전 Android Studio 22, 23, 우리는 현재 30을 연구 중입니다 그리고 3

0을 테스트 해 보시기 바랍니다 현실에는 많은 개선이 있습니다 태블릿에 세부 사항입니다 특히 현실에 대한 세부 사항 Android Studio의 비주얼 디자이너는 우리의 목표는 비교적 간단합니다 기본적으로 레이아웃을 시각화 할 수 있기를 바랍니다

나도 알아, 비주얼 디자이너라고 우리는 당신이 그 레이아웃을 아주 쉽게 만들 수 있기를 바랍니다 그리고 그것들 모두는 효율적입니다 우리는 이유없이 당신이 당신의 시간을 잃어 버리는 것을 원하지 않습니다 그 메모에, 존? JOHN HOFORD : 좋습니다, 그래서 우리는 단지 당신에게주고 싶습니다

간략한 개요, 디자이너의 땅의 위치 모두가 어떻게 함께하는지에 대한 아이디어를 제공합니다 당신이 할 수있는 일 중 하나는, Darcula Mode에서 – Darcula Mode와 같은 많은 사람들이 확신합니다 그리고 우리는 다른 하나로 돌아갈 수 있습니다 이제 우리는 왼쪽에 팔레트가 있습니다 기본적으로 위젯을 드래그 앤 드롭 할 수있는 곳 귀하의 디자인 표면에

그런 다음 구성 요소 트리를 클릭 한 다음 관리자가옵니다 우리는 나중에 그것에 대해 더 많은 것을 알게 될 것입니다 그런 다음 핵심 디자인 화면과 툴바가 있습니다 우클릭 메뉴도 있습니다 그래서 많은 사람들이 마우스 오른쪽 버튼 클릭 메뉴

개체를 선택하면 해당 개체를 클릭 할 수 있습니다 마우스 오른쪽 버튼을 클릭하면 유용한 작업이 수행됩니다 당신이 선택한 것과 당신이 전환 할 수있는 다른 것은 청사진 모드입니다 한 번에 두 개의 화면으로 전환 할 수도 있습니다

청사진 모드는 일종의 청사진입니다 대략적인 개요, UI의 스케치입니다 디자인 표면은 실제로 안드로이드 에뮬레이터의 일종 인 레이아웃 LIM에서 렌더링됩니다 우리가 할 수있는 일 중 하나 XML 편집기 모드에서 디자이너를 사용하십시오 그래서 XML 편집기에서 Preview를 누르면, 근본적으로 바로 전체 디자인 모드를 얻게됩니다

선택하면 미리 알림이 표시됩니다 XML에서 올바른 요소로 이동합니다 디자인 또는 청사진을 보려면 전환 할 수 있습니다 당신은 또한 그것을 약간 확장 할 수 있습니다 팔레트를 꺼내, 실제로 요소를 바로 드래그 할 수 있습니다 화면에

실제로 하단에 XML이 생성되었음을 알 수 있습니다 사실 XML을 편집하면 이 경우 XML을 삭제합니다 디자인 표면에서 즉시 이동합니다 따라서 양방향으로 실시간 피드백을 얻을 수 있습니다 간단히 말해서

NICOLAS ROARD : 그건 단지 간단한 소개였습니다 당신에게 개념의 일부를 제공하기 위해, 우리가 대화에서 사용할 어휘의 일부 그리고 이미이 UI에 익숙해지고 있기를 바랍니다 그렇지 않은 경우 다시 30 시도해보십시오

ConstraintLayout을 지금 다루겠습니다 ConstraintLayout은 작년에 발표 한 라이브러리입니다 이 방에있는 I / O에서 그리고 일반적인 생각은 뭔가를 제공하는 것입니다 그것은 당신에게 모든 유연성과 힘을줍니다

모든 유형의 레이아웃을 만들 수 있습니다 평평한 레이아웃을 중요하게 강조하고 싶습니다 평평한 레이아웃이있는 경우 – 중첩되지 않음을 의미합니다 그 레이아웃을 생성하기 위해 뷰의 계층 구조 – 많은 장점이 있습니다 자주 반복되는 장점 중 하나는 성능입니다

실제로 중첩 된 레이아웃을 사용하면 [? 코너?] 경우 계산이 폭발적으로 늘어나는 곳 따라서 모든 것이 평평한 경우 실적에서 승리하는 경향이 있습니다 이것이 하나의 이유입니다 내가 생각하는 실제로 더 흥미있는 또 다른 이유는, 당신은 훨씬 더 융통성이 있습니다 콘텐츠를 제한하려면 훨씬 더 좋습니다

내용을 수정하려면 훨씬 더 좋습니다 업그레이드, 수정 등 ConstraintLayout을 사용한 또 다른 큰 일 맞아, 일하는 팀이 같아 ConstraintLayout 및 레이아웃 Android Studio의 편집기 그래서 그것은 처음부터 깊이 통합되어 있습니다

ConstraintLayout에 몇 가지 기능이 있다는 것을 의미합니다 훌륭한 UI 디자이너를 만드는 데 도움이되며 그 반대의 경우도 마찬가지입니다 Studio에 몇 가지 기능이 있습니다 훨씬 더 효율적이고 훨씬 효율적으로 만들 수 있습니다 ConstraintLayout을 사용한 레이아웃

또한 번들되지 않은 라이브러리이기도합니다 언제든지 모든 버전을 푸시 할 수 있음을 의미합니다 사실, 우리는 방금 새 버전을 밀어 넣었습니다 오분 전 기본적으로 모든 기기와 호환됩니다

그래서 10을 재빨리 요약 해보십시오 작년에 우리가 10을 발표했을 때, 우리는 긴 일련의 알파 릴리즈, 베타 릴리즈를했습니다 작년 이래로 기본적으로 17 건이 출시되었습니다

우리가 빨리 움직이고 빨리 반복하려고한다고 말했을 때, 그것이 우리가하는 일입니다 우리는 2 월에 10의 최종 릴리스를 수행했습니다 특히 많은 경우 성능이 향상됩니다 작년 ConstraintLayout을 시도해보십시오

확실히 그것을 줘 새로운 기능에 대해서도 다룰 것입니다 Android Studio의 기본 레이아웃입니다 따라서 새 화면을 만들 때 기본적으로, 우리는 ConstraintLayout을 넣습니다 RelativeLayout을 배치하는 데 사용됩니다

물론 Studio는 매우 유연합니다 그것을 바꾸고 싶다면 그렇게 할 수 있습니다 그러나 우리는 그것이 정말로 훌륭한 레이아웃이라고 믿습니다 을 눌러 화면을 시작하십시오 그게 우리가 당신을 격려하고 싶습니다

그리고 그것들 모두는 정말로 지역 사회의 개입없이 가능했다 기사, 회담, YouTube의 동영상으로 널리 채택 됨 도서관의 또한 새로운 커뮤니티 기반 이번 주에 시작되는 ConstraintLayout 웹 사이트, 너는 그것을 조사해야한다 그래서 10, 기능면에서 우리는 무엇을 가지고 있었습니까? 작년에 무엇을 보여줬습니까? 글쎄요, 그 동안 우리는 무엇을 추가 했습니까? 그래서 우리는 상대적인 포지셔닝을 가지고 있다고 생각했습니다 레이아웃을 설정하여 하나의 버튼 다른 요소에 상대적으로 배치됩니다

부부와 함께 RelativeLayout과 매우 유사합니다 흥미로운 비틀기 센터 포지셔닝도 추가했습니다 따라서 두 대상 사이에 제약 조건을 만드는 경우, 귀하의 요소는 중앙에 배치됩니다 그리고 실제로 수정할 수 있습니다

그것은 중심이 아니라 편견을 적용 할 수 있습니다 그래서 훨씬 더 유연한, 단순히 반응적인 UI가 아닌 정확한 차원의 측면에서 우리는 또한 헬퍼 객체의 개념을 도입했습니다 같은 지침 그리고 가이드 라인을 가진 아이디어는 훨씬 더 자연스러운 방법으로 UI를 만들 수 있습니다

특히 디자인 배경에서 나온 경우, 또는 디자이너와 함께 일하는 경우, 그들은 언제나 자신의 레이아웃을 생각하고 창조합니다 그들은 많은 이름 – 지침, 키 라인, 수정 지시라고 부릅니다 기본적으로 수직선과 수평선 모든 것이 올바르게 정렬되어 있는지 확인하십시오 글쎄, ConstraintLayout의 가이드 라인 당신이 사용하고 창조 할 수있는 단지 첫 번째 개념입니다 귀하의 레이아웃,하지만 궁극적으로 장치에, 단지 레이아웃에 적합한 설정이됩니다

우리는 또한 체인을 도입했습니다 10 릴리스주기의 비교적 늦은 판입니다 위젯 그룹을 배치 할 수 있다고 생각하십시오 그룹으로

그래서, 예를 들어, 그것들을 분산 시키십시오 Android의 이전 레이아웃과 비교하여 흥미로운 점 한 축에서만 작동한다는 것입니다 따라서 다른 축은 체인에 의해 구속되지 않습니다 마지막으로 비율을 도입했습니다 나는 많은 사용자가 사용자 정의보기를 다시 구현해야한다고 확신합니다

그냥 비율을 구현합니다 이제는 ConstraintLayout에 추가했습니다 출발에서 마지막으로 ConstraintSet을 도입했습니다 ConstraintSet의 아이디어는 이제 우리가 평평한 레이아웃

레이아웃을 만드는 데 필요한 계층 구조가 없습니다 어떤 의미에서, 당신은 무리와 함께 동일한 수준의 위젯을 제공합니다 그리고 우리는 그것을 레이아웃을 만들기 위해 적용합니다 원하는 결과를 얻으려면 이러한 제약 조건을 적용해야합니다 그래서 ConstraintSet, 아이디어는 간단합니다

우리가 모든 제약 조건들을 모으고, 그 객체에 ConstraintSet 객체를 넣습니다 따라서 제약 조건 집합을 만들 수 있습니다 레이아웃의 모든 제약을 포함합니다 레이아웃 파일에서 생성 할 수 있습니다 라이브 뷰 계층 구조에서

그리고 그 일을 할 수 있다는 사실 사실, 정말 강력합니다 왜냐하면 그리고 당신에게 간단한 예를 보여주기 때문에, 하나의 제약 조건 집합 만 토글 할 수 있습니다

또 하나 따라서 런타임에 UI를 조정하는 것은 매우 쉽습니다 레이아웃을 지정하고 만들 수 있습니다 레이아웃 편집기의 편의성을 그래픽으로 제공합니다 그리고 프로그램에서 런타임에, 당신은 원하는 레이아웃을 결정할 수 있습니다

이것은 매우 강력한 개념입니다 우리는 그걸로 돌아올거야 그리고 마침내, 오늘 우리는 11, 베타 1을 발표했습니다 Maven에서도 사용할 수 있습니다

워크 플로에 쉽게 통합 할 수 있어야합니다 11에서 우리는 무엇을 추가 했습니까? 우리는 첫째, 장벽의 개념을 추가했습니다 그리고 장벽은 어떤 의미에서 말하자면, 위젯 세트를 가지고, 가장자리의 최대 값 또는 최소값을 취합니다 그리고 그것은 당신이 많은 UI를 만들 수있게 해줍니다

이전에는 ConstraintLayout 10으로, 할 까봐 까다 롭다 우리는 또 다른 [? 하이퍼 클래스?] 그것은 그룹이라고 불리는데, 현재로서는 상대적으로 제한되어 있습니다 그러나 우리는 그것을 향상시키는 방법에 대한 아이디어를 가지고 있습니다 그러나 개념은 기본적으로, 당신은 해당 그룹에 저장되는 위젯 세트를 가질 수 있으며, 예를 들어 그룹의 가시성을 설정할 수 있습니다

그래서 너는 더 이상 자신을 유지할 필요가 없다 위젯 목록 만 토글 할 수 있습니다 한 번에 그들의 가시성 XML로 지정할 수 있습니다 그룹의 모든 가시성 상태 기본적으로 그룹의 요소에 적용됩니다

새로운 개념 인 자리 표시 자 개념도 있습니다 나중에 더 자세히 설명하겠습니다 하지만 네가 좋아할 것 같아 마지막으로 몇 가지 조작을 추가했습니다 우리는 제약과 차원을 다루는 방식으로 그래서 너비가 너비 인 뷰를 만들고 싶다면 화면의 30 %는 할 수 있습니다

그러나 지침과 조금 복잡했습니다 왜냐하면 가이드 라인은 퍼센트 포지셔닝을 허용하지 않기 때문입니다 하지만 이제는 위젯에서 직접 간단하게 할 수 있습니다 이제 우리는 조금 새로운 기능을 다루겠습니다 Android Studio 자체 JOHN HOFORD : 네

근본적으로, 당신에게 친절을 베풀기 위해서 안드로이드 스튜디오 내부의 자세한 내용은 우리는 일련의 도구를 가지고 있습니다 그들 중 일부는 나중에 조금 더 이야기 할 것입니다 그러나 우리는 정렬 형 도구 인 일련의 도구를 가지고 있습니다 및 정렬 형 도구

그리고 지침을 추가 할 물건이 있습니다 그리고 우리는 그것들에 관해 더 많이 볼 것입니다 오른쪽 클릭 메뉴도 있습니다 실제로는 – 그들 중 많은 도구가 있습니다 자, 도구로 할 수있는 일의 작은 예가 있습니다

그래서이 특별한 예에서는 체인을 만들고, 나는 그 (것)들의 모두를 중심에두고, 그 후에 추론을 사용하여 자동으로 연결합니다 그래서 세 번의 클릭으로, 나는 본질적으로 최상위 레이어를 만들었습니다 형세 자, 우리가 많은 일을 한 다른 것들 중 하나 에 경감이 있습니다 당신이 내가보고있는 작은 작은 것들

그들은 광선을 자동으로 던지고, 인접한 표면에 따라서 연결을 만드는 빠르고 편리한 방법입니다 실제로 작은 선을 드래그하지 않아도됩니다 정말 많은 연결 속도를 높일 수 있습니다 그리고 나서 다른 모든 기능들과 함께 놀고 있습니다

경감 나는 편견을 바꿀 수있다 나는 가서 다시 연결을 끊을 수있다 둘 다 함께 일합니다 그래서 저는 그것을 다시 되돌려 놓습니다

그리고 루프는 처음부터 다시 시작됩니다 추론 – 당신은 저에게 추측의 조금을 보았습니다 전에 본질적으로 확률 모델을 기반으로합니다 우리는 무엇이 가장 가능성있는 일인지 추정하려고 노력한다

에 연결하고 싶습니다 그들이 서로 위에 늘어선다면, 그렇게 정렬 될 가능성이 큽니다 그것이 센터에 직접있는 경우, 작은 아이콘으로, 그것은 그것을 연결하기를 원할 것입니다 그것에 대한 멋진 점 중 하나는 당신은 내가 연결할 수 있다는 것을 알게 될 것입니다 그리고 나서 추측을 사용하여 마무리하고 UI를 본질적으로 완성하십시오

그래서 내가 많이 걱정하는 것들, 나는 손으로 할 수 있습니다 추론은 현재 생성하지 않습니다 체인 또는 우리가 이야기하는 새로운 위젯 중 일부를 포함합니다 새로운 디자인으로는 제대로 작동하지 않습니다 풍모

그러나 이러한 기능이 안정화됨에 따라, 추론 엔진에 넣을 것입니다 여기 예제가 있습니다 그것은 추론했다 그리고 당신이 볼 수 있듯이, 그것이 중심에 놓여 있음을 발견했습니다, 그것을 거기에 붙였다 랩 내용과 일부 내용이 변경됩니다

DP를 제로로 만드는 것 그것은 단지 그것을 고치려고합니다 기억할 다른 것들 중 하나 여기 미인이 아니에요 그것은 당신을 위해 일을 정렬하고, 준비하지 않을 것입니다 물건을 넣는 곳을 정확하게 유지하기 위해 열심히 노력합니다

그래서 사람들이 어색해하는 몇 가지 사례를 보았습니다 UI에 상황을 넣은 다음 추론을합니다 조직화되어 있지 않기 때문에 나쁜 결과를 낳습니다 그래서 생각할 때 그렇게하는 것을 잊지 마십시오 우리가 좋아하는 것들 중 하나는 경감입니다

너는 내가 그것을 사용하는 것을 보았다 얻을 수있는 또 다른 모드가 있습니다 당신이 정상에서 작은 화살을 쳤다면, 이것은 모든 제약 조건입니다 그것은 매우 솔직하게 사용하는 고통입니다 그래서 우리는 무언가를 연구 해왔다

조금만 더 쉽게 시도하고 당신은 그것을 사용할 것이고, 당신은 그것과 상호 작용할 것입니다 그리고 우리는 그것을 – 내부적으로 슬라이스라고 부릅니다 레이아웃이있을 때마다 상상해보십시오 너는 실제로 ~ 레이아웃과 관련하여 치수, 문자열 파일, 몇 개의 파일이 있습니다 그리고 함께 작업하려는 정보 이 모든 다른 파일에 매핑됩니다

그래서이 게임을 둘러싼 이런 호핑이됩니다 너는 알아 내려고 노력 중이야, 오, 나는 가서 조정해야 해 여기 치수 나는이 파일에 문자열을 설정해야한다 그리고 나는

나는 쉽고 간단한 탐색을 할 수 없다 레이아웃에서 선택된 객체를 가져올 수 있다면, 퍼센트, 사용하는 치수, 사용하는 스트링, 그리고 그것이 말하는 다른 모든 것들, 우리는 그들을 하나의 사용자 인터페이스로 결합합니다 오른쪽에 나타납니다

그리고 우리는 XML 파일과 비슷한 모양을했습니다 XML에 익숙하다면 XML의 기능을 이해할 수 있습니다 그리고 그것이 어떻게 작동하는지 당신은오고있는 파일을 볼 수 있습니다 다른 모든 매개 변수에서

예를 들어 드로어 블은 나 그림이다 값은 몇 가지 숫자입니다 사실, 편집을 할 수 있으며 심지어 해당 사용자 인터페이스에서 직접 새 요소를 작성하십시오 따라서 디자이너 내에서 신속하고 신속하게 작업 할 수 있으며, 다른 모든 작은 일들을해라 일반적으로하고 싶습니다

NICOLAS ROARD : 그래서 도구에 대해 조금 이야기하고 싶습니다 속성 이 모든 것을 보여주는 아이디어 물론 모든 레이아웃을 사용할 수도 있습니다 XML로, 맞죠? 내 말은, 그들은 보통의 Android 레이아웃입니다 이전 레이아웃을 사용할 수 있으며 ConstraintLayout을 사용할 수 있습니다

모든 것이 XML에서 완벽하게 사용 가능합니다 하지만 그 아이디어는 우리가 강하게 원하는 것입니다 그게 디자이너와 함께, 우리는 정말로 당신의 인생을 더 쉽게 만들 수있는 좋은 기회를 얻었습니다 나는 당신이 그 도구들 중 일부를 볼 수 있다고 생각합니다 우리가 제시 한 XML에서 같은 일을 한 줄씩 분명히 할 수 있지만, 이러한 도구를 사용하면 훨씬 빠릅니다 따라서 도구의 특성은 이미 알고있는 것일 수 있습니다 권리? 일반적인 문제는 우리가 에디터에서 뭔가를 가지고 있지 않다

코드를 직접 실행하십시오 레이아웃에서 우리가 보여줄 때가 있습니다 편집자가 정확히 같은 사람이되지는 않습니다 당신은 당신의 장치에 있습니다 그래서, 예를 들어, 그것의 일부 귀하의 프로그램에 의해 결정됩니다

런타임에 완료되는 것들입니다 따라서 우리는 도구가 당신은 행동 만 지정할 수 있습니다 레이아웃 편집기에 적용됩니다 그래서 그 속성들은 가지 않습니다 신청서를 게시 할 때, 언제 그것을 장치에 밀어 넣습니다

그들은 단지 껍질을 벗겨 낸다 그러나 디자이너는 꽤 많은 유연성을 허용합니다 어떻게 당신이 물건을 렌더링하고 싶어하는지 예를 들어 showIn은 꽤 유용합니다 재활용 된보기에서 항목을 설정하는 Listitem, 그런 것들

이것은 단지 일반적인 문제 일뿐입니다 맞습니다 우리가 정말로하지 않을 때 어떻게 레이아웃을 보여주고 싶습니까? 코드를 실행하고 싶습니까? 그리고 재활용보기를 드래그하려고하면 이러한 모든보기, 레이아웃 편집기에서, 그것은 아마 당신이 본 것입니다 우리는 자동으로 기본 어댑터를 생성하기 때문에 꽤 제한적입니다 그리고 기본적으로, 그것은 당신이 보는 것입니다

아마도 응용 프로그램이 어떻게 보이는지는 아닙니다 그래서 당신이 어떤 내용을 가지고 있다면 – 행을 만들었다 고 가정 해 봅시다 – 당신은 그것을 지정할 수 있습니다 복제되는 것을 볼 수 있습니다 응용 프로그램이 무엇인지 명확하게 나타내지는 않지만 좋아 보이시겠습니까? 물론, 당신은 다른 데이터를 가지게 될 것입니다 이것이 바로 우리의 샘플 데이터가 들어오는 곳입니다

새로운 속성을 지정할 수 있습니다 이것은 30에서 사용할 수 있습니다 기본적으로 사전 예고가 이루어집니다 속성 (예 : 이름 또는 전화 번호)

그리고 그걸 참조 할 수있을거야 다른 속성 대신 그리고 그것은 디자이너에서 복제 될 것입니다 매우 빠르게 볼 수있는 방법이라고 생각하십시오 귀하의 레이아웃이 어떻게 보이지 않는지 보일 것입니다

무엇이든 프로그램 할 수 있습니다 우리는 실제로 그 이상을 수행합니다 프로젝트에 새 샘플 데이터 폴더가 있습니다 당신이 만들 수있을 겁니다 색상과 같은 것을 지정할 수 있습니다

그것은 사소한 일입니다 텍스트 파일을 만들고, 각 줄에 색상을 넣고, 그리고 그게 다야 당신이 그 요소를 참조 할 때마다, 우리는 다음 색상을 가져올 것이고 우리는 단지 반복 할 것입니다 그래서 당신은 아주 빨리 그것을 얻을 수 있습니다 또한 샘플 데이터 기능이 더 많습니다

Lorem Ipsum, 특정 형식의 날짜, 그림 물감 전체 JSON 파일을 지정할 수도 있습니다 더 많은 구조화 된 데이터를 사용하려는 경우 그래서 우리는 구워진 데이터 유형을 얻었습니다 죄송합니다, 리모콘 구워진 데이터 유형 내가 말했듯이 JSON 파일은 더 많은 구조를 원한다

그리고 샘플 폴더에 리소스가 있다면, 당신은 그것을 참조 할 수 있고, 우리는 그것들을 선택할 것입니다 그래서 당신이 이미지 모음을 원한다면, 예를 들어, 폴더에 넣으면, 그 폴더를 참조하면 다음 폴더를 선택합니다 그리고 좀 더 고급 예제를 살펴 보겠습니다 ConstraintLayouts에 그래서 당신은 당신의 연습에서 그런 프로그램을 보았을 것입니다

내 버튼 왼쪽에 텍스트가 있습니다 그 텍스트가 성장하기를 원하지만 더 이상 버튼이 허용하는 것보다 그리고 나는 모든 것을 왼쪽으로 중심에두기를 원합니다 그래서 당신이 ConstraintLayouts에서 그것을하는 방법 – 그리고 그것은 약간 – 조금 까다 롭지 만 근본적으로 우리는 체인을 만들고, 텍스트를 크기 조정 가능하게 만들고, 제약 조건이 자동으로 적용됩니다 그래서 더 이상 가지 않을 것입니다 그리고 이것은 단지 간단한 예입니다

어떻게 사슬을 사용할 수 있는지 그것은 단지 오, 나는 위젯을 분산시키고 싶지 않다 훨씬 더 복잡하고 강력한 조합을 할 수 있습니다 따라서 사라진 행동에 대한 또 다른 예가 있습니다 그래서 기본적으로 사라질 위젯을 설정할 때, 우리는 그것을 하나의 지점으로 해결합니다

그래서이 경우 내 중앙 버튼 기본적으로 단일 지점으로 축소됩니다 그리고 그 행동은 나에게 잘 보입니다 그게 아마 내가 원하는거야 때로는 같은 방식으로 작동하지 않을 수도 있습니다 첫 번째 요소에서 그렇게하면 모든 것이 무너집니다

다시 0으로, 마진은 포함 된 다음 나머지 버튼은 움직이고 있습니다 그래서 우리는 또 다른 속성을 갖습니다 연결하려는 객체가 사라지면 지정할 수 있습니다 이 경우 마진에 해당 값을 사용합니다 두 번째 단추, 원래 여백 0의 상단에, 그리고 지금은 32의 마진을 가지고, 첫 번째 요소가 사라짐으로 표시된 경우에만 자리 표시 자에 대해 조금 이야기 해 보겠습니다

이것은 ConstraintLayout 11에 새로 추가 된 것입니다 JOHN HOFORD : 예, 11에 새로운 내용입니다 본질적으로 가상 뷰를 만들 수 있습니다

제약 조건 내의 다른 뷰에 내용을 설정합니다 형세 따라서이 간단한 예에서는 어느 것이 든 당신을 움켜 쥐고 있습니다 클릭 한 상태, 클릭 한 상태의보기, 화면 상단까지 뒤틀려 있습니다 텍스트를 보면 약간 이상하게 보일 수 있습니다

니가 코 틀린에 익숙하지 않다면 내일 Kotlin을 확인하십시오 이것이 Kotlin 파일 내부의 코드 길이입니다 오른쪽에 보이는 애니메이션 왼쪽에있는 코드에서 완전히 생성됩니다 XML 파일에서 사용되는 것은 없습니다

보시다시피 무작위로 전환됩니다 그러나 실제로 당신이 자리 표시 자, 위젯을 이동할 수있는 장소, 같이 보일지도 몰라, 좋아, 그 외에 뭘 할 수있어? 글쎄, 내가 자리 표시 자 기반 UI를 디자인한다면 본질적으로 내가 정의한 병합 태그 ConstraintLayout에서는 부모를 사용해야합니다 태그를 사용하는 동안 UI를보고 싶다면 본질적으로 고정 된 레이아웃을 제공합니다 다른 파일에서 사용하십시오 따라서이 경우에는 하나의 자리 표시자를 사용하기로 결정했습니다

내 최고 이미지, 큰 이미지가 될 것입니다 내 액션 버튼이 될 두 번째 자리 표시 자입니다 하지만 실제로 두 번째 자리 표시자를 만들 수 있습니다 이제 가로 모드로 사용합니다 그리고이 하나, 나는 그것을 약간 다르게 배열했다

약간 다른 제약 조건 세트를 사용합니다 이제 기본 레이아웃에서 두 UI를 선언합니다 요소를 포함하고 템플릿을 포함합니다 기본적으로 템플릿을 생성합니다 레이아웃을 어떻게 결정할 지 결정합니다

사실,이 템플릿 중 두 가지가 있기 때문에 다른 것들에, 내가 화면을 회전하면, 실제로 다른 템플릿을 사용하게됩니다 이제 나는 내 견해를 정리하고 분리 할 수있다 그것으로부터 레이아웃 그러나 나는 실제로 그 이상을 할 수 있습니다 이 구조로 할 수있는 일 중 하나 두 번째 이미지 버튼 대신에, 전체 포함을 결정할 수 있습니다

그 안에 다른 파일이 있습니까? 그래서이 특별한 경우에 저는 – 왜 이런 특별한 경우에, 나는 다른 배치의 낱단을 가진 전체 포함이있다 집단 그리고 실제로 그 공간에 휘몰아 치고 있습니다 그래서 그것은 ConstraintLayout 내의 ConstraintLayout입니다 그래서 그 맥락에서 중첩됩니다 그러나 이것은 매우 간단하고 거의 바보 같은 예입니다

그러나 당신은 당신이 어디에서 결정했는지 상상할 수 있습니다 어떻게하면 위와 아래를 원하니? 그리고 왼쪽과 오른쪽, 그리고 행동, 레이아웃하고 템플릿으로 디자인하십시오 그리고 나서, 당신이 당신의 주요 재료를 생산할 준비가되면, 당신은 단지 완전히 별개의 파일로 가서 그것을합니다 디자이너가 템플릿을 디자인하도록 도울 수 있습니다 그런 것들

우리가 ConstraintSet으로하고 싶었던 것들 중 하나 – 제한 집합을 사용하는 방법에 대해 조금 이야기하겠습니다 뷰를 완전히 분리 할 수 ​​있습니다 당신이 레이아웃을하는 방법부터 근본적으로, 일을하는 또 다른 방법입니다 전체 레이아웃을 캡슐화하는 것입니다

별도의 ConstraintSet으로 설정 한 다음 레이아웃에 적용합니다 그래서 당신은 궁금해 할 것입니다 그걸로하고 싶니? 글쎄, 너는 사용할 수있어 너는 둘 사이를 바꿀 수있어 ConstraintSets on the fly

조회수가 다시로드되지 않습니다 그것은 레이아웃을 전환하는 것과는 다릅니다 실제로 위젯을 옮기는 것입니다 다른 제약 조건 세트를 적용하여 따라서이 예에서는 두 개의 ConstraintSets을 만듭니다 레이아웃 파일에서 ConstraintSet을 가져옵니다

setContentView를 사용하여 다른 레이아웃을 화면에 표시했습니다 그런 다음 실제로 그 하나를 얻고 ConstraintSet을 가져옵니다 이 ConstraintSet도 있습니다 이제 두 ConstraintSets 사이를 전환하려면 모두 나는 ConstraintSet을 호출해야만한다 ConstraintLayout에 적용합니다

그리고 그것은 내가 전환하도록 허락 할 것입니다 그래서 나는 그렇게 영리한 애니메이션을 많이 만들 수 있습니다 그래서 간단한 예가 있습니다, 대화가 있다면 – 이것은 일반적인 ConstraintSet입니다 내 사진이 그려져 있고 가로로 또 다른 사진을 찍을 수 있습니다 이제 두 개의 별도 레이아웃을 만드는 대신 회전시킬 때 팽창시켜 당신은 자신을 회전시킬 수 있습니다

ConstraintSet 스위치를 직접 수행 할 수 있습니다 그리고 그런 식으로, 당신은 회전하는 동안 훨씬 덜 진행됩니다 그래서 많은 양을 돌리는 것을 좋아하는 앱을 가지고 있다면, 당신은 그렇게 할 수 있고, 약간의 속도를 줄일 수 있습니다 니콜라스 로어 : 음, 다른 건 ConstraintSet을 염두에 두는 것이 중요합니다 이 회전 예제는 흥미 롭습니다

물론 안드로이드에서 정상적인 시스템을 사용할 수 있습니다 런타임시 자원이로드되도록하십시오 ConstraintSet을 사용하면 실제로 ConstraintSet을 작성할 때 완전히 제어 할 수 있습니다 모바일에서 종종 그렇게 많이 시도하는 것은 아닙니다 당신이해야 할 일을하지 않기 위해서, 당신이 그것을해야하기 때문에

때로는 작업 비용이 많이 듭니다 당신은 여전히 ​​그것을해야합니다 적절한시기를 찾는 것이 더 중요합니다 그것을하기 위해 그리고 저에게 그것은 ConstraintSet이 허락하는 것입니다

당신은 기본적으로 모든 제약 조건을 미리 구울 수 있습니다 전에 그들을 적재하십시오, 그래서 당신은하지 않습니다 말장난 등을 일으켜야한다 갑자기 당신이 당겨야하기 때문에 전체 리소스 집합 그래서 ConstraintSet은 매우 유용합니다

우리가 일반적으로 모션을하고 싶을 때 ConstraintLayout의 장점 중 하나 평면 계층을 유지하려고하는 데 중점을 둡니다 클리핑 문제가 없다는 것입니다 당신은 씬 그래프로 생각할 수 있습니다 그 너는 모든 다른 물건들을 가지고있다

너는 화면에 보여주고 싶다 귀하의 버튼, 귀하의 이미지 등등 ConstraintSet에 대해 생각할 수 있습니다 어떤면에서는 키 프레임처럼 그리고 당신이 그렇게한다면, 기억한다면 방금 본 슬라이드, 한 줄을 추가하면됩니다 그리고 그게 다야

그리고 그것은 단순히 Android 전환 프레임 워크를 사용하는 것입니다 또한 [? industrylib ?] 그러면 자동으로 애니메이션이 적용됩니다 모든 유형의 레이아웃이 변경됩니다

그것은 개인적인 관점에서도 적용될 것입니다, 그렇죠? 그래서 그 예에서 저는 – 죄송합니다 리모콘은 만족스럽지 않습니다 이 예에서는 레이아웃이 있습니다 그것은 일반적인 ConstraintLayout으로 설정됩니다 매개 변수를 변경할 수는 없습니다

개별보기의 레이아웃이 그에 따라 자동으로 크기가 조정됩니다 내가 설정 한 제약 조건에 그러면 TransitionManager가 그 모든 것을 애니메이션으로 나타냅니다 그래서 여러분은 아주 복잡한 행동을 할 수 있습니다 아주 쉽게 그리고 코드 자체는 정말 사소합니다

너는 그 이상으로 많은 것을 할 수있다 그리고 그것은 또 다른 예입니다 화면의 한 상태를 만들 수 있습니다 하나의 레이아웃에서, 변화 – 기본적으로 두 번째 상태를 만들고로드합니다 ConstraintSet에서

런타임에 적용하고 전환 프레임 워크 나머지는 그냥 할거야 정말 멋진 점은 당신이 그래픽으로 그렇게한다는 것입니다 얼마나 많은 일을해야하는지 알아 내려고하지 않아도됩니다 차원이 뭐지? 아니요, 화면에 즉시 결과가 표시됩니다 장치를 왕복하지 않아도됩니다

그리고 그것은 순전히 ConstraintLayout에있었습니다 그러나 ConstraintLayout을 사용할 수도 있습니다 기존 프레임 워크를 활용함으로써, 그리고 프레임 워크의 기존 위젯들 그래서 여기, 이것은 단지 [? 새로운 전망?] 그리기 레이아웃에 사용 된 것 중 하나입니다 하지만 여기에서 단순히 ConstraintLayout으로 재사용 할 수 있습니다

그래서 여기, 이것은 간단한 서브 클래스입니다 좋은 점은 알다시피, 나는 격려한다

당신은 링크에서 그것에 대해 생각할 것입니다 자리 표시 자 개념에 기본적으로 일련의 일반적인 규칙을 정의 할 수 있습니다 UI가 어떻게 작동하는지 그래서 ConstraintLayout은 뭔가가됩니다 간단히 말해서 버튼을 배치하고 싶습니다

어떻게 서로 상호 작용하는지에 대한 정보를 제공합니다 오히려 전체 UI가 돌아 다니기에 더 가까워 질 수 있습니다 물론 사용자 정의 위젯을 사용하여 적용 할 수 있습니다 네가 원한다면 그것은 간단합니다

여기 전체 ConstraintSet 슬래시의 또 다른 예가 있습니다 전환 애니메이션 그래서 이전 예제와 같이 두 가지 상태를 정의했습니다 그림자가 적용된 것을 보면 높이가 바뀝니다 그리고 모든 것은 그래픽으로 이루어집니다

이 애니메이션의 유일한 문제점 그것은 좀 오래 부끄럽다 내 말은, 특별한 일은하지 않는다는거야 움직임이 없습니다 하지만 우리는 그 이상을 할 수 있습니다 또한 사용자 정의 전환을 사용하면 원하는 것을 정의하십시오

최근에는 물리학 라이브러리가 출시되었습니다 자신 만의 사용자 지정 전환을 쉽게 만들 수 있습니다 그들을 시스템에 연결하고 원하는대로하십시오 이 특정 UI를 복제하는 것이 좋습니다 이것은 테스트 예입니다

그러나 당신에게 유연성의 유형을주는 것 이 방법이 당신에게 줄 수 있습니다 그리고 그 메모에, 우리는 끝난 것 같아요 Q & A에는 몇 분이 걸립니다 그리고 제발 파일 버그, 기능 요청 당신은 우리에게 꽤 쉽게 연락 할 수 있습니다

ConstraintLayout의 문서 온라인으로도 이용할 수 있습니다 그리고 제가 말씀 드렸듯이 우리는 방금 11을 발표했습니다 시도해주세요 [음악 재생]

Calendar Ui design Photochop CC (Speed Art) | تصميم تقويم بالفوتوشوپ

안녕! 나는이 튜토리얼에서 herowindows를 사용하여 Ui design을 사용하는 방법을 보여줄 것이다 어도비 포토샵, 당신이 날 원한다면 캘린더를 디자인 해주세요

그냥 클릭하십시오 좋아하고 구독 해보자