Использование конструктора Xamarin.Android

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

Обзор

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

Совет

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

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

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

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

Visual Studio

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

Первым шагом является создание проекта Xamarin.Android. Запустите Visual Studio, нажмите кнопку "Создать проект..." и выберите шаблон приложения Android для Android > Для Visual C# > (Xamarin). Назовите новое приложение DesignerWalkthrough и нажмите кнопку "ОК".

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

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

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

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

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

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

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

Если панель элементов не отображается, щелкните вкладку "Панель элементов" слева. На панели элементов прокрутите вниз до раздела "Изображения и мультимедиа" и прокрутите вниз, пока не найдитеImageView:

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

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

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

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

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

Затем добавьте мини-приложение Text (Small) под мини-приложением Text (Large) :

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

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

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

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

1. Выберите ImageView.

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

3. Измените параметр wrap_content"Ширина макета" на:

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

При нажатии треугольника Width снова возвращается match_parentпараметр. Затем перейдите в область структуры документа и выберите корень LinearLayout:

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

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

Изменение интервала

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

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

Параметры нижней, левой, правой и верхней заполнения можно задать независимо, введя значения в поля "Паддинг вниз", "Закладка слева", "Отступ справа" и "Заполнение сверху" соответственно. Например, задайте поле "Заполнение слева" и "Отступ вниз", "Отступ вправо" и "Верхний" поля 10dp"Отступ вправо": 5dp

Затем настройте положение LinearLayout мини-приложения, содержащего два TextView мини-приложения. В структуре документа выберите linearLayout1. В окне "Свойства" введите margin поле поиска. Задайте для нижнего поля макета, левого поля макета и вверху 5dpполя макета. Задайте для поля макета право0dp:

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

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

1. ImageView Выберите область конструктора.

2. В разделе "Свойства" введите src в поле поиска.

3. Щелкните небольшую квадратную площадь справа от параметра свойства Src и выберите "Сброс".

Это удаляется android:src="@android:drawable/ic_menu_gallery" из исходного XML-кода для этого ImageView.

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

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

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

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

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

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

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

using Android.App;
using Android.Widget;
using Android.Views;
using Android.OS;
using Android.Support.V7.App;
using System.Collections.Generic;

namespace DesignerWalkthrough
{
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        List<ColorItem> colorItems = new List<ColorItem>();
        ListView listView;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);
            listView = FindViewById<ListView>(Resource.Id.myListView);

            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.DarkRed,
                ColorName = "Dark Red",
                Code = "8B0000"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.SlateBlue,
                ColorName = "Slate Blue",
                Code = "6A5ACD"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.ForestGreen,
                ColorName = "Forest Green",
                Code = "228B22"
            });

            listView.Adapter = new ColorAdapter(this, colorItems);
        }
    }

    public class ColorAdapter : BaseAdapter<ColorItem>
    {
        List<ColorItem> items;
        Activity context;
        public ColorAdapter(Activity context, List<ColorItem> items)
            : base()
        {
            this.context = context;
            this.items = items;
        }
        public override long GetItemId(int position)
        {
            return position;
        }
        public override ColorItem this[int position]
        {
            get { return items[position]; }
        }
        public override int Count
        {
            get { return items.Count; }
        }
        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var item = items[position];

            View view = convertView;
            if (view == null) // no view to re-use, create new
                view = context.LayoutInflater.Inflate(Resource.Layout.list_item, null);
            view.FindViewById<TextView>(Resource.Id.textView1).Text = item.ColorName;
            view.FindViewById<TextView>(Resource.Id.textView2).Text = item.Code;
            view.FindViewById<ImageView>(Resource.Id.imageView1).SetBackgroundColor(item.Color);

            return view;
        }
    }

    public class ColorItem
    {
        public string ColorName { get; set; }
        public string Code { get; set; }
        public Android.Graphics.Color Color { get; set; }
    }
}

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

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

Visual Studio для Mac

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. С выбранным параметром ImageView щелкните вкладку "Свойства ".

2. Под вкладкой "Свойства" нажмите кнопку "Макет".

3. Прокрутите вниз до ViewGroup и измените параметр wrap_contentнаWidth:

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

При нажатии треугольника Width снова возвращается match_parentпараметр. Затем перейдите в область структуры документа и выберите корень LinearLayout:

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

Изменение интервала

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

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

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

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

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

1. Выберите ImageView.

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

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

Это удаляется android:src="@android:drawable/ic_menu_gallery" из исходного XML-кода для этого ImageView.

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

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

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

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

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

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

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

using Android.App;
using Android.Widget;
using Android.Views;
using Android.OS;
using System.Collections.Generic;

namespace DesignerWalkthrough
{
    [Activity(Label = "@string/app_name", MainLauncher = true)]
    public class MainActivity : Activity
    {
        List<ColorItem> colorItems = new List<ColorItem>();
        ListView listView;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            listView = FindViewById<ListView>(Resource.Id.myListView);

            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.DarkRed,
                ColorName = "Dark Red",
                Code = "8B0000"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.SlateBlue,
                ColorName = "Slate Blue",
                Code = "6A5ACD"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.ForestGreen,
                ColorName = "Forest Green",
                Code = "228B22"
            });

            listView.Adapter = new ColorAdapter(this, colorItems);
        }
    }

    public class ColorAdapter : BaseAdapter<ColorItem>
    {
        List<ColorItem> items;
        Activity context;
        public ColorAdapter(Activity context, List<ColorItem> items)
            : base()
        {
            this.context = context;
            this.items = items;
        }
        public override long GetItemId(int position)
        {
            return position;
        }
        public override ColorItem this[int position]
        {
            get { return items[position]; }
        }
        public override int Count
        {
            get { return items.Count; }
        }
        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var item = items[position];

            View view = convertView;
            if (view == null) // no view to re-use, create new
                view = context.LayoutInflater.Inflate(Resource.Layout.list_item, null);
            view.FindViewById<TextView>(Resource.Id.textView1).Text = item.ColorName;
            view.FindViewById<TextView>(Resource.Id.textView2).Text = item.Code;
            view.FindViewById<ImageView>(Resource.Id.imageView1).SetBackgroundColor(item.Color);

            return view;
        }
    }

    public class ColorItem
    {
        public string ColorName { get; set; }
        public string Code { get; set; }
        public Android.Graphics.Color Color { get; set; }
    }
}

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

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

Итоги

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