UGUI 用手柄或者鍵盤控制選擇Scroll View中的游戲對象時,滾動條跟着移動

原預制體以及腳本的下載地址:https://download.csdn.net/download/qq_15017279/10404010

1.新建一個Scroll View,刪掉橫向的滾動條,並且把Scroll View的Scroll Rect組件的Horizontal Scrollbar設置為None,如圖:

 

2.我想弄一個顯示3行3列的,所以Scroll View得Height改為240(3的倍數),Width改為400(沒特殊要求),Viewport和Content也要大小設置合適.

3.給Content加一個GridLayoutGroup和ContentSizeFitter,ContentSizeFitter的VerticalFit設置為MinSize,GridLayoutGroup的Spacing設置為(10,15),Bottom也要設置為15.cellSizeY 的大小計算:(Y+15)*3=240(Scroll View的高度),cellSizeX自己看着調,在Content下添加30個image,如圖:

4.給image們加上Button組件,這樣才能選中.,加完之后,現在運行,用手柄或者鍵盤控制大概是下面左圖這樣的,當移動到窗口之外的Image上就看不到了,它不會自動滾動.我們這個是3*3的所以當移動到最下邊一個時候再往下移動,滾動條就要移動使之顯示連續的下邊三個,當移動到最上面一個的時候在往上移動就顯示上面那三個.,就像下面右圖那樣.

            

5.解決辦法就是:在上面弄一個位置a,下面弄一個位置b,每當被選中的Image換了,就拿到被選中的image的位置c,用c.y和a.y、b.y比較,比a.y大滾動條就向上動一定距離,比b.y小就向下動一定距離,這個距離是經過計算的,一會再說計算方法.

如圖,我用小的Image弄了兩個位置:

6.開始計算每次滾動條移動的距離:

7.新建一個腳本,代碼如下:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class MoveScrollbar : MonoBehaviour {

    // 拿到 scrollBar的value 用
    public Scrollbar scrollBar;
    // 所有 image的父物體 (拿到所有的Image,計算Image個數用)
    public RectTransform content;
    Button[] buttons;
    /// <summary>
    /// 上邊的位置
    /// </summary>
    public Transform pos1;
    /// <summary>
    /// 下邊的位置
    /// </summary>
    public Transform pos2;
    float pos1_y;
    float pos2_y;

    [Header("列數(自定義的)")]
    public int columnNumber;
    [Header("每次顯示多少行(自定義的)")]
    public int lineNumberForShow;
    /// <summary>
    /// 行數
    /// lineNumber = buttons.Length / columnNumber (進一取整)
    /// </summary>
    int lineNumber;
    /// <summary>
    /// 步子大小(scrollBar.value每次移動的大小)
    /// step = 1 / (lineNumber / lineNumberForShow)
    /// </summary>
    public float step;
    // 記錄當前選中的Image(有的時候可能用得到吧)
    public Button currentButton;

    public void InitMoveScrollbar()
    {
        buttons = content.GetComponentsInChildren<Button>();

          // 第一個設置為選上的(運行之后,不用鼠標點擊,就會選上這個Button)
          buttons[0].Select();

//行數=按鈕個數/列數,進一取整
        lineNumber = (int)Mathf.Ceil(buttons.Length / (float)columnNumber);
        step = lineNumberForShow / (float)(lineNumber - lineNumberForShow);

        pos1_y = pos1.position.y;
        pos2_y = pos2.position.y;
    }
    // Use this for initialization
    void Start () {
        // 設置為1,使它一開始的時候顯示最上面三行
        scrollBar.value = 1f;
        InitMoveScrollbar();
    }

    /// <summary>
    /// 拿到當前選中的按鈕,並對比位置,以判斷是否/怎么移動
    /// </summary>
    /// <param name="button"></param>
    public void GetButton(Button button)
    {
        currentButton = button;

        float y = button.transform.position.y;

        if (y> pos1_y)
        {
            scrollBar.value += step;
        }
        if (y < pos2_y)
        {
            scrollBar.value -= step;
        }
    }
}

8.掛到Scroll View上,把對應的變量拖進去或者填上,pos01和pos02的image組件的顏色弄成透明的,這樣就看不到了,Raycast Target對勾去掉(這樣就不會影響點擊了):

                                    

9.這時,刪掉后29個image,給剩下的一個沒刪的image添加一個EventTrigger組件,設置成如圖的樣子,每當被選中就會執行Select.

10.然后再復制出來另外29個Image,就可以了,運行試一試,下面是我做的結果,當然,可以自己改,使之變為3*4,4*4 等的都可以.

 

 

注意:

        CellSize(a,b), Spacing(c,d), Buttom:e,Top:f, Left:g, Right:h,  Scroll View的Height , Scroll View的Width, 之間的關系一定要滿足下面:

        (b+d)*窗口顯示的行數 + f = Height,

        (a+c)*窗口顯示的列數+g+h <= Width

         e = d.

         MoveScrollbar腳本中的行數和列數也別忘記改.

        

原預制體以及腳本的下載地址:https://download.csdn.net/download/qq_15017279/10404010