Unity/リスト表示/通常 - 変更履歴

2024年1月8日 (月) 21:17にAdminによる

2024-01-08T21:17:20Z

Admin: /* 縦スクロールリストでテキストの高さを自動調整 */

2024-01-08T21:16:59Z

‎縦スクロールリストでテキストの高さを自動調整

Admin: ページの作成:「 ==リストのUIを作る== unity/UIScrollView [ｼｮｰﾄｶｯﾄ] #リスト内の部品はPanelで作ってprefab化する #prefabはAssets/Resourcesにいれ...」

2022-10-23T16:34:51Z

ページの作成:「 ==リストのUIを作る== unity/UIScrollView [ｼｮｰﾄｶｯﾄ] #リスト内の部品はPanelで作ってprefab化する #prefabはAssets/Resourcesにいれ...」

新規ページ

==リストの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へ移動
#以下コードを追加
<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>

@@ 行66: / 行66: @@
 #Canvasの下にScrollViewができてることを確認。
 #ScrollView/Viewport/ContentのInspectorに、VerticalLayoutGroupを、AddComponentする
-#ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする
+#ScrollView/Viewport/ContentのInspectorに、ContentSizeFitterを、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へ変更する
+#ScrollView/Viewport/ContentのInspectorの、ContentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する
 #UI/Imageを作り、ScrollView/Viewport/Contentの下に設置
 #UI/Textを作り、ScrollView/Viewport/Content/Imageの下に追加
@@ 行83: / 行83: @@
 #Canvasの下にScrollViewができてることを確認。
 #ScrollView/Viewport/ContentのInspectorに、HorizontalLayoutGroupを、AddComponentする
-#ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする
+#ScrollView/Viewport/ContentのInspectorに、ContentSizeFitterを、AddComponentする
 #ScrollView/Viewport/ContentのInspectorの、HorizontalLayoutGroupのChildForceExpandのWidthに、チェック
 #ScrollView/Viewport/ContentのInspectorの、HorizontalLayoutGroupのChildAlignmentをMiddleCenterへ
-#ScrollView/Viewport/ContentのInspectorの、CotentSizeFitterのHorizontaiFitを、UnconstrainedからPreferredSizeへ変更する
+#ScrollView/Viewport/ContentのInspectorの、ContentSizeFitterのHorizontaiFitを、UnconstrainedからPreferredSizeへ変更する
 #UI/Imageを作り、Resourcesへ移動
 #以下コードを追加