【Unity】滚动缩放关卡选择列表

 

简单实现，正式用时继续优化，现仅支持左右切换按钮点击，后续增加单元格面板点击切换，左右滑动切换···

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

public class UIChapterPanel : UIPanelBase
{
    private UIChapterItem[] chapterItemArray;

    private Button enterBattleBtn;
    private Button lastChapterBtn;
    private Button nextChapterBtn;

    private int finalChapter;
    private int unlockChapter;
    private int selectChapter;

    private void Awake()
    {
        InitData();
        InitObj();
    }

    public override void Show(params object[] args)
    {
        base.Show(args);

        if (chapterItemArray != null && chapterItemArray.Length >= 4)
        {
            chapterItemArray[0].Init(selectChapter, UIChapterItem.UIChapterItemPos.Left);
            chapterItemArray[1].Init(selectChapter, UIChapterItem.UIChapterItemPos.Middle);
            chapterItemArray[2].Init(selectChapter, UIChapterItem.UIChapterItemPos.Right);
            chapterItemArray[3].Init(selectChapter, UIChapterItem.UIChapterItemPos.Hide);
        }
    }

    private void InitData()
    {
        finalChapter = 10;
        unlockChapter = 5;
        selectChapter = unlockChapter;
    }

    private void InitObj()
    {
        var objDic = UIUtility.GetAllTransformByName(transform);

        Transform chapterListRoot;
        objDic.TryGetValue("ChapterListRoot", out chapterListRoot);
        if (chapterListRoot != null && chapterListRoot.childCount > 0)
        {
            chapterItemArray = chapterListRoot.GetComponentsInChildren<UIChapterItem>();
        }
        if (chapterItemArray == null || chapterItemArray.Length != 4)
            Debug.LogError("chapterItemArray == null || chapterItemArray.Length != 4");

        lastChapterBtn = UIUtility.TryGetComponentFromAllByName<Button>("LastChapterButton", objDic);
        nextChapterBtn = UIUtility.TryGetComponentFromAllByName<Button>("NextChapterButton", objDic);
        enterBattleBtn = UIUtility.TryGetComponentFromAllByName<Button>("EnterBattleButton", objDic);

        if (lastChapterBtn != null)
            lastChapterBtn.onClick.AddListener(() => OnSelectChapterItem(-1));
        if (nextChapterBtn != null)
            nextChapterBtn.onClick.AddListener(() => OnSelectChapterItem(1));
        if (enterBattleBtn != null)
            enterBattleBtn.onClick.AddListener(OnEnterBattleBtnClick);
    }

    public void OnSelectChapterItem(int moveDir)
    {
        if (moveDir > 0)
        {
            if (selectChapter < finalChapter)
                selectChapter++;
            else
            {
                selectChapter = finalChapter;
                return;
            }
        }
        else if (moveDir < 0)
        {
            if (selectChapter > 0)
                selectChapter--;
            else
            {
                selectChapter = 0;
                return;
            }
        }
        else
            return;

        if (chapterItemArray != null && chapterItemArray.Length > 0)
        {
            for (int i = 0; i < chapterItemArray.Length; i++)
            {
                chapterItemArray[i].Refresh(selectChapter, moveDir);
            }
        }
    }

    private void OnEnterBattleBtnClick()
    {
        if (selectChapter >= 0 && selectChapter <= finalChapter)
        {
            if (selectChapter <= unlockChapter)
            {
                Debug.Log("进入章节关卡：" + selectChapter);

            }
            else
            {
                Debug.Log("选择章节未解锁：" + selectChapter);
            }
        }
        else
            Debug.LogError("选择章节错误：" + selectChapter);
    }

}

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

public class UIChapterItem : MonoBehaviour
{
    public enum UIChapterItemPos
    {
        Hide = 0,
        Left = 1,
        Middle = 2,
        Right = 3,
    }

    public UIChapterItemPos curItemPos { get; private set; }
    public int curItemChapter { get; private set; }

    private RectTransform rectTrans;
    private Vector2 initSizeDelta;

    private Text chapterText;
    private Image chapterImage;

