diff options
Diffstat (limited to 'docs/html/intl/ko/training/multiscreen/adaptui.jd')
| -rw-r--r-- | docs/html/intl/ko/training/multiscreen/adaptui.jd | 212 |
1 files changed, 0 insertions, 212 deletions
diff --git a/docs/html/intl/ko/training/multiscreen/adaptui.jd b/docs/html/intl/ko/training/multiscreen/adaptui.jd deleted file mode 100644 index cb7b66c..0000000 --- a/docs/html/intl/ko/training/multiscreen/adaptui.jd +++ /dev/null @@ -1,212 +0,0 @@ -page.title=조정형 UI 플로우 구현 -parent.title=다양한 화면 지원 -parent.link=index.html - -trainingnavtop=true -previous.title=다양한 화면 밀도 지원 -previous.link=screendensities.html - -@jd:body - - -<!-- This is the training bar --> -<div id="tb-wrapper"> -<div id="tb"> - -<h2>강의 목표</h2> - -<ol> - <li><a href="#TaskDetermineCurLayout">현재 레이아웃 확인</a></li> - <li><a href="#TaskReactToLayout">현재 레이아웃에 대한 대응</a></li> - <li><a href="#TaskReuseFrag">다른 액티비티에 프래그먼트 재사용</a></li> - <li><a href="#TaskHandleConfigChanges">화면 구성 변경의 처리</a></li> -</ol> - -<h2>참고자료</h2> - -<ul> - <li><a href="{@docRoot}guide/practices/tablets-and-handsets.html">태블릿 및 휴대전화 지원</a></li> -</ul> - -<h2>다운로드 </h2> - -<div class="download-box"> -<a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">샘플 앱 다운로드</a> -<p class="filename">NewsReader.zip</p> -</div> - - -</div> -</div> - -<p>현재 애플리케이션이 표시하는 레이아웃에 따라 UI 플로가 달라질 수 있습니다. 예를 들어 애플리케이션이 이중 창 모드로 되어 있는 경우에는 왼쪽 창에 있는 항목을 클릭하면 오른쪽 창에 콘텐츠가 표시되고, 단일 창 모드로 되어 있는 경우에는 콘텐츠가 해당 창에 표시됩니다(다른 액티비티에서).</p> - - -<h2 id="TaskDetermineCurLayout">현재 레이아웃 확인</h2> - -<p>각 레이아웃을 구현하는 방식이 약간씩 다르므로 가장 먼저 해야 할 일은 현재 사용자에게 어떤 레이아웃이 표시되는지 확인하는 것입니다. 예를 들어, 사용자가 '단일 창' 모드에 있는지 혹은 '이중 창' 모드에 있는지 파악할 수 있습니다. 이는 특정 뷰가 존재하고 그 뷰가 표시되는지 조회하면 됩니다.</p> - -<pre class="prettyprint"> -public class NewsReaderActivity extends FragmentActivity { - boolean mIsDualPane; - - @Override - public void onCreate(Bundle savedInstanceState) { - super.onCreate(savedInstanceState); - setContentView(R.layout.main_layout); - - View articleView = findViewById(R.id.article); - mIsDualPane = articleView != null && - articleView.getVisibility() == View.VISIBLE; - } -} -</pre> - -<p>이 코드는 'article' 창을 사용할 수 있는지 여부를 조회하며 이러한 방식이 특정 레이아웃에 대한 조회를 하드코딩하는 것보다 훨씬 유연한 방식입니다.</p> - -<p>다른 구성요소의 존재 여부에 맞게 앱을 조정하는 또 다른 방법은 구성요소에 대한 작업을 수행하기 전에 해당 구성요소를 사용할 수 있는지 확인하는 것입니다. 예를 들어 뉴스 리더 샘플 앱의 경우, 메뉴를 여는 버튼이 있긴 하지만 이 버튼은 Android 3.0 이전 버전에서 실행되는 경우에만 존재합니다(API 수준 11 이상에서 <PH>{@link android.app.ActionBar}</PH> 가 그 기능을 대신하기 때문). 따라서 이 버튼에 대한 이벤트 리스너를 추가하기 위해 다음과 같이 할 수 있습니다.</p> - -<pre class="prettyprint"> -Button catButton = (Button) findViewById(R.id.categorybutton); -OnClickListener listener = /* create your listener here */; -if (catButton != null) { - catButton.setOnClickListener(listener); -} -</pre> - - -<h2 id="TaskReactToLayout">현재 레이아웃에 대한 대응</h2> - -<p>현재 레이아웃에 따라 일부 액션의 결과가 달라질 수 있습니다. 예를 들어 뉴스 리더 샘플의 헤드라인 목록에서 헤드라인을 클릭하면 UI가 이중 창 모드인 경우에는 기사가 오른쪽 창에서 열리지만, UI가 단일 창 모드인 경우에는 별도의 액티비티가 실행됩니다.</p> - -<pre> -@Override -public void onHeadlineSelected(int index) { - mArtIndex = index; - if (mIsDualPane) { - /* display article on the right pane */ - mArticleFragment.displayArticle(mCurrentCat.getArticle(index)); - } else { - /* start a separate activity */ - Intent intent = new Intent(this, ArticleActivity.class); - intent.putExtra("catIndex", mCatIndex); - intent.putExtra("artIndex", index); - startActivity(intent); - } -} -</pre> - -<p>마찬가지로, 앱이 이중 창 모드인 경우에는 탐색용 탭이 포함된 작업 표시줄이 설정되지만, 앱이 단일 창 모드인 경우에는 스피너 위젯이 포함된 탐색 메뉴가 설정됩니다. 따라서 어떤 경우가 적합한지도 코드에서 확인해야 합니다.</p> - -<pre> -final String CATEGORIES[] = { "Top Stories", "Politics", "Economy", "Technology" }; - -public void onCreate(Bundle savedInstanceState) { - .... - if (mIsDualPane) { - /* use tabs for navigation */ - actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_TABS); - int i; - for (i = 0; i < CATEGORIES.length; i++) { - actionBar.addTab(actionBar.newTab().setText( - CATEGORIES[i]).setTabListener(handler)); - } - actionBar.setSelectedNavigationItem(selTab); - } - else { - /* use list navigation (spinner) */ - actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_LIST); - SpinnerAdapter adap = new ArrayAdapter<String>(this, - R.layout.headline_item, CATEGORIES); - actionBar.setListNavigationCallbacks(adap, handler); - } -} -</pre> - - -<h2 id="TaskReuseFrag">다른 액티비티에 프래그먼트 재사용</h2> - -<p>다양한 화면의 디자인에 반복되는 패턴에는 일부 화면 구성에서는 창으로 구현되고 다른 화면 구성에서는 별도의 액티비티로 구현되는 인터페이스가 일부 있습니다. 예를 들어 뉴스 리더 샘플에서 뉴스 기사 텍스트가 큰 화면에서는 오른쪽 창에 표시되지만 작은 화면에서는 별도의 액티비티입니다.</p> - -<p>이러한 경우 일반적으로 동일한 <PH>{@link android.app.Fragment}</PH> 하위 클래스를 여러 액티비티에 재사용하여 코드 중복을 피할 수 있습니다. 예를 들어 <code>ArticleFragment</code>는 이중 창 레이아웃에서 사용되며 </p> - -{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all} - -<p>작은 화면의 액티비티 레이아웃에 레이아웃 없이 재사용됩니다(<code>ArticleActivity</code>).</p> - -<pre> -ArticleFragment frag = new ArticleFragment(); -getSupportFragmentManager().beginTransaction().add(android.R.id.content, frag).commit(); -</pre> - -<p>당연히 이는 XML 레이아웃에서 프래그먼트(fragment)를 명시하는 것과 같은 효과가 있지만 이 경우에는 아티클 프래그먼트가 이 액티비티의 유일한 구성요소이기 때문에 XML 레이아웃은 불필요한 작업이 됩니다.</p> - -<p>프래그먼트를 디자인할 때 염두에 두어야 할 매우 중요한 점 한 가지는 특정 액티비티에 대한 강한 커플링을 만들지 말아야 한다는 점입니다. 이렇게 하려면 일반적으로 프래그먼트가 호스트 액티비티와 상호작용해야 하는 모든 방식을 추상화하는 인터페이스를 정의하면 됩니다. 그러면 호스트 액티비티가 해당 인터페이스를 구현합니다.</p> - -<p>예를 들어 뉴스 리더 앱의 <code>HeadlinesFragment</code>가 정확하게 그 일을 해 줍니다.</p> - -<pre> -public class HeadlinesFragment extends ListFragment { - ... - OnHeadlineSelectedListener mHeadlineSelectedListener = null; - - /* Must be implemented by host activity */ - public interface OnHeadlineSelectedListener { - public void onHeadlineSelected(int index); - } - ... - - public void setOnHeadlineSelectedListener(OnHeadlineSelectedListener listener) { - mHeadlineSelectedListener = listener; - } -} -</pre> - -<p>그런 다음 사용자가 헤드라인을 선택하면 프래그먼트가 하드코딩된 특정 액티비티를 알리지 않고 호스트 액티비티가 지정한 리스너를 알립니다.</p> - -<pre> -public class HeadlinesFragment extends ListFragment { - ... - @Override - public void onItemClick(AdapterView<?> parent, - View view, int position, long id) { - if (null != mHeadlineSelectedListener) { - mHeadlineSelectedListener.onHeadlineSelected(position); - } - } - ... -} -</pre> - -<p>이 기술은 <a -href="{@docRoot}guide/practices/tablets-and-handsets.html">태블릿 및 휴대전화 지원</a> 가이드에서 자세히 설명되어 있습니다.</p> - - -<h2 id="TaskHandleConfigChanges">화면 구성 변경 처리</h2> - -<p>인터페이스 중 일부를 구현하는데 별도의 액티비티를 사용 중인 경우 인터페이스의 일관성을 유지하기 위해 특정 구성의 변경(예: 화면 전환)에 대응해야 합니다.</p> - -<p>예를 들어 Android 3.0 이상을 실행하는 일반적인 7인치 태블릿에서 뉴스 리더 샘플은 세로 모드에서 실행될 때에는 뉴스 기사를 표시하는 데 별도의 액티비티를 사용하지만 가로모드에서는 이중 창(two-pane) 레이아웃을 사용합니다.</p> - -<p>즉 사용자가 세로 모드에 있고 기사를 보기 위한 액티비티가 화면에 있는 경우, 방향이 가로로 바뀌었음을 감지하고, 액티비티를 종료한 다음 주요 액티비티로 돌아감으로써 콘텐츠가 이중 창 레이아웃에서 표시되도록 적절하게 대응해야 합니다.</p> - -<pre> -public class ArticleActivity extends FragmentActivity { - int mCatIndex, mArtIndex; - - @Override - protected void onCreate(Bundle savedInstanceState) { - super.onCreate(savedInstanceState); - mCatIndex = getIntent().getExtras().getInt("catIndex", 0); - mArtIndex = getIntent().getExtras().getInt("artIndex", 0); - - // If should be in two-pane mode, finish to return to main activity - if (getResources().getBoolean(R.bool.has_two_panes)) { - finish(); - return; - } - ... -} -</pre> - - |