「Unity/UIScrollView」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→スクロールを指定のコンテンツに移動する) |
(→横スクロールバー削除) |
||
(同じ利用者による、間の17版が非表示) | |||
行4: | 行4: | ||
#ScrollViewのViewportのContentの下のTextを選択し、AddComponentでContentSizeFitterを追加 | #ScrollViewのViewportのContentの下のTextを選択し、AddComponentでContentSizeFitterを追加 | ||
#ContentSizeFitterのVerticalfitをUnconstrainedからPreferredSizeにする | #ContentSizeFitterのVerticalfitをUnconstrainedからPreferredSizeにする | ||
+ | #ScrollViewのViewportのContentを選択し、AddComponentでContentSizeFitterを追加 | ||
+ | #ContentSizeFitterのVerticalfitをUnconstrainedからPreferredSizeにする | ||
+ | #ScrollViewのViewportのContentの下のTextを選択し、LayoutElementを追加 | ||
+ | #ScrollViewのViewportのContentを選択し、VerticalLayoutGroupを追加 | ||
+ | #VerticalLayoutGroupのControlChildSizeのHeightとWidthにチェック。ChildForceExpandのHeightとWidthにチェック。 | ||
+ | #VerticalLayoutGroupののPaddingのLeft,Rightを10、Top,Bottomを5。 | ||
#ScrollViewのViewportのContentの縦サイズは、コンテンツの縦サイズにフィットさせ、windowからは、はみ出る感じにする。 | #ScrollViewのViewportのContentの縦サイズは、コンテンツの縦サイズにフィットさせ、windowからは、はみ出る感じにする。 | ||
行11: | 行17: | ||
この利用規約~"; | この利用規約~"; | ||
− | == | + | ==スクロールバーをスクロールの下に移動する== |
scroll.verticalNormalizedPosition = 0;を追加すればよいが、 | scroll.verticalNormalizedPosition = 0;を追加すればよいが、 | ||
スクロールが一番下の1つ上までしか、いかないので、 | スクロールが一番下の1つ上までしか、いかないので、 | ||
表示処理の0.1秒後ぐらいに、実行すると、一番下まで行く。 | 表示処理の0.1秒後ぐらいに、実行すると、一番下まで行く。 | ||
+ | (処理時は、UIにまで、テキストが適用されないので、一旦処理を抜けて、処理すると適用されるような感じ) | ||
<pre> | <pre> | ||
− | Invoke("ScrollDownGui", 0.1f); | + | void UpdateMessage() |
+ | { | ||
+ | // ここに更新処理を記述 | ||
+ | Invoke("ScrollDownGui", 0.1f); | ||
+ | } | ||
void ScrollDownGui() | void ScrollDownGui() | ||
{ | { | ||
− | + | // スクロール下へ | |
− | + | GameObject content = GameObject.Find("/Canvas/Scroll View/Viewport/Content"); | |
− | + | GameObject scrollObj = GameObject.Find("/Canvas/Scroll View/"); | |
− | + | ScrollRect scroll = scrollObj.GetComponent<ScrollRect>(); | |
− | + | scroll.verticalNormalizedPosition = 0; | |
− | + | content.GetComponent<ContentSizeFitter>().SetLayoutVertical(); | |
} | } | ||
</pre> | </pre> | ||
参考:https://qiita.com/sonken625/items/adb6100f9f6d76dbdce4 | 参考:https://qiita.com/sonken625/items/adb6100f9f6d76dbdce4 | ||
+ | ===スクロール縦幅が変更されると常に一番下へ=== | ||
+ | <pre> | ||
+ | scrollRect.onValueChanged.AddListener((Vector2 value) => | ||
+ | { | ||
+ | scrollRect.verticalNormalizedPosition = 0f; | ||
+ | }); | ||
+ | </pre> | ||
===UniRxを使ってスクロール下へ移動する=== | ===UniRxを使ってスクロール下へ移動する=== | ||
Contentの縦幅変更を、検知するとスクロール下へ移動するように | Contentの縦幅変更を、検知するとスクロール下へ移動するように | ||
行43: | 行61: | ||
.AddTo(gameObject); | .AddTo(gameObject); | ||
</pre> | </pre> | ||
+ | |||
+ | ==一番下を基準にコンテンツを表示する== | ||
+ | ScrollView/Viewport/ContentのInspectorのPivotのyを1から0へ | ||
==スクロールView内にマテリアルを入れるとはみ出る== | ==スクロールView内にマテリアルを入れるとはみ出る== | ||
行57: | 行78: | ||
==横スクロールバー削除== | ==横スクロールバー削除== | ||
+ | #ScrollView内のScrollbarHorizontalを、削除 | ||
+ | #ScrollViewのInspectorのScrollRectのHorizontalScrollbarを、noneへ | ||
+ | |||
参考:https://www.chuken-engineer.com/entry/2019/11/12/160221#%E6%A8%AA%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC%E3%82%92%E7%84%A1%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B | 参考:https://www.chuken-engineer.com/entry/2019/11/12/160221#%E6%A8%AA%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC%E3%82%92%E7%84%A1%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B | ||
+ | |||
==縦移動をなくす== | ==縦移動をなくす== | ||
ScrollViewのInspectorのScrollRectからVerticalのチェックを外す。 | ScrollViewのInspectorのScrollRectからVerticalのチェックを外す。 | ||
行66: | 行91: | ||
int itemNum = 3; | int itemNum = 3; | ||
GameObject content = GameObject.Find("Canvas/Panel/Scroll View/Viewport/Content"); | GameObject content = GameObject.Find("Canvas/Panel/Scroll View/Viewport/Content"); | ||
− | content.transform.localPosition = new Vector3(0, | + | content.transform.localPosition = new Vector3(0, content.GetComponent<VerticalLayoutGroup>().spacing * (itemNum - 1), 0); |
− | content.GetComponent<VerticalLayoutGroup>().spacing * (itemNum - 1), | + | |
− | 0); | + | |
</pre> | </pre> | ||
行75: | 行98: | ||
int itemNum = 3; | int itemNum = 3; | ||
GameObject content = GameObject.Find("Canvas/Panel/Scroll View/Viewport/Content"); | GameObject content = GameObject.Find("Canvas/Panel/Scroll View/Viewport/Content"); | ||
− | content.transform.localPosition = new Vector3(0, | + | content.transform.localPosition = new Vector3(0, content.GetComponent<VerticalLayoutGroup>().spacing * (itemNum - 1) - scroll.transform.parent.transform.parent.GetComponent<RectTransform>().sizeDelta.y / 2, 0); |
− | content.GetComponent<VerticalLayoutGroup>().spacing * (itemNum - 1) - scroll.transform.parent.transform.parent.GetComponent<RectTransform>().sizeDelta.y, | + | |
− | 0); | + | |
</pre> | </pre> | ||
すぐ表示すると、何故かy軸が小さくなって表示されてしまう場合は、少し遅延させる | すぐ表示すると、何故かy軸が小さくなって表示されてしまう場合は、少し遅延させる | ||
<pre> | <pre> | ||
+ | int itemNum = 3; | ||
Observable.Timer(System.TimeSpan.FromSeconds(0.01f)) | Observable.Timer(System.TimeSpan.FromSeconds(0.01f)) | ||
.Subscribe(_ => { | .Subscribe(_ => { | ||
− | |||
GameObject content = GameObject.Find("Canvas/Panel/Scroll View/Viewport/Content"); | GameObject content = GameObject.Find("Canvas/Panel/Scroll View/Viewport/Content"); | ||
content.transform.localPosition = new Vector3(0, | content.transform.localPosition = new Vector3(0, | ||
− | content.GetComponent<VerticalLayoutGroup>().spacing * (itemNum - 1) - scroll.transform.parent.transform.parent.GetComponent<RectTransform>().sizeDelta.y, | + | content.GetComponent<VerticalLayoutGroup>().spacing * (itemNum - 1) - scroll.transform.parent.transform.parent.GetComponent<RectTransform>().sizeDelta.y / 2, 0); |
}) | }) | ||
.AddTo(gameObject); | .AddTo(gameObject); |
2024年4月4日 (木) 08:21時点における版
目次
縦スクロールの中にtextを表示
- HierarchyにUI/ScrollViewで作成
- ScrollViewのViewportのContentの下で、左クリックから、UI/Textを新規追加
- ScrollViewのViewportのContentの下のTextを選択し、AddComponentでContentSizeFitterを追加
- ContentSizeFitterのVerticalfitをUnconstrainedからPreferredSizeにする
- ScrollViewのViewportのContentを選択し、AddComponentでContentSizeFitterを追加
- ContentSizeFitterのVerticalfitをUnconstrainedからPreferredSizeにする
- ScrollViewのViewportのContentの下のTextを選択し、LayoutElementを追加
- ScrollViewのViewportのContentを選択し、VerticalLayoutGroupを追加
- VerticalLayoutGroupのControlChildSizeのHeightとWidthにチェック。ChildForceExpandのHeightとWidthにチェック。
- VerticalLayoutGroupののPaddingのLeft,Rightを10、Top,Bottomを5。
- ScrollViewのViewportのContentの縦サイズは、コンテンツの縦サイズにフィットさせ、windowからは、はみ出る感じにする。
c#から文字を追加する場合はこんな感じ
GameObject text = GameObject.Find("/Canvas/Scroll View/Viewport/Content/Text"); text.GetComponent<Text>().text = @"利用規約 この利用規約~";
スクロールバーをスクロールの下に移動する
scroll.verticalNormalizedPosition = 0;を追加すればよいが、 スクロールが一番下の1つ上までしか、いかないので、 表示処理の0.1秒後ぐらいに、実行すると、一番下まで行く。 (処理時は、UIにまで、テキストが適用されないので、一旦処理を抜けて、処理すると適用されるような感じ)
void UpdateMessage() { // ここに更新処理を記述 Invoke("ScrollDownGui", 0.1f); } void ScrollDownGui() { // スクロール下へ GameObject content = GameObject.Find("/Canvas/Scroll View/Viewport/Content"); GameObject scrollObj = GameObject.Find("/Canvas/Scroll View/"); ScrollRect scroll = scrollObj.GetComponent<ScrollRect>(); scroll.verticalNormalizedPosition = 0; content.GetComponent<ContentSizeFitter>().SetLayoutVertical(); }
参考:https://qiita.com/sonken625/items/adb6100f9f6d76dbdce4
スクロール縦幅が変更されると常に一番下へ
scrollRect.onValueChanged.AddListener((Vector2 value) => { scrollRect.verticalNormalizedPosition = 0f; });
UniRxを使ってスクロール下へ移動する
Contentの縦幅変更を、検知するとスクロール下へ移動するように
[SerializeField] RectTransform content; // ScrollView/Viewport/Content [SeralizeField]] scrollRect; // ScrollView content.ObserveEveryValueChanged(_ => _.sizeDelta.y) .Subscribe(text => { if (scrollRect != null) { scrollRect.verticalNormalizedPosition = 0; } }) .AddTo(gameObject);
一番下を基準にコンテンツを表示する
ScrollView/Viewport/ContentのInspectorのPivotのyを1から0へ
スクロールView内にマテリアルを入れるとはみ出る
以下のような対応をすれば良いかも。
- 可能であれば、マテリアルを使わない。
- ScrollViewにaddComponents/RectMask2Dを設定
参考:https://tech.pjin.jp/blog/2017/02/22/unity_ugui_scrollbar/
参考:https://teratail.com/questions/98004
動的にリスト表示する時
unity/リスト表示 [ショートカット]
横スクロールバー削除
- ScrollView内のScrollbarHorizontalを、削除
- ScrollViewのInspectorのScrollRectのHorizontalScrollbarを、noneへ
縦移動をなくす
ScrollViewのInspectorのScrollRectからVerticalのチェックを外す。
スクロールを指定のコンテンツに移動する
3番目のコンテンツに移動
int itemNum = 3; GameObject content = GameObject.Find("Canvas/Panel/Scroll View/Viewport/Content"); content.transform.localPosition = new Vector3(0, content.GetComponent<VerticalLayoutGroup>().spacing * (itemNum - 1), 0);
コンテンツを中断に出す場合Scroll Viewの幅の半分を、コンテンツ座標のyから引く
int itemNum = 3; GameObject content = GameObject.Find("Canvas/Panel/Scroll View/Viewport/Content"); content.transform.localPosition = new Vector3(0, content.GetComponent<VerticalLayoutGroup>().spacing * (itemNum - 1) - scroll.transform.parent.transform.parent.GetComponent<RectTransform>().sizeDelta.y / 2, 0);
すぐ表示すると、何故かy軸が小さくなって表示されてしまう場合は、少し遅延させる
int itemNum = 3; Observable.Timer(System.TimeSpan.FromSeconds(0.01f)) .Subscribe(_ => { GameObject content = GameObject.Find("Canvas/Panel/Scroll View/Viewport/Content"); content.transform.localPosition = new Vector3(0, content.GetComponent<VerticalLayoutGroup>().spacing * (itemNum - 1) - scroll.transform.parent.transform.parent.GetComponent<RectTransform>().sizeDelta.y / 2, 0); }) .AddTo(gameObject);