|
|
| 行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>
| + | |
