Макеты

В этом документе

  1. Запишите XML
  2. Загрузите ресурс XML
  3. Атрибуты
    1. ID
    2. Параметры макета
  4. Расположение макета
  5. Размер, отступы и поля
  6. Общие макеты
  7. Создание макетов с адаптером
    1. Заполнение представление адаптера с данными
    2. Обработка событий щелчка

Ключевые классы

  1. Просмотр
  2. ViewGroup
  3. ViewGroup.LayoutParams

См. также

  1. Создание простого пользовательского интерфейса

Макет определяет визуальную структуру пользовательского интерфейса, например пользовательский интерфейс для действия или виджета приложения. Вы можете объявить макет двумя способами:

  • Объявить элементы пользовательского интерфейса в XML . Android предоставляет простой словарь XML, который соответствует классам и подклассам View, например, для виджетов и макетов.
  • Создание экземпляров элементов макета во время выполнения . Ваше приложение может создавать объекты View и ViewGroup (и управлять их свойствами) программно.

Платформа Android дает вам гибкость в использовании одного или обоих этих методов для объявления пользовательского интерфейса вашего приложения и управления им. Например, вы можете объявить макеты вашего приложения по умолчанию в XML, включая элементы экрана, которые будут в них отображаться, и их свойства. Затем вы можете добавить в свое приложение код, который будет изменять состояние экранных объектов, в том числе объявленных в XML, во время выполнения.

  • Плагин ADT для Eclipse предлагает предварительный просмотр макета вашего XML — при открытом XML-файле выберите Вкладка Макет .
  • Вам также следует попробовать инструмент Hierarchy Viewer, для отладки макетов — он показывает значения свойств макета, рисует каркасы с индикаторами отступов/полей и полные визуализированные представления во время отладки на эмуляторе или устройстве.
  • Инструмент layoutopt позволяет быстро анализировать макеты и иерархии на предмет неэффективности или других проблем.

Преимущество объявления пользовательского интерфейса в XML заключается в том, что это позволяет лучше отделить представление приложения от кода, который контролирует его поведение. Описания пользовательского интерфейса являются внешними по отношению к коду вашего приложения, что означает, что вы можете изменять или адаптировать его без необходимости изменять исходный код и перекомпилировать. Например, вы можете создавать макеты XML для разных ориентаций экрана, разных размеров экрана устройства и разных языков. Кроме того, объявление макета в XML упрощает визуализацию структуры вашего пользовательского интерфейса, что упрощает отладку проблем. Таким образом, этот документ ориентирован на то, чтобы научить вас объявлять макет в XML. Если вы заинтересованы в создании экземпляров объектов View во время выполнения, обратитесь к ссылкам на классы ViewGroup и View ..

В общем, словарь XML для объявления элементов пользовательского интерфейса строго следует структуре и именованию классов и методов, где имена элементов соответствуют именам классов, а имена атрибутов соответствуют методам. Фактически, соответствие часто настолько прямое, что вы можете угадать, какой атрибут XML соответствует методу класса, или угадать, какой класс соответствует данному элементу xml. Однако учтите, что не весь словарный запас идентичен. В некоторых случаях есть небольшие различия в именах. Например, элемент EditText имеет атрибут text , который соответствует EditText.setText () .

Совет. Узнайте больше о различных типах макета в объектах CommonLayout. В учебном руководстве Hello Views также есть коллекция руководств по созданию различных макетов.

Написать XML

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

Каждый файл макета должен содержать ровно один корневой элемент, который должен быть объектом View или ViewGroup. После того как вы определили корневой элемент, вы можете добавить дополнительные объекты макета или виджеты в качестве дочерних элементов для постепенного построения иерархии представлений, определяющей ваш макет. Например, вот макет XML, в котором используется вертикальный LinearLayout для хранения TextView и Button :

  xml version = "1.0" encoding = "utf-8"?>      

После объявления макета в XML сохраните файл с расширением .xml в вашего проекта Android res/layout/, чтобы он правильно компилировался.

Дополнительная информация о синтаксисе XML-файла макета доступна в документе «Ресурсы макета».

