[3] 여러 기기 지원하기 [2] 여러 화면 지원하기

THIS LESSON TEACHES YOU TO

  1. Create Different Layouts
  2. Create Different Bitmaps

YOU SHOULD ALSO READ

Designing for Multiple Screens
Providing Resources
Iconography design guide

Android categorizes device screens using two general properties: size and density. You should expect that your app will be installed on devices with screens that range in both size and density. As such, you should include some alternative resources that optimize your app’s appearance for different screen sizes and densities.

2가지 속성으로 안드로이드 기기의 스크린은 나뉠 수 있습니다 : 사이즈, 밀도. 우리 앱은 사이즈와 밀도의 스크린에 설치됩니다. 소위, 우리는 대체가능한 리소스를 포함합니다. 이 것은 우리의 앱의 외형을 각기 다른 스크린의 사이즈와 밀도에서 최적화 합니다.

  • There are four generalized sizes: small, normal, large, xlarge
  • And four generalized densities: low (ldpi), medium (mdpi), high (hdpi), extra high (xhdpi)
  • 4가지 사이즈가 있습니다. small, normal, large, xlarge
  • 4가지 밀도가 있습니다. low (ldpi), medium (mdpi), high (hdpi), extra high (xhdpi)

To declare different layouts and bitmaps you’d like to use for different screens, you must place these alternative resources in separate directories, similar to how you do for different language strings.

다양한 스크린에 사용하고 싶은 다양한 레이아웃과 비트맵을 선언하기 위해서, 우리는 반드시 이러한 얼터너티브 리소스를 분리된 디렉토리에 만들어야 합니다. 이전 시간에 바운 [다양한 언어 스트링 지원] 과 비슷하지요.

Also be aware that the screens orientation (landscape or portrait) is considered a variation of screen size, so many apps should revise the layout to optimize the user experience in each orientation.

또한 스크린 회전(landscape or portrait)가 스크린 사이즈의 변형으로써 고려되어야 하는 것을 알고 있어야 합니다. 그래서 많은 앱들은 각 방향에 UX를 최적화 하기 위해서 레이아웃을 변경해줘야 합니다.

다양한 레이아웃 생성하기 – Create Different Layouts


To optimize your user experience on different screen sizes, you should create a unique layout XML file for each screen size you want to support. Each layout should be saved into the appropriate resources directory, named with a -<screen_size> suffix. For example, a unique layout for large screens should be saved under res/layout-large/.

다양한 스크린 사이즈에서 UX를 최적화 하기 위해서, 지원하고 싶은 각각의 스크린 사이즈에 대해 각각 하나뿐인 레이아웃 XML파일을 생성해야 합니다. 각각의 레이아웃은 적절한 리소스 디렉토리 안에 저장되어야 하며 그 이름은 -<screen_size> 접미어를 사용합니다. 예를 들어, 큰 스크린을 위한 특정 레이아웃은 res/layout-large/ 에 저장되어야 합니다.

Note: Android automatically scales your layout in order to properly fit the screen. Thus, your layouts for different screen sizes don’t need to worry about the absolute size of UI elements but instead focus on the layout structure that affects the user experience (such as the size or position of important views relative to sibling views).

주의 : 안드로이드는 우리의 레이아웃을 스크린에 적절하게 맞추기 위해서 스케일을 자동적으로 수행합니다. 그러므로, 각기 다른 스크린 사이즈를 위한 우리의 레이아웃들은 UI 요소들의 절대적 사이즈에 걱정할 필요는 없으나 대신, 레이아웃 구조에 대해 초점을 맞춰야 합니다. 이 것은 UX에 영향을 끼칩니다. (주변 뷰에 비래 상대적으로 중요한 뷰들의 위치나 크기 같은 것들)

For example, this project includes a default layout and an alternative layout for large screens:

예를 들어, 이 프로젝트는 기본 레이아웃과 large 스크린을 위한 대체 레이아웃을 포함합니다.

MyProject/
    res/
        layout/
            main.xml
        layout-large/
            main.xml

The file names must be exactly the same, but their contents are different in order to provide an optimized UI for the corresponding screen size.

이 파일 이름은 정확하게 같지만, 스크린 사이즈에 상응하는 최적화된 UI를 제공하기 위해 안에 들어있는 내용은 다릅니다.

Simply reference the layout file in your app as usual:

앱에서 레이아웃 파일을 원래 하던 것 처럼간단하게 참조하세요:

@Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
}

The system loads the layout file from the appropriate layout directory based on screen size of the device on which your app is running. More information about how Android selects the appropriate resource is available in the Providing Resources guide.

