merge tag를 사용한 레이아웃 안드로이드 스튜디오에서 미리보기

Stack Overflow에 자주 검색, 등록되는 문제들과 제가 개발 중 찾아 본 문제들 중에서 나중에도 찾아 볼 것 같은 문제들을 정리하고 있습니다.

Stack Overflow에서 가장 먼저 확인하게 되는 가장 높은 점수를 받은 Solution과 현 시점에 도움이 될 수 있는 가장 최근에 업데이트(최소 점수 확보)된 Solution을 각각 정리하였습니다.

 

아래 word cloud를 통해 이번 포스팅의 주요 키워드를 미리 확인하세요.

Preview layout with merge root tag in Intellij IDEA/Android Studio

Intellij IDEA/Android Studio에서 merge root tag를 사용하여 레이아웃 미리보기

 문제 내용 

Let's imagine we are developing compound component based on LinearLayout. So, we create class like this:

LinearLayout을 기반으로 한 복합 컴포넌트를 개발한다고 상상해 보겠습니다. 이를 위해 다음과 같은 클래스를 생성합니다:

public class SomeView extends LinearLayout {
    public SomeView(Context context, AttributeSet attrs) {
        super(context, attrs);

        setOrientation(LinearLayout.VERTICAL);
        View.inflate(context, R.layout.somelayout, this);
    }
}

 

If we'll use LinearLayout as a root of somelayout.xml, we'll have extra view level, so we use merge tag:

만약 somelayout.xml에서 LinearLayout을 루트로 사용한다면, 불필요한 뷰 레벨이 추가됩니다. 따라서 merge 태그를 사용합니다.

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Some text"
        android:textSize="20sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Some other text"/>
</merge>

 

But in Preview tab in IDE merge always acts as FrameLayout, and we'll see something like that:

하지만 IDE의 미리보기 탭에서는 항상 merge가 FrameLayout으로 작동하며, 다음과 같은 것을 볼 수 있습니다:

 

(It is Android Studio, Intellij IDEA is just the same, about Eclipse I don't know)

(이는 안드로이드 스튜디오를 의미하며, 인텔리J IDEA도 동일합니다. 이클립스에 대해서는 모릅니다.)

 

Preview speed up developing layouts a lot, it's sad lose such a great help even for some layouts. May be there is a way to specify, how Preview should interpret merge tag in particular layout?

레이아웃을 개발할 때 미리보기는 매우 유용한 도구입니다. 하지만 merge 태그를 사용하는 일부 레이아웃에서는 미리보기가 제대로 동작하지 않는 경우가 있습니다. 이런 경우 미리보기에서 merge 태그를 어떻게 해석해야 하는지 지정할 수 있는 방법이 있는지 알아볼 필요가 있습니다.

 

 

 

 높은 점수를 받은 Solution 

There is a new parentTag tools attribute (added in Android Studio 2.2) that you can use to specify the layout type for a merge tag, which will make the layout render correctly in the layout editor preview.

Android Studio 2.2부터 추가된 parentTag tools 속성을 사용하여 merge 태그의 레이아웃 유형을 지정하여 레이아웃 편집기 미리보기에서 레이아웃을 올바르게 렌더링할 수 있습니다.

 

So using your example:

그러면 예시를 들어보면 다음과 같습니다:

<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:parentTag="LinearLayout"
    tools:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Some text"
        android:textSize="20sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Some other text"/>
</merge>

 

Note: Both android:layout_width and android:layout_height must be specified in order for the layout to display properly in the editor.

참고: 레이아웃 편집기에서 레이아웃이 올바르게 표시되려면 android:layout_width와 android:layout_height 모두 지정해야 합니다.

 

 

 

출처 : https://stackoverflow.com/questions/17296552/preview-layout-with-merge-root-tag-in-intellij-idea-android-studio