Загрузить ресурс XML

Когда вы компилируете свое приложение, каждый файл макета XML компилируется в ресурс View . Вы должны загрузить ресурс макета из кода вашего приложения в реализации обратного вызова Activity.onCreate () . Сделайте это, вызвав setContentView () , передав ему ссылку на ваш ресурс макета в форме: R.layout.layout_file_name Например, если ваш макет XML сохранен как main_layout. xml , вы должны загрузить его для своей деятельности следующим образом:

 public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState);  setContentView (R.layout.main_layout);} 

Метод обратного вызова onCreate () в вашей Activity вызывается платформой Android при запуске вашей Activity (см. обсуждение жизненных циклов в документе «Действия»).

Атрибуты

Каждый объект View и ViewGroup поддерживает свой собственный набор атрибутов XML. Некоторые атрибуты являются специфическими для объекта View ( например, TextView поддерживает атрибут textSize ), но эти атрибуты также наследуются любыми объектами View, которые могут расширять этот класс. Некоторые из них являются общими для всех объектов View, поскольку они наследуются от корня Класс представления (например, атрибут id ). И другие атрибуты считаются «параметрами макета», которые являются атрибутами, которые описывают определенные ориентации макета объекта View, как определено родительским объектом ViewGroup этого объекта.

ID

Любой объект представления может иметь связанный с ним целочисленный идентификатор, чтобы однозначно идентифицировать представление в дереве. Когда приложение компилируется, на этот идентификатор ссылаются как на целое число, но идентификатор обычно назначается в XML-файле макета как строка в атрибуте id . Это атрибут XML, общий для всех объектов View (определяемых классом View ), и вы будете использовать его очень часто . Синтаксис идентификатора внутри тега XML:

 android: id = "@ + id/my_button" 

Символ at (@) в начало строки указывает, что синтаксический анализатор XML должен проанализировать и развернуть оставшуюся часть строки идентификатора и идентифицировать ее как ресурс идентификатора. Знак плюс (+) означает, что это новое имя ресурса, которое необходимо создать и добавить к нашим ресурсам (в файле R.java ). Платформа Android предлагает ряд других ресурсов ID. При ссылке на идентификатор ресурса Android знак плюса не требуется, но необходимо добавить пространство имен пакета android , например:

 android: id = "  @android: id/empty "

С пространством имен пакета android мы теперь ссылаемся на идентификатор из android.R класс ресурсов, а не класс локальных ресурсов.

Чтобы создавать представления и ссылаться на них из приложения, обычно используется следующий шаблон:

  1. Определите представление/виджет в файле макета и назначьте ему уникальный идентификатор:
      
  2. Затем создайте экземпляр объекта представления и захватите его из макета (обычно в onCreate () метод):
     Button myButton = (Button) findViewById (R.id. my_button); 

Определение идентификаторов для объектов представления важно при создании RelativeLayout . В относительном макете одноуровневые представления могут определять их макет относительно другого одноуровневого представления, на которое ссылается уникальный идентификатор.

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

Параметры макета

Атрибуты макета XML с именем layout_ something определяют параметры макета для View, которые подходят для ViewGroup, в которой он находится.

Каждый класс ViewGroup реализует вложенный класс, расширяющий ViewGroup.LayoutParams . Этот подкласс содержит типы свойств, которые определяют размер и положение для каждого дочернего представления в соответствии с группой представлений. Как видно на рисунке 1, группа parentview определяет параметры компоновки для каждого дочернего представления (включая группу дочерних представлений).

Рис. 1. Визуализация иерархии представлений с параметрами макета, связанными с каждым представлением.

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

Все группы представлений включают ширину и высоту ( layout_width и layout_height ), и каждое представление необходимо для их определения. ManyLayoutParams также включает необязательные поля и границы.

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

  • wrap_content указывает вашему представлению размер самого себя до размеров, требуемых его содержимое
  • fill_parent (переименованное в match_parent на уровне API 8) сообщает вашему представлению, что оно должно стать таким же большим, как и его родительская группа представлений позволит.

Как правило, не рекомендуется указывать ширину и высоту макета с использованием абсолютных единиц, таких как пиксели. Вместо этого лучше использовать относительные измерения, такие как независимые от плотности пиксельные единицы ( dp ), wrap_content или fill_parent . подход, потому что он помогает обеспечить правильное отображение вашего приложения на экранах различных размеров. Допустимые типы измерений определены в документе Доступные ресурсы.

Расположение макета

Геометрия вида — это прямоугольник. У представления есть местоположение, выраженное в виде пары координат left и top , и два измерения, выраженные как ширина и высота. Единица измерения местоположения и размеров — пиксель..

Можно получить местоположение представления, вызвав методы getLeft () и getTop () . Первый возвращает левую или X координату прямоугольника, представляющего вид. Последний возвращает координату вершины или Y прямоугольника, представляющего вид. Оба эти метода возвращают расположение представления относительно его родителя. Например, когда getLeft () возвращает 20, это означает, что представление расположено на 20 пикселей справа от левого края своего прямого родителя.

Кроме того, предлагается несколько удобных методов, позволяющих избежать ненужных вычислений, а именно getRight () и getBottom () . Эти методы возвращают координаты правого и нижнего краев прямоугольника, представляющего вид. Например, вызов getRight () аналогичен следующему вычислению: getLeft () + getWidth () .

Размер, отступы и поля

Размер представления выражается шириной и высотой. Представление фактически имеет две пары значений ширины и высоты.

Первая пара известна как измеренная ширина и измеренная высота . Эти размеры определяют, насколько большим должно быть представление в пределах своего родителя. Измеренные размеры можно получить, вызвав getMeasuredWidth () и getMeasuredHeight () .

Вторая пара известна просто как ширина и высота , или иногда ширина рисунка и высота рисунка . Эти размеры определяют фактический размер вида на экране во время рисования и после макета. Эти значения могут, но не обязательно, отличаться от измеренных ширины и высоты. Ширину и высоту можно получить, вызвав getWidth () и getHeight () .

Чтобы измерить свои размеры, представление принимает во внимание его заполнение. Заполнение выражается в пикселях для левой, верхней, правой и нижней частей представления. Padding можно использовать для смещения содержимого представления на определенное количество пикселей. Например, левое заполнение 2 сдвинет содержимое представления на 2 пикселя вправо от левого края. Заполнение можно задать с помощью метода setPadding (int, int, int, int) и запросить путем вызова getPaddingLeft () , getPaddingTop ( ) , getPaddingRight () и getPaddingBottom () .

Несмотря на то, что представление может определять отступы, оно не обеспечивает никакой поддержки полей. Однако группы просмотра предоставляют такую ​​поддержку. Обратитесь к ViewGroup и ViewGroup.MarginLayoutParams для получения дополнительной информации.

Дополнительные сведения о размерах см. в разделе «Значения размеров».

Общие макеты

Каждый подкласс класса ViewGroup предоставляет уникальный способ отображения представлений, которые вы в него вкладываете. Ниже приведены некоторые из наиболее распространенных типов макетов, встроенных в платформу Android..

Примечание. Хотя вы можете вложить один или несколько макетов в другой макет для достижения дизайна пользовательского интерфейса, вы должны стремиться к тому, чтобы иерархия макетов была как можно более мелкой. Ваш макет отрисовывается быстрее, если в нем меньше вложенных макетов (иерархия с широким представлением лучше, чем иерархия с глубоким представлением).

FrameLayout

FrameLayout — это простейший тип Layoutobject. По сути, это пустое пространство на экране, которое вы можете позже заполнить одним объектом — например, изображением, которое вы меняете местами. Все дочерние элементы FrameLayout закреплены в верхнем левом углу экрана; вы не можете указать другое местоположение для дочернего представления. Последующие дочерние представления будут просто отрисованы поверх предыдущих, частично или полностью скрывая их (если только новый объект не является прозрачным).

->

Linear Layout

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

Относительный макет

Позволяет указать расположение дочерних объектов относительно друг друга (дочерний объект A слева от дочернего элемента B) или родительского объекта (выровнен по верхнему краю родительский).

Вкладки

Предоставляет список выбора вкладок, который отслеживает щелчки и позволяет приложению изменять экран при каждом нажатии вкладки.

Макет таблицы

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

->

Web View

Отображает веб-страницы.

Создание макетов с помощью адаптера

Когда контент для вашего макета динамический или нет предопределено, вы можете использовать макет, который подклассы AdapterView , чтобы заполнить макет представлениями во время выполнения. Подкласс класса AdapterView использует Adapter для привязки данных к своему макету. Адаптер действует как посредник между источником данных и макетом AdapterView Adapter извлекает данные (из источник, такой как массив или запрос к базе данных) и преобразует каждую запись в представление, которое можно добавить в макет AdapterView .

Общие макеты, поддерживаемые адаптером включают:

Просмотр списка

Отображает прокрутка списка в один столбец.

Просмотр в виде таблицы

Отображает скользящую сетку столбцов и строк.

Заполнение представления адаптера данными

Вы можете заполнить AdapterView , например ListView или GridView путем привязки экземпляра AdapterView к Adapter , который извлекает данные из внешнего источника и создает View , представляющий каждую запись данных.

Android предоставляет несколько подклассов Adapter , которые полезны для получения различных типов данных и создание представлений для AdapterView . Два наиболее распространенных адаптера:

ArrayAdapter
Используйте этот адаптер, если источником данных является массив. По умолчанию ArrayAdapter создает представление для каждого элемента массива, вызывая toString () для каждого элемента и помещая содержимое в TextView код>.

Например, если у вас есть массив строк, который вы хотите отобразить в ListView , инициализируйте новый ArrayAdapter с помощью конструктора, чтобы указать макет для каждой строки и массива строк:

 ArrayAdapter adapter = new ArrayAdapter  (this, android.R.layout.simple_list_item_1, myStringArray); 

Аргументами для этого конструктора являются:

  • Ваше приложение Context
  • Макет, содержащий TextView для каждой строки в массиве
  • Строковый массив

Затем просто вызовите setAdapter () в вашем ListView :

 ListView listView = (ListView) findViewById (R.id.listview); listView.setAdapter (адаптер); 

Чтобы настроить внешний вид каждого элемента, вы можете переопределить метод toString () для объектов в вашем массиве. Или, чтобы создать представление для каждого элемента, отличного от TextView (например, если вам нужен ImageView для каждого элемента массива), расширьте ArrayAdapter класс и переопределите getView () , чтобы вернуть нужный тип представления для каждого элемента.

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

 String [  ] fromColumns = {ContactsContract.Data.DISPLAY_NAME, ContactsContract.CommonDataKinds.Phone.NUMBER}; int [] toViews = {R.id.display_name, R.id. phone_number}; 

При создании экземпляра SimpleCursorAdapter передайте макет для использования результата foreach, Cursor , содержащий результаты, и эти два массива:

 SimpleCursorAdapter adapter = new SimpleCursorAdapter (this, R.layout.person_name_and_number, cursor, fromColumns, toViews, 0); ListView listView = getListView (); listView.setAdapter (адаптер)  ; 

SimpleCursorAdapter затем создает представление для каждой строки в Cursor , используя предоставленный макет, вставляя каждый fromColumns в соответствующее представление toViews .

.

Если в течение жизненного цикла вашего приложения , вы меняете базовые данные, которые читает ваш адаптер, вы должны вызвать notifyDataSetChanged () . Это уведомит прикрепленное представление о том, что данные были изменены, и оно должно обновиться.

Обработка событий щелчка

Вы можете реагировать на события щелчка по каждому элементу в AdapterView путем реализации интерфейса AdapterView.OnItemClickListener . Например:

//Создаем объект обработки сообщений как анонимный класс. Private OnItemClickListener mMessageClickedHandler = new OnItemClickListener () {public void onItemClick (родительский адаптер AdapterView, View v, int position, long id) { //Что-нибудь делаем в ответ на щелчок}}; listView.setOnItemClickListener (mMessageClickedHandler);  

Оцените статью
Botgadget.ru
Добавить комментарий