BringIntoViewSpec

interface BringIntoViewSpec

The configuration of how a scrollable reacts to bring into view requests.

Check the following sample for a use case usage of this API:

Properties

Deprecated Animation spec customization is no longer supported.

val scrollAnimationSpec: AnimationSpec<Float>

An Animation Spec to be used as the animation to run to fulfill the BringIntoView requests.

Functions

fun calculateScrollDistance(offset: Float, size: Float, containerSize: Float): Float

Calculate the offset needed to bring one of the scrollable container's child into view. This will be called for every frame of the scrolling animation. This means that, as the animation progresses, the offset will naturally change to fulfill the scroll request.

All distances below are represented in pixels.

Parameters

Returns

Code Examples

FocusScrollingInLazyRowSample

@ExperimentalFoundationApi
@Composable
fun FocusScrollingInLazyRowSample() {
    // a bring into view spec that pivots around the center of the scrollable container
    val customBringIntoViewSpec =
        object : BringIntoViewSpec {
            override fun calculateScrollDistance(
                offset: Float,
                size: Float,
                containerSize: Float,
            ): Float {
                val trailingEdgeOfItemRequestingFocus = offset + size
                val sizeOfItemRequestingFocus = abs(trailingEdgeOfItemRequestingFocus - offset)
                val childSmallerThanParent = sizeOfItemRequestingFocus <= containerSize
                val initialTargetForLeadingEdge =
                    containerSize / 2f - (sizeOfItemRequestingFocus / 2f)
                val spaceAvailableToShowItem = containerSize - initialTargetForLeadingEdge
                val targetForLeadingEdge =
                    if (
                        childSmallerThanParent &&
                            spaceAvailableToShowItem < sizeOfItemRequestingFocus
                    ) {
                        containerSize - sizeOfItemRequestingFocus
                    } else {
                        initialTargetForLeadingEdge
                    }
                return offset - targetForLeadingEdge
            }
        }
    // LocalBringIntoViewSpec will apply to all scrollables in the hierarchy.
    CompositionLocalProvider(LocalBringIntoViewSpec provides customBringIntoViewSpec) {
        LazyRow(modifier = Modifier.fillMaxWidth().wrapContentHeight()) {
            items(100) {
                var color by remember { mutableStateOf(Color.White) }
                Box(
                    modifier =
                        Modifier.size(100.dp)
                            .padding(4.dp)
                            .background(Color.Gray)
                            .onFocusChanged { color = if (it.isFocused) Color.Red else Color.White }
                            .border(5.dp, color)
                            .focusable(),
                    contentAlignment = Alignment.Center,
                ) {
                    Text(text = it.toString())
                }
            }
        }
    }
}