浏览英雄，购买英雄等功能之二（浏览效果）

商品预制加载

（1）将某一item作为预制，并在面板种删除所有item，在初始化商店的时候实例化商品。
（2）创建ShopPanel脚本，并挂在到ShopPanel对象上
（3）在管理资源中添加sprite列表，添加GameObject

    public List<Sprite> itemSprite = new List<Sprite>();//商品皮肤列表
public GameObject item;

（4）ShopPanel脚本

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

public class ShopPanel : MonoBehaviour {

private ManagerVars vars;
private Transform viewport;
void Start () {
        vars = ManagerVars.GetManagerVars();
        viewport = transform.Find("ScrollRect/viewport");
Init();
}
private void Init()
{
        viewport.GetComponent<RectTransform>().sizeDelta = new Vector2((vars.itemSprite.Count + 2) * 160, 0);//根据商品数改变viewport的宽度

for (int i = 0; i < vars.itemSprite.Count; i++)
{
            GameObject go = Instantiate(vars.item, viewport);
            go.GetComponent<Image>().sprite = vars.itemSprite[i];//更改每个物品对应的sprite
            go.transform.localPosition = new Vector3((i + 1) * 160, 0, 0);

}
}
}

实现浏览选中放大效果

在Update中实时检测当前浏览选中的下标

int index =(int)Mathf.Round(viewport.transform.localPosition.x / (-160));

定义一个SetItemSize方法，改变选中的item变大，未选中的变小

    private void SetItemSize(int index)
{
for (int i = 0; i < viewport.childCount; i++)
{
if (i == index)
{
                viewport.GetChild(i).GetComponentInChildren<RectTransform>().sizeDelta = new Vector2(160, 160);
}
else
{
                viewport.GetChild(i).GetComponentInChildren<RectTransform>().sizeDelta = new Vector2(80, 80);
}
}
}

提醒：改变RectTransform组件的宽高使用sizeDelta方法。
此时运行发现位置有偏差
640?wx_fmt=png
解决办法：设置ScrollRect对象的锚点为left，设置Pivot.x=0；
运行发现滑动后停留的位置不是很准确，因此当鼠标抬起（即停止滑动）时，需要代码控制整个滑动内容的位置

        if (Input.GetMouseButtonUp(0))
{
            viewport.transform.localPosition= new Vector3(index * (-160), 0, 0);
}

运行发现，滑动过于流畅，这个是由于惯性造成的。因此，取消勾选ScrollRect->Inertia
取消勾选后，为了让滑动看上去缓和一些，可以加一个DOTween动画

viewport.transform.DOMoveX(index * (-160), 0.2f);

显示选中名字

在管理资源器中创建名字列表

   public List<string> itemName = new List<string>();//商品名

在ShopPanel中根据选中物品的下标，显示对应的名字

    private void ShopItemName(int index)
{
        txt_name.text = vars.itemName[index];
}

返回主界面

在MainPanel脚本中，为商店按钮添加监听事件

   btn_start.onClick.AddListener(Click_btn_start);

private void Click_btn_select()
{
        EventCenter.Broadcast(EventDefine.ShowShopPanel);
        gameObject.SetActive(false);
}

在ShopPanel脚本中，注册ShowShopPanel事件

    private void Awake()
{
        EventCenter.AddListener(EventDefine.ShowShopPanel, Show);
}
private void OnDestroy()
{
        EventCenter.RemoveListener(EventDefine.ShowShopPanel, Show);
}
private void Show()
{
        gameObject.SetActive(true);
}

在ShopPanel脚本中，为返回按钮添加监听事件，同时广播显示主界面事件

扫描二维码关注公众号，回复： 11393156 查看本文章

    btn_return.onClick.AddListener(Click_Btn_Return);
private void Click_Btn_Return()
{
        EventCenter.Broadcast(EventDefine.ShowMainPanel);
        gameObject.SetActive(false);
}

在ShopPanel脚本中，初始化隐藏ShopPanel面板

gameObject.SetActive(false);

在MainPanel脚本中，注册ShowMainPanel事件

	EventCenter.AddListener(EventDefine.ShowMainPanel,Show);
private void OnDestroy()
{
        EventCenter.RemoveListener(EventDefine.ShowMainPanel, Show);
}
private void Show()
{
        gameObject.SetActive(true);
}

640?wx_fmt=gif

●实用小功能一：浏览英雄，购买英雄等功能之一（搭建UI场景）

-END-

喜欢本文的朋友们，欢迎关注订阅号，收看更多精彩内容！

640?wx_fmt=png