Jetpack新组件?小部件的春天来了

Jetpack新组件?小部件的春天来了_第1张图片

/   今日科技快讯   /

12月29日,距冬奥会倒计时40天,中国移动北京公司(北京移动)举行了冬奥保障大屏点亮仪式。据介绍,北京移动的保障大屏实现了基础网络(无线、传输、核心网)、新业务(互联网电视、5G toB),以及哑资源(井盖)的全覆盖,做到了网络全方位无死角监控保障。

/   作者简介   /

本篇文章转自Zhujiang的博客,文章主要分享了他对Jetpack组件Glance内容的探索分析,相信会对大家有所帮助!

原文地址:

https://juejin.cn/post/7042468014251311112

/   Glance???   /

今天像往常一样进去 Google 的官方文档查看最新的依赖更新,发现昨天 Google 更新了一批依赖:

Jetpack新组件?小部件的春天来了_第2张图片

看着没啥不正常的,都是一些依赖的更新迭代,但当我往下继续滑动的时候。。。。

Jetpack新组件?小部件的春天来了_第3张图片

发现了我上面箭头标注的这个库,还是非常新鲜的,版本才 1.0.0,而且还是第一个 alpha 版本,这是个新东西啊,名字很眼熟啊!我记得郭霖大神曾经写过一个库也叫 Glance :

e5f8ca7abff97f6982a29dd22f064211.png

我还以为是郭神的库被官方给收录了,结果进去一看不是。。。

Jetpack新组件?小部件的春天来了_第4张图片

看到这个库的简介的时候给我高兴坏了,大致意思是:可以使用 Compose 风格的API为小部件构建布局。

前几天我写过一篇文章:别羡慕苹果的小部件了,安卓也有!

来介绍 Android S 中小部件的一些更新还有一些小部件的疑难杂症。小部件的问题其中有一点就是只能使用 RemotesView 来编写布局,现在看到这个库感觉问题被解决了!!!

于是乎马上打开之前写的天气应用,来试验一下!本文中的代码地址:

https://github.com/zhujiang521/PlayWeather

/   开始撸码   /

添加依赖


使用一个库的第一步肯定是添加依赖,来看看Glance的依赖吧:


dependencies {
    implementation "androidx.glance:glance:1.0.0-alpha01"
}

android {
   buildFeatures {
       compose true
   }

   composeOptions {
       kotlinCompilerExtensionVersion = "1.1.0-rc01"
   }

   kotlinOptions {
       jvmTarget = "1.8"
   }
}

依赖添加很简单,如果你的项目中有 Compose 的话,只需要添加下 dependencies 中的内容即可,下面的应该都配置过,反之都添加下就行。

创建小部件

大家都知道,小部件其实就是一个 BroadcastReceiver ,所以咱们需要在清单文件中配置下:


    
        
    

    
    

上面代码都很熟悉,其中 enable 的配置项为:glance_appwidget_available,这是 Glance 库中的,无需自己添加。

需要注意的是:Glance 只支持 SDK 23 以上的应用,也就是 Android 6.0 (Marshmallow),所以 glance_appwidget_available 只是配置了下在 SDK 23 以下的版本中禁用。

下面来写下上面提到的资源 first_glance_widget_info :


只简单设置了几个配置:最小宽高、预览图像、宽高默认所占格数。

AppWidgetProvider

大家都知道之前小部件写的时候都需要继承自 AppWidgetProvider ,但如果使用 Glance 的话就不能继承 AppWidgetProvider 了,而需要继承 GlanceAppWidgetReceiver ,What ???这是个什么东西,咱们来看看 GlanceAppWidgetReceiver 的源码吧:

abstract class GlanceAppWidgetReceiver : AppWidgetProvider() {

    private companion object {
        private const val TAG = "GlanceAppWidgetReceiver"
    }

    /**
     * GlanceAppWidget的实例,用于生成应用程序Widget并将其发送到AppWidgetManager
     */
    abstract val glanceAppWidget: GlanceAppWidget

