ЛР. "Создать Project " и выберите шаблон приложения Android для Android visual C# (Xamarin)

Название	"Создать Project " и выберите шаблон приложения Android для Android visual C# (Xamarin)
Дата	15.05.2023
Размер	1.16 Mb.
Формат файла
Имя файла	ЛР.docx
Тип	Документы #1130980

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

Первым шагом является создание нового проекта Xamarin.Android. Запустите Visual Studio, нажмите кнопку "Создать Project..." и выберите шаблон приложения 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

Выберите ImageView.
В окно свойств введите ширину в поле поиска и найдите ширину макета.
Измените параметр "Ширина макета " на wrap_content:

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

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

Выбрав корень LinearLayout , вернитесь в область "Свойства ", введите ориентацию в поле поиска и найдите параметр "Ориентация ". Изменить ориентацию на horizontal:

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

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

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

В области "Свойства" введите поле поиска и введите padding10dp поле " Заполнение". Эти minHeightпараметры minWidthpadding добавляют заполнение вокруг всех сторон ImageView и вытянуть его по вертикали. Обратите внимание, что xml-код макета изменяется при вводе следующих значений:

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

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

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

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

ImageView Выберите область конструктора.
В разделе "Свойства" введите src в поле поиска.
Щелкните небольшой квадрат справа от параметра свойства 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 и замените его код следующим кодом:

C#Копировать

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 colorItems = new List();

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(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

{

List items;

Activity context;

public ColorAdapter(Activity context, List 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(Resource.Id.textView1).Text = item.ColorName;

view.FindViewById(Resource.Id.textView2).Text = item.Code;

view.FindViewById(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.

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