UI的重用性

简介:



UI抽取思路

一款手机游戏中UI有几十个到上百个不等,如果一个一个做这些UI,无疑会花费很多时间。

近期我们的游戏UI已经是第N次改版了,经过这N多次的修改,我总结了UI其实有很多的共性(就是相同性)。

下面说一些我觉得常用的UI的抽取思路

 

共用按钮

image

共同点:按钮,标题,[图标],[消息数提醒]

思路分析

按钮点击事件和标题是一定有的,其它的视情况而定。所以我们可以创建一个类 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()),
       };
    }
}

//刷新UI
private 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();
}
复制代码

本文转自赵青青博客园博客,原文链接:http://www.cnblogs.com/zhaoqingqing/p/4304704.html,如需转载请自行联系原作者
相关文章
|
3月前
|
开发框架 Android开发 iOS开发
Flutte之UI编写总结
Flutte之UI编写总结
|
4月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
4月前
|
Dart 数据安全/隐私保护
Flutter:一种简化表单验证高级技巧
Flutter:一种简化表单验证高级技巧
52 0
|
JavaScript 前端开发 UED
JavaScript模块化:提高代码可维护性和可重用性的利器
JavaScript模块化:提高代码可维护性和可重用性的利器
140 0
|
7月前
|
前端开发 开发者
React Hooks:提升前端开发效率和代码可维护性
传统的 React 类组件在处理状态管理和生命周期函数时存在一些限制,而引入的 React Hooks 技术可以帮助前端开发者更高效地管理组件状态和逻辑,提升代码的可读性和可维护性。本文将介绍 React Hooks 的基本用法及其在实际项目中的应用场景。
|
7月前
|
开发框架 前端开发 JavaScript
如何提高前端代码的可维护性
【2月更文挑战第3天】在现代软件开发中,前端已经变得越来越重要。一个好的前端代码可以帮助团队更快速、高效地开发出高质量的产品。但是,随着项目规模的扩大,前端代码也变得越来越复杂和难以维护。本文将介绍一些提高前端代码可维护性的方法。
|
Java
4.2 内部类在事件处理中的应用:简化代码结构,提高代码可维护性
4.2 内部类在事件处理中的应用:简化代码结构,提高代码可维护性
105 0
|
前端开发 数据库
MVVM框架代码逻辑整合
MVVM框架代码逻辑整合
115 0
|
定位技术 UED
UI 设计是什么?
UI是用户界面的简称,UI是用户与设备、网站或应用程序交互的媒介,目标是使用户体验简单直观,用户只需付出最少的努力即可获得所期望的结果。
193 0
|
设计模式 前端开发 JavaScript
JavaScript设计模式-MVVM模式(7)
JavaScript设计模式-MVVM模式(7)
JavaScript设计模式-MVVM模式(7)