手機遊戲UI的重用性（一）

標籤：

在開發一款手機遊戲中，UI有幾十個到上百個不等，如果一個一個做這些UI，無疑會花費很多時間。近期我們的遊戲UI已經是第N次改版了，我改了這N多次的UI，總結了UI其實有很多的共性(就是相同性)。

下面說一些我覺得常用的UI的抽取思路

1.共用的按鈕

共同點：按鈕，標題，[表徵圖]，[訊息數提醒]

思路：

按鈕點擊事件和標題是一定有的，其它的視情況而定。所以我們可以建立一個類 BtnItemClass，用來處理UI的邏輯，外部就只要傳入相應的參數就可

using System;using UnityEngine;using System.Collections;/// <summary>/// 共用的圖文按鈕，抽取類/// 包括：商店，挑戰，朋友，英雄/// </summary>public class BtnItemClass{    public string TitleSprite;    public string IconSprite;    public string BtnName;    public string NextUITitle;    //按鈕點擊的事件    public UIEventListener.VoidDelegate Callback;    //訊息提醒數    public string TipMsg;    public int TipNum;    private bool IsEnabled;    /// <summary>    /// 建構函式    /// </summary>    /// <param name="btnName">按鈕名</param>    /// <param name="iconSprite">Item 表徵圖</param>    /// <param name="titleSprite">標題文字圖片,沒有就填null</param>    /// <param name="nextUiTitle">下一級UI的標題</param>    /// <param name="callback">點擊的事件</param>    /// <param name="enabled"></param>    public BtnItemClass(string btnName, string iconSprite, string titleSprite, string nextUiTitle, UIEventListener.VoidDelegate callback, bool enabled = true)    {        this.BtnName = btnName;        this.IconSprite = iconSprite ?? "null";        this.TitleSprite = titleSprite ?? "null";        this.NextUITitle = nextUiTitle;        this.Callback = callback;        IsEnabled = enabled;    }    public BtnItemClass()

    {

    }

    //設定屬性    public static void Bind(BtnItemClass itemClass, Transform trans)    {        if(!string.IsNullOrEmpty( itemClass.BtnName))            trans.name = itemClass.BtnName;        //標題文字圖片        UISprite titleSprite = CTool.GetChildComponent<UISprite>("TitleSprite", trans);        titleSprite.spriteName = itemClass.TitleSprite;        titleSprite.MakePixelPerfect();        //表徵圖        UISprite iconSprite = CTool.GetChildComponent<UISprite>("IconSprite", trans);        iconSprite.spriteName = itemClass.IconSprite;        iconSprite.MakePixelPerfect();        //當標題圖片找不到時就顯示文字        var titleLabel = CTool.GetChildComponent<UILabel>("TitleLabel", trans);        if (string.IsNullOrEmpty(itemClass.TitleSprite)|| itemClass.TitleSprite == "null")        {            titleLabel.text = itemClass.NextUITitle;            titleLabel.gameObject.SetActive(true);        }        else        {            titleLabel.gameObject.SetActive(false);        }        //綁定事件        trans.GetComponent<UIEventListener>().onClick = itemClass.Callback;        //button.isEnabled = item.IsEnable = item.IsEnable;    }}

使用方法：

首先構建一個List,裡面裡包含當前的UI所有按鈕的資料，然後做重新整理UI（產生按鈕，設定按鈕屬性）

//按鈕資料private List<BtnItemClass> UIConfigList{    get    {        return new List<BtnItemClass>()       {           new BtnItemClass("BtnHeroList", "BattleTeam_icon_HeroStrong", "null", "英雄強化",               obj => CNetPlayer.CheckPackageOverflow_WithMsgBox(() => CUIHeroList.Show("英雄強化"))),           new BtnItemClass( "武器強化,obj => CUIPowerUp.ShowWeaponstSelectList()),       };    }}//重新整理UIprivate void RefreshUI(){    var max = UIConfigList.Count;    CUIHelper.ResizeCUITableGridGameObjects(TableGrid, max, CommPicBtnTemplate);    for (int idx = 0; idx < max; idx++)    {        var trans = TableGrid.transform.GetChild(idx);        var itemClass = UIConfigList[idx];        BtnItemClass.Bind(itemClass, trans);    }    TableGrid.Reposition();}

手機遊戲UI的重用性（一）