Shulou(Shulou.com)06/03 Report--

Dialog according to the order of the elegant writing of the pop-up window is how, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

I wrote a wave effect progress loading library for Compose. API is designed to meet the Compose development specifications and is very easy to use.

1. Mode of use

Introducing jitpack into the build.gradle of root

Allprojects {repositories {... Maven {url 'https://jitpack.io'}

Introduce the latest version of ComposeWaveLoading into the build.gradle of module

Dependencies {implementation 'com.github.vitaviva:ComposeWaveLoading:$latest_version'} 2. API Design idea Box {WaveLoading (progress = 0.5f / / 0f ~ 1f) {Image (painter = painterResource (id = R.drawable.logo_tiktok), contentDescription = "")}}

In traditional UI development, such a wave control is designed, which generally uses a custom View and passes in Image and so on as properties. In Compose, we let WaveLoading and Image be used in combination, so that the API is more flexible, and the interior of WaveLoding can be Image, Text or other Composable. Wave animation does not adhere to a particular Composable, any Composable can be shown in the form of wave animation, through the combined use of Composable, expand the coverage of "ability".

3. Introduction to API parameters @ Composablefun WaveLoading (modifier: Modifier = Modifier, foreDrawType: DrawType = DrawType.DrawImage, backDrawType: DrawType = rememberDrawColor (color = Color.LightGray), @ FloatRange (from = 0.0, to = 1.0) progress: Float = 0f, @ FloatRange (from = 0.0,1.0) amplitude: Float = defaultAmlitude, @ FloatRange (from = 0.0, to = 1.0) velocity: Float = defaultVelocity Content: @ Composable BoxScope. ()-> Unit) {.}

The parameters are described as follows:

Parameter description progress loading progress foreDrawType wave drawing type: the background of DrawColor or DrawImagebackDrawType wave map draws the amplitude of amplitude wave, and 0f ~ 1f represents the proportion of amplitude in the whole drawing area, the speed of wave movement of velocity sub-Composalble.

Next, let's focus on DrawType.

DrawType

The progress of the waves is reflected in the visual difference between the foreground (foreDrawType) and the background (backDrawType). We can specify different DrawType for the foreground to change the style of the waves.

Sealed interface DrawType {object None: DrawType object DrawImage: DrawType data class DrawColor (val color: Color): DrawType}

As above, there are three types of DrawType:

None: do not paint

DrawColor: drawing with a single color

DrawImage: draw as is

Take the following Image as an example to experience the combined effect of different DrawType

IndexbackDrawTypeforeDrawType shows 1DrawImageDrawImage background grayscale, foreground original 2DrawColor (Color.LightGray) DrawImage background monochrome, foreground original 3DrawColor (Color.LightGray) DrawColor (Color.Cyan) background monochrome, foreground monochrome 4NoneDrawColor (Color.Cyan) without background, foreground monochrome.

Notice that when backDrawType is set to DrawImage, it is displayed as a grayscale image.

4. Analysis of principle

A brief introduction to the principle of implementation. For ease of understanding, the code is simplified and the complete code can be viewed at github

The key to this library is that the content of WaveLoading {...} can be taken out and displayed in the form of wave animation. So you need to convert the sub-Composalbe to Bitmap for subsequent processing.

4.1 get Bitmap

I didn't find a way to get the bitmap in Compose, so I used a trick way, through the good interoperability between Compose and Android native view, first display the sub-Composalbe in AndroidView, and then get the Bitmap through native:

@ Composablefun WaveLoading (...) {Box {var _ bitmap by remember {mutableStateOf (Bitmap.createBitmap (1,1) Bitmap.Config.RGB_565)} AndroidView (factory = {context-> / / Creates custom view object: AbstractComposeView (context) {@ Composable override fun Content () {Box (Modifier.wrapContentSize ()) { Content ()}} override fun dispatchDraw (canvas: Canvas?) {val bmp = Bitmap.createBitmap (width) Height, Bitmap.Config.ARGB_8888) val canvas2 = Canvas (source) super.dispatchDraw (canvas2) _ bitmap = bmp}) WaveLoadingInternal (bitmap = _ bitmap)}}

AndroidView is a native control that can draw Composable. We put the child Composable of WaveLoading in its Content, and when we draw it in dispatchDraw, we draw the content into our prepared Bitmap.

4.2 draw wavy lines

We draw the wavy line based on the Canvas of Compose, and the wavy line is drawn by the Path load definition WaveAnim.

Internal data class WaveAnim (val duration: Int, val offsetX: Float, val offsetY: Float, val scaleX: Float, val scaleY: Float,) {privateval _ path = Path () / / draw wavy lines internal fun buildWavePath (dp: Float, width: Float, height: Float, amplitude: Float Progress: Float): Path {var wave = (scaleY * amplitude). RoundToInt () / / calculate the stretched amplitude _ path.reset () _ path.moveTo (0f, height) _ path.lineTo (0f Height * (1-progress) / / draw wave if (wave > 0) {var x = dp while (x) by sinusoidal curve

< width) { _path.lineTo( x, height * (1 - progress) - wave / 2f * Math.sin(4.0 * Math.PI * x / width) .toFloat() ) x += dp } } _path.lineTo(width, height * (1 - progress)) _path.lineTo(width, height) _path.close() return _path } } 如上，波浪线 Path 通过正弦函数绘制。 4.3 波浪填充 有了 Path ，我们还需要填充内容。填充的内容前文已经介绍过，或者是 DrawColor 或者 DrawImage。 绘制 Path 需要定义 Paint val forePaint = remember(foreDrawType, bitmap) { Paint().apply { shader = BitmapShader( when (foreDrawType) { is DrawType.DrawColor ->

Bitmap.toColor (foreDrawType.color) is DrawType.DrawImage-> bitmap else-> alphaBitmap}, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)}}

Paint uses the Shader shader to draw Bitmap, and when DrawType draws only monochrome, do single-value processing on the bitmap:

/ * Monochromatic bitmap * / fun Bitmap.toColor (color: androidx.compose.ui.graphics.Color): Bitmap {val bmp = Bitmap.createBitmap (width, height, Bitmap.Config.ARGB_8888) val oldPx = IntArray (width * height) / / used to store the color information getPixels (oldPx, 0, width, 0, 0, width) of each pixel in the original image Height) / / get the pixel information in the original image val newPx = oldPx.map {color.copy (Color.alpha (it) / 255f). ToArgb ()}. ToTypedArray (). ToIntArray () bmp.setPixels (newPx, 0, width, 0,0, width, height) / / assign the processed pixel information to the new image return bmp} 4.4 wave animation

Finally, through the Compose animation to make the waves move.

Val transition = rememberInfiniteTransition () val waves = remember (Unit) {listOf (WaveAnim (waveDuration, 0f, 0f, scaleX, scaleY), WaveAnim ((waveDuration * 0.75f). RoundToInt (), 0f, 0f, scaleX, scaleY), WaveAnim ((waveDuration * 0.5f). RoundToInt (), 0f, 0f, scaleX, scaleY)} val animates: List = waves.map {transition.animateOf (duration = it.duration)}

To make the waves feel more layered, we define three WaveAnim to animate in the form of Set

Finally, you can draw the Path of the waves to Canvas with WaveAnim

Canvas {drawIntoCanvas {canvas-> / / draw the background canvas.drawRect (0f, 0f, size.width, size.height, backPaint) / / draw the foreground waves.forEachIndexed {index Wave-> canvas.withSave {val maxWidth = 2 * scaleX * size.width / velocity.coerceAtLeast (0.1f) val maxHeight = scaleY * size.height canvas.drawPath (wave.buildWavePath (width = maxWidth) Height = maxHeight, amplitude = size.height * amplitude, progress = progress), forePaint)}} is it helpful to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.