"Designing and developing a simple, automated UI framework"

Source: Internet
Author: User
Tags close page reset stack pop
interested friends please go directly to GitHub, this post has not been updated, the concrete framework of the implementation has done the optimization and code collation, this article only introduces the specific design ideas!
Goal: Write a simple generic UI framework for managing pages and completing navigation jumpsThe final implementation will be pulled to the bottom to see
framework-specific functions and requirementsLoad, show, hide, close page, get corresponding interface instance according to logo provide interface display hidden animation interface separate interface level, Collider, background management based on the navigation information stored to complete the interface navigation Interface Common dialog management (multi-type message box) to facilitate the requirements and function expansion ( For example, adding logical processing before jumping out of a page) writing UI Framework meaningOpen, close, level, page jump and other management issues centralized, the external switch and other logic to the Uimanager processing functional logic decentralized, each page maintenance of its own logic, relying on the framework for multi-person collaborative development, do not care to jump and show off the details of the general framework to achieve simple code reuse and " Project Experience "precipitation Step into the subject, how to achieveWindow class Design: Basic Window object, maintenance of its own Logical Maintenance window Management class: Control the opening and closing of the managed window logic (specific design see below) Animation interface: Provide the opening and closing animation interface, provide animation complete callback function level, collider background management window base class designThe window types and frameworks designed in the framework need to be defined as follows
    Public enum Uiwindowtype
    {
        Normal,    //interface (Uimainmenu,uirank etc.) fixed
        ,     //fixed window (Uitopbar, etc.)
        PopUp,     //mode window
    } public

    enum Uiwindowshowmode
    {
        DoNothing,
        hideother,     //Closed Other interface
        Needback,      //Click the Back button to close the current, do not close the other interface (need to adjust the hierarchical relationship)
        noneedback,    //Close Topbar, close other interfaces, do not join the backsequence queue
    }

    Public enum Uiwindowcollidermode
    {
        None,      //shows that the interface does not contain a collision background of
        Normal,    //collision Transparent Background
        WITHBG,    //collision non-transparent background
    }


Using Unityengine;
Using System.Collections;

