Дизайн пользовательского интерфейса Android: создание приложения ListView

ListView — это один из наиболее полезных элементов управления представлением, доступных на платформе Android для отображения переменных объемов данных. В этом уроке Mobiletuts + мы покажем вам, как использовать ListView для просмотра списка статей!

За последние несколько месяцев вы видели много учебных пособий по различным элементам управления макетом. Вы будете использовать несколько из них в сочетании с ListView в сегодняшнем уроке. Само приложение будет очень простым: оно будет отображать список заголовков статей, которые при нажатии отображают содержание статьи. Темп этого урока будет быстрее, чем в некоторых наших начальных уроках; вам, возможно, придется ознакомиться с некоторыми другими нашими учебниками на этом сайте или даже в справочнике по API Android, если вы не знакомы с основными элементами управления или концепциями Android. Окончательный код с открытым исходным кодом доступен для скачивания на хостинге Google Code .

Шаг 0: Создание проекта

Создайте новый проект Android в Eclipse. Мы назвали наш MT-List с начальным действием TutListActivity. Это действие должно расширять класс ListActivity, который является специальным классом Activity, который помогает управлять элементом управления ListView. Мы используем целевой уровень API 10 (Android 2.3.3).

Шаг 1: Разработка экрана списка

На самом деле, здесь очень мало дизайнерских работ. Элемент управления ListView состоит из повторяющихся элементов, каждый из которых имеет одинаковый макет (шаблон для элемента). Мы хотим отобразить список заголовков статей. Каждый заголовок будет отдельным элементом в ListView. Следовательно, шаблон для каждого элемента списка должен иметь только элемент управления TextView. Добавьте новый файл ресурсов макета в ваш проект с именем list_item.xml, который представляет макет шаблона для каждого элемента в списке. В этом случае это должно выглядеть так:

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

Шаг 2. Заполнение ListView данными

Элементы управления ListView предназначены для загрузки данных из источника данных. Адаптер можно использовать для чтения из базы данных, массива или другого источника данных. Мы будем использовать реализацию массива для этого приложения. Позже вы всегда можете заменить массив каким-либо источником данных в реальном времени. Создайте два ресурса строкового массива в своем проекте (вы можете добавить их в strings.xml или в отдельный файл arrays.xml, на ваш выбор). Назовите один массив «tut_titles», а другой — «tut_links». Заполните массивы действительными заголовками и действительными URL-адресами с веб-сайта Mobiletuts +. Вот наши массивы:

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

Шаг 3: Адаптация данных к ListView

Теперь, когда у приложения есть данные, пришло время их отобразить. Вернувшись в TutListActivity.java, измените метод onCreate() чтобы использовать метод setListAdapter() для загрузки данных. В отличие от обычных действий, ListActivity не требует использования setContentView() для случаев, когда все действие является просто ListView. Когда это будет сделано, вся ваша ListActivity теперь будет выглядеть так:

  открытый класс TutListActivity расширяет ListActivity {
     @Override
     public void onCreate (BundlevedInstanceState) {
         super.onCreate (savedInstanceState);

         setListAdapter (ArrayAdapter.createFromResource (getApplicationContext (),
                 R.array.tut_titles, R.layout.list_item));
     }
 } 

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

Шаг 4: Обработка щелчков элементов ListView

Обработка щелчков мышью по элементам в ListView осуществляется аналогично другим объектам View: с помощью слушателя. В этом случае нас интересует OnTimeClickListener . Возможно, вы заметили, что мы ни разу не имели дело с объектом ListView напрямую. Сейчас самое время. В ListActivity просто вызовите метод getListView() чтобы получить ListView, а затем вызовите метод setOnItemClickListener() и реализуйте все это за один раз:

  getListView (). setOnItemClickListener (new OnItemClickListener () {

     @Override
     public void onItemClick (AdapterView <?> parent, View view,
             int position, long id) {
         // TBD
     }
 }); 

Метод onItemClick() будет вызываться каждый раз, когда пользователь нажимает на определенный элемент в ListView. Удобно, что он передает несколько полезных параметров, один из которых нам понадобится для запуска действия зрителя. Подождите, какая активность зрителя?

Шаг 5: Создание просмотра действий

Хороший вопрос. Давайте создадим активность зрителя сейчас! Это действие будет использоваться для отображения содержимого учебника для пользователя. Создайте новый класс, расширив Activity и назовите его TutViewerActivity.java. Создайте для него файл ресурсов макета, который содержит ровно один элемент: элемент управления WebView. Файл макета должен выглядеть так:

В onCreate() класса TutViewerActivity вызовите метод setContentView() и передайте этот макет. Наконец, не забудьте добавить действие в файл AndroidManifest.xml.

Шаг 6: Запуск Подробной Деятельности

На мгновение переключите свое внимание на TutListActivity. Давайте посмотрим, что нам нужно сделать, чтобы запустить просмотрщик Activity, с соответствующей ссылкой на статью. Внутри onItemClick() позиция элемента, по которому щелкнули, передается как значение типа int . Это именно то, что нам нужно для доступа к массиву ссылок на статьи.

Строковые значения в массиве ссылок являются URL-адресами. Удобный способ передать URL другому действию — добавить Uri в Intent с помощью метода setData() . Вот окончательная реализация onItemClick() которая запускает действие средства просмотра, передавая соответствующий URL:

  @Override
 public void onItemClick (AdapterView <?> parent, View view,
         int position, long id) {
     Строковый контент = ссылки [позиция];
     Intent showContent = new Intent (getApplicationContext (),
             TutViewerActivity.class);
     showContent.setData (Uri.parse (содержание));
     startActivity (showContent);
 } 

Если вы просто onCreate() это в конец метода onCreate() , вы заметите, что переменная links еще не определена. Поскольку он будет использоваться в классе OnItemClickListener, переменная должна быть конечным значением, например:

  final String [] links = getResources (). getStringArray (R.array.tut_links); 

Эта строка должна быть помещена перед определением OnItemClickListener. Да, вы могли бы сделать его переменной-членом, не будучи окончательным. Для более сложного случая это может даже понадобиться. Но в этом случае мы можем фактически сохранить весь код внутри метода.

На этом этапе, если вы запустите приложение, вы получите пустой белый экран просмотра. Действие запущено правильно, но нам нужно подключить действие просмотра, чтобы загрузить URL в элемент управления WebView.

Шаг 7: Загрузка URL

Верните свое внимание на TutViewerActivity.java. После setContentView() добавьте код, чтобы извлечь Uri из переданного Intent и преобразовать его в переменную String. Затем добавьте вызов в метод loadUrl() класса WebView. Весь класс TutViewerActivity теперь будет выглядеть так:

  открытый класс TutViewerActivity расширяет Activity {
     @Override
     public void onCreate (BundlevedInstanceState) {
         super.onCreate (savedInstanceState);
         setContentView (R.layout.tut_view);

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

         Средство просмотра WebView = (WebView) findViewById (R.id.tutView);
         viewer.loadUrl (содержание);
     }
 } 

Запустите приложение сейчас. Это работает? Еще не совсем! И последняя деталь: вам нужно добавить интернет-разрешение в файл AndroidManifest.xml. Теперь запустите приложение. Теперь вы увидите, что реализация работает:

Шаг 8: Совершенствование опыта (необязательно)

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

• Установка начального увеличения для просмотра в браузере для дальнейшего уменьшения
• Настройка WebView для большего контроля над просмотром веб-страниц
• Загрузка списка учебников динамически, а не через статический массив
• Добавление необычных визуальных атрибутов в ListView
• Лучшее использование больших экранов (то есть фрагментов)
• Добавление дополнительной информации к элементам ListView: субтитры, уровни сложности, значки, индикаторы «чтение», избранное и т. Д.

Другие учебники по Android на этом сайте научат вас, как выполнять многие из этих дополнительных функций. Других вам может понадобиться узнать самим или спросить в комментариях!

Вывод

Виджет ListView — это быстрый способ упорядочить данные в виде списка на экране. Мы только поцарапали поверхность элемента управления ListView в этом уроке. Однако вы узнали основы: создания элементов списка, работы с адаптерами данных и обработки щелчков элементов списка.

Об авторах

Разработчики мобильных приложений Лорен Дарси и Шейн Кондер являются соавторами нескольких книг по разработке Android: углубленная книга по программированию под названием « Разработка беспроводных приложений для Android» и « Самс научи себя разрабатывать приложения для Android за 24 часа» . Когда они не пишут, они тратят свое время на разработку мобильного программного обеспечения в своей компании и оказание консультационных услуг. С ними можно связаться по электронной почте [email protected] , через их блог на androidbook.blogspot.com и в Twitter @androidwireless .