首页 > 代码库 > 手把手教你做音乐播放器（八）桌面小工具（上）

手把手教你做音乐播放器（八）桌面小工具（上）

2024-08-15 22:22:37   218人阅读

第8节 桌面小工具

桌面小工具是可以放置在主界面的、快速控制应用的小助手。例如我们的音乐小工具，它可以帮助用户在桌面上就完成音乐的暂停、播放、切换等操作，而不需要启动应用本身。

在安卓系统中，我们也常常叫它App widget。

技术分享

实现一个App widget要经过以下几个步骤，

  1. 创建一个App widget类，让它继承自AppWidgetProvider，例如AnddleMusicAppWidget类；
  2. 放在res\layout目录下，为App widget的界面定义一个布局，例如anddle_music_app_widget.xml；
  3. 在res\xml目录下，定义一个App widget的说明文件，例如anddle_music_app_widget_info.xml
  4. 在AndroidManifest.xml文件当中，声明App widget；

8.1 小工具框架的创建

对于使用Android Studio的用户来说，完成上面四个步骤的方法非常简单。因为Android Studio提供了简单的可视化向导来帮助我们。

  1. 在项目工程上点击右键，选择new->Wideget->App Widget就为我们创建好了开发用的模版，非常的简单方便。

    技术分享

  2. 在弹出的创建向导中，填上创建的参数，

    技术分享
    1. 给App widget取个名字－AnddleMusicAppWidget;
    2. 允许将App widget放到主界面上；
    3. 不允许App widget的显示区域动态调整；
    4. App widget占用3格宽1格高；

    这些参数最后将反应在res/xml/anddle_music_app_widget.info.xml这个配置文件当中，

    <?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialKeyguardLayout="@layout/anddle_music_app_widget"
    android:initialLayout="@layout/anddle_music_app_widget"
    android:minHeight="40dp"
    android:minWidth="180dp"
    android:previewImage="@mipmap/widget_thumb_sample"
    android:resizeMode="none"
    android:updatePeriodMillis="86400000"
    android:widgetCategory="home_screen"></appwidget-provider>

运行起来，就可以开始将App widget添加到桌面了。

8.2 界面设计

现在，我们开始修改布局文件anddle_music_app_widget.xml，将App widget设计成如下的效果，

技术分享
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorContract"
    android:padding="@dimen/widget_margin"
    android:orientation="horizontal"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/image_thumb"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_margin="8dp"
        android:src="@mipmap/default_cover"
        android:scaleType="fitCenter"
        android:textColor="#ffffff"
        android:textSize="24sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/music_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#FFF"
            android:gravity="center"
            android:singleLine="true"
            android:layout_margin="5dp"
            android:text="@string/no_song"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="5dp">

            <Button
                android:id="@+id/play_btn2"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerInParent="true"
                android:text=""
                android:background="@mipmap/ic_play"
                />

            <Button
                android:id="@+id/pre_btn2"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@id/play_btn2"
                android:layout_centerVertical="true"
                android:text=""
                android:background="@mipmap/ic_pre"
                />

            <Button
                android:id="@+id/next_btn2"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/play_btn2"
                android:layout_centerVertical="true"
                android:text=""
                android:background="@mipmap/ic_next"
                />

        </RelativeLayout>

    </LinearLayout>

</LinearLayout>

然后修改anddle_music_app_widget_info.xml的android:previewImage属性，让它指向的图片变成预览的效果图，

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    ......
    android:previewImage="@mipmap/widget_thumb_sample"
    ......></appwidget-provider>
技术分享

8.3 AnddleMusicAppWidget的重建

AnddleMusicAppWidget类负责App widget的逻辑响应。

8.3.1 AppWidget原理

继承AppWidgetProvider之后，开发者可以选择的实现onUpdate() onAppWidgetOptionsChanged() onDeleted() onEnabled() onDisabled()和onRestored()等多个函数，

public class AnddleMusicAppWidget extends AppWidgetProvider {

    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {

    }

    @Override
    public void onEnabled(Context context) {

    }

    @Override
    public void onDisabled(Context context) {

    }

    @Override
    public void onAppWidgetOptionsChanged(Context context, AppWidgetManager appWidgetManager,
            int appWidgetId, Bundle newOptions) {

    }

    @Override
    public void onDeleted(Context context, int[] appWidgetIds) {

    }

    @Override
    public void onRestored(Context context, int[] oldWidgetIds, int[] newWidgetIds) {

    }

}