Using System; namespace Coolgame {//<summary>///Windows base class///</summary> public class Uibasewindow:monobeh

        Aviour {protected UIPanel originpanel;
        If required, you can add a Boxcollider mask event private bool Islock = false;

        protected bool Isshown = FALSE;

        Current interface ID protected windowid windowid = Windowid.windowid_invaild;
        Refers to the up-level interface ID (backsequence no content, return to the previous level) protected windowid Prewindowid = Windowid.windowid_invaild;

        Public Windowdata windowdata = new Windowdata ();

        Return processing logic Private event booldelegate returnprelogic = null;
        protected Transform MTrs;
            protected virtual void Awake () {this.gameObject.SetActive (true);
            MTrs = This.gameObject.transform;
        Initwindowonawake ();
        } private int mindepth = 1; public int Mindepth {get {return}mindepth;
        } set {mindepth = value;}
        }///<summary>//Can be added to navigation data///</summary> public bool Canaddedtobackseq
                    {get {if (This.windowData.windowType = = Uiwindowtype.popup)
                return false;
                if (This.windowData.windowType = = uiwindowtype.fixed) return false;
                if (This.windowData.showMode = = Uiwindowshowmode.noneedback) return false;
            return true; }}///<summary>//interface to refresh backsequence data///1. Show Noneedback or show new interface from Noneedback New Backsequencedata (can hide itself)///2.HideOther//3.NeedBack//</summary> public bool Refreshbackseqdata {get {if (This.windowData.showMode = = Uiwindowshowmod E.hideother | | This.windowData.showMode = = Uiwindowshowmode.needback) return true;
            return false; }}///<summary>//In Awake, initialize interface (assign operation to interface Element)///</summary> Publi C virtual void Initwindowonawake () {}//<summary>///</ Summary> public uimanagerbase Getwindowmanager {get {Uimanage
                RBase Basemanager = this.gameobject.getcomponent<uimanagerbase> ();
            return basemanager;
        Private set {}}///<summary>//Reset window///</summary> public virtual void Resetwindow () {}///<summary>//Initialization window data//&LT;/S ummary> public virtual void Initwindowdata () {if (Windowdata = = null) wind
        Owdata = new Windowdata ();
}
        public virtual void ShowWindow () {Isshown = true;
        Nguitools.setactive (This.gameobject, true);
            } public virtual void Hidewindow (Action action = null) {Islock = true;
            Isshown = false;
            Nguitools.setactive (This.gameobject, false);
        if (action! = NULL) action ();
            } public void hidewindowdirectly () {Islock = true;
            Isshown = false;
        Nguitools.setactive (This.gameobject, false);
            } public virtual void DestroyWindow () {Beforedestroywindow ();
        Gameobject.destroy (This.gameobject); } protected virtual void Beforedestroywindow () {}///<summary>//Interface on exit
        Or the user can register for execution logic before clicking Back//</summary> protected void Registerreturnlogic (Booldelegate newlogic) {returnprelogic = newLogic; } public bool Executereturnlogic () {if (returnprelogic = = null) return False
            ;
        else return returnprelogic ();
 }
    }
}
Animation Interface DesignInterface can inherit this interface for implementation to open and close animations
    <summary>///Window animation///
    </summary>
    interface Iwindowanimation {//
        <summary >
        ///Display animation///</summary> void Enteranimation (Eventdelegate.callback oncomplete);
        
        <summary>
        ///Hide animation///</summary> void Quitanimation (eventdelegate.callback OnComplete);
        
        <summary>
        ///Reset animation///</summary> void Resetanimation ();
    }
        public void Enteranimation (Eventdelegate.callback oncomplete)
        {
            if (twalpha! = null)
            {
                Twalpha.playforward ();
                Eventdelegate.set (twalpha.onfinished, OnComplete);
            }
        }

        public void Quitanimation (Eventdelegate.callback oncomplete)
        {
            if (twalpha! = null)
            {
                Twalpha.playreverse ();
                Eventdelegate.set (twalpha.onfinished, OnComplete);
            }
        }

        public override void Resetwindow ()
        {
            base. Resetwindow ();
            Resetanimation ();
        }


