https://rivecn.com/assets/js/945ac4ed.113f1deb.js

1"use strict";(self.webpackChunkrive_docs=self.webpackChunkrive_docs||[]).push([[23052],{90554:(e,i,n)=>{n.r(i),n.d(i,{assets:()=>t,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>s});const d=JSON.parse('{"id":"Runtimes/Android/Layouts","title":"\u5e03\u5c40","description":"\u63a7\u5236\u56fe\u5f62\u5728\u5bb9\u5668\u5185\u7684\u5e03\u5c40\u65b9\u5f0f\u3002","source":"@site/docs/Runtimes/Android/Layouts.md","sourceDirName":"Runtimes/Android","slug":"/Runtimes/Android/Layouts","permalink":"/docs/Runtimes/Android/Layouts","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":6,"frontMatter":{"sidebar_position":6},"sidebar":"tutorialSidebar","previous":{"title":"\u72b6\u6001\u673a","permalink":"/docs/Runtimes/Android/State Machines"},"next":{"title":"\u7f13\u5b58 Rive \u6587\u4ef6","permalink":"/docs/Runtimes/Android/Caching a Rive File"}}');var l=n(74848),c=n(28453);const r={sidebar_position:6},o="\u5e03\u5c40",t={},s=[{value:"\u9002\u914d\u6a21\u5f0f\uff08Fit Mode\uff09",id:"\u9002\u914d\u6a21\u5f0ffit-mode",level:2},{value:"Compose API",id:"compose-api",level:3},{value:"Legacy View API",id:"legacy-view-api",level:3},{value:"\u4f7f\u7528 XML \u5e03\u5c40",id:"\u4f7f\u7528-xml-\u5e03\u5c40",level:4},{value:"\u4f7f\u7528 Kotlin",id:"\u4f7f\u7528-kotlin",level:4},{value:"\u54cd\u5e94\u5f0f\u5e03\u5c40",id:"\u54cd\u5e94\u5f0f\u5e03\u5c40",level:2},{value:"Compose API",id:"compose-api-1",level:3},{value:"Legacy View API",id:"legacy-view-api-1",level:3},{value:"\u793a\u4f8b",id:"\u793a\u4f8b",level:4},{value:"\u4f7f\u7528 XML \u5e03\u5c40",id:"\u4f7f\u7528-xml-\u5e03\u5c40-1",level:4},{value:"\u4f7f\u7528 Kotlin",id:"\u4f7f\u7528-kotlin-1",level:4},{value:"\u8c03\u6574\u5e03\u5c40\u7f29\u653e\u56e0\u5b50",id:"\u8c03\u6574\u5e03\u5c40\u7f29\u653e\u56e0\u5b50",level:4},{value:"\u8c03\u6574\u753b\u677f\u5c3a\u5bf8",id:"\u8c03\u6574\u753b\u677f\u5c3a\u5bf8",level:4}];function a(e){const i={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",p:"p",pre:"pre",...(0,c.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(i.header,{children:(0,l.jsx)(i.h1,{id:"\u5e03\u5c40",children:"\u5e03\u5c40"})}),"\n",(0,l.jsx)(i.p,{children:"\u63a7\u5236\u56fe\u5f62\u5728\u5bb9\u5668\u5185\u7684\u5e03\u5c40\u65b9\u5f0f\u3002"}),"\n",(0,l.jsx)(i.h2,{id:"\u9002\u914d\u6a21\u5f0ffit-mode",children:"\u9002\u914d\u6a21\u5f0f\uff08Fit Mode\uff09"}),"\n",(0,l.jsx)(i.p,{children:"\u9002\u914d\u6a21\u5f0f\u51b3\u5b9a Rive \u5185\u5bb9\u5982\u4f55\u9002\u914d\u5176\u5bb9\u5668\u3002"}),"\n",(0,l.jsx)(i.h3,{id:"compose-api",children:"Compose API"}),"\n",(0,l.jsxs)(i.p,{children:[(0,l.jsx)(i.code,{children:"Fit"})," \u5bc6\u5c01\u7c7b\u7528\u4e8e\u6307\u5b9a\u9002\u914d\u6a21\u5f0f\u3002\u9664 ",(0,l.jsx)(i.code,{children:"Layout"})," \u548c ",(0,l.jsx)(i.code,{children:"Fill"})," \u53d8\u4f53\u5916\uff0c\u53ef\u63d0\u4f9b ",(0,l.jsx)(i.code,{children:"Alignment"})," \u679a\u4e3e\u6307\u5b9a\u5bf9\u9f50\u65b9\u5f0f\u3002\u5982\u679c\u4e0d\u63d0\u4f9b\u5bf9\u9f50\u65b9\u5f0f\uff0c\u9ed8\u8ba4\u4e3a ",(0,l.jsx)(i.code,{children:"Alignment.Center"}),"\u3002"]}),"\n",(0,l.jsx)(i.pre,{children:(0,l.jsx)(i.code,{className:"language-kotlin",children:"Rive(\n    myRiveFile,\n    fit = Fit.Cover(Alignment.TopCenter)\n)\n"})}),"\n",(0,l.jsx)(i.h3,{id:"legacy-view-api",children:"Legacy View API"}),"\n",(0,l.jsxs)(i.p,{children:[(0,l.jsx)(i.code,{children:"Fit"})," \u679a\u4e3e\u6307\u5b9a\u9002\u914d\u6a21\u5f0f\uff0c\u9009\u9879\u5305\u62ec\uff1a",(0,l.jsx)(i.code,{children:"LAYOUT"}),"\u3001",(0,l.jsx)(i.code,{children:"CONTAIN"}),"\u3001",(0,l.jsx)(i.code,{children:"SCALE_DOWN"}),"\u3001",(0,l.jsx)(i.code,{children:"COVER"}),"\u3001",(0,l.jsx)(i.code,{children:"FIT_WIDTH"}),"\u3001",(0,l.jsx)(i.code,{children:"FIT_HEIGHT"}),"\u3001",(0,l.jsx)(i.code,{children:"FILL"})," \u548c ",(0,l.jsx)(i.code,{children:"NONE"}),"\u3002"]}),"\n",(0,l.jsxs)(i.p,{children:[(0,l.jsx)(i.code,{children:"Alignment"})," \u679a\u4e3e\u6307\u5b9a\u5bf9\u9f50\u65b9\u5f0f\uff0c\u9009\u9879\u5305\u62ec\uff1a",(0,l.jsx)(i.co

1de,{children:"TOP_LEFT"}),"\u3001",(0,l.jsx)(i.code,{children:"TOP_CENTER"}),"\u3001",(0,l.jsx)(i.code,{children:"TOP_RIGHT"}),"\u3001",(0,l.jsx)(i.code,{children:"CENTER_LEFT"}),"\u3001",(0,l.jsx)(i.code,{children:"CENTER"}),"\u3001",(0,l.jsx)(i.code,{children:"CENTER_RIGHT"}),"\u3001",(0,l.jsx)(i.code,{children:"BOTTOM_LEFT"}),"\u3001",(0,l.jsx)(i.code,{children:"BOTTOM_CENTER"})," \u548c ",(0,l.jsx)(i.code,{children:"BOTTOM_RIGHT"}),"\u3002"]}),"\n",(0,l.jsx)(i.h4,{id:"\u4f7f\u7528-xml-\u5e03\u5c40",children:"\u4f7f\u7528 XML \u5e03\u5c40"}),"\n",(0,l.jsx)(i.pre,{children:(0,l.jsx)(i.code,{className:"language-xml",children:'<app.rive.runtime.kotlin.RiveAnimationView\n    android:layout_width="match_parent"\n    android:layout_height="match_parent"\n    app:riveResource="@raw/my_rive_file"\n    app:riveAlignment="CENTER"\n    app:riveFit="CONTAIN"\n/>\n'})}),"\n",(0,l.jsx)(i.h4,{id:"\u4f7f\u7528-kotlin",children:"\u4f7f\u7528 Kotlin"}),"\n",(0,l.jsx)(i.pre,{children:(0,l.jsx)(i.code,{className:"language-kotlin",children:"animationView.fit = Fit.FILL\nanimationView.alignment = Alignment.CENTER\n"})}),"\n",(0,l.jsx)(i.h2,{id:"\u54cd\u5e94\u5f0f\u5e03\u5c40",children:"\u54cd\u5e94\u5f0f\u5e03\u5c40"}),"\n",(0,l.jsx)(i.h3,{id:"compose-api-1",children:"Compose API"}),"\n",(0,l.jsxs)(i.p,{children:["\u53c2\u89c1 ",(0,l.jsx)(i.a,{href:"https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/ComposeLayoutActivity.kt",children:"Compose Layout"})," \u793a\u4f8b\u3002"]}),"\n",(0,l.jsxs)(i.p,{children:["\u5728 ",(0,l.jsx)(i.code,{children:"Rive"})," \u53ef\u7ec4\u5408\u9879\u4e2d\u5c06 ",(0,l.jsx)(i.code,{children:"fit"})," \u53c2\u6570\u8bbe\u7f6e\u4e3a ",(0,l.jsx)(i.code,{children:"Fit.Layout"}),"\u3002\u8fd9\u5c06\u8c03\u6574\u753b\u677f\u5c3a\u5bf8\u4ee5\u5339\u914d\u5bb9\u5668\u5927\u5c0f\u3002",(0,l.jsx)(i.code,{children:"Fit.Layout"})," \u6784\u9020\u51fd\u6570\u63a5\u53d7\u53ef\u9009\u7684 ",(0,l.jsx)(i.code,{children:"layoutScaleFactor"})," \u53c2\u6570\u6765\u8c03\u6574\u753b\u677f\u7f29\u653e\u6bd4\u4f8b\u3002\u9ed8\u8ba4\u4e3a 1\uff0c\u5373\u4e0d\u7f29\u653e\u3002"]}),"\n",(0,l.jsx)(i.pre,{children:(0,l.jsx)(i.code,{className:"language-kotlin",children:"Rive(\n    myRiveFile,\n    fit = Fit.Layout(1.2f) // 1.2x \u7f29\u653e\n)\n"})}),"\n",(0,l.jsx)(i.h3,{id:"legacy-view-api-1",children:"Legacy View API"}),"\n",(0,l.jsx)(i.h4,{id:"\u793a\u4f8b",children:"\u793a\u4f8b"}),"\n",(0,l.jsxs)(i.p,{children:["\u53c2\u89c1 ",(0,l.jsx)(i.a,{href:"https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/LayoutActivity.kt",children:"Layout"})," \u793a\u4f8b\u3002"]}),"\n",(0,l.jsx)(i.h4,{id:"\u4f7f\u7528-xml-\u5e03\u5c40-1",children:"\u4f7f\u7528 XML \u5e03\u5c40"}),"\n",(0,l.jsxs)(i.p,{children:["\u5c06 ",(0,l.jsx)(i.code,{children:"riveFit"})," \u5c5e\u6027\u8bbe\u7f6e\u4e3a ",(0,l.jsx)(i.code,{children:'"LAYOUT"'}),"\u3002"]}),"\n",(0,l.jsx)(i.pre,{children:(0,l.jsx)(i.code,{className:"language-xml",children:'<app.rive.runtime.kotlin.RiveAnimationView\n    ...\n    app:riveFit="LAYOUT"\n/>\n'})}),"\n",(0,l.jsx)(i.h4,{id:"\u4f7f\u7528-kotlin-1",children:"\u4f7f\u7528 Kotlin"}),"\n",(0,l.jsxs)(i.p,{children:["\u5c06 ",(0,l.jsx)(i.code,{children:"RiveAnimationView"})," \u7684 ",(0,l.jsx)(i.code,{children:"fit"})," \u5c5e\u6027\u8bbe\u7f6e\u4e3a ",(0,l.jsx)(i.code,{children:"LAYOUT"}),"\u3002"]}),"\n",(0,l.jsx)(i.pre,{children:(0,l.jsx)(i.code,{className:"language-kotlin",children:"val animationView = findViewById<RiveAnimationView>(R.id.my_view)\nanimationView.fit = Fit.LAYOUT\n"})}),"\n",(0,l.jsx)(i.h4,{id:"\u8c03\u6574\u5e03\u5c40\u7f29\u653e\u56e0\u5b50",children:"\u8c03\u6574\u5e03\u5c40\u7f29\u653e\u56e0\u5b50"}),"\n",(0,l.jsxs)(i.p,{children:["\u4f7f\u7528 ",(0,l.jsx)(i.code,{children:"layoutScaleFactor"})," \u5c5e\u6027\u8c03\u6574\u5185\u5bb9\u7684\u7f29\u653e\u56e0\u5b50\u3002\u6b64\u5c5e\u6027\u53ef\u4e3a\u7a7a\uff0c\u9ed8\u8ba4\u4f7f\u7528 ",(0,l.jsx)(i.code,{children:"resources.displayMetrics.density"})," \u62a5\u544a\u7684\u5bc6\u5ea6\u3002\u4f60\u53ef\u4ee5\u5c06\u5176\u8986\u76d6\u4e3a\u4efb\u610f\u6b63\u6d6e\u70b9\u503c\uff0c\u6216\u91cd\u7f6e\u4e3a ",(0,l.jsx)(i.co

1de,{children:"null"})," \u6062\u590d\u7cfb\u7edf\u63a7\u5236\uff1a"]}),"\n",(0,l.jsx)(i.pre,{children:(0,l.jsx)(i.code,{className:"language-kotlin",children:"// \u5f3a\u5236\u8bbe\u5b9a\u7f29\u653e\u56e0\u5b50\nanimationView.layoutScaleFactor = 2.5f\n// \u91cd\u7f6e\u4e3a\u7cfb\u7edf\u63a7\u5236\nanimationView.layoutScaleFactor = null\n"})}),"\n",(0,l.jsx)(i.h4,{id:"\u8c03\u6574\u753b\u677f\u5c3a\u5bf8",children:"\u8c03\u6574\u753b\u677f\u5c3a\u5bf8"}),"\n",(0,l.jsxs)(i.p,{children:["\u53ef\u4ee5\u4f7f\u7528 ",(0,l.jsx)(i.code,{children:"width"})," \u548c ",(0,l.jsx)(i.code,{children:"height"})," \u5c5e\u6027\u624b\u52a8\u63a7\u5236\u753b\u677f\u5c3a\u5bf8\u3002\u4f7f\u7528 ",(0,l.jsx)(i.code,{children:"resetArtboardSize()"})," \u53ef\u5c06\u8fd9\u4e9b\u503c\u6062\u590d\u4e3a\u9ed8\u8ba4\u503c\u3002"]}),"\n",(0,l.jsx)(i.pre,{children:(0,l.jsx)(i.code,{className:"language-kotlin",children:"// \u5f3a\u5236\u8bbe\u5b9a\u753b\u677f\u5c3a\u5bf8\nanimationView.controller.activeArtboard?.width = 1000f\nanimationView.controller.activeArtboard?.height = 1000f\n// \u6062\u590d\u9ed8\u8ba4\u753b\u677f\u5c3a\u5bf8\nanimationView.controller.activeArtboard?.resetArtboardSize()\n"})})]})}function h(e={}){const{wrapper:i}={...(0,c.R)(),...e.components};return i?(0,l.jsx)(i,{...e,children:(0,l.jsx)(a,{...e})}):a(e)}},28453:(e,i,n)=>{n.d(i,{R:()=>r,x:()=>o});var d=n(96540);const l={},c=d.createContext(l);function r(e){const i=d.useContext(c);return d.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function o(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:r(e.components),d.createElement(c.Provider,{value:i},e.children)}}}]);