跳到主要内容
中文系列课

布局

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

适配模式（Fit Mode）​

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

Compose API​

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

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

Legacy View API​

Fit 枚举指定适配模式，选项包括：LAYOUT、CONTAIN、SCALE_DOWN、COVER、FIT_WIDTH、FIT_HEIGHT、FILL 和 NONE。

Alignment 枚举指定对齐方式，选项包括：TOP_LEFT、TOP_CENTER、TOP_RIGHT、CENTER_LEFT、CENTER、CENTER_RIGHT、BOTTOM_LEFT、BOTTOM_CENTER 和 BOTTOM_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​

将 RiveAnimationView 的 fit 属性设置为 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

调整画板尺寸​

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

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