コガネブログ

平日更新を目標に Unity や C#、Visual Studio、ReSharper などのゲーム開発アレコレを書いていきます

【Unity】エディタ拡張でフラットデザインっぽいタブを作る方法

はじめに

上記のサイト様が、エディタ拡張で
フラットデザインっぽいタブを作る方法を紹介されており、
面白かったので、こちらでも記載させていただきます
詳しくは上記のサイト様を参考にして頂ければと思います

作り方

f:id:baba_s:20180124105424p:plain

Project ビューの「Create>GUI Skin」を選択します

f:id:baba_s:20180124105621p:plain

作成した GUI Skin を選択して、Inspector で
「Custom Styles」の「Size」に「4」と入力して、
それぞれの要素の「Name」に次のように設定します

  • TabLeft
  • TabMid
  • TabRight
  • Tab

次に、下記の2つの画像を Unity プロジェクトに追加します

f:id:baba_s:20180124105642p:plain

これは「normal」という名前で、

f:id:baba_s:20180124105649p:plain

こちらは「selected」という名前で Unity プロジェクトに追加します

f:id:baba_s:20180124105911p:plain

そして、作成した4つの Custom Styles すべてのパラメータを
上記のように設定します

using UnityEditor;
using UnityEngine;

public sealed class Example : EditorWindow
{
    private GUISkin m_skin;
    private GUIStyle m_style;
    private int m_index;

    [MenuItem( "Tools/Example" )]
    private static void Init()
    {
        GetWindow<Example>();
    }

    private void OnEnable()
    {
        var path = "Assets/New GUISkin.guiskin";
        m_skin = AssetDatabase.LoadAssetAtPath<GUISkin>( path );
        m_style = m_skin.GetStyle( "Tab" );
    }

    private void OnGUI()
    {
        GUI.skin = m_skin;
        var tabs = new [] { "MENU 1", "MENU 2", "MENU 3" };
        m_index = GUILayout.Toolbar( m_index, tabs, m_style );
    }
}

そして、最後にこのようなエディタ拡張のコードを記述すると

f:id:baba_s:20180124110105p:plain

フラットデザインっぽいタブが実装できたことが確認できます