【Unity】UIElements Expansions: Tabs / Accordion

UIElements Expansions はUnityエディター用の拡張アセットです。

「 UIElements Expansions: Tabs / Accordion 」はUnity2019.1から導入が始まった「 UIElements 」を強力にサポートします。

UIElements とはUnity2019.1から導入が始まった現在のUnityエディターのGUIシステム（IMGUI）を置き換える機能です。

Unity向けのHTML「 UXML 」、Unity向けのスタイルシート「 USS 」を組み合わせてHTMLとCSSでwebページを作るかのごとくUnityのGUIを制作できます。

もちろんこれまでのように エディタースクリプト でエディター用の処理を記述できますし、 jQuery のようなメソッドが用意されているため、 HTML5のような動的なGUIを作ることができます 。

将来的にはエディターだけでなくランタイムのGUI（現在の uGUI ）を置き換えると計画されており、 将来のUnityのGUIを任せられると期待される存在 なのです。

ただポテンシャルは高いのですがまだ導入されたばかりなので 本格的に使用するにはまだまだ機能が足りません 。

「 UIElements Expansions 」はその 足りない部分を強力にサポートするアセット です。

この「 UIElements Expansions: Tabs / Accordion 」は主に下記の機能をサポートしています。

• UIElements Expansions共通機能
  • グローバルスタイルシート
  • インスペクター自動アサイン機能
  • 追加タグ / 機能
  • 追加クラス
• タブ
• アコーディオン

下記のページを参照ください。

「 UIElements Expansions: Tabs / Accordion 」はUnityやUnityエディターにタブとタブの切り替えによるページ遷移の機能を追加します。

TabGroup タグと Tab タグ、 Instance タグもしくは「 」のルーティング機能を用いることで実現できます。

UXMLタグの記述のみでタブの切り替えとページ遷移が可能なので非常に簡単に実装することが可能です。

タブと切り替えるページはどこにでも置くことが可能ですので、Webページのようにヘッダーにタブを置いたり、アプリのようにフッターにタブを置いたりすることが可能です。

「 UIElements Expansions: Tabs / Accordion 」はUnityやUnityエディターに アコーディオンコンポーネント による表示の切り替え機能を提供します。

アコーディオンとは、Webページやアプリなどで見かけるUIのひとつです。

予め項目だけを表示しておきます。その項目のひとつをクリックした時にその項目の中身がスライドして表示されます。

そして別の項目をクリックした時、すでに表示されてあった項目の中身が非表示になると同時にクリックした新しい項目が表示されるコンポーネントです。

その様子がまるでアコーディオンを演奏しているかのようにみえるためアコーディオンと呼ばれています。

「 UIElements Expansions: Tabs / Accordion 」では AccordionGroup と Accordion タグを組み合わせることによりこの機能を実現できます。

Unity Asset Store からご購入ください。

購入後「 マイアセット 」からインポートすることができます。

基本的には TabGroup タグの配下に Tab タグを配置するだけで利用可能です。

<engine:TabGroup>
  <engine:Tab text="Tab1" />
  <engine:Tab text="Tab2" />
  <engine:Tab text="Tab3" />
  <engine:Tab text="Tab4" />
</engine:TabGroup>

上記の例では４つのタブを配置しています。

最初の例ではタブを設置しただけでした。タブにアクションを設定する必要があります。

Tab タグは Button タグを継承しており Button や BindableButton と同じようにアクションを設定することができます。

スクリプトから設定する場合は clickable のプロパティからイベントを設定してください。

/// <summary>
/// Class Clickable Demo
/// </summary>
public class ClickableDemo : EditorWindow {
   ...
   private void OnEnable( ) {
      // Get tab element
      Tab tab = this.rootVisualElement.Q<Tab>();
      // Click processing added
      tab.clickable.clicked += () => {
          Something processing
      };
   }
   ...
}

また BindableButton のようにUXML上からでもアクションを設定することが可能です。

<engine:Tab text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net" />

上記例では assembly と type 、 method 、 value 属性を利用して静的メソッドを呼び出しています。ここではUnityの Application.OpenURL を呼び出し、外部リンクに飛ばしています。

Tabによるページの切り替えを行う場合、 Template と Instance の組み合わせを利用します。

<engine:Template path="Assets/Masamune/UIElements.Expansions.TabsAccordion/Assets/Styles/Articles/Tab1.uxml" name="Tab1" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.TabsAccordion/Assets/Styles/Articles/Tab2.uxml" name="Tab2" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.TabsAccordion/Assets/Styles/Articles/Tab3.uxml" name="Tab3" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.TabsAccordion/Assets/Styles/Articles/Tab4.uxml" name="Tab4" />

<engine:TabGroup style="border-width:1px 1px 0;border-color:#fff;margin:10px 10px 0;" class="primary" >
  <engine:Tab text="Tab1" path="Tab1" target="main" active="true" />
  <engine:Tab text="Tab2" path="Tab2" target="main" />
  <engine:Tab text="Tab3" path="Tab3" target="main" />
  <engine:Tab text="Tab4" path="Tab4" target="main" />
</engine:TabGroup>

<engine:Instance template="Tab1" name="main" style="padding:10px;border-width:1px;border-color:#fff;margin: 0 10px 10px;overflow:hidden;" />

上記例のようにTabタグ内に path と target 属性を指定することでTemplateタグにより読み込んだ外部UXMLファイルをInstanceタグ内に表示させることができます。

path 属性には読み込んだテンプレートのname属性を指定し、target属性には表示させるInstanceタグの name 属性を指定します。

Tabタグの active 属性を true にすることによって初期にアクティブなタブを選択することができます。

<engine:Tab text="Tab1" path="Tab1" target="main" active="true" />

TabGroupタグおよびTabタグは「 UIElements Expansions 」シリーズ共通の 追加カラークラス を設定することが可能です。

<engine:TabGroup class="danger">
  <engine:Tab text="Tab1" path="Tab1" target="main" active="true" />
  <engine:Tab text="Tab2" path="Tab2" target="main" />
  <engine:Tab text="Tab3" path="Tab3" target="main" />
  <engine:Tab text="Tab4" path="Tab4" target="main" />
</engine:TabGroup>

上記の例の場合、タブのアクティブ時の色が赤になります。

またタブの場合 underline クラスを利用することが可能です。 underline クラスは背景すべての色が変わるのではなくタブの下に色のついたバーが表示されます。カラークラスと一緒にご利用ください。

<engine:TabGroup class="primary underline">
  <engine:Tab text="Tab1" path="Tab1" target="main" active="true" />
  <engine:Tab text="Tab2" path="Tab2" target="main" />
  <engine:Tab text="Tab3" path="Tab3" target="main" />
  <engine:Tab text="Tab4" path="Tab4" target="main" />
</engine:TabGroup>

また、Masamune Frameworkの IconFont や Localzie に対応しており、 IconTab タグと LocalizeTab タグを利用可能です。それぞれアイコン表示用、翻訳対応用と使い分けることができます。

<engine:TabGroup class="primary underline">
  <engine:IconTab icon="fa-user" path="Tab1" target="main" active="true" />
  <engine:LocalizeTab text="Localization key" path="Tab2" target="main" />
  <engine:Tab text="Tab3" path="Tab3" target="main" />
  <engine:Tab text="Tab4" path="Tab4" target="main" />
</engine:TabGroup>

基本的には AccordionGroup タグの配下に Accordion タグを配置して利用します。

<engine:AccordionGroup>
  <engine:Accordion name="accordion1">
    Accordion Contents
  </engine:Accordion>
  <engine:Accordion name="accordion2">
    Accordion Contents
  </engine:Accordion>
</engine:AccordionGroup>

Accordion タグは VisualElement タグのように中にUXMLタグを配置することが可能で、 Accordion タグの中にそれぞれ表示したいコンテンツを記述していきます。

アコーディオンの切り替えは BindableButton （またはBindableIconButtonやBindableLocalizeButtonなどの派生タグ）を利用することで可能です。

<engine:AccordionGroup>
  <editor:BindableButton text="Show Accordion 1" control="show" target="accordion1" />
  <engine:Accordion name="accordion1">
    Accordion Contents
  </engine:Accordion>
  <editor:BindableButton text="Show Accordion 2" control="show" target="accordion2" />
  <engine:Accordion name="accordion2">
    Accordion Contents
  </engine:Accordion>
</engine:AccordionGroup>

BindableButtonの control 属性と target 属性をそれぞれ指定することによってアコーディオンをコントロールします。control属性にはshowを指定し、target属性には表示したいアコーディオンのname属性を指定します。これにより指定したtargetのアコーディオンが表示されます。

Accordionタグではテンプレートを利用して別のUXMLファイルを中身として表示することが可能です。

<engine:Template path="Assets/Masamune/UIElements.Expansions.TabsAccordion/Assets/Styles/Articles/Accordion3.uxml" name="Accordion3" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.TabsAccordion/Assets/Styles/Articles/Accordion4.uxml" name="Accordion4" />

<engine:AccordionGroup>
  <editor:BindableButton text="Show Accordion 3" control="show" target="accordion3" />
  <engine:Accordion name="accordion3" template="Accordion3" />
  <editor:BindableButton text="Show Accordion 4" control="show" target="accordion4" />
  <engine:Accordion name="accordion4" template="Accordion4" />
</engine:AccordionGroup>

Template タグで予め外部UXMLファイルを指定しておき、そのときのname属性をAccordionタグの template 属性で指定します。

「 UIElements Expansions: Tabs / Accordion 」はUnity2019.1から導入が始まった「 UIElements 」を強力にサポートします。特にこれまでエディタースクリプトを書く必要があった インスペクターのデザインを簡単に記述することができるようになります 。

また、タブやアコーディオンを用いることで よりわかりやすいUIを構築することが可能です 。マニュアルやチュートリアルなど幅広く利用することができるようになるでしょう。

デザインは フラットデザインを導入し一気にカッコよくなるUnity2019.3にマッチする形に整えている ので気持ちよく使うことができるでしょう。

気になりましたら アセットストアで販売しています ので是非ご検討ください！

UIElements Expansions: Tabs / Accordion | GUI Tools | Unity Asset Store

Use the UIElements Expansions: Tabs / Accordion from mathru.net on your next project. Find this GUI tool & more on the Unity Asset Store.

https://assetstore.unity.com