Дизайн пользовательского интерфейса Android: работа с фрагментами

() translation by (you can also view the original English article)

Новый API-интерфейс Fragment для Android, представленный в Android 3.0, позволяет упростить создание динамичного интерфейса. В этом учебном пособии вы узнаете, как преобразовать двухэкранный ListView и WebView в одноэранный вид, предназначенный для больших экранов, например, для планшетов.

Изменения в техниках и программном обеспечении

Некоторые аспекты приложений или методов, используемых в этом руководстве, изменились с тех пор, как они были опубликованы. Это может затруднить выполнение нашей задачи. Мы рекомендуем посмотреть эти более новые уроки:

Android SDK: использование фрагментов

Шаги этого учебника будут более краткие, чем некоторые из наших предыдущих учебников; вам, возможно, придется просмотреть некоторые другие обучающие материалы для Android на этом сайте или даже в справочнике Android SDK, если вы не знакомы с какими-либо базовыми концепциями и классами Android, обсуждаемыми в этом руководстве. Окончательный образец кода, который идет вместе с этим уроком, доступен для загрузки в качестве открытого кода на Google.

Представляем фрагменты

Прежде чем мы начнем, давайте определим, что такое фрагмент. Фрагмент - это, как правило, часть пользовательского интерфейса с его собственным жизненным циклом. Если это звучит очень похоже на Activity, это потому, что оно похоже на него. Однако фрагмент отличается от Activity, поскольку он существует внутри него. Фрагмент не должен быть сопряжен с одним и тем же Activity каждый раз, когда он создается, что дает ему некоторую гибкость. Также как Activity, фрагмент не содержит элементов пользовательского интерфейса.

Шаг 0: Начало работы

В этом учебном пособии предполагается, что вы начнете работу с нашего урока по ListView. Вы можете загрузить код и начать работать с ним, хотя некоторые задания могут быть вам непонятны или вы можете загрузить код этого урока и следовать всем инструкциям в нём.

Шаг 1: Редизайн экранов

На следующем рисунке показано наше приложение Mobiletuts+ для чтения статей (урок ListView) до того, как был рассмотрен и применен дизайн фрагмента:

Эта разметка отлично работает на относительно небольшом экране телефона. Однако на большом экране, например, на 10-дюймовом экране Motorola Xoom на экране ListView очень много свободного места. Экран WebView выглядит хорошо, но немного пусто.

Здесь и появляются фрагменты: на больших экранах мы могли бы предоставить более эффективный пользовательский интерфейс, если бы мы могли отображать ListView на том же экране, что и WebView. Когда пользователь нажимает на определенный элемент ListView на панели слева, WebView с правой стороны обновляется, чтобы отобразить соответствующий контент. Этот тип разметки часто используется в программах для чтения электронной почты или документов. На следующем рисунке показан редизайн:

Шаг 2: Преобразование в дизайн на основе фрагментов

Теперь, мы знаем, как будет работать новая разметка экрана, мы также знаем, что два текущих действия необходимо будет преобразовать в фрагменты. Мы выполним преобразование в несколько этапов. Первый шаг заключается в том, чтобы оставить экраны визуально без изменений, но модифицировать каждый экран для использования фрагмента. Один фрагмент будет содержать текущий ListView, а другой будет содержать WebView. Затем мы перейдем к единственной реализации на экране, которая включает в себя обмен данными между элементами ListView и WebView, превращенными в фрагменты.

Во-первых, измените Project Build Target вашего приложения на Android 3.0. Чтобы сделать это в Eclipse, щелкните правой кнопкой мыши проект и выберите «Свойства». Перейдите в раздел Android и установите флажок рядом с Android 3.0. Мы не используем какие-либо API Google, поэтому достаточно версии Android Open Source Project. Затем нажмите кнопку «ОК».

Теперь у вас будет доступ к новым API, включая API фрагментов.

Примечание: В следующем уроке мы поговорим об использовании нового уровня совместимости, чтобы технологии, такие как API-интерфейс Fragment, работали в более ранних версиях Android. Пока же им потребуется устройство с Android 3.0, Honeycomb.

Шаг 3: Создание классов фрагментов

Создайте два новых класса Java для представления двух фрагментов: экранов ListView и WebView. Назовите их TutListFragment и TutViewerFragment. TutListFragment расширит класс ListFragment, а TutViewerFragment просто расширит класс Fragment.

В классе TutListFragment нам необходимо переопределить два метода: onListItemClick() и onCreate(). Содержание этих методов должно выглядеть вам знакомым; они похожи на те, что мы видели ранее в классе TutListActivity. Мы их скоро изменим, но пока не все. Вот список класса TutListFragment:

@Override
public void onListItemClick(ListView l, View v, int position, long id) {
    String[] links = getResources().getStringArray(R.array.tut_links);

    String content = links[position];
    Intent showContent = new Intent(getActivity().getApplicationContext(),
            TutViewerActivity.class);
    showContent.setData(Uri.parse(content));
    startActivity(showContent);
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setListAdapter(ArrayAdapter.createFromResource(getActivity()
            .getApplicationContext(), R.array.tut_titles,
            R.layout.list_item));
}

