跳到主要内容

布局

控制图形在容器内的布局方式。

适配模式(Fit Mode)

适配模式决定 Rive 内容如何适配其容器。

Compose API

Fit 密封类用于指定适配模式。除 LayoutFill 变体外,可提供 Alignment 枚举指定对齐方式。如果不提供对齐方式,默认为 Alignment.Center

Rive(
myRiveFile,
fit = Fit.Cover(Alignment.TopCenter)
)

Legacy View API

Fit 枚举指定适配模式,选项包括:LAYOUTCONTAINSCALE_DOWNCOVERFIT_WIDTHFIT_HEIGHTFILLNONE

Alignment 枚举指定对齐方式,选项包括:TOP_LEFTTOP_CENTERTOP_RIGHTCENTER_LEFTCENTERCENTER_RIGHTBOTTOM_LEFTBOTTOM_CENTERBOTTOM_RIGHT

使用 XML 布局

<app.rive.runtime.kotlin.RiveAnimationView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:riveResource="@raw/my_rive_file"
app:riveAlignment="CENTER"
app:riveFit="CONTAIN"
/>

使用 Kotlin

animationView.fit = Fit.FILL
animationView.alignment = Alignment.CENTER

响应式布局

Compose API

参见 Compose Layout 示例。

Rive 可组合项中将 fit 参数设置为 Fit.Layout。这将调整画板尺寸以匹配容器大小。Fit.Layout 构造函数接受可选的 layoutScaleFactor 参数来调整画板缩放比例。默认为 1,即不缩放。

Rive(
myRiveFile,
fit = Fit.Layout(1.2f) // 1.2x 缩放
)

Legacy View API

示例

参见 Layout 示例。

使用 XML 布局

riveFit 属性设置为 "LAYOUT"

<app.rive.runtime.kotlin.RiveAnimationView
...
app:riveFit="LAYOUT"
/>

使用 Kotlin

RiveAnimationViewfit 属性设置为 LAYOUT

val animationView = findViewById<RiveAnimationView>(R.id.my_view)
animationView.fit = Fit.LAYOUT

调整布局缩放因子

使用 layoutScaleFactor 属性调整内容的缩放因子。此属性可为空,默认使用 resources.displayMetrics.density 报告的密度。你可以将其覆盖为任意正浮点值,或重置为 null 恢复系统控制:

// 强制设定缩放因子
animationView.layoutScaleFactor = 2.5f
// 重置为系统控制
animationView.layoutScaleFactor = null

调整画板尺寸

可以使用 widthheight 属性手动控制画板尺寸。使用 resetArtboardSize() 可将这些值恢复为默认值。

// 强制设定画板尺寸
animationView.controller.activeArtboard?.width = 1000f
animationView.controller.activeArtboard?.height = 1000f
// 恢复默认画板尺寸
animationView.controller.activeArtboard?.resetArtboardSize()