1page.title=조정형 UI 플로우 구현
2parent.title=다양한 화면 지원
3parent.link=index.html
4
5trainingnavtop=true
6previous.title=다양한 화면 밀도 지원
7previous.link=screendensities.html
8
9@jd:body
10
11
12<!-- This is the training bar -->
13<div id="tb-wrapper">
14<div id="tb">
15
16<h2>강의 목표</h2>
17
18<ol>
19  <li><a href="#TaskDetermineCurLayout">현재 레이아웃 확인</a></li>
20  <li><a href="#TaskReactToLayout">현재 레이아웃에 대한 대응</a></li>
21  <li><a href="#TaskReuseFrag">다른 액티비티에 프래그먼트 재사용</a></li>
22  <li><a href="#TaskHandleConfigChanges">화면 구성 변경의 처리</a></li>
23</ol>
24
25<h2>참고자료</h2>
26
27<ul>
28  <li><a href="{@docRoot}guide/practices/tablets-and-handsets.html">태블릿 및 휴대전화 지원</a></li>
29</ul>
30
31<h2>다운로드 </h2>
32
33<div class="download-box">
34<a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">샘플 앱 다운로드</a>
35<p class="filename">NewsReader.zip</p>
36</div>
37
38
39</div>
40</div>
41
42<p>현재 애플리케이션이 표시하는 레이아웃에 따라 UI 플로가 달라질 수 있습니다. 예를 들어 애플리케이션이 이중 창 모드로 되어 있는 경우에는 왼쪽 창에 있는 항목을 클릭하면 오른쪽 창에 콘텐츠가 표시되고, 단일 창 모드로 되어 있는 경우에는 콘텐츠가 해당 창에 표시됩니다(다른 액티비티에서).</p>
43
44
45<h2 id="TaskDetermineCurLayout">현재 레이아웃 확인</h2>
46
47<p>각 레이아웃을 구현하는 방식이 약간씩 다르므로 가장 먼저 해야 할 일은 현재 사용자에게 어떤 레이아웃이 표시되는지 확인하는 것입니다. 예를 들어, 사용자가 '단일 창' 모드에 있는지 혹은 '이중 창' 모드에 있는지 파악할 수 있습니다. 이는 특정 뷰가 존재하고 그 뷰가 표시되는지 조회하면 됩니다.</p>
48
49<pre class="prettyprint">
50public class NewsReaderActivity extends FragmentActivity {
51    boolean mIsDualPane;
52
53    &#64;Override
54    public void onCreate(Bundle savedInstanceState) {
55        super.onCreate(savedInstanceState);
56        setContentView(R.layout.main_layout);
57
58        View articleView = findViewById(R.id.article);
59        mIsDualPane = articleView != null &amp;&amp;
60                        articleView.getVisibility() == View.VISIBLE;
61    }
62}
63</pre>
64
65<p>이 코드는 'article' 창을 사용할 수 있는지 여부를 조회하며 이러한 방식이 특정 레이아웃에 대한 조회를 하드코딩하는 것보다 훨씬 유연한 방식입니다.</p>
66
67<p>다른 구성요소의 존재 여부에 맞게 앱을 조정하는 또 다른 방법은 구성요소에 대한 작업을 수행하기 전에 해당 구성요소를 사용할 수 있는지 확인하는 것입니다. 예를 들어 뉴스 리더 샘플 앱의 경우, 메뉴를 여는 버튼이 있긴 하지만 이 버튼은 Android 3.0 이전 버전에서 실행되는 경우에만 존재합니다(API 수준 11 이상에서  <PH>{@link android.app.ActionBar}</PH> 가 그 기능을 대신하기 때문). 따라서 이 버튼에 대한 이벤트 리스너를 추가하기 위해 다음과 같이 할 수 있습니다.</p>
68
69<pre class="prettyprint">
70Button catButton = (Button) findViewById(R.id.categorybutton);
71OnClickListener listener = /* create your listener here */;
72if (catButton != null) {
73    catButton.setOnClickListener(listener);
74}
75</pre>
76
77
78<h2 id="TaskReactToLayout">현재 레이아웃에 대한 대응</h2>
79
80<p>현재 레이아웃에 따라 일부 액션의 결과가 달라질 수 있습니다. 예를 들어 뉴스 리더 샘플의 헤드라인 목록에서 헤드라인을 클릭하면 UI가 이중 창 모드인 경우에는 기사가 오른쪽 창에서 열리지만, UI가 단일 창 모드인 경우에는 별도의 액티비티가 실행됩니다.</p>
81
82<pre>
83&#64;Override
84public void onHeadlineSelected(int index) {
85    mArtIndex = index;
86    if (mIsDualPane) {
87        /* display article on the right pane */
88        mArticleFragment.displayArticle(mCurrentCat.getArticle(index));
89    } else {
90        /* start a separate activity */
91        Intent intent = new Intent(this, ArticleActivity.class);
92        intent.putExtra("catIndex", mCatIndex);
93        intent.putExtra("artIndex", index);
94        startActivity(intent);
95    }
96}
97</pre>
98
99<p>마찬가지로, 앱이 이중 창 모드인 경우에는 탐색용 탭이 포함된 작업 표시줄이 설정되지만, 앱이 단일 창 모드인 경우에는 스피너 위젯이 포함된 탐색 메뉴가 설정됩니다. 따라서 어떤 경우가 적합한지도 코드에서 확인해야 합니다.</p>
100
101<pre>
102final String CATEGORIES[] = { "Top Stories", "Politics", "Economy", "Technology" };
103
104public void onCreate(Bundle savedInstanceState) {
105    ....
106    if (mIsDualPane) {
107        /* use tabs for navigation */
108        actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_TABS);
109        int i;
110        for (i = 0; i &lt; CATEGORIES.length; i++) {
111            actionBar.addTab(actionBar.newTab().setText(
112                CATEGORIES[i]).setTabListener(handler));
113        }
114        actionBar.setSelectedNavigationItem(selTab);
115    }
116    else {
117        /* use list navigation (spinner) */
118        actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_LIST);
119        SpinnerAdapter adap = new ArrayAdapter<String>(this,
120                R.layout.headline_item, CATEGORIES);
121        actionBar.setListNavigationCallbacks(adap, handler);
122    }
123}
124</pre>
125
126
127<h2 id="TaskReuseFrag">다른 액티비티에 프래그먼트 재사용</h2>
128
129<p>다양한 화면의 디자인에 반복되는 패턴에는 일부 화면 구성에서는 창으로 구현되고 다른 화면 구성에서는 별도의 액티비티로 구현되는 인터페이스가 일부 있습니다. 예를 들어 뉴스 리더 샘플에서 뉴스 기사 텍스트가 큰 화면에서는 오른쪽 창에 표시되지만 작은 화면에서는 별도의 액티비티입니다.</p>
130
131<p>이러한 경우 일반적으로 동일한  <PH>{@link android.app.Fragment}</PH> 하위 클래스를 여러 액티비티에 재사용하여 코드 중복을 피할 수 있습니다. 예를 들어 <code>ArticleFragment</code>는 이중 창 레이아웃에서 사용되며 </p>
132
133{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all}
134
135<p>작은 화면의 액티비티 레이아웃에 레이아웃 없이 재사용됩니다(<code>ArticleActivity</code>).</p>
136
137<pre>
138ArticleFragment frag = new ArticleFragment();
139getSupportFragmentManager().beginTransaction().add(android.R.id.content, frag).commit();
140</pre>
141
142<p>당연히 이는 XML 레이아웃에서 프래그먼트(fragment)를 명시하는 것과 같은 효과가 있지만 이 경우에는 아티클 프래그먼트가 이 액티비티의 유일한 구성요소이기 때문에 XML 레이아웃은 불필요한 작업이 됩니다.</p>
143
144<p>프래그먼트를 디자인할 때 염두에 두어야 할 매우 중요한 점 한 가지는 특정 액티비티에 대한 강한 커플링을 만들지 말아야 한다는 점입니다. 이렇게 하려면 일반적으로 프래그먼트가 호스트 액티비티와 상호작용해야 하는 모든 방식을 추상화하는 인터페이스를 정의하면 됩니다. 그러면 호스트 액티비티가 해당 인터페이스를 구현합니다.</p>
145
146<p>예를 들어 뉴스 리더 앱의 <code>HeadlinesFragment</code>가 정확하게 그 일을 해 줍니다.</p>
147
148<pre>
149public class HeadlinesFragment extends ListFragment {
150    ...
151    OnHeadlineSelectedListener mHeadlineSelectedListener = null;
152
153    /* Must be implemented by host activity */
154    public interface OnHeadlineSelectedListener {
155        public void onHeadlineSelected(int index);
156    }
157    ...
158
159    public void setOnHeadlineSelectedListener(OnHeadlineSelectedListener listener) {
160        mHeadlineSelectedListener = listener;
161    }
162}
163</pre>
164
165<p>그런 다음 사용자가 헤드라인을 선택하면 프래그먼트가 하드코딩된 특정 액티비티를 알리지 않고 호스트 액티비티가 지정한 리스너를 알립니다.</p>
166
167<pre>
168public class HeadlinesFragment extends ListFragment {
169    ...
170    &#64;Override
171    public void onItemClick(AdapterView&lt;?&gt; parent,
172                            View view, int position, long id) {
173        if (null != mHeadlineSelectedListener) {
174            mHeadlineSelectedListener.onHeadlineSelected(position);
175        }
176    }
177    ...
178}
179</pre>
180
181<p>이 기술은 <a
182href="{@docRoot}guide/practices/tablets-and-handsets.html">태블릿 및 휴대전화 지원</a> 가이드에서 자세히 설명되어 있습니다.</p>
183
184
185<h2 id="TaskHandleConfigChanges">화면 구성 변경 처리</h2>
186
187<p>인터페이스 중 일부를 구현하는데 별도의 액티비티를 사용 중인 경우 인터페이스의 일관성을 유지하기 위해 특정 구성의 변경(예: 화면 전환)에 대응해야 합니다.</p>
188
189<p>예를 들어 Android 3.0 이상을 실행하는 일반적인 7인치 태블릿에서 뉴스 리더 샘플은 세로 모드에서 실행될 때에는 뉴스 기사를 표시하는 데 별도의 액티비티를 사용하지만 가로모드에서는 이중 창(two-pane) 레이아웃을 사용합니다.</p>
190
191<p>즉 사용자가 세로 모드에 있고 기사를 보기 위한 액티비티가 화면에 있는 경우, 방향이 가로로 바뀌었음을 감지하고, 액티비티를 종료한 다음 주요 액티비티로 돌아감으로써 콘텐츠가 이중 창 레이아웃에서 표시되도록 적절하게 대응해야 합니다.</p>
192
193<pre>
194public class ArticleActivity extends FragmentActivity {
195    int mCatIndex, mArtIndex;
196
197    &#64;Override
198    protected void onCreate(Bundle savedInstanceState) {
199        super.onCreate(savedInstanceState);
200        mCatIndex = getIntent().getExtras().getInt("catIndex", 0);
201        mArtIndex = getIntent().getExtras().getInt("artIndex", 0);
202
203        // If should be in two-pane mode, finish to return to main activity
204        if (getResources().getBoolean(R.bool.has_two_panes)) {
205            finish();
206            return;
207        }
208        ...
209}
210</pre>
211
212
213