window management and navigation design implementationThe navigation feature is implemented through a display window stack, each time you open and close the window by Judging window properties and type updates to process backsequence data Open Interface: Updates the backsequence data by pressing the current interface state onto the stack Return Action(actively close the current interface or click the Back button): From the stack pop out an interface state, the corresponding interface to reopen How to connect: For example, from an interface is not back to the previous state but directly jump to the other interface, this time need to be backsequence empty because the current navigation chain has been destroyed, When backsequence needs to be specified according to the current window Prewindowid to inform the system when returning from the interface, the need to reach the specified page, so that can solve how the cohesion problem, if not broken, continue to navigate, otherwise clear the data, according to PREWINDOWID navigation key design in navigation system:There can be more than one manager in the game to manage (usually in the rare need to use), each management object needs to maintain its own navigation information backsequence, each time exiting an interface needs to detect the current exit of the interface has the corresponding manager management, If present, you will need to perform the manager exit operation (step through the exit process) to ensure that the interface is properly exited at the first level.
window level, Collider, unified background add how to implement. There are many ways to manage hierarchies, and the framework chooses the following methods to set up three common levels of root, which can be added to the corresponding hierarchy root as the window type is loaded into the game, each time the recalculation setting level is added (via UIPanel's depth implementation) Ensure that each time you open a new window level is displayed correctly, each window through the size of the depth to distinguish between the level of the Window collider and background type, in the window of the smallest panel add collider or a collision with the background can be
The specific implementation is as follows:
private void Adjustbasewindowdepth (Uibasewindow basewindow) {Uiwindowtype Windowtype = BaseWindow.windowData.windowTy
    Pe
    int needdepth = 1; if (Windowtype = = uiwindowtype.normal) {needdepth = Mathf.clamp (gameutility.getmaxtargetdepth (UINormalWindowR Oot.gameobject, False) + 1, normalwindowdepth, Int.
        MaxValue);
    Debug.Log ("[Uiwindowtype.normal] maxDepth is" + needdepth + basewindow.getid); } else if (Windowtype = = uiwindowtype.popup) {needdepth = Mathf.clamp (gameutility.getmaxtargetdepth (UIPop Upwindowroot.gameobject) + 1, popupwindowdepth, Int.
        MaxValue);
    Debug.Log ("[Uiwindowtype.popup] maxDepth is" + needdepth); } else if (Windowtype = = uiwindowtype.fixed) {needdepth = Mathf.clamp (gameutility.getmaxtargetdepth (UIFix Edwidowroot.gameobject) + 1, fixedwindowdepth, Int.
        MaxValue);
    Debug.Log ("[uiwindowtype.fixed] Max depth is" + needdepth); } if (basewindow.mindepth! = needdepth) GameutIlity.
    Settargetminpanel (Basewindow.gameobject, needdepth);
Basewindow.mindepth = needdepth;
    }///<summary>///Window Background collider processing///</summary> private void Addcolliderbgforwindow (Uibasewindow basewindow) {
    Uiwindowcollidermode Collidermode = BaseWindow.windowData.colliderMode;

    if (Collidermode = = Uiwindowcollidermode.none) return; if (Collidermode = = Uiwindowcollidermode.normal) gameutility.addcolliderbgtotarget (Basewindow.gameobject, "Mask02"
    , Maskatlas, True); if (Collidermode = = UIWINDOWCOLLIDERMODE.WITHBG) gameutility.addcolliderbgtotarget (Basewindow.gameobject, "Mask02"
, Maskatlas, false);
 }

Multi-form MessageBox implementationThis should be the project will be used in the function, said the framework simple implementation of three buttons three callback logic: Left and right three buttons to provide settings, set the interface of the callback function to provide the interface settings core content different functions of different buttons will not be hidden and displayed
public void Setcenterbtncallback (String msg, uieventlistener.voiddelegate callBack)
{
    lbcenter.text = msg;
    Nguitools.setactive (Btncenter, true);
    Uieventlistener.get (btncenter). OnClick = CallBack;
}

public void Setleftbtncallback (String msg, uieventlistener.voiddelegate callBack)
{
    lbleft.text = msg;
    Nguitools.setactive (Btnleft, true);
    Uieventlistener.get (btnleft). OnClick = CallBack;
}

public void Setrightbtncallback (String msg, uieventlistener.voiddelegate callBack)
{
    lbright.text = msg;
    Nguitools.setactive (Btnright, true);
    Uieventlistener.get (btnright). OnClick = CallBack;
}

subsequent needs to improve and enhance the planAtlas management, for large and medium-sized games for the game memory requirements of the project, will generally be the UI Atlas map resources dynamic management, loading and unloading atlas, to ensure that the UI map occupies less memory to increase some general processing: gray operation, mask mask (generally used in novice tutorial), etc. In the process of switching can require load new scene requirements, although this can also be implemented outside the UI framework of the dialog system is also a UI framework function, the novice boot system can also be added to the UI framework, unified management and processing novice guidance logic needs always drive the system gradually strong, gradually improve, gradually develop, Step by Step ~
Achieve Results



The whole framework of the core part of the introduction, there is a need to see the source of the GitHub, the follow-up will continue to improve and organize, hoping to be patient to see the end of the friend a little inspiration or bring a little help, there are errors and improvements in the place also hope that the message Exchange Common progress Learning ~


Sometimes, we always know how to achieve this, but the key is to implement it, the realization of the process will find their own ideas in the gradual optimization, the constant demand and the emergence of bugs so that the framework slowly mature, can be put into project use to improve some development efficiency and reduce workload.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.