Awesome Android Design

GDG Sydney에서 발표한 Awesome Android Design 주제에 대한 정리입니다. 

브랜드와 정말 중요로 하는 컨텐츠에 대해서는 컬러를 통일감 있게 사용해라. 다양한 색상으로 사용자의 집중도를 떨어 뜨리지 말고 정말로 핵심적인 요소에만 컬러를 주어 강조하는게 좋을듯 하다. 

Normal과 Pressed 버튼에 대해 너무 대조적인 색상은 표현을 피하라. 허니컴버전으로 오면서 이렇게 쓰라고 해놓고 이제와서는 쓰지 말란다. 너무 과도한 반전색상보다 어느정도 눌렸다는 것만 인지 할 수준으로 만들어도 괜찮을 듯 하다.

각각의 View들의 Hold 스타일에 맞는 리소스만들기가 디자이너입장에서는 좀 귀찮아 할 수 있는데, android-holo-colors.com에 접속해서 Color값을 입력하면 관련 리소스이미지는 물론 Style도 만들어 준다. 

actionbarstylegenerator.com에 접속 하면 ActionBar의 Style도 만들어 준다. 액션바, 팝업컬러등 정보를 넣으면 자동으로 Style을 만들어 주기 때문에 유용하다.  

Holo Style은 허니컴(안드로이드 3.0) API 11이상부터 지원한다. 그렇기 때문에 하위버전은 AppCompat를 이용해서 Style을 구성해야 하며, res/values를 통해 API버전별로 테마를 나누어 사용해야 한다. 

안드로이드의 내부에 정의된 스타일 리소스를 사용 할 수도있다. ?adnroid:attr/로 접근 할 수 있다. 하지만 제조사마다 커스텀할 수 있기 때문에 모든 폰에서 100%똑같은 디자인이 나오지는 않는다. 만약 모든폰에서 똑같은 디자인과 색상을 원한다면 안드로이드 내부 리소스를 쓰기보다 커스텀해서 만들어 쓰길 권한다.

Header Section의 스타일도 정의 되어 있있다.  

텍스트 Appearance도 정의 되어 있다. Medium같은 경우 18sp로 정의되어 있으며, ImageView를 쓸때 borderlessButtonStyle을 적용 해주면 Pressed이미지가 버튼처럼 된다. 이것은 Holo스타일에 맞지 않게 잘못 사용하고 있다. 

좀 더 Holo스타일처럼 바꾸기위해 LinearLayout의 divider를 통해 dividerHorizontal스타일을 주어 사용해야한다. 

버튼도 Holo Style에 맞는 DrawableState를 스타일로 제공하고 있다. 

기본적으로 제공하는 스타일을 Holo 스타일에 맞게 잘 사용하면 좋겠다. 위의 이미지 처럼 어떤 레이아웃에 어떻게 배치하느냐에 따라 차이를 보이게 된다. 왼쪽보다 오른쪽이 깔끔하고, 보기도 좋다, 

액션바에 로딩 인디케이터을 띄우기 위해서는 setProgressBarIndenerminateVisisility()를 사용하면된다. 

style을 통해 커스텀 할 수도있다. 

액션바가 오버레이 모드일 경우 맵의 아이콘이 액션바에 가려 질 수있다. 그래서 액션바의 높이를 알 필요가 있다. 

이런식으로 액션바의 높이를 구해서 구글맵의 패딩을 줌으로써 버튼이 액션바에 가려지지 않게 된다. 

다양한 기기들의 지원

폰전용으로 만든앱은 테블릿에서 사용하면 당연히 사용성은 떨어진다. 화면은 크지만 콘텐츠들의 배치가 폰전용 이기때문에 화면의 낭비가 많아진다. 

폰에서는 화면을 새롭게 교체하는 방식을 사용하고, 테블릿에서는 여러개의 화면을 분할 해서 한쪽에서만 화면을 교체하는 방식으로 화면을 넓게 사용할 수 있다. 

이렇게 폰과 테블릿의 레이아웃을 분기 해야 하는데, 리소스 layout을 통해 분기할 수 있다. 

조각된 화면을 그대로 유지 하고, 전체적인 화면을 구성하는 레이아웃만 분기하면된다. 

activity가 전체적인 화면이고 fragment가 조각된 화면들이다. 테블릿의 경우 sw720dp(small width 720dp)즉 최소 가로가 720dp이면 layout-sw720dp라는 디렉토리의 레아웃이 읽히고, 폰의 경우는 layout의 디렉토리의 레이아웃이 읽히게 된다. 

폰의 경우에는 fragment를 하나씩 쌓는 방식이고, 테블릿의 경우는 2개의 화면을 펼쳐지게 레이아웃을 구성을 해두었다. 그렇기 때문에 위와 같이 화면들을 구성 할 수있다. 

SlidingPaneLayout을 사용해서 테블릿의 activity레이아웃을 구성하면 된다.  가로/세로 모드를 쉽게 관리 할 수있다. 가로일때는 펼쳐져 보이겠고, 세로모드일때는 왼쪽 슬라이드를 통해 화면이 보이는 구조가 된다. 

세로모드일 경우 left pane은 뒤로 숨겨지게되고 right pane은 화면이 꽉차게 된다. 그래서 left pane은 보이지 않게 되지만, 슬라이드를 통해 위로 나타나게 된다. 

레이아웃변형과 조각되는 화면들로 구성하기 힘들다면 이렇게 리스트뷰와 그리드뷰로 화면을 구성하는 방법도 있다. 폰일때는 가로로 1개씩 아이템을 배치한다면 테블릿일때는 가로로 2개씩 아이템을 배치함으로써 큰화면에 많은 콘텐츠를 보여 줄 수있다.  

ListView의 Adapter의 getView()에서 화면의 크기때 따른 레이아웃을 배치 할 수 있다. 예를 들어 폰에서는 가로로 최적화되게 레이아웃을 구성했다면 테블릿일경우 이미지도 좀 더 크고 텍스트위치 세로로 배치하는등 작업을 해서 테블릿에 맞도록 레이아웃을 최적화 시키면된다. 

핀터레스트에서 처음으로 들고나온 리스트뷰이다. 기기에 최적화된 아이템의 가로 갯수로 화면을 구성하고 세로간의 아이템 간격이 비대칭이다. E-Trending이라는 앱을 만든 회사에서 AndroidStaggerGrid 뷰를 오픈소스로 공개했다.  

기기마다 다른 아이템의 레이아웃

테블릿에 맞도록 레이아웃뿐만 아니라 폰트의 크기등 다양한 단위를 dimens를 통해 정의 할 수 있다. 

MaxWidthLinerLayout을 이용하면 child의 크기에 따라 레이아웃 크기가 변경된다. 이 레이아웃을 통해서 나머지 공간에 대한 처리를 쉽게 할 수 있다. 

이미지가 많은 앱의경우 모든크기를 다 보여 주기가 힘든경우가 많다. 이럴 경우 특정영역만 보여이기위해 자를수 밖에 없는데, scaleType를 통해서 쉽게 잘려질지와 잘려진다면 영역은 어떻게 할지에 대해 지정 할 수 있다.  

다양한 기기지원을 위해서 레이아웃 분할을 통해 구현할 수 있으며, 레이아웃 뿐만아니라 drawable, color, dimensions등 다양하게 분할이 가능하다.