2. Pixel과 Screen Density
장비 마다 일정 길이 안에 들어가는 pixel 수가 다릅니다.
이것을 이른 바 screen density가 다르다라고 합니다.
그래서 화면에 따라서 특정 pixel로 길이 단위를 주면 아래와 같은 현상이 발생
참고: http://developer.android.com/guide/practices/screens_support.html
즉, 우리는 screen density와 무관하게 화면에 일정 길이를 그리고 싶습니다.
그래서 android가 제공하는 단위가 dp입니다.
px = dp * (dpi / 160) : 160 dpi 장비에서는 1dp는 1pixel 크기입니다.
3. DPI & DP
DPI는 dot per inch로 장비의 screen density를 표현하는 기준.
이 DPI 값을 구분 지어서 아래와 같이 장비를 구분을 짓습니다.
앞선 공식으로 다시 돌아가서, px = dp * (dpi / 160)
만약, 내가 맞출 려 하는 장비가 240 dpi이고,
디자인 가이드가 해당 장비에서 40px이라고 하면, 지정할 dp는?
dp = 40 / (240/160) = 26.66 dp
Mdpi 장비용으로 pixel 데이터 받으면 계산 안 해도 되는데, mdpi 장비가
요즘에는 찾기가 힘들다는 … -_-;;
4. Dp를 사용해서 표현
지금까지 알아본 DP를 계산해서 사이즈를 표현하면,
아래와 같이 각기 다른 화면밀도를 가진 장비에서도 정상적으로 동일 크기 표시.
지금까지 이야기는 동일 길이에
대한 이야기였습니다.
그러나, density가 다르면,
동일 길이 이미지를 쓰면 ~
더 작아지겠죠.
그래서 옆 그림과 같이
각 density별 이미지를 준비
해야 합니다.
5. DPI 따른 이미지 준비해서 넣기
대상 Device 별로 필요한 이미지는
우리의 멋진 디자이너님들에게 요청해서 받습니다.
그리고는 받은 이미지는 안드로이드가
DPI 따라서 적합한 것을 찾을 수 있도록
우측 그림에 나오는 것과 같이
각 dpi 별 폴더에 위치를 시키도록 합니다.
만약 dpi와 관계없이 길이 유지 시킬려는
경우에는 옆 그림에는 없지만, -nodpi로
폴더 만들어서 저장하면 됩니다.
이로서 screen density와 무관하게 화면에
나타내는 방법을 알아보았습니다.
6. DPI 와 화면 크기는 다른 이야기
DPI가 동일하더라도 화면의 크기는 다른 이야기입니다.
예를 들어서 갤러시 노트와 갤럭시 S3는 동일급의 DPI이지만
다른 길이를 가지게 됩니다.
갤럭시 노트갤럭시 S3
동일하게 420 dp를 지정한 경우
7. 화면 크기에 따라서 Layout을~
레이아웃 관련해서는 절대적 수치 대신 상대적인 레이아웃을 사용합니다.
• LinearLayout
• RelativeLayout
• fill_parent
• wrap_content
• match_parent
• …
+ 늘어 날 공간
고정 크기 공간 선정
결론은 화면이 늘어날 때, 동작을 생각하고 관련해서 적정 위치를
상대적 레이아웃을 통해서 잡아주도록 하는 방법을 모색하면 됩니다.
간단한 예는 다음 장에~
만약 수치를 하드코딩하고 있는 순간. 다시 한 번 생각을!!
8. LinearLayout에서 Weight를 활용
Text 1 Text 2
화면 넓이와 관계 없이 버튼 2개로
균등한 폭을 차지 하게 만들고 싶을 때.
절대 특정 폭을 지정 하지 않고!!
1. LinearLayout 을 사용 (상대적 배치)
2. Layout_weight 를 사용해서 비율을 조정
10. RelativeLayout 응용 사례
확장 영역: height를 match_parent로 선언
dp 값으로 height 고정
RelativeLayout을 사용해서 순차적으로
쌓아나갈 때, 중간에 있는 항목이 match_parent를
사용하게 되면, 해당 내용이 한다 영역(영역 A)를
덮어버리는 증상이 발생.
이러한 경우이 영역 A가 고정폭인 경우에
해당 높이 만큼을 margin 값을 주어서 대처
영역 A.
이게 답은 아니지만, 이렇게 해서 화면 크기에
대처했다는 사례 공유 입니다.
11. 최종 가이드
1. 화면을 받아서, 화면이 늘어날 때 늘어날 부분과 고정된 부분 판단.
2. 고정될 부분에 대해서, dp 단위로 수치를 계산
(mdpi 기준으로 작업 진행하면 pixel 단위로 dp 별도 계산 없음)
3. 화면을 구분해서 전체 Layout 형태를 구상
4. 세세한 부분에 대해서는 상상력을 활용해서 Layout 조합
5. 실 기기에서 테스트 하면서 미진한 부분 보강 및 완료
6. 디자인 팀에서 각 dpi에 해당하는 필요 이미지 받아서 배포!!