    // 更新小部件
    @CallSuper
    override fun onUpdate(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetIds: IntArray
    ) {
        goAsync {
            updateManager(context)
            appWidgetIds.map { async { glanceAppWidget.update(context, appWidgetManager, it) } }
                .awaitAll()
        }
    }

    // 布局发生改变的时候刷新小部件
    @CallSuper
    override fun onAppWidgetOptionsChanged(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetId: Int,
        newOptions: Bundle
    ) {
        goAsync {
            updateManager(context)
            glanceAppWidget.resize(context, appWidgetManager, appWidgetId, newOptions)
        }
    }

    @CallSuper
    override fun onDeleted(context: Context, appWidgetIds: IntArray) {
        goAsync {
            updateManager(context)
            appWidgetIds.forEach { glanceAppWidget.deleted(context, it) }
        }
    }

    // 更新小部件
    private fun CoroutineScope.updateManager(context: Context) {
        launch {
            runAndLogExceptions {
                GlanceAppWidgetManager(context)
                    .updateReceiver(this@GlanceAppWidgetReceiver, glanceAppWidget)
            }
        }
    }

    override fun onReceive(context: Context, intent: Intent) {
        runAndLogExceptions {
            if (intent.action == Intent.ACTION_LOCALE_CHANGED) {
                val appWidgetManager = AppWidgetManager.getInstance(context)
                val componentName =
                    ComponentName(context.packageName, checkNotNull(javaClass.canonicalName))
                onUpdate(
                    context,
                    appWidgetManager,
                    appWidgetManager.getAppWidgetIds(componentName)
                )
                return
            }
            super.onReceive(context, intent)
        }
    }
}

上面 GlanceAppWidgetReceiver 的代码经过删减。可以看到 GlanceAppWidgetReceiver 是一个抽象类,有一个实例 glanceAppWidget 需要子类来构建,它的类型为:GlanceAppWidget ,GlanceAppWidget 也是一个抽象类,由于类中代码过多,暂时不做详细解释,本篇文章主要讲使用。

使用 Glance 编写布局

那就来看看使用吧:

class FirstGlanceWidgetReceiver : GlanceAppWidgetReceiver() {

    override val glanceAppWidget: GlanceAppWidget = FirstGlanceWidget()

}

使用很简单,创建一个类继承 GlanceAppWidgetReceiver 并实例化 glanceAppWidget 即可。

下面来看看如何初始化 GlanceAppWidget 吧:

class FirstGlanceWidget : GlanceAppWidget() {
    @Composable
    override fun Content() {
        Column(modifier = GlanceModifier
                .fillMaxSize()
                .background(day = Color.Red, night = Color.Blue)
                .cornerRadius(10.dp)
                .padding(8.dp)
        ) {
            Text(
                text = "First Glance widget",
                modifier = GlanceModifier.fillMaxWidth(),
                style = TextStyle(fontWeight = FontWeight.Bold),
            )
        }
    }
}

来来来,开始找不同了!大家看看上面 Glance 中的 Compose 写法有啥不一样?

没错!Modifier 不一样了,现在 Modifier 变成了 GlanceModifier ,其实不止是 Modifier 变了,大家来看下别的依赖:

import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.glance.Button
import androidx.glance.GlanceModifier
import androidx.glance.Image
import androidx.glance.ImageProvider
import androidx.glance.action.actionStartActivity
import androidx.glance.appwidget.GlanceAppWidget
import androidx.glance.appwidget.background
import androidx.glance.appwidget.cornerRadius
import androidx.glance.appwidget.lazy.LazyColumn
import androidx.glance.layout.*
import androidx.glance.text.FontWeight
import androidx.glance.text.Text
import androidx.glance.text.TextStyle

写的时候我都懵逼了。。。什么情况,这是相当于 Glance 重写了下 Compose 中的布局。

