トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

ScrollViewで文章の縦スクロールバーを作る【Unity】

ScrollViewを使って長い文章のスクロールバーを作った。パーツが多くてどこをいじったらいいかややこしくて最初失敗したけど、意外と触るところは少なかった

ScrollView

UI>ScrollView

f:id:bibinbaleo:20191116214201p:plain

まずScrollView全体をスクロールしたい大きさにする。

例えば画面の真ん中に出すとしたらこんな感じ。

f:id:bibinbaleo:20191116214709p:plain

Content領域の範囲が自動でスクロール範囲になる。

f:id:bibinbaleo:20191116214833p:plain

ContentにtextコンポーネントとContentSizeFitterを付ける。

縦長ならVerticalFitをPreferredSizeにする。

f:id:bibinbaleo:20191116214814p:plain

textに長い文章を入れる。するとContents領域がtextの長さ分大きくなる

f:id:bibinbaleo:20191116215118p:plain

そしてプレイすると横のスクロールバーは勝手に消えていい感じにスクロールできる

f:id:bibinbaleo:20191116220526p:plain

 

簡単!

その他設定(20200619追記)

Mask

ViewPortについているMaskは処理負荷が高いのでRectMask2Dに変える

f:id:bibinbaleo:20200619102129p:plain

びよーん

Unityのスクロールビューは、つかんで動かすとびよーんってするけど、あれをなくすにはMovementTypeをClampedにすればよい。

f:id:bibinbaleo:20200619144843p:plain

Unrestricted(無制限), Elastic(弾性), Clamped(制限付き) コンテンツを Scroll Rect の範囲内に強制的に収める場合には Elastic か Clamped を使用してください。Elastic モードはコンテンツが Scroll Rect の端に到達した際にバウンドさせます。

Scroll Rect - Unity マニュアル

他のUnity製アプリの利用規約とかでもビヨンビヨンするのがあって気になってたけど、設定でオフにできたのね

Horizontal

横スクロールがいらない時、ScrollViewについているScrollRectのHorizontalのチェックを外す

f:id:bibinbaleo:20200619102220p:plain

そもそもScrollbar Horizontalも消していい

f:id:bibinbaleo:20200619102351p:plain

 

デザイン

パーツをいい感じにする。ImageにあるBackgroundとかを消して単色にするとUnityっぽさは消える

f:id:bibinbaleo:20191116221446p:plain

f:id:bibinbaleo:20191116221348p:plain

余白は背景にImageを置いてごまかす

f:id:bibinbaleo:20191116221339p:plain

f:id:bibinbaleo:20191116221344p:plain

 

最後に

f:id:bibinbaleo:20191116221352p:plain





 

 

qiita.com