「Unity/リスト表示」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→リストの部品がずれる場合) |
(→縦スクロールリストでグループ化してテキストの高さを自動調整) |
||
(同じ利用者による、間の22版が非表示) | |||
行2: | 行2: | ||
[[unity/UIScrollView]] [ショートカット] | [[unity/UIScrollView]] [ショートカット] | ||
− | # | + | #リスト内の部品はPanelで作ってprefab化する |
− | # | + | #prefabはAssets/Resourcesにいれる |
参考:https://tech.pjin.jp/blog/2016/08/30/unity_skill_3/ | 参考: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公式: | Instantiateのunity公式: | ||
行16: | 行32: | ||
==リストの部品がずれる場合== | ==リストの部品がずれる場合== | ||
− | # | + | #prefab部品をダブルクリックして、RectTransformのTopとBottomを0にしてprefabを作り直す。 |
− | # | + | #prefab部品をダブルクリックして部品の中央をずらす。再度、prefabを作り直す。 |
+ | |||
+ | ==リストの部品がずれる場合(NGパターン== | ||
+ | 以下パターンだと、コンテンツが入らなかったり、スクロールが戻されたりして失敗する | ||
+ | #ContentSizeFitterのチェックを外すとか | ||
+ | #ContentのHeightを3000とかに以下のようにプログラムで広げるとか | ||
ContentのHeightを動的に変更 | ContentのHeightを動的に変更 | ||
− | GameObject panel = GameObject.Find( | + | GameObject panel = GameObject.Find("/Canvas/Scroll View/Viewport/Content/Panel"); |
panel.GetComponent<RectTransform>().sizeDelta = new Vector2(w, h); | 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に、VerticalLayoutGroupを、AddComponentする | ||
+ | #ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする | ||
+ | #ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのControlChildSizeのHeightに、チェック | ||
+ | #ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのChildAlignmentをUpperLeftへ | ||
+ | #ScrollView/Viewport/ContentのInspectorの、CotentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する | ||
+ | #UI/Textを作り、ScrollView/Viewport/Contentの下に設置 | ||
+ | テキストの幅を操作してと、自動で縦幅が調整されれば成功。 | ||
+ | |||
+ | ==縦スクロールリストでグループ化してテキストの高さを自動調整== | ||
+ | #HierarchyからUI/ScrollViewを作成。 | ||
+ | #Canvasの下にScrollViewができてることを確認。 | ||
+ | #ScrollView/Viewport/ContentのInspectorに、VerticalLayoutGroupを、AddComponentする | ||
+ | #ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする | ||
+ | #ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのControlChildSizeのHeightに、チェック | ||
+ | #ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのChildForceExpandのHeightに、チェック | ||
+ | #ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのChildAlignmentをUpperLeftへ | ||
+ | #ScrollView/Viewport/ContentのInspectorの、CotentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する | ||
+ | #UI/Imageを作り、ScrollView/Viewport/Contentの下に設置 | ||
+ | #UI/Textを作り、ScrollView/Viewport/Content/Imageの下に追加 | ||
+ | #ScrollView/Viewport/Content/ImageにHorizontalLayoutGroupを追加し、ControlChildSizeのHeightにチェック | ||
+ | #ScrollView/Viewport/Content/ImageにContentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する | ||
+ | Imageの中のテキストの幅を操作してと、自動でImageの縦幅が調整されれば成功。 | ||
+ | |||
+ | 参考:https://tsubakit1.hateblo.jp/entry/2015/10/19/022720 | ||
+ | |||
+ | ==横スクロールリストを作る== | ||
+ | #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へ移動 | ||
+ | #以下コードを追加 | ||
+ | <pre> | ||
+ | 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); | ||
+ | } | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | ===prefabの上下左右が微妙にずれる場合=== | ||
+ | #ScrollView/Viewport/ContentのInspectorのHorizontalLayoutGroupのPaddingの数値を適宜変更する | ||
+ | |||
+ | ===一番右に移動する=== | ||
+ | <pre> | ||
+ | GameObject scrollObj = GameObject.Find("/Canvas/Scroll View"); | ||
+ | ScrollRect scroll = scrollObj.GetComponent<ScrollRect>(); | ||
+ | scroll.horizontalNormalizedPosition = 1f | ||
+ | </pre> |
2022年8月16日 (火) 03:43時点における版
目次
リストの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に、VerticalLayoutGroupを、AddComponentする
- ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする
- ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのControlChildSizeのHeightに、チェック
- ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのChildAlignmentをUpperLeftへ
- ScrollView/Viewport/ContentのInspectorの、CotentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する
- UI/Textを作り、ScrollView/Viewport/Contentの下に設置
テキストの幅を操作してと、自動で縦幅が調整されれば成功。
縦スクロールリストでグループ化してテキストの高さを自動調整
- HierarchyからUI/ScrollViewを作成。
- Canvasの下にScrollViewができてることを確認。
- ScrollView/Viewport/ContentのInspectorに、VerticalLayoutGroupを、AddComponentする
- ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする
- ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのControlChildSizeのHeightに、チェック
- ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのChildForceExpandのHeightに、チェック
- ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのChildAlignmentをUpperLeftへ
- ScrollView/Viewport/ContentのInspectorの、CotentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する
- UI/Imageを作り、ScrollView/Viewport/Contentの下に設置
- UI/Textを作り、ScrollView/Viewport/Content/Imageの下に追加
- ScrollView/Viewport/Content/ImageにHorizontalLayoutGroupを追加し、ControlChildSizeのHeightにチェック
- ScrollView/Viewport/Content/ImageにContentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する
Imageの中のテキストの幅を操作してと、自動でImageの縦幅が調整されれば成功。
参考:https://tsubakit1.hateblo.jp/entry/2015/10/19/022720
横スクロールリストを作る
- 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); } }
prefabの上下左右が微妙にずれる場合
- ScrollView/Viewport/ContentのInspectorのHorizontalLayoutGroupのPaddingの数値を適宜変更する
一番右に移動する
GameObject scrollObj = GameObject.Find("/Canvas/Scroll View"); ScrollRect scroll = scrollObj.GetComponent<ScrollRect>(); scroll.horizontalNormalizedPosition = 1f