Сегодня мы займемся разработкой виджета, виджет будет похож на игру орел и решка. Используем 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, обозначения монеты.

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

В файл 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 Как сделать виджет - игру Орел или решка

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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


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


Связанные статьи

Предыдущие статьи


We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies).

You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok