Zenn
⛳

UnityでScrollViewのUIがズレる問題に悩んだ末、Anchorとサイズを見直した話

に公開
Unity
個人開発
ScrollView
ui開発
recttransform
tech

UnityでUIを組んでると、ScrollViewの中のUIが「なんかズレて見える…」という場面、ありますよね？

特に解像度や端末サイズが違うと、想定していた位置に表示されない問題が出がちです。

今回は、実際のアプリ開発で遭遇した「ScrollViewに配置したNodeと、それに紐づく線（ConnectionLine）がズレる」問題と、どうやって解決にたどり着いたかを共有します。

何が起きていたのか？

  • ScrollViewの中に「Node」UIを複数並べて配置
  • 各Nodeに対して線（ConnectionLine）を描画
  • 端末によっては、Nodeと線がズレる／スクロールしきれない現象が発生

特にiPadなど横幅の広い端末では、右端まで表示されないケースがありました。

試したこと＆気づいたこと

Anchorの違いがズレを生む

  • NodeのAnchorは middle left
  • 線の描画Canvasは stretch stretch

このアンカー設定の違いが、ズレの元凶でした。

RectTransform nodeContent = ...; // middle left
RectTransform connectionParent = ...; // stretch → middle left に揃えることで解決
Anchorが揃っていれば、どの端末でもNodeと線の位置がピッタリ一致するように。

ScrollViewのContentサイズが足りない

「右までスクロールできない」の原因は、そもそもContentの横幅が足りてなかった。

float requiredWidth = nodeCount * (nodeSpacing + nodeWidth);
contentRectTransform.sizeDelta = new Vector2(requiredWidth, contentRectTransform.sizeDelta.y);

この処理を入れることで、Nodeをすべて表示するだけの幅が確保されます。

Coroutineでレイアウトの確定を待つ

Start()でいきなりサイズを変えると、レイアウト未確定の状態でズレが発生することも。

なので、Coroutineで1フレーム待つのがポイントでした。

IEnumerator Start() {
    yield return null; // 1フレーム待ってレイアウト確定
    AdjustContainerWidth();
}

結果

Anchorを middle left に統一

Contentの幅をNode数に応じて動的に調整

初期化のタイミングを1フレーム遅らせて安定化

これで、どの解像度でもScrollView内のUIと線がズレなくなりました 🎉

最後に

ブログでもUnityや個人開発ネタを発信中です！
開発ノウハウやアプリ制作過程、Unity連携系のハマりポイントなど
より深掘りした内容をブログにまとめています。
▶ https://syunpp.com

公開中のアプリ一覧はこちら！
実際にUnityで開発してリリース済みのアプリ一覧をまとめています。
▶ https://syunpp.com/公開中のアプリ一覧/

Discussion