| page.title=Implementing Adaptative UI Flows |
| parent.title=Designing for Multiple Screens |
| parent.link=index.html |
| |
| trainingnavtop=true |
| previous.title=Supporting Different Screen Densities |
| 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>Алгоритм пользовательского интерфейса зависит от макета, который в данный момент отображается. Например, если приложение работает в двухпанельном режиме, то при нажатии на элемент в левой панели содержание отобразится в правой. В однопанельном режиме содержание откроется отдельно (в другой активности).</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>Кроме того, для работы с учетом существующих компонентов можно также проверять их доступность, прежде чем выполнять с ними какие-либо операции. Например, в учебном приложении News Reader есть кнопка, которая служит для доступа в меню, однако она отображается только в операционных системах Android версии ниже, чем 3.0, потому что в последующих версиях ее функцию выполняет элемент <PH>{@link android.app.ActionBar}</PH> на уровне API 11 и выше. Чтобы проверить наличие этой кнопки, добавим прослушиватель событий с помощью следующего кода:</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>Результаты некоторых операций зависят от текущего макета. Например, если в приложении News Reader в двухпанельном режиме нажать на заголовок в списке, то статья откроется в правой панели. Если же интерфейс работает в однопанельном режиме, будет запущена отдельная активность:</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[] = { "Лучшие статьи", "Политика", "Экономика", "Новости технологий" }; |
| |
| 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>Одним из примеров повторяющегося фрагмента является реализация части интерфейса как панели в одних конфигурациях и как отдельной активности в других. Например, если приложение News Reader работает на достаточно большом экране, текст новостной статьи отображается в правой панели, а если на маленьком, то он открывается в отдельной активности.</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, однако в этом случае макет XML не требуется, так как фрагмент article является единственным компонентом этой активности.</p> |
| |
| <p>При создании фрагментов важно не привязывать их строго к конкретной активности. Для этого можно определить интерфейс с абстрактным описанием всех необходимых способов взаимодействия фрагмента с активностью, в которой он содержится. Затем этот интерфейс нужно реализовать в самой активности.</p> |
| |
| <p>Например, именно так работает фрагмент <code>HeadlinesFragment</code> в приложении News Reader:</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>Например, на типичном планшетном ПК с размером экрана 7 дюймов под управлением ОС Android 3.0 или более поздней версии при вертикальной ориентации статья в приложении News Reader открывается с помощью отдельной активности, а при горизонтальной используется двухпанельный макет.</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> |
| |
| |