还记得之前文章中提到过,小部件中只能画一些简单的布局,我原本以为 Glance 会改变这一状况,没想到。。。。

Glance 中的可组合项

和之前的小部件其实差别不大,只能支持下面几种可组合项:Box、Row、Column、Text、Button、LazyColumn、Image、Spacer。

那就来都使用下吧:

@Composable
override fun Content() {
    Column(
        modifier = GlanceModifier
            .fillMaxSize()
            .background(day = Color.Red, night = Color.Blue)
            .cornerRadius(10.dp)
            .padding(8.dp)
    ) {
        Text(
            text = "First Glance widget",
            modifier = GlanceModifier.fillMaxWidth(),
            style = TextStyle(fontWeight = FontWeight.Bold),
        )

        Spacer(modifier = GlanceModifier.height(5.dp))
        Row {
            LazyColumn(modifier = GlanceModifier.width(150.dp)) {
                items(4) {
                    Text(text = "哈哈哈")
                }
            }
            Image(
                provider = ImageProvider(R.mipmap.back_100d),
                modifier = GlanceModifier.height(50.dp),
                contentDescription = ""
            )
        }

        Row {
            Text(text = "横着1")

            Text(text = "横着2 ", modifier = GlanceModifier.padding(10.dp))
        }

        Button(text = "Glance按钮", onClick = actionStartActivity(MainActivity::class.java))
    }
}

这基本把上面支持的几种可组合项给都写了一遍。到这里小部件就基本写好了,来运行看下效果吧:

Jetpack新组件?小部件的春天来了_第5张图片

基本上是预期的效果。来简单说下吧,上面说过,Glance 把用到的可组合项全部重写了一遍,大部分和之前使用方法一致,但还是有些不同的。

Image

Image 虽然看着和之前挺像,但确实不太一样了,咱们先来看下之前 Compose 中的 Image :

@Composable
fun Image(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
)

上面是之前 Compose 中的 Image 可组合项的方法定义,图片资源就是 Painter,之前如果加载图片的话需要这样写:

Image(
        modifier = modifier,
        painter = BitmapPainter(bitmap),
        contentDescription = "",
        contentScale = contentScale
    )

Image(
       modifier = modifier,
       painter = painterResource(资源id),
       contentDescription = "",
       contentScale = contentScale
    )

但是再来看下 Glance 中的 Image:

@Composable
public fun Image(
    provider: ImageProvider,
    contentDescription: String?,
    modifier: GlanceModifier = GlanceModifier,
    contentScale: ContentScale = ContentScale.Fit
)

发现了吗?有两项不一样,加载图片资源由之前的 Painter 变为了现在的 ImageProvider ,从上面也能看出 ImageProvider 的用法,再来看下吧:

// 图片资源加载
public fun ImageProvider(@DrawableRes resId: Int): ImageProvider =
    AndroidResourceImageProvider(resId)

// bitmap加载
public fun ImageProvider(bitmap: Bitmap): ImageProvider = BitmapImageProvider(bitmap)

// Icon加载
@RequiresApi(Build.VERSION_CODES.M)
public fun ImageProvider(icon: Icon): ImageProvider = IconImageProvider(icon)

可以看到,ImageProvider 有三个重载方法可以进行实例化,基本满足了加载 Image 的需求。

Button

上面的代码中可以看到 Button 也和之前的不太一样,来看下之前的 Button 吧:

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

这是 Compose 中的 Button ,大家都很熟悉,再来看下 Glance 中的 Button 吧:

@Composable
fun Button(
    text: String,
    onClick: Action,
    modifier: GlanceModifier = GlanceModifier,
    enabled: Boolean = true,
    style: TextStyle? = null,
    maxLines: Int = Int.MAX_VALUE,
)

又到了找不同的时间了,这两个 Button 有啥不同?

没错,onClick 不一样,之前的是点击回调事件,而现在的是 Action,这又是一个比较多的内容了,咱们在下面说。