시스템은 레이아웃 파일을 적절한 레이아웃 디렉토리로부터 불러롭니다. 이 것은 디바이스의 스크린 사이즈에 따라서 다른 파일을 불러 오지요. 좀 더 자세한 정보는 Providing Resources guide를 참고하세요.

As another example, here’s a project with an alternative layout for landscape orientation:

다른 예제로, 방향 전환을 위한 alternative layout을 갖고 있는 프로젝트가 있습니다.

MyProject/
    res/
        layout/
            main.xml
        layout-land/
            main.xml

By default, the layout/main.xml file is used for portrait orientation.

기본적으로 layout/main.xml 파일은 세로방향에 사용됩니다.

If you want to provide a special layout for landscape, including while on large screens, then you need to use both the large and land qualifier:

lnadscape를 위해 특별한 레이아웃을 제공하고 싶다면, large 와 land 에 해당하는 qualifier를 사용해야 합니다.

MyProject/
    res/
        layout/              # default (portrait)
            main.xml
        layout-land/         # landscape
            main.xml
        layout-large/        # large (portrait)
            main.xml
        layout-large-land/   # large landscape
            main.xml

Note: Android 3.2 and above supports an advanced method of defining screen sizes that allows you to specify resources for screen sizes based on the minimum width and height in terms of density-independent pixels. This lesson does not cover this new technique. For more information, read Designing for Multiple Screens.

주의 : 안드로이드 3.2 이상 버전에서, 스크린 사이즈를 정의하는 더욱 진보된 방법을 지원합니다.  우리가 리소스를 명시할 수 있게 하는데요, 최소 폭과 높이에 근거합니다.  밀도독립적 픽셀 면에서 말이지요. 이 클래스에서는 다루지는 않지만 좀 더 자세한 정보는 Designing for Multiple Screens를 읽어보세요.

다양한 비트맵 생성하기 – Create Different Bitmaps


You should always provide bitmap resources that are properly scaled to each of the generalized density buckets: low, medium, high and extra-high density. This helps you achieve good graphical quality and performance on all screen densities.

언제나 비트맵 리소스를 제공해야만 합니다. 그것들은 적절하게 스케일을 맞춰져야 합니다. 각각의 밀도 버킷에 맞게끔 말이지요 : low, medium, high 그리고 extra-high 밀도에. 모든 스크린 밀도에서 좋은 그래픽 품질과 퍼포먼스를 가질 수 있게 도와줍니다.

To generate these images, you should start with your raw resource in vector format and generate the images for each density using the following size scale:

이러한 이미지들을 만들기 위해서, 벡터 포맷인 원본 리소스로 만들기 시작해야 하며, 이미지를 각각의 밀도에 맞게 생성해야 합니다. 다음과 같은 사이즈 스케일을 사용해서 말이지요.

  • xhdpi: 2.0
  • hdpi: 1.5
  • mdpi: 1.0 (baseline)
  • ldpi: 0.75

This means that if you generate a 200×200 image for xhdpi devices, you should generate the same resource in 150×150 for hdpi, 100×100 for mdpi, and 75×75 for ldpi devices.

만약 200 * 200 사이즈의 이미지를 xhdpi 디바이스를 위해 생성한다면, 우리는 같은 리소스를 150*150, 100*100, 75*75 사이즈의 이미지를 각각 만들어야 합니다.

Then, place the files in the appropriate drawable resource directory:

그리고 나서, 파일들을 적절한 drawable 리소스 디렉토리에 배치하면 됩니다.

MyProject/
    res/
        drawable-xhdpi/
            awesomeimage.png
        drawable-hdpi/
            awesomeimage.png
        drawable-mdpi/
            awesomeimage.png
        drawable-ldpi/
            awesomeimage.png

Any time you reference @drawable/awesomeimage, the system selects the appropriate bitmap based on the screen’s density.

@drawable/awesomeimage 를 참조할 때 마다, 시스템은 적절한 비트맵 이미지를 화면의 밀도에 따라 알맞게 선택합니다

Note: Low-density (ldpi) resources aren’t always necessary. When you provide hdpi assets, the system scales them down by one half to properly fit ldpi screens.

노트 : 저해상도 리소스는 언제나 필요한 건 아닙니다. 우리가 hdpi를 제공하면, 시스템은 스케일을 줄여줍니다.

For more tips and guidelines about creating icon assets for your app, see the Iconography design guide.

더 자세한 정보는 Iconography design guide 를 참고하세요.

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중