#12012年02月28日かけがわ(73)2この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。今回は、Flex4のSparkコンポーネントで下図のように弧の軌跡上にカードのようなアイテムが並んでいるリストを作成したいと思います。Flexのコンポーネントにはこのようなものはありませんので実現方法を考える必要があるのですが、その前にSparkコンポーネントのコンテナ関連について簡単におさらいしておきましょう。SparkコンポーネントにおけるコンテナFlex3以前のHaloコンポーネントでは、コンテナコンポーネントの様々な機能の実装は基本的に自クラスといくつかのサポートクラスで完結しており、一つのコンポーネントとして提供されていました。Sparkコンポーネントではいくつかのコンポーネントに責務が分散されています。スクロールコンポーネントIViewportを実装するコンポーネントのスクロールを管理します。4ベータ版のビューポートとスクロールの基礎で分かりやすく解説されています。例:Scrollerコンテナコンポーネント(GroupBaseサブクラス)表示リスト上の子となるコンポーネントを管理します。スクロールコンポーネントにスクロールを管理してもらうために、IViewportを実装します。DataGroupレイアウトコンポーネント(LayoutBaseサブクラス)コンテナコンポーネントに代わって子エレメントのレイアウトを行います。VerticalLayout等また、コンテナコンポーネントは背景やボーダーなどの外観を定義する機能を持っていません。Sparkコンポーネントにおいて外観を定義する機能を持っているコンテナであるBorderContainerやListは、スキンパーツとして内部でGroupやDataGroupを利用することによってコンテナとしての機能を実現しています。LayoutBaseを拡張したレイアウトクラスの作成さて、話を戻しましょう。今回作成したいコンポーネントは、スクロールコンポーネントはScroller、コンテナコンポーネントはDataGroupを使用すれば問題なさそうです。弧の軌跡上に子エレメントを配置するレイアウトコンポーネントはFlexSDKには用意されていません。そこで、LayoutBaseを拡張して弧の軌跡上に子エレメントが並ぶレイアウトコンポーネントを作成します。レイアウトコンポーネントは以下のような条件で作成します。アイテムレンダラが弧の軌跡上に配置される一番上までスクロールした状態では、先頭のアイテムレンダラがリスト内の垂直位置で中心にあること一番下までスクロールした状態では、末尾のアイテムレンダラがリスト内の垂直位置で中心にあることリスト内の垂直位置で中心にあるアイテムレンダラは、デフォルトでは水平位置で中心にあることリスト内の垂直位置が中心に最も近いアイテムレンダラが一番手前に表示されることリスト内の垂直位置の中心から遠ざかるにつれてアイテムレンダラが奥に表示されることプロパティで弧の半径を設定できることプロパティでアイテムレンダラの水平方向の表示位置について、リスト内の水平位置の中心からのオフセットを設定できること180°の弧の範囲内に表示されるアイテムレンダラの数をプロパティで設定できることアイテムレンダラは固定サイズのものを使用しかし、いきなり弧を描く形のレイアウトを実装しようとすると混乱してしまいますので、まずは下図のように直線上に並ぶ形のレイアウトを実装したいと思います。今回の実装ではFlexSDK4.6.0.23201Bを利用します。垂直方向に並べるレイアウトクラスLayoutBaseを継承したVerticalLinearLayoutクラスを作成します。VerticalLinearLayoutのソースコードです。レイアウトターゲットの子エレメントを垂直方向に一定の間隔で配置するレイアウトクラスです。子エレメントを並べる際の子エレメントの中心点の間隔です。}}[/as3]</p><p>updateDisplayListメソッドがオーバーライドされています。このメソッドは、レイアウトターゲットのupdateDisplayListから呼び出され、レイアウトターゲットの代わりに子エレメントの配置処理を行うことを目的としています。</p><h4>子エレメントの配置</h4><p>まず、子エレメントを配置する部分のコードを見ていきます。</p><p></p><p>3行目のコンテナのgetElementAtメソッドで子エレメントを取得してコンテンツ内に並べています。垂直方向は、子エレメントの中心点を基準に上から順に一定間隔で並べています。先頭のエレメントはscrollPosition=0の状態のコンテナの可視領域の中心になるよう配置され、末尾のエレメントはscrollPosition=maxScrollPositionの状態のコンテナの可視領域の中心になるよう配置されます。水平方向はセンタリングしています。この処理を子エレメントの数だけ繰り返します。</p><h4>コンテンツサイズの設定</h4><p>次に、コンテンツのサイズを設定する部分です。contentHeight);ここでは、コンテンツの大きさの測定とコンテナへの設定を行っていますが、これもレイアウトクラスの役割です。コンテナの垂直方向の最大スクロール量を求めます。今回作成するレイアウトは、先頭の子エレメントがコンテナの可視領域の中心にある状態から、末尾の子エレメントがコンテナの可視領域の中心にある状態までスクロールしますので、先頭の子エレメントの中心から末尾の子エレメントの中心までの距離が垂直方向の最大スクロール量となります。1行目で子エレメントの数とエレメント間の間隔から値を求めています。その値に、コンテナの可視領域の高さを加算してコンテンツの高さを算出しています。最後にコンテンツの大きさをコンテナに設定しています。コンテナはcontentWidthとcontentHeightというコンテンツの大きさを表す読み取り専用のプロパティを持っており、レイアウトクラスはコンテナのsetContentSizeというメソッドを通してこのプロパティにコンテンツの大きさを設定することになります。コンテナにコンテンツの大きさを設定することによって、それがスクロールコンポーネントに通知され、スクロールコンポーネントの保持しているスクロールバー等が適切に設定されます。これでレイアウトクラスの実装が終わりました。子エレメントのレイアウトがコンテナのサイズに影響を与える場合はmeasureメソッドを実装する必要がありますが、今回はコンテナのサイズに影響を与えることはないので実装しません。動作確認さて、レイアウトクラスを作成したのでテストアプリケーションを作成して動作を確認しましょう。9きちんとアイテムレンダラが直線上に等間隔で並んでいますね。あとは直線上ではなく弧の軌跡上に並べるよう修正すればよさそうですが、この実装でエレメントの配置位置を弧の軌跡上に変えてしまうといくつか問題が出てきてしまいます。次回は、この問題と解決方法について考えたいと思います。733,868まだプロフィールが設定されていません。記事たいが33JenkinsでFlexPMDを実行させてみた。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。#cmdevio新型コロナウイルスの感染拡大を受け、本イベントを延期させていただくことになりました(開催時期未定)。お申し込みいただいた皆様には大変申し訳ございませんが、何卒ご理解いただけますようよろしくお願いいたします。AWSについてライトに色んな情報交換をしましょう。カフェ店長のオカノです。今日はオフィスに用があるので、通勤ラッシュを避けて出社しました。この子は新メンバーのさめくんです。在宅勤務が推奨されているのでオフィスが閑散としており、すこしさみしそうです。タイトルがすべてなのですが、社内で「登壇勉強会」が開催されたので、「登壇は最強の生存戦略である」というタイトルで登壇しました。本が出ていたので読んでみたところよかったので紹介させていただきます。使いたいときの注意点を書きました。臼田佳祐295ワークフロー自動化OSSのn8nをAWS環境で建てて検証してみました。非常に期待できるサービスです。Fargateの勉強をしています。使ってみたい方は参考にしてください。洋介255SnowflakeがAWSの東京リージョン上で稼働するようになりました。データを日本に置けます。芳賀健233こんにちは!猫様の忠実なるしもべ、芳賀健です。Tokyoで開催されました。カフェ店長のオカノです。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。