UnityでScrollViewの中に表示されるUIが、解像度や端末によってズレる問題に直面したことはありませんか？
本記事では、私が個人開発中に経験した「ScrollView内のUIずれ問題」と、実際にどうやって修正したかを共有します。
問題の概要
- ScrollViewの中に
NodeというUIオブジェクトを複数配置 - それに対応する線（
ConnectionLine）を別Canvasで表示 - 解像度によってNodeと線の位置がズレる
- iPad等で右にスクロールしきれない現象も発生
初期状態の構成
- ScrollView > Viewport > Content（Nodeの親）
- Node：
middle leftのAnchor - ConnectionLineの親Canvas：
stretch stretch
この状態だと、Scroll量とUIの位置計算が一致しないためズレが発生します。
修正のステップ
Anchorの統一
NodeとConnectionLineの描画基準を揃えるため、Anchorを両方ともmiddle leftに設定。
RectTransform nodeContent = ...; // middle left
RectTransform connectionParent = ...; // 元は stretch → middle left に変更
これにより、線とノードの中心が一致するようになります。
コンテナ幅の動的調整
右にスクロールしきれない問題は、Contentの横幅が足りていなかったのが原因。
float requiredWidth = nodeCount * (nodeSpacing + nodeWidth);
contentRectTransform.sizeDelta = new Vector2(requiredWidth, contentRectTransform.sizeDelta.y);
Coroutineで1フレーム待つ
Start()で設定しても反映されないことがあったため、レイアウト確定後に調整。
IEnumerator Start() {
yield return null; // レイアウト確定を1フレーム待つ
AdjustContainerWidth();
}
最終的なポイントまとめ
Nodeと線のAnchorを middle left に統一
ScrollViewのContentサイズを 動的に調整
サイズ調整は Coroutineで1フレーム待つ
最後に
ブログでもUnityや個人開発ネタを発信中です！
開発ノウハウやアプリ制作過程、Unity連携系のハマりポイントなど
より深掘りした内容をブログにまとめています。
▶ https://syunpp.com
公開中のアプリ一覧はこちら！
実際にUnityで開発してリリース済みのアプリ一覧をまとめています。
▶ https://syunpp.com/公開中のアプリ一覧/