/   为啥要使用 Glance   /

我在使用这个库的时候一直在考虑这个问题,我为啥要使用这个库呢?为了多导入一些包?为了写法更加复杂一些?为了项目之后更难维护(考虑别人共同维护)?

更方便的 Action

以前咱们使用小部件的时候都少不了一个东西:PendingIntent ,但是现在在 Glance 中不需要了,改为了更为方便的 Action 。

Action 启动 Activity

先来看看使用 Action 启动 Activity 吧:

// 包名启动
public fun actionStartActivity(
    componentName: ComponentName,
    parameters: ActionParameters = actionParametersOf()
): Action = StartActivityComponentAction(componentName, parameters)

// 类名启动
public fun  actionStartActivity(
    activity: Class,
    parameters: ActionParameters = actionParametersOf()
): Action = StartActivityClassAction(activity, parameters)

// 内联函数,调用actionStartActivity
public inline fun  actionStartActivity(
    parameters: ActionParameters = actionParametersOf()
): Action = actionStartActivity(T::class.java, parameters)

可以看到,有几种写的方法,来看看调用方法吧:

Button(text = "Glance按钮", onClick = actionStartActivity(ComponentName("包名","包名+类名")))
Button(text = "Glance按钮", onClick = actionStartActivity())
Button(text = "Glance按钮", onClick = actionStartActivity(MainActivity::class.java))

Action 执行回调任务

先来看看源码吧:

public fun  actionRunCallback(
    callbackClass: Class,
    parameters: ActionParameters = actionParametersOf()
): Action = RunCallbackAction(callbackClass, parameters)

public inline fun  actionRunCallback(
    parameters: ActionParameters = actionParametersOf()
): Action = actionRunCallback(T::class.java, parameters)

代码很简单,来看下如何使用吧。

首先需要创建一个类,并实现 ActionCallback :

class ActionCallbacks:ActionCallback{
    override suspend fun onRun(context: Context, glanceId: GlanceId, parameters: ActionParameters) {
        // 执行需要的操作
    }
}

然后就可以进行正常调用了:

Button(text = "Glance按钮", onClick = actionRunCallback())
Button(text = "Glance按钮", onClick = actionRunCallback(ActionCallbacks::class.java))

Action 启动 Service

同样先来看看源码吧:

public fun actionStartService(intent: Intent, isForegroundService: Boolean = false): Action =
    StartServiceIntentAction(intent, isForegroundService)

public fun actionStartService(
    componentName: ComponentName,
    isForegroundService: Boolean = false
): Action = StartServiceComponentAction(componentName, isForegroundService)

public fun  actionStartService(
    service: Class,
    isForegroundService: Boolean = false
): Action =
    StartServiceClassAction(service, isForegroundService)

public inline fun  actionStartService(
    isForegroundService: Boolean = false
): Action = actionStartService(T::class.java, isForegroundService)

看到方法就知道使用方法了,首先也需要创建一个 Service :

class TestService : Service() {
    override fun onBind(intent: Intent?): IBinder? {
        TODO("Not yet implemented")
    }
}


接下来看如何使用吧:

// Service
Button(text = "Glance按钮", onClick = actionStartService())
Button(text = "Glance按钮", onClick = actionStartService(TestService::class.java))

Action 启动广播

public fun actionStartBroadcastReceiver(
    action: String,
    componentName: ComponentName? = null
): Action = StartBroadcastReceiverActionAction(action, componentName)

public fun actionStartBroadcastReceiver(intent: Intent): Action =
    StartBroadcastReceiverIntentAction(intent)

public fun actionStartBroadcastReceiver(componentName: ComponentName): Action =
    StartBroadcastReceiverComponentAction(componentName)

public fun  actionStartBroadcastReceiver(receiver: Class): Action = StartBroadcastReceiverClassAction(receiver)

