Unity/リスト表示
提供: 初心者エンジニアの簡易メモ
目次
リストのUIを作る
unity/UIScrollView [ショートカット]
- リスト内の部品はPanelで作ってprefab化する
- prefabはAssets/Resourcesにいれる
参考:https://tech.pjin.jp/blog/2016/08/30/unity_skill_3/
prefabを画面にロード
参考:unity/3d [ショートカット]
リストの部品(panel)をprefabからロードする
- Ui/Panelを生成し、Textやボタンなどを貼り付ける
- Assets/Resourcesの中にPanelをドラッグするとprefabができる
- 以下のようにインスタンスを生成する
GameObject prefab = (GameObject)Resources.Load("HogePanel"); Vector3 position = new Vector3(x, y, z); GameObject obj = Instantiate(prefab, position, Quaternion.identity); obj.name = "HogePanel1";
- "Scroll View/Viewport/Content"にAddComponentsで、VerticalLayoutGroupを追加する
- VerticalLayoutGroupのControlChildSizeにチェック入れる。
- VerticalLayoutGroupのspacingを200とかいれて間隔を空ける
参考:http://tsubakit1.hateblo.jp/entry/2017/06/15/020309
参考:https://teratail.com/questions/111392
Instantiateのunity公式: https://docs.unity3d.com/jp/current/ScriptReference/Object.Instantiate.html
リストの部品がずれる場合
- prefab部品をダブルクリックして、RectTransformのTopとBottomを0にしてprefabを作り直す。
- prefab部品をダブルクリックして部品の中央をずらす。再度、prefabを作り直す。
リストの部品がずれる場合(NGパターン
以下パターンだと、コンテンツが入らなかったり、スクロールが戻されたりして失敗する
- ContentSizeFitterのチェックを外すとか
- ContentのHeightを3000とかに以下のようにプログラムで広げるとか
ContentのHeightを動的に変更
GameObject panel = GameObject.Find("/Canvas/Scroll View/Viewport/Content/Panel"); panel.GetComponent<RectTransform>().sizeDelta = new Vector2(w, h);
リストの高さが狭い時
VerticalLayoutGroupのspacingを200とかいれて間隔を空ける
リストのスクロールが下に行かない場合
- ScrollViewのViewportのContentの下にAddComponentでContentSizeFitterを追加
- ContentSizeFitterのVerticalfitをUnconstrainedからPreferredSizeにする
横スクロールを作る
- HierarchyからUI/ScrollViewを作成。
- Canvasの下にScrollViewができてることを確認。
- ScrollView/Viewport/ContentのInspectorに、HorizontalLayoutGroupを、AddComponentする
- ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする
- ScrollView/Viewport/ContentのInspectorの、HorizontalLayoutGroupのChildForceExpandのWidthに、チェック
- ScrollView/Viewport/ContentのInspectorの、HorizontalLayoutGroupのChildAlignmentをMiddleCenterへ
- ScrollView/Viewport/ContentのInspectorの、CotentSizeFitterのHorizontaiFitを、UnconstrainedからPreferredSizeへ変更する
- UI/Imageを作り、Resourcesへ移動
- 以下コードを追加
public class SampleScene : MonoBehaviour { void Start() { int cnt = 3; for (int i = 0; i < cnt; i++) { InstantiateImage(); } } void InstantiateImage() { GameObject parent = GameObject.Find("/Canvas/Scroll View/Viewport/Content"); GameObject prefab = (GameObject)Resources.Load("Image"); GameObject imageObj = Instantiate(prefab, Vector3.zero, Quaternion.identity, parent.transform); } }