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

Первым шагом является создание нового проекта 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

---

1. 
   Выберите ImageView.
   
2. 
   В окно свойств введите ширину в поле поиска и найдите ширину макета.
   
3. 
   Измените параметр "Ширина макета " на 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 Поскольку используется для отображения цветов (а не изображений), следующим шагом является удаление источника изображения по умолчанию, добавленного шаблоном.

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 и замените его код следующим кодом:

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.

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

---

Смотрите также файлы

• Виды и способы закаливания.docx

• Тк 10. Итоговое контрольное задание по темам Раздела I.docx

• Тест по обществознанию Демографическая ситуация в современной России и проблемы неполной семьи 11 класс Часть 1 1.docx

• Добрый день, дорогие дети, учителя и родители Мы приглашаем вас на праздник четвероклассников. До свиданья, начальная школа.docx

• Техника ауіасіздігі ережесі бойынша Нсаудан ткізу жне оны тіркеу Журналы Сыныпты мекенжайы19 Информатика кабинеті.docx