Xamarin android designer не работает

Использование Xamarin. Android Designer

Эта статья представляет собой пошаговое руководство по Xamarin. Android Designer. Здесь показано, как создать пользовательский интерфейс для небольшого приложения браузера цвета. Этот пользовательский интерфейс полностью создан в конструкторе.

Обзор

Пользовательские интерфейсы Android можно создавать декларативно с помощью XML-файлов или программно, путем написания кода. Xamarin. Android Designer позволяет разработчикам создавать и изменять декларативные макеты визуально, не требуя ручного редактирования XML-файлов. Конструктор также предоставляет отзыв в режиме реального времени, позволяющий разработчикам оценивать изменения пользовательского интерфейса без необходимости повторного развертывания приложения на устройстве или в эмуляторе. Эти функции конструктора могут ускорить разработку пользовательского интерфейса Android невероятно. В этой статье показано, как использовать Xamarin. Android Designer для визуального создания пользовательского интерфейса.

Новые выпуски Visual Studio поддерживают открытие XML-файлов в Android Designer.

Android Designer поддерживает как файлы AXML, так и XML.

Пошаговое руководство

Цель этого пошагового руководства — использовать Android Designer для создания пользовательского интерфейса для примера приложения браузера цветов. Приложение браузера цветов отображает список цветов, их имена и значения RGB. Вы узнаете, как добавлять мини-приложения в область конструктора , а также как визуально размещать эти мини-приложения. После этого вы узнаете, как изменить мини-приложения в интерактивном режиме на область конструктора или с помощью панели свойств конструктора. Наконец, вы увидите, как выглядит дизайн при запуске приложения на устройстве или в эмуляторе.

Создание нового проекта

Первым шагом является создание проекта Xamarin. Android. запустите Visual Studio, щелкните создать Project. и выберите шаблон приложения android для android на Visual C# (Xamarin) . Назовите новое приложение десигнервалксраугх и нажмите кнопку ОК.

В диалоговом окне новое приложение Android выберите пустое приложение и нажмите кнопку ОК.

Добавление макета

Следующим шагом является создание элемент LinearLayout , который будет содержать элементы пользовательского интерфейса. Щелкните правой кнопкой мыши ресурсы и макет в Обозреватель решений и выберите команду Добавить новый элемент. . В диалоговом окне Добавление нового элемента выберите Макет Android. Присвойте файлу имя list_item и нажмите кнопку Добавить:

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

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

Следующим шагом является создание пользовательского интерфейса для приложения браузера цветов в рамках этого LinearLayout .

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

Если панель элементов не отображается, щелкните вкладку область элементов слева. В области элементовпрокрутите вниз до раздела мультимедиа с изображениями и прокрутите вниз, пока не обнаружите :

Кроме того, можно ввести имажевиев в строку поиска, чтобы найти :

Перетащите его ImageView на область конструктора ( ImageView будет использоваться для вывода образца цвета в приложении браузера цветов):

Затем перетащите мини-приложение LinearLayout (Vertical) из LinearLayout (Vertical) в конструктор. Обратите внимание, что синий контур указывает границы добавленного объекта LinearLayout . Структура документа показывает, что он является дочерним элементом , расположенным в папке imageView1 (ImageView) :

При выборе ImageView в конструкторе синяя структура перемещается вокруг ImageView . Кроме того, выделение перемещается в imageView1 (ImageView) imageView1 (ImageView) :

Затем перетащите мини-приложение Text (Large) из Text (Large) в только что добавленное LinearLayout . Обратите внимание, что в конструкторе используются зеленые выделения, указывающие, куда будет вставлен новый мини-приложение:

Затем добавьте мини-приложение Text (Small) под Text (Large) графическим элементом:

На этом этапе область конструктора должна выглядеть как на следующем снимке экрана:

Если эти два textView мини-приложения не находятся внутри linearLayout1 , их можно перетащить linearLayout1 в textView и разместить их так, чтобы они отображались, как показано на предыдущем снимке экрана (с отступом в разделе linearLayout1 ).

Упорядочение пользовательского интерфейса

Следующим шагом является изменение пользовательского интерфейса для показа ImageView слева, при этом два TextView мини-приложения располагаются справа от ImageView .

В окно свойстввведите Width в поле поиска и найдите ширину макета.

Измените значение ширины макета на :

Другой способ изменить этот Width параметр — щелкнуть треугольник в правой части мини-приложения, чтобы переключить его ширину на wrap_content :

Если щелкнуть треугольник еще раз, Width параметр будет возвращен в значение match_parent . Затем перейдите на панель Структура документа и выберите корень :

Выбрав корневой элемент LinearLayout , вернитесь на панель LinearLayout , введите Orientation в поле поиска и найдите параметр ориентации . Изменить ориентацию на :

На этом этапе область конструктора должна выглядеть примерно так, как показано на снимке экрана ниже. Обратите внимание, что TextView мини-приложения были перемещены справа от ImageView :

Изменение расстояния

Следующим шагом является изменение параметров заполнения и полей в пользовательском интерфейсе, чтобы предоставить больше пространства между мини-приложениями. Выберите элемент в ImageView области конструктора. В области Свойства введите в поле поиска. Введите 70dp для 70dp и 50dp 50dp :

В области Свойства введите в поле поиска и введите 10dp для 10dp . Эти minHeight minWidth Параметры и padding настройки добавляют отступ вокруг всех сторон элемента ImageView и елонгате его по вертикали. Обратите внимание, что XML макета изменяется при вводе этих значений:

Параметры «снизу», «слева», «справа» и «верхнее заполнение» можно задавать независимо, вводя значения в поля » отступ снизу«, » Отступ слева«, » справа» и » Заполнение» верхних полей соответственно. Например, задайте для поля левое поле значение , а для полей Отступ снизу, Отступ справаи Заполнение верхнего поля —:

Затем измените расположение мини-приложения LinearLayout , которое содержит два мини-приложения TextView . В структуре документавыберите . В окне Свойства введите в поле поиска. Задать расположение поля макета снизу, левое поле макетаи поле макета сверху . Задайте для поля макета право :

Удаление изображения по умолчанию

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

Выберите элемент в ImageView ImageView .

В окне Свойствавведите src в поле поиска.

Щелкните маленький квадрат справа от параметра свойства src и выберите сбросить.

Это приведет android:src=»https://docs.microsoft.com/ru-ru/xamarin/android/user-interface/android-designer/@android:drawable/ic_menu_gallery» к удалению из исходного XML-файла ImageView .

Добавление контейнера ListView

Теперь, когда макет list_item определен, следующим шагом является добавление в основной макет. Он ListView будет содержать список ListView .

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

По умолчанию параметру присваивается ListView Id значение @+id/listView1 . Пока listView1 все еще выбрано в listView1 , откройте панель Свойства , щелкните упорядочение пои выберите Категория. Откройте главное, выберите свойство ID и измените его значение на :

На этом этапе пользовательский интерфейс готов к использованию.

Запуск приложения

Откройте MainActivity. CS и замените его код следующим:

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

Создайте и запустите приложение. На следующем снимке экрана представлен пример того, как приложение отображается при запуске на устройстве.

Создание нового проекта

Первым шагом является создание проекта Xamarin. Android.

запустите Visual Studio для Mac и нажмите кнопку создать Project. . Выберите шаблон приложения Android и нажмите кнопку Далее.

Назовите новое приложение десигнервалксраугх. В разделе целевые платформывыберите Последняя и наибольшая и нажмите кнопку Далее.

На следующем экране диалогового окна нажмите кнопку создать.

Добавление макета

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

в Visual Studio для Mac щелкните правой кнопкой мыши ресурсы и макет на панели решения и выберите добавить новый файл. . В диалоговом окне новый файл выберите Макет Android. Присвойте файлу имя list_item и нажмите кнопку создать.

После добавления этого файла на область конструктора отображается новый макет list_item (если отображается сообщение, этот проект содержит ресурсы, которые не были успешно скомпилированы, может быть затронуто подготовка к просмотру, щелкните собрать сборку все , чтобы построить проект):

Щелкните вкладку источник в нижней части конструктора, чтобы просмотреть источник XML для этого макета. Если щелкнуть вкладку Структура документа справа, будет показано, что в данный момент макет содержит одно мини-приложение элемент LinearLayout :

Следующим шагом является создание пользовательского интерфейса для приложения браузера цветов.

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

Щелкните вкладку конструктор в нижней части экрана, чтобы вернуться в область конструктора. В области элементов справа перейдите к разделу image Media и найдите :

Кроме того, можно ввести имажевиев в строку поиска, чтобы найти :

Перетащите его ImageView на ImageView ( ImageView будет использоваться для вывода образца цвета в приложении браузера цветов):

Затем перетащите мини-приложение LinearLayout (Vertical) из LinearLayout (Vertical) в область конструктора. Обратите внимание, что синий контур указывает границы добавленного объекта LinearLayout . Структура документа показывает, что он является дочерним элементом , расположенным ниже imageView1 (ImageView) :

При выборе ImageView в конструкторе синяя структура перемещается вокруг ImageView . Кроме того, выделение перемещается в imageView1 (ImageView) imageView1 (ImageView) :

