레이아웃 편집기로 UI 디자인 하기 Design a UI with Layout Editor (13)

레이아웃 편집기로 UI 디자인하기   Design a UI with Layout Editor

In This Document

1. Editing in the Text View
2. Editing in the Design View

안드로이드 스튜디오는 위젯을 레이아웃으로 드래그앤드롭 하여, XML을 편집하는 동안 레이아웃을 미리 볼 수 있는 고급 레이아웃 편집기를 제공합니다.
Android Studio offers an advanced layout editor that allows you to drag-and-drop widgets into your layout and preview your layout while editing the XML.

레이아웃 편집기 내에서, XML 파일을 텍스트 처럼 편집하는 Text view와 Design view 사이를 전환 할 수 있습니다. 원하는 편집기를 표시하려면 창 하단에 있는 해당 탭을 클릭합니다.
Within the layout editor, you can switch between the Text view, where you edit the XML file as text, and the Design view. Just click the appropriate tab at the bottom of the window to display the desired editor.

Text View에서 편집하기  Editing in the Text View

---

레이아웃 파일을 편집하려면 Text view를 사용합니다.
이 섹션은 Text view에서 사용 가능한 몇 가지 특징을 서술합니다.
You can use the Text view to edit your layout file. This section describes some of the features that are available in the Text view.

Preview

Text

 view에서 편집하는 동안, 창 오른쪽에서 사용할 수 있는 

Preview

 pane

을 열어서 장치의 레이아웃을 미리 볼 수 있습니다.
Preview

 pane

내에서 미리보기 장치, 레이아웃 테마, 플랫폼 버전 등을, pane의 상단에 있는 다양한 옵션을 변경하여 preview를 수정할 수 있습니다. 
app이 특정 장치의 skin에 어떻게 보일지를 미리 보려면 preview icon 

을 클릭하고, 넥서스 4 등 원하는 장치를 선택합니다:

While editing in the 

Text

 view, you can preview the layout on devices by opening the 

Preview

 pane available on the right side of the window. Within the 

Preview

 pane, you can modify the preview by changing various options at the top of the pane, including the preview device, layout theme, platform version and more. To see a preview of how your app would look with a particular device skin, click the preview icon 

 and choose the desired device, such as Nexus 4:

Figure 1. Previewing your app.

To preview the layout on multiple devices simultaneously, select Preview All Screen Sizes from the device drop-down.

When you click in the preview image, the layout editor highlights the corresponding section in the XML, and vice-versa.

Interactive error detection and recovery

As you edit the Text view of your layout XML file, Android Studio flags typos and offers assistance.

For example, suppose you are adding a button, and you misspell it as "Buttonn". Android Studio helps you to correct it by displaying an error such as the following, where you can click on "Change to Button" to fix the error in the XML file:

Figure 2. Flagging errors.

Android Studio also prompts you to supply missing information. For example, suppose you start adding a fragment to your layout XML file. First of all, Android Studio displays auto-complete suggestions as you type. Once it becomes clear that you are adding a fragment, Android Studio displays an error panel with links that you can click to supply the missing attributes. Clicking "Automatically add all missing attributes" in this case does just that—it completes the fragment definition in your layout XML file:

Figure 3. Supplying missing information

Picking a theme

To pick a theme for your app, click the Theme icon 

.

This displays the Select Theme dialog, where you can search for a particular theme and/or select one from the list on the right hand side. The theme you choose will be reflected in the previewed image.

Figure 4. Specifying a theme.

Localization

Android Studio provides built-in localization support. When you click the localization icon 

, you can select a particular locale, add and edit translations, preview the locales your app supports (all locales or just a single locale), and preview right-to-left layout for languages that are RTL.

See Supporting Different Languages for a description of how to support different locales in your app.

For example, here is a preview of a "Hello World" app for the 

 locale:

Figure 5. Previewing locales.

Editing in the Design View

---

창의 바닥에 있는 Design을 클릭하여 그래픽 편집기로 바꿀 수 있습니다.
Design view에서 편집하는 동안, 창의 왼쪽에 있는 Palette를 클릭하여, 드래그앤드롭에 사용 가능한 위젯을 보여주고 숨기고 할 수 있습니다.
창의 오른 쪽 위의 Designer를 클릭하면 layout hierarchy 및 레이아웃 안의 각 view에 대한  properties 목록을 가진 패널이 reveal됩니다.
on the left side of the window. Clicking Designer on the right side of the window reveals a panel with a layout hierarchy and a list of properties for each view in the layout.
You can switch to the graphical editor by clicking Design at the bottom of the window. While editing in the Design view, you can show and hide the widgets available to drag-and-drop by clicking Palette on the left side of the window. Clicking Designer on the right side of the window reveals a panel with a layout hierarchy and a list of properties for each view in the layout.

widget을 app의 graphical layout 안으로 드래그 할 때, display는 widget을 위치시키는 것을 돕도록 바뀝니다.
보이는 것은 레이아웃의 타입에 따라 달라집니다.
예를 들어, widget을 FrameLayout으로 드래그 하면 그림6에 보이는 것 처럼widget을 배치하는 것을 돕도록 grid를 표시합니다:
When you drag a widget into the graphical layout for your app, the display changes to help you place the widget. What you see depends on the type of layout. For example, if you're dragging a widget into a FrameLayout, it displays a grid to help you place the widget, as shown in figure 6:

Figure 6. Using the grid layout to place a widget.

Within the graphical editor, you can rearrange your app's UI by dragging widgets to the desired location.

Multi-API Version Rendering

Android Studio supports multi-API version rendering. When you click the Android version icon 

 in the Design view, Android Studio allows you to preview your Android layouts across multiple Android API levels.

Figure 7. Multi-API version rendering.

Taking a snapshot

When you run your app on a connected device, you can take a snapshot of it by clicking the camera icon 

 to the left of the logging panel (at the bottom of the window by default). This takes a snapshot of your running app (or whatever is currently displayed on your device) and displays it in a window. Check Frame Screenshot to show your screenshot within the device skin of your choice. You can also specify whether you want the image to have screen glare and/or a drop shadow. Once you have the desired effect, you can save the image.

You can use the same process to create a snapshot of your app's preview. Just click the camera icon in the preview area and follow the steps for adding a device skin.