已有自定义组建
原有的项目有一些自定义的组建,在compose中也想使用的话,可以稍作一些修改直接应用
例如汽包进度条,引用了一个自定义组建
添加链接描述
进行Composable改造
通过 AndroidView 对控件进行包装
@Composable
fun ComposableSeekBar(
modifier: Modifier,
min: Float,
max: Float,
process: Float,
firstVisibleItemScrollOffset: State<Int>,
onProgressChange: (Int) -> Unit
) {
val bubbleSeekBar = rememberBubbleSeekBar()
bubbleSeekBar.onProgressChangedListener = object : BubbleSeekBar.OnProgressChangedListener {
override fun onProgressChanged(
bubbleSeekBar: BubbleSeekBar?,
progress: Int,
progressFloat: Float,
fromUser: Boolean
) {
if(fromUser){
onProgressChange.invoke(progress)
}
}
override fun getProgressOnActionUp(
bubbleSeekBar: BubbleSeekBar?,
progress: Int,
progressFloat: Float
) {
}
override fun getProgressOnFinally(
bubbleSeekBar: BubbleSeekBar?,
progress: Int,
progressFloat: Float,
fromUser: Boolean
) {
}
}
LaunchedEffect(Unit) {
snapshotFlow {
firstVisibleItemScrollOffset.value
}.collect {
bubbleSeekBar.correctOffsetWhenContainerOnScrolling()
}
}
AndroidView(
modifier = modifier,
factory = {
bubbleSeekBar
},
update = {
bubbleSeekBar.initParam(
min,
max,
process,
8,
4,
8
// 8,
// com.zkteco.cuswidget.R.color.colorPrimary,
// com.zkteco.android.zkcore.R.color.colorPrimary,
// com.zkteco.cuswidget.R.color.colorAccent
)
}
)
}
@Composable
fun rememberBubbleSeekBar(): BubbleSeekBar {
val context = LocalContext.current
val bubbleSeekBar = remember {
BubbleSeekBar(context)
}
return bubbleSeekBar
}
类似的还有,webview
@Composable
fun ComposableWebView(modifier: Modifier, url: String) {
val webView = rememberWebViewWIthLifecycle()
AndroidView(
modifier = modifier,
factory = { context ->
// val webView = WebView(context)
webView
},
update = { webView ->
webView.settings.javaScriptEnabled = true
webView.settings.javaScriptCanOpenWindowsAutomatically = true
webView.settings.domStorageEnabled = true
webView.settings.loadsImagesAutomatically = true
webView.settings.mediaPlaybackRequiresUserGesture = false
webView.webViewClient = WebViewClient()
webView.loadUrl(url)
})
}
@Composable
private fun rememberWebViewLifecycleObserver(webView: WebView): LifecycleEventObserver {
return remember(webView) {
LifecycleEventObserver { _, event ->
run {
when (event) {
Lifecycle.Event.ON_RESUME -> webView.onResume()
Lifecycle.Event.ON_PAUSE -> webView.onPause()
Lifecycle.Event.ON_DESTROY -> webView.destroy()
else -> Log.e("WebView", event.name)
}
}
}
}
}
@Composable
fun rememberWebViewWIthLifecycle(): WebView {
val context = LocalContext.current
val webView = remember {
WebView(context)
}
val lifecycleObserver = rememberWebViewLifecycleObserver(webView)
val lifecycle = LocalLifecycleOwner.current.lifecycle
DisposableEffect(lifecycle) {
lifecycle.addObserver(lifecycleObserver)
onDispose {
lifecycle.removeObserver(lifecycleObserver)
}
}
return webView
}
使用
然后就可以直接在 @Composable函数中使用这些UI
使用webbiew
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
ComposableWebView(
modifier = Modifier.fillMaxWidth(),
url = schoolNews.url
)
}
或者
item {
SettingItem("音量") {
ComposableSeekBar(
modifier = Modifier.fillParentMaxWidth(0.7f).height(50.dp),
min = 0f,
max = maxVolume.toFloat(),
process = curVolume.toFloat(),
scrollOffsetState
) { progress ->
mAudioManager.setStreamVolume(
AudioManager.STREAM_MUSIC, progress, 0
)
}
}
}