    [SerializeField] private float scaleSizeRatio = 0.75f;
    [SerializeField] private float hideSizeRatio = 0.5f;
    [SerializeField] private float itemOffsetRatio = 0.5f;
    [SerializeField] private float movePosTime = 0.5f;
    [SerializeField] private float scaleSizeTime = 0.5f;

    private float itemOffsetPosX;

    private void Awake()
    {
        rectTrans = GetComponent<RectTransform>();
        initSizeDelta = rectTrans.sizeDelta;
        itemOffsetPosX = initSizeDelta.x * itemOffsetRatio;

        chapterText = GetComponentInChildren<Text>();
        chapterImage = GetComponent<Image>();
    }

    public void Init(int targetChapter, UIChapterItemPos initItemPos)
    {
        curItemPos = initItemPos;

        switch (curItemPos)
        {
            case UIChapterItemPos.Hide:
                rectTrans.anchoredPosition = Vector2.zero;
                rectTrans.sizeDelta = initSizeDelta * hideSizeRatio;
                transform.SetAsFirstSibling();
                curItemChapter = -1;
                break;
            case UIChapterItemPos.Middle:
                rectTrans.anchoredPosition = Vector2.zero;
                rectTrans.sizeDelta = initSizeDelta;
                transform.SetAsLastSibling();
                curItemChapter = targetChapter;
                break;
            case UIChapterItemPos.Right:
                rectTrans.anchoredPosition = new Vector2(itemOffsetPosX, 0);
                rectTrans.sizeDelta = initSizeDelta * scaleSizeRatio;
                curItemChapter = targetChapter + 1;
                break;
            case UIChapterItemPos.Left:
                rectTrans.anchoredPosition = new Vector2(-itemOffsetPosX, 0);
                rectTrans.sizeDelta = initSizeDelta * scaleSizeRatio;
                curItemChapter = targetChapter - 1;
                break;
            default:
                break;
        }

        if (chapterText != null)
            chapterText.text = curItemChapter.ToString();
        if (chapterImage != null)
        {
        }
    }

    public void Refresh(int targetChapter, int moveDir)
    {
        if (moveDir == 0)
            return;

        rectTrans.DOKill();

        switch (curItemPos)
        {
            case UIChapterItemPos.Hide:
                curItemPos = moveDir < 0 ? UIChapterItemPos.Left : UIChapterItemPos.Right;
                break;
            case UIChapterItemPos.Left:
                curItemPos = moveDir < 0 ? UIChapterItemPos.Middle : UIChapterItemPos.Hide;
                break;
            case UIChapterItemPos.Middle:
                curItemPos = moveDir < 0 ? UIChapterItemPos.Right : UIChapterItemPos.Left;
                break;
            case UIChapterItemPos.Right:
                curItemPos = moveDir < 0 ? UIChapterItemPos.Hide : UIChapterItemPos.Middle;
                break;
            default:
                break;
        }

        Vector2 targetPos, targetSize;

        switch (curItemPos)
        {
            case UIChapterItemPos.Hide:
                targetPos = Vector2.zero;
                targetSize = initSizeDelta * hideSizeRatio;
                transform.SetAsFirstSibling();
                curItemChapter = -1;
                break;
            case UIChapterItemPos.Middle:
                targetPos = Vector2.zero;
                targetSize = initSizeDelta;
                transform.SetAsLastSibling();
                curItemChapter = targetChapter;
                break;
            case UIChapterItemPos.Right:
                targetPos = new Vector2(itemOffsetPosX, 0);
                targetSize = initSizeDelta * scaleSizeRatio;
                curItemChapter = targetChapter + 1;
                break;
            case UIChapterItemPos.Left:
                targetPos = new Vector2(-itemOffsetPosX, 0);
                targetSize = initSizeDelta * scaleSizeRatio;
                curItemChapter = targetChapter - 1;
                break;
            default:
                targetPos = Vector2.zero;
                targetSize = Vector2.zero;
                curItemChapter = targetChapter;
                break;
        }

        //rectTrans.anchoredPosition = targetPos;
        //rectTrans.sizeDelta = targetSize;
        rectTrans.DOAnchorPosX(targetPos.x, movePosTime);
        rectTrans.DOSizeDelta(targetSize, scaleSizeTime);

        if (chapterText != null)
            chapterText.text = curItemChapter.ToString();
        if (chapterImage != null)
        {
        }
    }

}