Android Studio Как сделать виджет - игру Орел или решка

Сегодня мы займемся разработкой виджета, виджет будет похож на игру орел и решка. Используем EmptyActivity, никаких больше пока настроек делать не будем.

Итак, давайте поработаем с AndroidManifest, после раздела Activity давайте напишем receiver с android именем точка виджет.

Для этого чтобы красным у нас не горела ошибка, давайте создадим новый Java класс, который будет носить такое же имя как и у нашего ресивера класс Widget.

Как видите, недостаточно только назвать его виджетом, давайте мы продолжим настройки в android манифесте потом вернемся к нашему классу Widget.java.

Настройка AndroidManifest

Создадим действия в интент фильтре

action android:name="android.appwidget.action.APPWIDGET_UPDATE"

Закроем скобочку и напишем метадату и путь к ресурсу виджета

meta-data
	android:name="android.appwidget.provider"
	android:resource="@xml/widget"

там где будет храниться описание нашего виджета папкам xml-файл виджета, нам нужно будет создать папку xml.

Новые файлы и директория

Так давайте создадим новую директорию, назовем ее xml и в ней щелкнув правой кнопкой создадим новый xml-файл с названием widget, позже мы вернемся к его настройкам.

Обратите внимание, я сделал две картинки в png формате, это изображение 5 рублей, называются файлы а5 и r5, соответственно, аверс 5 реверс 5, обозначения монеты.

В файл Widget.java у нас унаследуется от класса AppWidgetProvider

public class Widget extends AppWidgetProvider {
}

и этого изменение было достаточно для того, чтобы ос android манифестом мы могли закончить.

Слой виджета

Давайте создадим еще один новый слой LayOut widget, в нем будет хранится отображение нашего виджета.

Изменим слой на RelativeLayOut, на него нам нужно будет добавить imageview, картинка на которой будет отображаться наш виджет, наш пятачок, наша монетка.

Свойства imageview:

    android:id="@+id/imageView"
	android:layout_centerInParent="true"
	android:scaleType="centerInside"
	android:layout_width="match_parent"
	android:layout_height="match_parent"  

вот такие настройки, этого достаточно, можем закрыть файл.

Итак перейдем к виджету xml, которой находятся папки в xml, переименуем слой в appwidget-provider.

Добавим минимальная ширина 40dp, минимальная высота 40dp, виджет можно будет увеличивать или уменьшать, изменение размера resizeMode горизонталь и вертикаль, то есть можно будет его растянуть как по горизонтали так и по вертикали.

preview image: это картинка которая будет отображаться одну я использую опять аверс 5 с орлом сторона монетки, тип widget категория домашний экран, home_screen и сам слой который будет вызываться, это тот слой который мы указали в LayOut виджет и период обновления в миллисекундах какое-то просто большое число тут всем почти 7 миллионов миллисекунд.

android:minWidth="40dp"
android:minHeight="40dp"
android:resizeMode="horizontal|vertical"
android:previewImage="@drawable/a5"
android:widgetCategory="home_screen"
android:initialLayout="@layout/widget"
android:updatePeriodMillis="7200000"

С файлом виджет мы закончили, файл MainActivity практически не нужен, никаких изменений вносить в него не будем, сейчас поработаем с файлом Widget.java.

Нам нужно будет создать несколько процедур: onUpdate, onReceive, getPendingSelfIntent, setImage.

Объявим строковую переменную SYNC_CLICKED:

private static final String SYNC_CLICKED = "WidgetImageClick";

и начнем писать основной код виджета.

onUpdate

public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        super.onUpdate(context, appWidgetManager, appWidgetIds);

        Random r = new Random();
        RemoteViews remoteViews;
        ComponentName componentName;

        remoteViews = new RemoteViews(context.getPackageName(), R.layout.widget);
        componentName = new ComponentName(context, Widget.class);
        remoteViews.setImageViewResource(R.id.imageView, setImage(r.nextInt(2)));
        remoteViews.setOnClickPendingIntent(R.id.imageView, getPendingSelfIntent(context,SYNC_CLICKED));
        appWidgetManager.updateAppWidget(componentName,remoteViews);

    }

В функции onUpdate реализован Random генератор случайных чисел, позволяющий менять рисунок виджета, в зависимости от значения. В нашем случае будет меняться орел на решку или наоборот.

onReceive

public void onReceive(Context context, Intent intent) {
        super.onReceive(context, intent);

        if (SYNC_CLICKED.equals(intent.getAction())){
            Random r = new Random();
            AppWidgetManager appWidgetManager = AppWidgetManager.getInstance(context);
            RemoteViews remoteViews;
            ComponentName componentName;

            remoteViews = new RemoteViews(context.getPackageName(), R.layout.widget);
            componentName = new ComponentName(context, Widget.class);
            remoteViews.setImageViewResource(R.id.imageView, setImage(r.nextInt(2)));
            Toast.makeText(context,"Орел или решка? )))",Toast.LENGTH_SHORT).show();
            appWidgetManager.updateAppWidget(componentName,remoteViews);
        }
    }

В функции onReceive при приеме действия, предусмотренного интентом, также происшодит генерация значения и отображается всплывающее сообщение, с текстом "Орел или решка? )))".

getPendingSelfIntent

protected PendingIntent getPendingSelfIntent(Context context, String action){
        Intent intent = new Intent(context, getClass());
        intent.setAction(action);
        return PendingIntent.getBroadcast(context,0,intent,0);
    }

В функции getPendingSelfIntent вызываться отложенное событие.

setImage

 public  int setImage(int num){
        int image = 0;
        switch (num){
            case 0:
                image = R.drawable.a5;
                break;
            case 1:
                image = R.drawable.r5;
                break;
        }
        return image;
    }

А вот и наш генератор случайных чисел,setImage вернет числовое значение, если Random выдаст 0, то в виджете показывается аверс монетки, если 1 то реверс.

На этом написание кода виджета - игры закончено, сохранимся, запустим на исполнение в эмуляторе.

Android studio скомпилирует файл, у нас запустится первый раз наша активность, закроем ее и перейдем в виджеты, выкинем на пустой стол нашу монетку и вот по клику на нее происходит изменение ее состояние

Давайте теперь займемся изменениями не будем делать 40dp на 40dp, хотя нашу монетку в принципе можно растянуть, чтобы она была больше, почти на весь экран.

Давайте изначально сделаем минимальную ширину и высоту 80dp на 80dp и после перезапуска, монетка приняла практически свой реальный размер.

В принципе наш виджет похож на какую-то небольшую игру, которую вполне можно скачать с play market.

Давайте посмотрим как будет выглядеть это же этот-же виджет это же приложение если установить его на настоящие мобильный телефон или смартфон.

В принципе, все действия, те же самые, точно также можно увеличить наш виджет, нажимая на него, меняется состояние, при этом иногда получается несколько раз даже нажимаешь на монетку и ничего, никаких изменений нет, но на самом деле просто повторяется одно и то же значение, если у нас там их больше было, возможно наш виджет вел бы себя немного по-другому.

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

Cкачать архив для ознакомления - проект виджет - игра "Орел и решка":

ZIP архив с виджетом

Смотрите видео - Android Studio Как сделать виджет-игру Орел или решка:

Рекомендуем смотреть видео в полноэкранном режиме, в настойках качества выбирайте 1080 HD, не забывайте подписываться на канал в YouTube, там Вы найдете много интересного видео, которое выходит достаточно часто. Приятного просмотра!

 С уважением, авторы сайта Компьютерапия

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!