public inline fun  actionStartBroadcastReceiver(): Action = actionStartBroadcastReceiver(T::class.java)

在小部件中启动广播一般都是发送给自己,所以这里就不重新创建一个广播了,直接来看如何使用吧:

// 广播
Button(text = "Glance按钮", onClick = actionStartBroadcastReceiver())
Button(text = "Glance按钮", onClick = actionStartBroadcastReceiver(FirstGlanceWidgetReceiver::class.java))

ActionParameters

其实 ActionParameters 在上面出现过很多回, ActionParameters 的作用就是为 Action 提供参数。来看下源码吧:

public class Key (public val name: String) {
    public infix fun to(value: T): Pair = Pair(this, value)
}

public fun actionParametersOf(vararg pairs: ActionParameters.Pair): ActionParameters =
    mutableActionParametersOf(*pairs)

来看下使用吧:

val test = ActionParameters.Key("test")
val testInt = ActionParameters.Key("test")
actionParametersOf(test to "测试", testInt to 123)

是不是很简单,获取的时候也很简单:

override suspend fun onRun(context: Context, glanceId: GlanceId, parameters: ActionParameters) {
    // 执行需要的操作
    val testString = requireNotNull(parameters[test])
    val testInt = requireNotNull(parameters[testInt])
}

更方便的 LocalXXX

使用过 Compose 的童鞋都知道 Compose 中的 LocalContext 非常方便,随处可以使用 LocalContext ,在 Glance 中也同样可以使用,不过也要注意包的导入问题,还可以使用更多的 LocalXXX ,来看下源码吧:

// 生成的概览视图的大小。概览视图至少有那么多空间可以显示
public val LocalSize = staticCompositionLocalOf { error("No default size") }

// Context
public val LocalContext = staticCompositionLocalOf { error("No default context") }

// 局部视图状态,在表面实现中定义。用于查看特定状态数据的可定制存储。
public val LocalState =
    staticCompositionLocalOf { null }

// glance的id
public val LocalGlanceId = staticCompositionLocalOf { error("No default glance id") }

大概的意思都写在了注释中,大家可以随意使用。 

更简单的布局适配

Glance 中使用 SizeMode 来适配布局,来看下 SizeMode 源码吧:

public sealed interface SizeMode {
    // 提供单一的用户界面
    public object Single : SizeMode {
        public override fun toString(): String = "SizeMode.Single"
    }

    // 为 App Widget 可能显示的每种尺寸提供一个 UI。尺寸列表由选项包提供
    public object Exact : SizeMode {
        public override fun toString(): String = "SizeMode.Exact"
    }

    // 为一组固定大小提供 UI
    public class Responsive(val sizes: Set) : SizeMode 
}

可以看到 SizeMode 是一个接口,一共有三个类实现了 SizeMode 接口,含义都写在了注释中。下面来看下使用方法吧:

when (val localSizeMode = this.sizeMode) {
    is SizeMode.Single -> {
        // 单一的用户界面
    }
    is SizeMode.Exact -> {
        // 可能显示的每种尺寸
    }
    is SizeMode.Responsive -> {
        // 为一组固定大小提供 UI
    }

其实 SizeMode 在 GlanceAppWidget 源码中已经做了使用,大家如果想看详细使用方法可以去查看 GlanceAppWidget 的源码。

/   精致的结尾   /

今天所讲的 Glance 其实也是基于 Compose 的,由此可见,Google 现在对 Compose 发力非常足。

推荐阅读:

我的新书,《第一行代码 第3版》已出版!

在微软工作365天,还你一个我眼中更加真实的微软

Jetpack全家桶中最受欢迎的一定是它

欢迎关注我的公众号

学习技术或投稿

0ac053b649be8edbb9a49286806bdd2b.png

Jetpack新组件?小部件的春天来了_第6张图片

长按上图,识别图中二维码即可关注

你可能感兴趣的:(android,java,安卓,spring,boot,移动开发)