Исходник игры на Xamarin.Android
Исходник игры для Android написан на языке C# на платформе Xamarin.Android. Исходник представляет игру Мозаика, где картинки можно передвигать и таким образом составлять красивые узоры. Xamarin надстройка для среды .NET позволяющая создавать Android приложения на языке C# с использованием всех возможностей популярного языка. Xamarin.Android обеспечивает получить полный доступ к нативному (родному) Android SDK без каких либо ограничений. Программирование приложений на языке C# с помощью Xamarin интуитивно понятно и позволяет быстро перестраиваться в программировании самых различных десктоповых и веб приложений для Windows, Lunix, Android, iOS.
Интерфейс на Android.RelativeLayout
Компоновка элементов интерфейса игры Мозаика базируется на макете RelativeLayout, удобном контейнере для размещения элементов и групп элементов. Использование RelativeLayout предоставляет возможность создавать позиции элементов в точных единицах. Контейнер хоть и носит название относительный, но позволяет использовать абсолютные координаты для позиционирования элементов. В данном исходнике это и было использовано. Макет RelativeLayout создаётся в XML дизайнере, а дочерние элементы, картинки упакованные в ImageView, создаются и добавляются на поле макета программным способом. Перед показом игрового поля кратковременно демонстрируется экранная заставка.
Активные элементы на Android.ImageView
Для управления частичками Мозаики, файлы картинок упакованы в контейнер Android.ImageView. Такая оболочка для изображений имеет много полезных свойств. При помощи ImageView можно позиционировать изображение на макете по пиксельным координатам, масштабировать по горизонтали и вертикали, добавлять цветовую маску для вложенного изображения и др. Методы унаследованные от родительского класса View SetY(…), SetX(…) размещают контейнеры картинок по осям X и Y в любом месте родительского макета RelativeLayout в пиксельных единицах. Используя пространственные координаты, можно эффективно управлять положением картинок на экране смартфона или планшета. Представления ImageView создаются и добавляются в родительский контейнер программным способом. Картинки для наполнения ImageView загружаются из ресурсов Drawable и далее программно каждая в свое представление.
Получение размеров RelativeLayout
Получить программно ширину и высоту контейнера RelativeLayout во время создания или восстановления невозможно. В течение работы OnCreate(...), OnStart(..), OnResume(...) создаются только объекты визуальных классов, при этом все методы и свойства измерения на выходе выдают нулевые значения. Фактически они еще не «знают» как расположит их на экране родительский контейнер. Надежное получение ширины и высоты макета для размещения элементов ImageView гарантированно после полного создания дерева представлений. К сожалению, подобно программированию в Windows, в Android нет событий OnShow(), где можно перед показом элемента (окна) узнать его размеры. Но выход всегда есть: можно запросить размеры интересующего нас объекта RelativeLayout в отложенной задаче, которая получает доступ к интересуемым размерам после завершения подготовки пользовательского интерфейса.
// Добавляем в поток интерфейса асинхронную задачу прорисовки
// картинок только после получения действительных
// размеров главного макета-контейнера.
// Задача исполнится после готовности
// пользовательского интерфейса.
layoutMain.Post(() =>
{
ComputePos(layoutMain);
ShufflePositions();
InitImages(layoutMain);
}
);
// -- Аналог кода на Java --
view.Post(new Runnable() {
@Override
public void run() {
view.getHeight();
}
});
// --
// -- Аналог кода на Kotlin --
view.Post(Runnable { view.getHeight() })
// --
Подгонка размеров ImageView для заполнения экрана
Размеры представлений ImageView, а значит и картинок в них, высчитываются автоматически при визуализации MainActivity (Activity это единица экрана с пользовательским интерфейсом, Activity в приложении может быть несколько). Изображения загруженные в ImageView квадратные, а физические размеры высчитываются в пикселях. За основу расчетов, в данном исходнике игры, принята ширина главного макета в вертикальном положении. По вертикали картинки располагаются на экране до максимального заполнения. При загрузке на смартфоне, планшете или другом Android устройстве с различными размерами дисплеев визуально получается гармоничное заполнение разноцветными квадратиками.
// Вычисление позиций и размеров квадратиков
void ComputePos(RelativeLayout layoutMain)
{
int widthLayout = layoutMain.Width;
int heightLayout = layoutMain.Height;
// Размер картинок высчитывается точно для горизонтали,
// чтобы гармонично смотрелось по ширине.
int widthRect = widthLayout / NumberRectHorizontal;
// Картинка квадратная.
int heightRect = widthRect;
// Количество строк до заполнения контейнера по высоте.
int numberRectVertical = heightLayout / heightRect;
// Все позиции в пространстве.
RectPositionImages = new RectF[NumberRectHorizontal * numberRectVertical];
// Расчет позиций в пространстве.
int countPosY = 0;
int countPosX = 0;
for (int i = 0; i < RectPositionImages.Length; i++)
{
var rect = new RectF
{
Left = widthRect * countPosX,
Top = widthRect * countPosY,
};
rect.Right = rect.Left + widthRect;
rect.Bottom = rect.Top + heightRect;
RectPositionImages[i] = rect;
if (countPosX > 0 && countPosX % (NumberRectHorizontal - 1) == 0)
{
countPosX = -1;
countPosY++;
}
countPosX++;
}
}
Пространственные координаты
Координаты позиций и размерность элементов ImageView вычисляются после создания дерева представлений MainActivity и хранятся в массиве прямоугольников RectF[] RectPositionImages. Хранение координат отдельно от контейнеров картинок позволяет контролировать их положения на экране дисплея и корректировать в случае необходимости. Пространственными координаты названы, потому что они не привязаны к элементам макета и только виртуально делят пространство главного контейнера на ячейки. Пространственные координаты вычисляются на основе количества ячеек по ширине экрана. Элементы ImageView размещаются на позициях в контейнере RelativeLayout исчисляемых в пикселях. При создании приложения создается игровое поле с размерами ячеек высчитанных соответственно размеру экрана данного Android устройства.
// Количество позиций в пространстве
RectPositionImages = new RectF[NumberRectHorizontal * numberRectVertical];
// Расчет позиций в пространстве.
int countPosY = 0;
int countPosX = 0;
for (int i = 0; i < RectPositionImages.Length; i++)
{
var rect = new RectF
{
Left = widthRect * countPosX,
Top = widthRect * countPosY,
};
rect.Right = rect.Left + widthRect;
rect.Bottom = rect.Top + heightRect;
RectPositionImages[i] = rect;
if (countPosX > 0 && countPosX % (NumberRectHorizontal - 1) == 0)
{
countPosX = -1;
countPosY++;
}
countPosX++;
}
Событие прикосновения Touch
Для взаимодействия пользователя с игрой Мозаика применяется событие Touch(...). Это событие представляет собой реагирование на прикосновение пальцем или стилусом к сенсорному экрану. Прикосновение к объекту ImageView вызывает видимое изменение размеров и прозрачности картинки. Такая полезная обратная связь даёт информацию игроку Мозаики о том, что он действительно выбрал необходимый квадратик и может его перемещать в желаемое место для создания задуманного узора. В процессе перемещения также есть обратный сигнал о том, что квадратик находится над нужным местом и его можно отпустить. При этом цвет перемещаемой картинки изменяется если она находится на допустимом расстоянии от целевого места размещения. После отпускания картинки (подсобытие MotionEventActions.Up) активная картинка обменивается координатами позиции с нижележащей картинкой.
private void ImageView_Touch(object sender, View.TouchEventArgs e)
{
// Координаты курсора
MotionEvent motionEvent = e.Event;
// Принимаем абсолютные координаты курсора.
float cursorX = motionEvent.RawX;
float cursorY = motionEvent.RawY;
// Главный макет для доступа ко всем картинкам.
RelativeLayout layoutMain =
this.FindViewById(Resource.Id.LayoutMain);
// Активная картинка
ImageView ivSender = (ImageView)sender;
// Позиции активной картинки в пространстве экрана
Positions posSender = (Positions)ivSender.Tag;
// Центр картинки сделаем посередине, чтобы её
// было видно из-под пальца.
ivSender.PivotX = ivSender.Width / 2;
ivSender.PivotY = ivSender.Height / 2;
// Прикасаемся, т.е. нажимаем.
if (motionEvent.Action == MotionEventActions.Down)
{
// Увеличиваем активную картинку для удобного
// вождения пальцем.
ivSender.ScaleX = 2.0f;
ivSender.ScaleY = 2.0f;
// Делаем картинку полупрозрачной, чтобы было видно
// картинки под ней.
ivSender.Alpha = 0.5f;
// Поднимаем над всеми.
ivSender.BringToFront();
// Запоминаем данную позицию активной картинки.
posSender.Position = new RectF
{
Left = ivSender.GetX(),
Top = ivSender.GetY(),
Right = ivSender.GetX() + ivSender.Width,
Bottom = ivSender.GetY() + ivSender.Height
};
// Постоянная дельта на время вождения картинки.
// Дельта это разница между координатным положением
// картинки по данной оси и местом соприкосновения пальца.
// Измеряется в абсолютных единицах.
// Расстояние от места прикосновения до начала координат активной картинки.
DeltaX = cursorX - ivSender.GetX();
DeltaY = cursorY - ivSender.GetY();
}
// Перемещение активной картинки в поисках места для создания узора.
if (motionEvent.Action == MotionEventActions.Move)
{
// Из координат курсора, во время перемещения, вычитаем расстояние от места прикосновения
// до начала координат выбранной картинки.
// Благодаря этому картинка относительно пальца будет неподвижна,
// и будет двигаться точно под пальцем.
ivSender.SetX(cursorX - DeltaX);
ivSender.SetY(cursorY - DeltaY);
// Отлавливаем место возможного отпускания картинки.
for (int i = 0; i < RectPositionImages.Length; i++)
{
if (ivSender.GetX() < (RectPositionImages[i].Left + 20) &&
ivSender.GetX() > (RectPositionImages[i].Left - 20) &&
ivSender.GetY() < (RectPositionImages[i].Top + 20) &&
ivSender.GetY() > (RectPositionImages[i].Top - 20))
{
// Если место найдено просигналим изменением цвета
// передвигаемой картинки.
ivSender.SetColorFilter(Color.DarkViolet);
// Устанавливаем флаг место найдено.
posSender.isFoundPos = true;
// Запоминаем новую позицию для активной картинки.
posSender.newPos = RectPositionImages[i];
break;
}
// Если отдалились от места возможного приземления
// снимаем цветовую сигнализацию перемещаемой картикни.
ivSender.ClearColorFilter();
// Снимаем флаг обнаружения места приземления.
posSender.isFoundPos = false;
}
}
// Поднимаем палец. Отпускаем картинку.
if (motionEvent.Action == MotionEventActions.Up)
{
// Возвращаем картинке нормальный масштаб.
ivSender.ScaleX = 1;
ivSender.ScaleY = 1;
// Восстанавливаем непрозрачность.
ivSender.Alpha = 1.0f;
// Отпуская курсор принимаем новые координаты для данной картинки.
// А картинка которая была уже на этой позиции отправляется на прежнее
// место активной картинки.
if (posSender.isFoundPos == true)
{
// Извлекаем информацию о нижележащей картинке под перемещаемой.
for (int img = 0; img < layoutMain.ChildCount; img++)
{
ImageView imageView = (ImageView)layoutMain.GetChildAt(img);
if (imageView.GetX() == posSender.newPos.Left && imageView.GetY() == posSender.newPos.Top)
{
// --- Если картинку нашли ---
// Поднимаем её над всеми картинками.
imageView.BringToFront();
// Перемещаем с анимацией картинку на старое место передвигаемой картинки.
imageView.Animate().TranslationX(posSender.Position.Left);
imageView.Animate().TranslationY(posSender.Position.Top);
break;
}
}
// Активная картинка устанавливается на новое место.
ivSender.Animate().TranslationX(posSender.newPos.Left);
ivSender.Animate().TranslationY(posSender.newPos.Top);
// Сбрасываем флаг найденного места.
posSender.isFoundPos = false;
// Восстанавливаем настоящий цвет.
ivSender.ClearColorFilter();
}
else
{
// Если нижележащая картинка не найдена,
// возвращаем активную картинку на прежнее место.
ivSender.Animate().TranslationX(posSender.Position.Left);
ivSender.Animate().TranslationY(posSender.Position.Top);
// Восстанавливаем настоящий цвет.
ivSender.ClearColorFilter();
}
}
}
Использование свойства View.Tag
Свойство Tag класса Android.View предназначено для хранения пользовательской информации непосредственно в объекте класса. ImageView является наследником класса View и соответственно тоже имеет данное свойство. Свойство удобно тем, что в нем можно хранить любой объект. В исходнике игры Мозаика ImageView.Tag используется для хранения информации о текущей и новой позиции владельца свойства при исполнении события Touch(...). Для этого создан класс Positions в котором храниться координатная информация для необходимых перемещений цветных квадратиков.
// Собственный класс обязательно наследуем от Java.Lang.Object
// иначе свойству элементов Tag не сможем
// присвоить объект класса.
class Positions : Java.Lang.Object
{
// Текущая позиция
public RectF Position;
// Новая позиция
public RectF newPos;
// Флаг обнаружения места приземления.
public bool isFoundPos;
}
Прикрепленные файлы исходника
К статье прикреплен архив исходника игры Мозаика для скачивания. Исходник написан на языке C# на платформе Xamarin.Android. Инструмент программирования MS Visual Studio 2019. Целевая платформа API 26 (Android 8.0).
Скачать исходник
AndroidMosaic.zip- Размер: 996 Кбайт
- Загрузки: 487