桌面上可以同时添加多个相同的App widget，系统会为每个App widget分配一个id，以便将来更新它们或者对它们进行别的操作时，能够正确的区分它们。

假设现在桌面上没有我们音乐播放器对应的App widget，此时添加一个的话，会依次触发，

onEnabled()
onUpdate()

如果此时继续添加，会接着触发，

onUpdate()

如果系统要更新App widget的显示，也会触发，

onUpdate()

此时删除一个，会触发，

onDeleted()

此时再删除最后一个，会触发，

onDeleted()
onDisabled()

当设备开机，会触发，

onEnabled()
onUpdate()

在App widget的设计框架中，每个显示出来的小工具界面，叫做RemoteViews，它是由如下方式创建的，

//第二个参数就是桌面小工具的布局文件
RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.anddle_music_app_widget);

然后由RemoteViews提供的设置方法，来设置界面上每个元素的样子，比如某个TextView该显示什么文字，某个ImageView该显示什么图片，某个Button被点击后要触发什么操作等等。

然后，通过调用系统提供的AppWidgetManager.updateAppWidget()，将这个界面更新到App widget上面去，

AppWidgetManager appWidgetManager = AppWidgetManager.getInstance(context);
//appWidgetId就是主界面上某个特定App widget的Id值，它会由onUpdate()函数传入
appWidgetManager.updateAppWidget(appWidgetId, views);

所以AnddleMusicAppWidget要提供一个对外调用的接口，让其它组件可以在需要的时候更新小工具界面。

8.3.2 App widget的界面元素

前面提到了RemoteViews的创建方法。现在来详细介绍下界面上每个元素的设置方式，比如某个TextView该显示什么文字，某个ImageView该显示什么图片，某个Button被点击后要触发什么操作等等。

8.3.2.1 设置TextView的文字

如果创建RemoteViews的布局中有TextView控件，并需要设置内容，

RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.anddle_music_app_widget);
//设置id为R.id.music_name的TextView，显示musicName代表的字符串
views.setTextViewText(R.id.music_name, musicName);

8.3.2.2 设置ImageView的背景图片

如果创建RemoteViews的布局中有ImageView控件，并需要设置图片内容，

RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.anddle_music_app_widget);
//设置id为R.id.image_thumb的ImageView，显示thumb代表的bitmap图片
views.setImageViewBitmap(R.id.image_thumb, thumb);

8.3.2.3 控件的其它属性

除了上面提到的控件和属性，控件的很多属性并专门的设置函数。不过RemoteViews为我们引入了更加灵活的设置方式。例如要设置Button的background属性，

RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.anddle_music_app_widget);
//设置id为R.id.image_thumb的Button，调用它的setBackgroundResource()函数，
//传入R.mipmap.ic_pause参数，相当于调用了Button的setBackgroundResource(R.mipmap.ic_pause)
views.setInt(R.id.play_btn2, "setBackgroundResource", R.mipmap.ic_pause);

8.3.2.4 Button的响应

如果创建RemoteViews的布局中有Button控件，为它添加点击响应，

RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.anddle_music_app_widget);

//用隐士调用的方法－指定Action－创建一个Intent
Intent preIntent = new Intent(MusicService.ACTION_PLAY_MUSIC_PRE);
//设置响应的组件名称
preIntent.setComponent(serviceName);
//将Intent转化成PendingIntent
PendingIntent prePendingIntent = PendingIntent.getService(context,
                0, preIntent, 0);
//设置id为R.id.pre_btn2的Button，设计点击后要触发的PendingIntent
views.setOnClickPendingIntent(R.id.pre_btn2, prePendingIntent);

RemoteViews不能直接设置按钮点击后的操作，必须通过设置PendingIntent来实现。所以要在响应的模块中添加响应的逻辑。