Затем перетащите мини-приложение Text (Large) из Text (Large) в только что добавленное LinearLayout . Обратите внимание, что при перетаскивании указателя мыши на область конструктораон выделяет, куда будет вставлено новое мини-приложение. Мини-приложение Text (Large) должно находиться внутри linearLayout1 , как показано здесь:

Затем добавьте мини-приложение Text (Small) под Text (Large) графическим приложением. На этом этапе область конструктора должен выглядеть примерно следующим снимком экрана:

Если эти два textView мини-приложения не находятся внутри linearLayout1 , их можно перетащить linearLayout1 в textView , чтобы они отображались так, как показано на предыдущем снимке экрана (с отступом в разделе linearLayout1 ).

Упорядочение пользовательского интерфейса

Следующим шагом является изменение пользовательского интерфейса для показа ImageView слева, при этом два TextView мини-приложения располагаются справа от ImageView .

Выбрав нужный ImageView пункт, перейдите на вкладку ImageView .

Сразу под вкладкой Свойства нажмите кнопку Макет.

Прокрутите вниз до пункта виевграуп и измените значение параметра на wrap_content :

Другой способ изменить этот Width параметр — щелкнуть треугольник в правой части мини-приложения, чтобы переключить его ширину на wrap_content :

Если щелкнуть треугольник еще раз, Width параметр будет возвращен в значение match_parent . Затем перейдите на панель Структура документа и выберите корень :

Выбрав корень LinearLayout , вернитесь на вкладку LinearLayout и щелкните мини-приложение. Измените Orientation значение параметра на horizontal , как показано ниже. На этом этапе область конструктора должен выглядеть примерно так, как показано на снимке экрана ниже. Обратите внимание, что TextView мини-приложения были перемещены справа от ImageView :

Изменение расстояния

Следующим шагом является изменение настроек заполнения и полей в пользовательском интерфейсе, чтобы предоставить больше пространства между мини-приложениями. Выберите ImageView и перейдите на вкладку ImageView в разделе Свойства. Измените значение Min Width на 50dp , на Min Height 70dp , и на Padding 10dp . Это применяет заполнение вокруг всех сторон ImageView и елонгатес его по вертикали:

Параметры верхнего, правого, нижнего и левого отступов могут быть заданы независимо путем ввода значений в Top поля,, Right Bottom и Left заполнения соответственно. Например, задайте для Left параметра Padding значение, 5dp а для Top Right Bottom заполнения значений — 10dp . Обратите внимание, что Padding параметр изменяется на список следующих значений с разделителями-запятыми:

Затем измените расположение мини-приложения LinearLayout , которое содержит два мини-приложения TextView . В структуре документавыберите . На панели Свойства перейдите на вкладку Макет . Прокрутите вниз до раздела виевграуп и задайте для полей,, и значение Bottom 5dp , 5dp , 0dp и 5dp соответственно:

Удаление изображения по умолчанию

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

Перейдите на вкладку мини -приложение в разделе свойства.

Очистите Src параметр, чтобы он был пустым:

Это приведет android:src=»https://docs.microsoft.com/ru-ru/xamarin/android/user-interface/android-designer/@android:drawable/ic_menu_gallery» к удалению из исходного XML-файла ImageView .

Добавление контейнера ListView

Теперь, когда макет list_item определен, следующим шагом является добавление в основной макет. Он ListView будет содержать список ListView .

В Обозреватель решенийоткройте ресурсы/макет/Main. axml. Щелкните Button мини-приложение (если оно есть) и удалите его. На панели элементоввыберите мини- приложение и перетащите его на область конструктора. ListView В конструкторе будет пустым, за исключением синих линий, в которых отображается граница, если она выбрана. Можно просмотреть структуру документа , чтобы убедиться, что ListView добавлен правильно:

По умолчанию параметру присваивается ListView Id значение @+id/listView1 . Пока listView1 все еще выбрано в listView1 , откройте панель Свойства , щелкните упорядочение пои выберите Категория. Откройте главное, выберите свойство ID и измените его значение на :

На этом этапе пользовательский интерфейс готов к использованию.

Запуск приложения

Откройте MainActivity. CS и замените его код следующим:

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

Создайте и запустите приложение. На следующем снимке экрана представлен пример того, как приложение отображается при запуске на устройстве.

Итоги

в этой статье описывается процесс использования Xamarin. Android Designer в Visual Studio для создания пользовательского интерфейса для базового приложения. Было продемонстрировано, как создать интерфейс для одного элемента в списке и продемонстрировать, как добавлять мини-приложения и размещать их визуально. Также было объяснено, как назначать ресурсы, а затем задавать различные свойства для этих мини-приложений.

Источник