Класс TutViewerFragment немного проще. Мы используем тот факт, что фрагмент работает под тем же activity, которым он пользовался, и получает данные непосредственно из класса Fragment. Добавьте метод переопределения для метода onCreateView(). Теперь эти методы должны выглядеть так:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    Intent launchingIntent = getActivity().getIntent();
    String content = launchingIntent.getData().toString();

    WebView viewer = (WebView) inflater.inflate(R.layout.tut_view, container, false);
    viewer.loadUrl(content);
    
    return viewer;
}

Возможность непосредственного доступа к экземпляру активности полезна, но позже создаст проблему. Что делать, если этот фрагмент находится на экране с фрагментом списка? В этом случае не произойдёт получения URL-адреса. Аналогично, в TutListFragment мы запускаем новое действие непосредственно, когда пользователь щелкает элемент в списке. Что делать, если TutViewFragment существовал в рамках одного activity? Если это так, запуск нового не имеет смысла. Мы вернемся и решим эти проблемы чуть позже в этом уроке.

Шаг 4: Добавление ресурсов макета фрагмента

Теперь создайте новый файл макета, называемый tutlist_fragment.xml, для фрагмента, содержащего список статей. Ресурс макета фрагмента использует тег и ссылается на созданный вами класс фрагментов.

<?xml version="1.0" encoding="utf-8"?>
<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="com.mamlambo.tutorial.tutlist.TutListFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/tutlist_fragment">
</fragment>

Затем создайте аналогичный файл макета с именем tutview_fragment.xml:

<?xml version="1.0" encoding="utf-8"?>
<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="com.mamlambo.tutorial.tutlist.TutViewerFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/tutview_fragment">
</fragment>

Шаг 5: Обновление классов Activity

Теперь должны обновляться классы TutListActivity и TutViewerActivity. Класс TutListActivity имеет единственный метод onCreate(), который теперь должен быть обновлен для загрузки соответствующего ресурса макета фрагмента, созданного на предыдущем шаге, например:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.tutlist_fragment);
}

Кроме того, следует отметить, что TutListActivity должен наследовать класс Activity, а не ListActivity.

Класс TutViewerActivity требует аналогичного изменения. Его метод onCreate() теперь должен выглядеть следующим образом:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.tutview_fragment);
}

Шаг 6: Проверка вашего прогресса

Попробуйте запустить приложение сейчас. Вы заметите, что оно делает именно то, что и раньше делало. Не очень интересно, не так ли? Однако весь пользовательский интерфейс теперь выполняется с использованием фрагментов. Это позволит сделать следующие изменения, которые нужно сделать, чтобы плавно перестроить всё, поскольку мы добавляем новый макет, который объединит два фрагмента на больших дисплеях. Однако, как вы могли заметить, связь между фрагментами обрабатывается идентично тому, как мы взаимодействуем между activity. Фактически, мы использовали знание о том, что активность каждого фрагмента в паре оставалась неизменной. Этого не будет, если у нас есть одно действие, которое содержит и управляет обоими фрагментами. Давайте исправим это в первую очередь.

Шаг 7: Изменение связи для TutListFragment

Как вы поняли на шаге 3, запуск активности непосредственно из объекта TutListFragment больше не имеет смысла. Пользовательский интерфейс WebView может, по сути, быть частью того же самого действия, что и List - это наше решение для больших экранов. В этом случае мы просто хотим обновить URL-адрес WebView во втором фрагменте.

Чтобы сделать это изменение, нам нужно сделать несколько вещей. Во-первых, сделаем фрагменты независимыми от активности, в которой они находятся. Для этого добавьте интерфейс обработчика в класс TutListFragment:

1	public interface OnTutSelectedListener {
2	public void onTutSelected(Uri tutUri);
3	}

А затем активируйте его, обновив метод onListItemClickListener() следующим образом:

@Override
public void onListItemClick(ListView l, View v, int position, long id) {
    String[] links = getResources().getStringArray(R.array.tut_links);

    String content = links[position];
    tutSelectedListener.onTutSelected(Uri.parse(content));
}

Затем, класс TutListActivity реализует интерфейс OnTutSelectedListener, например:

public class TutListActivity extends Activity implements
        TutListFragment.OnTutSelectedListener {
...
@Override
public void onTutSelected(Uri tutUri) {
    Intent showContent = new Intent(getApplicationContext(),
            TutViewerActivity.class);
    showContent.setData(tutUri);
    startActivity(showContent);
}

Итак, теперь у нас есть функциональность, разделенная между фрагментом, который обрабатывает действия пользовательского интерфейса, и активность, которая может быть контроллером, передавая данные на следующую активность. Мы изменим метод onTutSelected() позже, чтобы решить, следует ли запускать новый экземпляр Activity или обновлять существующий экземпляр фрагмента.

Шаг 8: Изменение связи для TutViewerFragment

Теперь перейдем к классу TutViewerFragment, который также необходимо обновить. Вместо того, чтобы узнать, какой URL для загрузки, фрагмент будет ожидать, нужно узнать, какой URL-адрес загружается. Таким образом, мы можем обновлять WebView напрямую и не воссоздавать фрагмент с каждой загрузкой.

Во-первых, измените класс TutViewerFragment на новый метод под названием updateUrl():

public void updateUrl(String newUrl) {
    if (viewer != null) {
        viewer.loadUrl(newUrl);
    }
}

Затем удалите все функции из метода onCreateView(), за исключением вызова inflate(). Над классом TutViewerActivity, добавьте функциональные возможности для извлечения Intent и затем вызовите метод updateUrl(), например:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.tutview_fragment);

    Intent launchingIntent = getIntent();
    String content = launchingIntent.getData().toString();

    TutViewerFragment viewer = (TutViewerFragment) getFragmentManager()
            .findFragmentById(R.id.tutview_fragment);
    
    viewer.updateUrl(content);
}

На этом этапе поведение приложения остается неизменным. Однако фрагменты могут существовать в пределах одного и того же действия или отдельных без дополнительных изменений кода.

Шаг 9: Добавление макета с двумя фрагментами

Теперь давайте создадим макет с обоими фрагментами, для использования в определенных ситуациях. В папке layout-land (которую вам может понадобиться создать) добавьте копию файла tutlist_fragment.xml. Это обеспечит разную ориентацию на любом экране. Портретный режим останется неизменным. Отредактируйте файл, чтобы выглядеть следующим образом с обоими фрагментами:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <fragment
        android:name="com.mamlambo.tutorial.tutlist.TutListFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:id="@+id/tutlist_fragment"
        android:layout_weight="45">
    </fragment>
    <fragment
        android:name="com.mamlambo.tutorial.tutlist.TutViewerFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:id="@+id/tutview_fragment"
        android:layout_weight="55">
    </fragment>
</LinearLayout>

Это будет разделять экран по горизонтали между обоими фрагментами.

Шаг 10: Добавление динамического выбора

Теперь мы можем добавить в приложение некоторую простую логику для выбора между запуском нового действия (двух рабочий процесс экрана) и обновлением существующего фрагмента (рабочий процесс одного экрана).

Для этого обновите метод onTutSelected() в классе TutListActivity следующим образом:

@Override
public void onTutSelected(String tutUrl) {
    TutViewerFragment viewer = (TutViewerFragment) getFragmentManager()
            .findFragmentById(R.id.tutview_fragment);

    if (viewer == null || !viewer.isInLayout()) {
        Intent showContent = new Intent(getApplicationContext(),
                TutViewerActivity.class);
        showContent.setData(Uri.parse(tutUrl));
        startActivity(showContent);
    } else {
        viewer.updateUrl(tutUrl);
    }
}

Все это делает захват фрагмента и проверяет, является ли он частью существующего макета для Activity. Если нет, запускается активность просмотра, в противном случае вместо этого обновляется существующий фрагмент.

Шаг 11: Запуск приложения с добавлением новых фрагментов

На данный момент приложение будет работать в двух разных режимах: портрет не изменяется, а в ландшафте отображается ListView слева от WebView. На данный момент можно сделать несколько улучшений, но они относятся к настройке, оптимизации и других опций, в основном для красоты. Например, если вы находитесь в портретном режиме WebView и поворачиваете экран, в результате будет виден только экран WebView. Вы должны нажать назад, чтобы перейти к двойному виду. Оформление выходит за рамки данного руководства, но вы можете увидеть, как с помощью использования макетов и небольшого количества логики activity вы можете добиться мощных, но адаптивных экранов для различных устройств.

Заключение

API-интерфейс фрагмента помогает организовать компоненты интерфейса, так чтобы их можно было повторно использовать в разных activity. Таким образом, приложение может динамически корректировать свой макет и пользовательский интерфейсы с относительно небольшими усилиями в плане кодирования. Вы также видели, что приложение, которое создано с помощью фрагментов, легче реорганизовать. Еще лучше, чтобы любое приложение смогло использовать фрагменты через библиотеку совместимости, предоставляемую Google, которая совместима еще в Android 1.6.
Фрагментируйте пользовательский интерфейс приложений и создавайте удивительные пользовательские интерфейсы для каждого размера и формы экрана!

Об авторах

Разработчики мобильных устройств Лорен Дарси и Шейн Кондер совместно со своими коллегами разработали несколько книг по разработке Android: углубленную книгу по программированию под названием Разработка приложений для Android Wireless и самоучитель Сэма для разработки приложений Android за 24 часа. Пока они не начали писать, они разрабатывали мобильное ПО в своей компании и предоставляли консультационные услуги. Их можно найти написав по электронной почте androidwirelessdev+mt@gmail.com через свой блог на androidbook.blogspot.com и на Twitter @androidwireless.