前回に引き続き、unity4.6で実装された新GUIを使ったスクロールビューとアコーディオンの作り方についてみていきます。途中からになっていますので前回を見てない人は前の書いからどうぞ。
今回はスクロール内のアコーディオン、それにスクロール制御のスクリプトです。
ボタンを押すとアコーディオンが開くようにする
ボタンと展開される詳細部分をまとめた入れ物から用意します。
とりあえず前に作った10個ほどのボタンは消して、新しく作っていきましょう。
Verticalの下に新しくGameObjectを作って、名前を「Accordion」に変えます。その下に２つのGameObjectを入れます。名前を「Heading」と「Collapse」にします。
Headingの下にはUI->Buttonゲームオブジェクト、Collapseの下にはUI->Textゲームオブジェクトを入れます。
AccordionにLayout->Vertical Layout Groupコンポーネントをつけます。
HeadingにLayout->Layout ElementコンポーネントをつけてPreferred Heightに60を入力します。Headingの子のButtonを選択してInspectorビューをみてください。Rect TransformコンポーネントのAnchorsの上にアンカープリセットを開くボタンがあります。AnchorPresetsパネルをだしてAltキーを押すと、ポジションも一緒に変えてくれるプリセットが表示されます。右下にある縦横両方を最大限広げるプリセットを選びます。
CollapseにはLayout->Vertical Layout Groupコンポーネントをつけます。
Collapseの縦サイズを固定にします。可変でもいけるようにしたかったですが、この後のアニメーションの都合でどうしても固定にしないとうまくいきませんでした。UI->Layout ElementコンポーネントをつけてPreferred Heightを80にします。
ではCollapseの部分が最初は閉じていて、ボタンを押すと開くように作ってみましょう。
ここではunityのAnimatorを使って開閉のアニメーションを実装したいと思います。AnimatorはMechanimというunityの特徴的なアニメーション管理方法で、Stateという状態をブレンドしたりしてアニメーションの間を補完する動きを作ってくれるみたいです。
まずAccordionにMiscellaneous->Animatorコンポーネントを追加します。まだAnimatorControllerは作っていないのでメニューからAssets->Create->Animator Controllerを選択します。ProjectビューをみるとNew Animatorができているので、名前を「ExpandAnimator」とでもしておきます。
できたExpandAnimatorを先ほど作ったCollapseにあるAnimatorコンポーネントのControllerプロパティに放り込んでください。
まずClosedから。Hierarchyビューでアニメーションの対象となるCollapseを選択してあるのを確認して下さい。Animationビューを開いてください。AddCurveボタンがでています。
AddCurbeを押すとセーブするファイル名を聞かれますのでClosed.animにしてセーブするとAnimatorビューにClosedというStatsが新しくできました。
Animationビューをみてください。丸いアイコンが赤く表示されています。記録モードになっています。今、Collapseが選択されているはずです。InspectorビューでLayout ElementコンポーネントのPreferred Heightを0にします。これで0秒の位置にキーフレームが打たれました。Closedはこれだけでかまいません。
AnimationビューのOpenと書かれてあるリストボックスから[Create New Clip]を選択します。
ファイル名はOpen.animにします。Collapseを選択してLayout ElementコンポーネントのPreferred Heightを80で記録します。
Animatorビューを開いてください。何も表示されていなかったらHierarchyビューでCollapseを選択してください。Closedを選択してから右クリックを押し、Make Transitionを選択します。一見何も起こっていないようですが、このままカーソルをOpenの上にまで持ってくると、Closedから伸びる矢印が表示されます。ここで左クリックで確定です。同じようにOpenからもTransitionをClosedに向かって付けます。
この状態でゲームを再生(MacだとショートカットはCommand+P)してみると、Collapseがぱくぱくと閉じたり開いたりしています。おっと、Collapseの中心点を変えるのを忘れていました。CollapseのPivot.YをInspectorビューで1に変えてもう一度再生してみてください。上から下に、開いたり閉じたりするアニメーションに変わりましたね。
ではボタンを押すと開いたり閉じたりするようにします。Animatorビューの左下にあるParametersというボタンの＋を押します。Boolを選択して名前をOpenにします。ClosedからOpenに伸びている矢印を選択し、ConditionsをExit Timeから今作ったOpenに変えます。条件はtrueのままにしておきます。もうひとつのOpen->Closeの矢印でもConditionsをOpenにして、条件をfalseに変えます。
ここで再生してみます。アニメーションは始まりませんね。Animatorビューで先ほど作ったOpenパラメータのチェックボックスをOnにしてみましょう。Collapseが開きます。Offにすると閉じます。
ここまで来るとあと一息です。
CollapseにScriptを付けます。Collapseを選んでInspectorビューでAdd Componentボタンを押し、New Scriptを選択するとファイル名を入力できますので「AccordionExpander」と入力。LanguageはCSharpにします。
Accordion Expander(Script)コンポーネントがCollapseに付加されました。Scriptのファイル名をダブルクリックするとMonoDevelopが開いて編集画面がでてきます。
|
1 2 3 4 5 6 7 8 9 10 |
using UnityEngine; using System.Collections; public class AccordionExpander : MonoBehaviour { public void OnClick(){ var anim = GetComponent<Animator> (); anim.SetBool ("Open", !anim.GetBool ("Open")); } } |
このソースを貼り付けてください。
HierarchyビューでButtonを選択し、InspectorビューのButton(Script)コンポーネントのOnClick()プロパティの＋ボタンを押します。ターゲットになるオブジェクトにCollapseを放り込んで、先ほど作ったAccordionExpanderスクリプトコンポーネントのOnClick関数を選択します。
さあ、ゲームを再生してみてください。ボタンを押すとCollapseの中身が閉じたり開いたリします。
Accordionをプレファブに適用するためApplyをして、Accordionプレファブをたくさん並べてからゲームを再生すると、最初アコーディオンは閉じて並んでいて、ひとつを開くと下のアコーディオンも位置が下がることが分かります。
スクロールの中心位置をスクリプトで制御する
一番下のボタンをクリックしたときスクロールが上にあがるようにしてみます。
AccordionExpander.csを次のように書き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
using UnityEngine; using UnityEngine.UI; using System.Collections; public class AccordionExpander : MonoBehaviour { public void OnClick(){ var anim = GetComponent<Animator> (); anim.SetBool ("Open", !anim.GetBool ("Open")); // スクロール制御 GameObject VerticalGameObject = GameObject.Find ("Vertical"); RectTransform rectTransform = VerticalGameObject.GetComponent<RectTransform> (); float scrollPosition = VerticalGameObject.transform.parent.GetComponent<ScrollRect> ().verticalNormalizedPosition; // スクロール現在値 float scrollSizeY = rectTransform.sizeDelta.y; // スクロール領域の高さ float diff = rectTransform.pivot.y - scrollPosition; if (scrollSizeY > Screen.height){ // スクロール対象の中心点をスクロール位置に合わせる rectTransform.pivot = new Vector2(0.5f, Mathf.Clamp(scrollPosition, 0f, 1.0f)); rectTransform.anchoredPosition = new Vector2( rectTransform.anchoredPosition.x, rectTransform.anchoredPosition.y - (scrollSizeY * diff) ); } } } |
このスクロールの位置がピボットに変換されることで下の方もいい感じに広がるのは私にしてはいい思いつきだと思ったのですが、どうでしょう。
これでスクロールの出来上がりです。どんなサイズのゲーム画面にもぴったりフィットしていて、まるでスマホのアプリ画面のようです。
パトラッシュ・・・
これだけ書くのに疲れました。記事が2回に分かれたのも初めてです。簡単にスクロールビュー作れた、ひゃっほーと思ったのに、説明するとこんなに長いとは。しかも、書いてみて分かったのですが、決して簡単とは言えませんね。普通にHTMLなどで構成するのに較べるとかなり大変です。自分で実装すること考えるとすごい楽だったんですけどね。。
せめて動画での説明だったらもうちょっと簡単に思えるかもしれません。Unityの新UIの説明がテキストよりも動画の方が充実している理由が分かった気がします。
それではこの辺で。
農薬希釈表
