facebook twitter hatena line email

「Unity/リスト表示」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(縦スクロールリストでグループ化してテキストの高さを自動調整)
(内容を「Unity/リスト表示/通常」で置換)
行1: 行1:
==リストのUIを作る==
+
[[Unity/リスト表示/通常]]
[[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>
+

2022年10月24日 (月) 01:34時点における版

Unity/リスト表示/通常