8.3.3 AnddleMusicAppWidget实现

  1. 继承AppWidgetProvider，准备实现onUpdate()函数，并提供performUpdates()的静态函数作为其它组件刷新界面的接口，搭建的代码结构如下，

    public class AnddleMusicAppWidget extends AppWidgetProvider {

    //保存各个小工具的id
    private static int [] sAppWidgetIds;

    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        //保存各个小工具的id，以备将来其它组件调用performUpdates()接口时能用到
        sAppWidgetIds = appWidgetIds;
        //更新小工具的界面
        performUpdates(context, context.getString(R.string.no_song), false, null);
    }

    //对外提供的更新所有小工具的界面接口，需要传入音乐的名称、当前是否播放、音乐封面等参数
    public static void performUpdates(Context context, String musicName, boolean isPlaying, Bitmap thumb) {
        //如果没有小工具的id，就没法更新界面
        if(sAppWidgetIds == null || sAppWidgetIds.length == 0) {

            return;
        }

        AppWidgetManager appWidgetManager = AppWidgetManager.getInstance(context);

        //遍历每个桌面上的小工具，根据id逐个更新界面
        for (int appWidgetId : sAppWidgetIds) {
            updateAppWidget(context, appWidgetManager, appWidgetId, musicName, isPlaying, thumb);
        }
    }

    //更新指定id的小工具界面
    private static void updateAppWidget(Context context, AppWidgetManager appWidgetManager,
                                int appWidgetId, String musicName, boolean isPlaying, Bitmap thumb) {

        //创建RemoteViews
        RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.anddle_music_app_widget);

        //添加界面元素的逻辑控制代码，例如按钮、文字、图片等等
        ......

        //通过appWidgetId，为指定的小工具界面更新
        appWidgetManager.updateAppWidget(appWidgetId, views);
    }
    ......
}

  2. 实现对界面元素的逻辑控制，

    “`java
    public class AnddleMusicAppWidget extends AppWidgetProvider {

    ......

//更新指定id的小工具界面
private static void updateAppWidget(Context context, AppWidgetManager appWidgetManager,
                            int appWidgetId, String musicName, boolean isPlaying, Bitmap thumb) {

    //创建RemoteViews
    RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.anddle_music_app_widget);

    //添加界面元素的逻辑控制代码，例如按钮、文字、图片等等
    //设置音乐的名称
    views.setTextViewText(R.id.music_name, musicName);

    //设置按钮响应的对象，这里是MusicService
    final ComponentName serviceName = new ComponentName(context, MusicService.class);

    //设置下一首按钮对应的PendingIntent
    //通过MusicService.ACTION_PLAY_MUSIC_NEXT定义隐性Intent，唤醒MusicService的响应
    Intent nextIntent = new Intent(MusicService.ACTION_PLAY_MUSIC_NEXT);
    nextIntent.setComponent(serviceName);
    PendingIntent nextPendingIntent = PendingIntent.getService(context,
            0, nextIntent, PendingIntent.FLAG_UPDATE_CURRENT);
    views.setOnClickPendingIntent(R.id.next_btn2, nextPendingIntent);

    //设置前一首按钮对应的PendingIntent
    //通过MusicService.ACTION_PLAY_MUSIC_PRE定义隐性Intent，唤醒MusicService的响应
    Intent preIntent = new Intent(MusicService.ACTION_PLAY_MUSIC_PRE);
    preIntent.setComponent(serviceName);
    PendingIntent prePendingIntent = PendingIntent.getService(context,
            0, preIntent, 0);
    views.setOnClickPendingIntent(R.id.pre_btn2, prePendingIntent);

    //设置播放暂停按钮对应的PendingIntent
    //通过MusicService.ACTION_PLAY_MUSIC_TOGGLE定义隐性Intent，唤醒MusicService的响应
    Intent toggleIntent = new Intent(MusicService.ACTION_PLAY_MUSIC_TOGGLE);
    toggleIntent.setComponent(serviceName);
    PendingIntent togglePendingIntent = PendingIntent.getService(context,
            0, toggleIntent, 0);
    views.setOnClickPendingIntent(R.id.play_btn2, togglePendingIntent);

    //设置播放暂停按钮的图标
    views.setInt(R.id.play_btn2, "setBackgroundResource", isPlaying ? R.mipmap.ic_pause : R.mipmap.ic_play);
    //设置音乐的封面
    if(thumb != null) {
        views.setImageViewBitmap(R.id.image_thumb, thumb);
    }
    else {
        views.setImageViewResource(R.id.image_thumb, R.mipmap.default_cover);
    }

    //通过appWidgetId，为指定的小工具界面更新
    appWidgetManager.updateAppWidget(appWidgetId, views);
}
......

    }

“`

/*******************************************************************/
* 版权声明
* 本教程只在CSDN和安豆网发布，其他网站出现本教程均属侵权。

*另外，我们还推出了Arduino智能硬件相关的教程，您可以在我们的网店跟我学Arduino编程中购买相关硬件。同时也感谢大家对我们这些码农的支持。

*最后再次感谢各位读者对安豆的支持，谢谢:)
/*******************************************************************/

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

    手把手教你做音乐播放器（八）桌面小工具（上）


联系
我们