布局

适配模式

适配模式控制 Rive 图形如何适配其视图边界。可用的适配选项包括填充（fill）、包含（contain）、覆盖（cover）、适配宽度（fitWidth）、适配高度（fitHeight）、缩小（scaleDown）和无适配（noFit）。

对齐

对齐方式决定图形在视图内的位置，当适配模式留有额外空间时尤其有用。支持的选项包括 topLeft、topCenter、topRight、centerLeft、center、centerRight、bottomLeft、bottomCenter 和 bottomRight。

应用适配模式

当前运行时

你可以在 Rive 对象上设置适配和布局选项。.fit 可以在运行时更新，无需创建新的 Rive 对象。

有关所有可能的选项，请参见 Fit.swift

// 为不使用布局的画板设置适配和对齐方式
let worker = try await Worker()
let file = try await File(source: ..., worker: worker)
var rive = try await Rive(file: file, fit: .contain(alignment: .center))
// 在运行时更新适配和对齐方式
rive.fit = .fitWidth(alignment: .topCenter)

旧版运行时

运行时提供以下枚举来设置布局参数：

• Fit（适配）

  • .fill
  • .contain
  • .cover
  • .fitWidth
  • .fitHeight
  • .scaleDown
  • .noFit

• Alignment（对齐）

  • .topLeft
  • .topCenter
  • .topRight
  • .centerLeft
  • .center
  • .centerRight
  • .bottomLeft
  • .bottomCenter
  • .bottomRight

SwiftUI

以下示例展示如何设置布局参数并在运行时切换：

struct SwiftLayout: View {
    @State private var fit: RiveFit = .contain
    @State private var alignment: RiveAlignment = .center

    var body: some View {
        VStack {
            RiveViewModel(fileName: "fancy_rive_file", fit: fit, alignment: alignment).view()
        }
        HStack {
            Text("Some Fit Examples")
        }
        HStack {
            Button("Fill") { fit = .fill }
            Button("Contain") { fit = .contain }
            Button("Cover") { fit = .cover }
        }
        HStack {
            Text("Some Alignment Examples")
        }
        HStack {
            Button("Top Left") { alignment = .topLeft }
            Button("Top Center") { alignment = .topCenter }
            Button("Top Right") { alignment = .topRight }
        }
    }
}

UIKit

以下示例展示如何设置布局参数并在运行时切换：

class LayoutViewController: UIViewController {
    @IBOutlet weak var riveView: RiveView!
    var viewModel = RiveViewModel(fileName: "fancy_rive_file")

    override func viewDidLoad() {
        viewModel.setView(riveView)
    }

    @IBAction func fitButtonTriggered(_ sender: UIButton) {
        setFit(name: sender.currentTitle!)
    }

    @IBAction func alignmentButtonTriggered(_ sender: UIButton) {
        setAlignment(name: sender.currentTitle!)
    }

    func setFit(name: String) {
        var fit: RiveFit = .contain
        switch name {
        case "Fill": fit = .fill
        case "Contain": fit = .contain
        case "Cover": fit = .cover
        case "Fit Width": fit = .fitWidth
        case "Fit Height": fit = .fitHeight
        case "Scale Down": fit = .scaleDown
        case "None": fit = .noFit
        default: fit = .contain
        }
        viewModel.fit = fit
    }

    func setAlignment(name: String) {
        var alignment: RiveAlignment = .center
        switch name {
        case "Top Left": alignment = .topLeft
        case "Top Center": alignment = .topCenter
        case "Top Right": alignment = .topRight
        case "Center Left": alignment = .centerLeft
        case "Center": alignment = .center
        case "Center Right": alignment = .centerRight
        case "Bottom Left": alignment = .bottomLeft
        case "Bottom Center": alignment = .bottomCenter
        case "Bottom Right": alignment = .bottomRight
        default: alignment = .center
        }
        viewModel.alignment = alignment
    }
}

响应式布局

当前运行时

创建新的 Rive 对象时，你可以将适配方式设置为布局（layout），缩放因子有两个选项：自动或显式。

let worker = try await Worker()
let file = try await File(source: ..., worker: worker)
// 创建带有布局适配的新 Rive 对象，根据视图显示的屏幕自动确定缩放因子
var rive = try await Rive(file: file, fit: .layout(scaleFactor: .automatic))
// 或者，使用显式缩放因子
rive.fit = .layout(scaleFactor: .explicit(2.0))

旧版运行时

示例

• SwiftUI

步骤

1. 将 RiveViewModel 实例的 fit 设置为 layout
2. 可选地在 RiveViewModel 上设置 layoutScaleFactor 以手动控制画板的缩放因子。

要启用自动确定缩放因子，将 .layoutScaleFactor 设置为 RiveViewModel.layoutScaleFactorAutomatic。这是默认值；等同于 -1。设置后，Rive 将监听视图模型的视图的窗口和屏幕变化，并自动为当前视图层次结构应用正确的缩放因子。

let viewModel = RiveViewModel(fileName: "...")
viewModel.fit = .layout
viewModel.layoutScaleFactor = RiveViewModel.layoutScaleFactorAutomatic // 允许 Rive 确定缩放因子
viewModel.layoutScaleFactor = 2.0 // 或者，显式设置缩放因子