scrollbar.zh.md

滚动条

翻译：English

ZoomImage 支持显示滚动条，滚动条可以明确的告知用户当前的位置，还有多远距离到达底部或顶部。滚动条会在无操作 800 毫秒后自动隐藏，当用户再次操作时会自动显示

配置

ScrollBarSpec 用来描述滚动条的样式，有三个参数：

• color: Color = Color(0xB2888888): 滚动条的颜色，默认为灰色。
• size: Dp = 3.dp: 滚动条的尺寸，默认为 3 dp。横向滚动条时为高度，纵向滚动条时为宽度。
• margin: Dp = 6.dp: 滚动条到边缘的距离，默认为 6 dp。
• windowInsets: WindowInsets? = null: 适用于 Compose. 设置滚动条的 WindowInsets，默认为 null
• windowInsetsTypeMask: Int? = null: 适用于 Android View. 设置滚动条的 WindowInsets 类型，默认为 null

compose:

val scrollBar = remember {
    ScrollBarSpec(
        color = androidx.compose.ui.graphics.Color.Red,
        size = 6.dp,
        margin = 12.dp,
      windowInsets = WindowInsets.navigationBars,
    )
}
SketchZoomAsyncImage(
    uri = "https://sample.com/sample.jpeg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
    scrollBar = scrollBar,
)

view:

val sketchImageView = SketchZoomImageView(context)
sketchImageView.scrollBar = ScrollBarSpec(
    color = androidx.compose.ui.graphics.Color.Red,
    size = 6.dp,
    margin = 12.dp,
  windowInsetsTypeMask = WindowInsetsCompat.Type.navigationBars(),
)

ScrollBarSpec 还有提供了一些常用配置如下：

• ScrollBarSpec.Default：默认配置，颜色为灰色，尺寸为 3 dp，距离屏幕侧边边缘为 6 dp，两头距离屏幕边缘为 12 dp，不启用 WindowInsets
• ScrollBarSpec.Medium：颜色为灰色，尺寸为 5 dp，距离屏幕侧边边缘为 10 dp，两头距离屏幕边缘为 20 dp，不启用 WindowInsets
• ScrollBarSpec.Large：颜色为灰色，尺寸为 7 dp，距离屏幕侧边边缘为 14 dp，两头距离屏幕边缘为 28 dp，不启用 WindowInsets

如果你想要在导航 WindowInsets 的基础上再增加滚动条的距离，如下：

val scrollBarSpec = ScrollBarSpec.Default

// compose
val scrollBarInsets = scrollBarSpec?.toWindowInsets() ?: WindowInsets()
val windowInsets = NavigationBarDefaults.windowInsets.add(scrollBarInsets)
Box(
  modifier = Modifier
    .fillMaxSize()
    .windowInsetsPadding(windowInsets)
) {

}

// view
val view = ...
ViewCompat.setOnApplyWindowInsetsListener(view) { _, insets ->
  val windowInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
  val scrollBarInsets = scrollBarSpec.toInsets()
  view.updatePadding(
    right = windowInsets.right + scrollBarInsets.right,
    bottom = windowInsets.bottom + scrollBarInsets.bottom
  )
  insets
}

关闭滚动条

ZoomImage 默认显示滚动条，你可以关闭它

compose:

SketchZoomAsyncImage(
    uri = "https://sample.com/sample.jpeg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
    scrollBar = null,
)

view:

val sketchImageView = SketchZoomImageView(context)
sketchImageView.scrollBar = null