Файл: "Создать Project " и выберите шаблон приложения Android для Android visual C# (Xamarin).docx
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 03.12.2023
Просмотров: 68
Скачиваний: 1
и прокрутите вниз вниз, пока не найдите: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:
, Padding Left, Padding Right и Padding Top соответственно. Например, задайте для поля 5dp"Заполнение слева" и "Заполнение внизу", "Заполнение вправо" и "Заполнение сверху" в следующих полях10dp:
Затем измените положение мини-приложения LinearLayout , содержащего два TextView мини-приложения. В структуре документа выберите linearLayout1. В окне "Свойства" введите margin поле поиска. Задайте нижнее поле макета, левое поле макета и верхнюю часть5dpполя макета. Задайте для поля макета право:0dp
Удаление образа по умолчанию
ImageView Поскольку используется для отображения цветов (а не изображений), следующим шагом является удаление источника изображения по умолчанию, добавленного шаблоном.
-
ImageView Выберите область конструктора. -
В разделе "Свойства" введите src в поле поиска. -
Щелкните небольшой квадрат справа от параметра свойства Src и нажмите кнопку "Сбросить":
На этом этапе пользовательский интерфейс готов к использованию.Запуск приложенияОткройте файл 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
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
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
Activity context;
public ColorAdapter(Activity context, List
: 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
view.FindViewById
view.FindViewById
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.
Выполните сборку и запустите приложение. На следующем снимку экрана показан пример отображения приложения при запуске на устройстве:
