[Android] <include layout /> 인클루드 레이아웃

재사용 가능한 레이아웃을 만들고 사용하는 방법!
간단하지만 있는지를 모르면 아예 쓰지를 못하죠. 많이 해보는 것은 그래서 중요합니다.
어쨋든, 알아보도록 할게요.

Layout Tricks: Creating Reusable UI Components The Android platform offers a wide variety of UI widgets, small visual construction blocks that you can glue together to present users with complex and useful interfaces. However applications often need higher-level visual components. To meet that need, and to do so efficiently, you can combine multiple standard widgets into a single, reusable component. For example, you could create a reusable component that contains a progress bar and a cancel button, a panel containing two buttons (positive and negative actions), a panel with an icon, a title and a description, and so on. You can create UI components easily by writing a custom View, but you can do it even more easily using only XML. In Android XML layout files, each tag is mapped to an actual class instance (the class is always a subclass of View The UI toolkit lets you also use three special tags that are not mapped to a View instance: <requestFocus />, <merge /> and <include />. This article shows how to use<include /> to create pure XML visual components. For information about how to use <merge />, which can be particularly powerful when combined with <include />see the Merging Layouts article. The <include /> element does exactly what its name suggests; it includes another XML layout. Using this tag is straightforward as shown in the following example, taken straight from the source code of the Home application that ships with Android: <com.android.launcher.Workspace     android:id="@+id/workspace"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     launcher:defaultScreen="1">     <include android:id="@+id/cell1" layout="@layout/workspace_screen" />     <include android:id="@+id/cell2" layout="@layout/workspace_screen" />     <include android:id="@+id/cell3" layout="@layout/workspace_screen" /> </com.android.launcher.Workspace> In the <include /> only the layout attribute is required. This attribute, without the android namespace prefix, is a reference to the layout file you wish to include. In this example, the same layout is included three times in a row. This tag also lets you override a few attributes of the included layout. The above example shows that you can use android:id to specify the id of the root view of the included layout; it will also override the id of the included layout if one is defined. Similarly, you can override all the layout parameters. This means that any android:layout_*attribute can be used with the <include /> tag. Here is an example in which the same layout is included twice, but only the first one overrides the layout properties: <!-- override the layout height and width --> <include layout="@layout/image_holder"     android:layout_height="fill_parent"     android:layout_width="fill_parent" /> <!-- do not override layout dimensions; inherit them from image_holder --> <include layout="@layout/image_holder" /> Caution: If you want to override the layout dimensions, you must override both android:layout_height and android:layout_width—you cannot override only the height or only the width. If you override only one, it will not take effect. (Other layout properties, such as weight, are still inherited from the source layout.) This tag is particularly useful when you need to customize only part of your UI depending on the device's configuration. For instance, the main layout of your activity can be placed in the layout/ directory and can include another layout which exists in two flavors, in layout-land/ andlayout-port/. This allows you to share most of the UI in portrait and landscape.

우선 간단하게 순서를 말해볼게요.
1. 재사용할 layout xml (레이아웃 xml) 을 만든다. 위치 : res/layout
2. 액티비티와 매칭되는 레이아웃 xml에 include 태그를 추가한다.
   이때 속성은 android:layout_xxx... 면 충분하다.
3. 액티비티 코드에서 include 한 레이아웃을 받아와 하고 싶은 처리를 한다.

1. 재사용할 Layout XML 만들기

기본적인 LinearLayout 을 사용한 레이아웃이니 다른 설명은 생략하겠습니다.

res/layout/layout_textview.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <TextView android:id="@+id/layout_textview_01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="하이 헬로 첫번째 텍스트뷰" android:textSize="20sp" android:textColor="#FFFFFF" /> <TextView android:id="@+id/layout_textview_02" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="하이 헬로 두번째 텍스트뷰" android:textSize="18sp" android:textColor="#808080" /> </LinearLayout>

res/layout/layout_button.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <Button android:id="@+id/layout_button_01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="하이 헬로 01" /> <Button android:id="@+id/layout_button_02" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="하이 헬로 02" /> </LinearLayout>

2. 액티비티의 XML에 include 로 재사용할 레이아웃 추가하기

기본 프로젝트에서 생성되는 xml로 처음에 액티비티를 만들면서 프로젝트를 생성한다면,
만들어진 기본 액티비티에 setContent 되어있는 레이아웃 xml 이다.

res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <include layout="@layout/layout_textview" android:id="@+id/main_layout_textview" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <include layout="@layout/layout_button" android:id="@+id/main_layout_button" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout>

main.xml 이라는 레이아웃 xml의 코드를 잘 보면,
orientation이 vertical(자식뷰들을 세로로 배치하겠습니다.)로 되어있는 LinearLayout 안에 
include 가 2번 나오는 것을 볼 수 있습니다.

첫번째 include는 위의 1번에서 만든 layout_textview를 포함하는 녀석이고
두번째 include는 위의 1번에서 만든 layout_button을 포함하는 녀석입니다.

이렇게 하는 것 만으로 화면은 1번에서 만든 두 레이아웃을 포함하고 있게 됩니다.

3. include한 레이아웃 받아서 처리하기

위의 처리들이 단순히 화면에 보이는 부분만을 위한 것이었다면,
여기서는 실제로 여러가지 세팅을 하고 이벤트를 처리하는 것을 할것입니다.

우선 첫번째로 텍스트뷰의 텍스트를 바꿀 것이고, (layout_textview 안의 두 텍스트뷰의 텍스트 바꾸기)
두번째로 버튼 클릭 이벤트를 처리할 것입니다.(layout_button 안의 두 버튼에 대한 클릭 이벤트를 처리)

우선 액티비티 전체 코드 입니다.

me.croute.example.layout/ExampleIncludeLayoutActivity.java
package me.croute.example.layout; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.TextView; import android.widget.Toast; /** * include layout 예제 * include layout에 대해서 간단한 코드를 통해 알아본다. * * @author croute * @since 2011.06.13 */ public class ExampleIncludeLayoutActivity extends Activity implements OnClickListener { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // layout_textview를 받아온다. layout_textview를 받아온 View textView 객체는 하위 자식들을 그대로 포함하고 있다. // 이렇게 받아온 View textView는 layout_textview의 root뷰이다. View textView = (View)findViewById(R.id.main_layout_textview); // 받아온 textview를 통해 해당 View가 가진 하위 자식들을 받아온다.(reference한다.) TextView tv01 = (TextView)textView.findViewById(R.id.layout_textview_01); TextView tv02 = (TextView)textView.findViewById(R.id.layout_textview_02); // layout_button을 받아온다. layout_button을 받아온 View button 객체는 하위 자식들을 그대로 포함하고 있다. // 이렇게 받아온 View button은 layout_button의 root뷰이다. View button = (View)findViewById(R.id.main_layout_button); // button을 통해 해당 View가 가진 하위 자식들을 받아온다.(reference한다.) Button b01 = (Button)button.findViewById(R.id.layout_button_01); Button b02 = (Button)button.findViewById(R.id.layout_button_02); // 기존에 씌여져 있던 텍스트를 변경한다. tv01.setText("바뀐 하이 헬로 01"); tv02.setText("바뀐 하이 헬로 02"); // 버튼에 클릭 리스너를 등록한다. // implements OnClickListener 를 하고, onClick() 메소드를 구현하였기 때문에, this를 파라미터로 넣는다. b01.setOnClickListener(this); b02.setOnClickListener(this); } @Override public void onClick(View v) { // 각 버튼이 클릭 되었을 때의 이벤트를 처리한다. switch(v.getId()) { // 위젯(뷰)아이디가 layout_button_01 인 버튼이 클릭되었을 경우의 이벤트 case R.id.layout_button_01: Toast.makeText(this, "버튼 1 클릭", Toast.LENGTH_SHORT).show(); break; // 위젯(뷰)아이디가 layout_button_02 인 버튼이 클릭되었을 경우의 이벤트 case R.id.layout_button_02: Toast.makeText(this, "버튼 2 클릭", Toast.LENGTH_SHORT).show(); break; } } }

// layout_textview를 받아온다. layout_textview를 받아온 View textView 객체는 하위 자식들을 그대로 포함하고 있다.

// 이렇게 받아온 View textView는 layout_textview의 root뷰이다.

View textView = (View)findViewById(R.id.main_layout_textview);

         

// 받아온 textview를 통해 해당 View가 가진 하위 자식들을 받아온다.(reference한다.)

TextView tv01 = (TextView)textView.findViewById(R.id.layout_textview_01);

TextView tv02 = (TextView)textView.findViewById(R.id.layout_textview_02);

주석에 설명해 놓았듯이,
findViewById 로 받아오게 되면, textView 라는 View 인스턴스는 layout_textview 의 root 뷰를 가지게 되죠.

그렇기 때문에,!!
그 아래서 받아온 layout_textview의 root 뷰, 즉 textview 라는 View 인스턴스를 통해 하위 자식들까지 받아올 수 있는 것입니다.

컨테이너 개념만 알면 아주 쉽게 이해할 수 있는 부분이죠. 또는 뷰와 뷰그룹, 위젯들의 관계를 알고 있어도 쉽습니다.
(뷰와 뷰 그룹, 위젯에 대한 설명 : 
[Android] Activity, Window, android.widget, View, ViewGroup http://croute.me/425 )

그리고 그 세부적인 처리는 일반적으로 하듯이 처리하면 됩니다.
텍스트뷰에 대해서는 TextView.setText() 메소드를 통해,
버튼에 대해서는 Button.setOnClickListener() 메소드를 통해 리스너를 등록하고 onClick() 메소드에서 처리하는 것이죠.

이렇게 해두면 굳이 inflater를 통해 객체화 시켜서 여러가지에 대해서 처리 할 필요 없이,
레퍼런스에 레퍼런스를 하는 것만으로 많은 처리를 할 수 있게 됩니다.

이렇게 처리했을때의 가장 큰 장점은
하나의 레이아웃을 만들어두고 여러 레이아웃에서 손쉽게 재사용 할 수 있다는 것이겠죠?



예제 스크린샷

예제 프로젝트 파일 첨부

ExampleIncludeLayout.zip