登場でまた勉強を始めました。FireMonkey学び始めた人による、初心者向けの記事になります。今回はスマートフォンアプリでよく見かける丸いボタンを、スタイルデザイナにて作成する例です。スタイルのプロパティの変更やメソッドの実行を動的に行う方針ボタンを円で表現するには、ビットマップスタイルにて丸い画像を貼り付ける方法と、Shape系コントロールのTCircleを使用する方法があります。今回は後者について説明します。ビットマップスタイルを使用する方法については、こちらの記事が参考になります。丸の作成1フォームにTStyleBookを配置し、ダブルクリックします(スタイルデザイナが開きます)。2パレットからTLayoutをドラッグし、SytleContainerにドロップします。3作成されたLayout1Styleをクリックし、オブジェクトインスペクタにて以下のように設定します。StyleName:AddItemCircleButtonSize.Width:50Size.Height:504パレットからTCircleをドラッグし、AddItemCircleButtonにドロップします。オブジェクトインスペクタにて、以下のように変更します。(境界線を表示しない場合、Stroke.KindをNoneとします)HitTest:False5この状態で適用ボタンを押し、一度フォームデザイン画面上で確認してみましょう。(適用ボタン)フォームデザイン画面に戻り、FormのStyleBookプロパティに「StyleBook1」を設定します。次に、TButtonを配置し、StyleLookUpに「AddItemCircleButton」を設定します。丸ボタンの表面の十字はRoundRectangleを2つ使用して表現します。(ビットマップで表現することもできます。他のボタンスタイルが参考になります。スタイルデザイナ上で要素のコピー&ペーストを行うと、同一要素が生成されてしまい、IDEの挙動がおかしくなります。一回ごとにパレットからドロップするようにしてください。適用ボタンを押し、フォーム画面にて確認。今回の方法だと、フォーム上のレイアウトが長方形になっていると十字が崩れるため、正方形になるように注意が必要です。装飾(影をつける)パレットからTShadowEffectをCircle1Styleにドロップします。そのままでも良い具合ですが、影の大きさ・方向を変更できます。(割愛)動きの設定おおよそ完成ですが、クリック時・フォーカスなどに何も反応が無いとボタンとしては寂しい所です。アニメーション機能を使って、クリック時に大きさを変化させてみます。(拡大方向が右下に偏ってしまいますが・・)FloatAnimetionをAddItemCircleButtonに2個ドロップします。StyleName:FloatAnimationXStylePropertyName:Scale.XStartPosition:1EndPostion:1.1Inverse:TrueTrigger:IsPressed=True;Interporation:任意の値を設定StyleName:FloatAnimetionYStyleXと同様。PropertyNameをScale.Yにする。こちらはフォームデザイナ上では動作を確認できません。プログラムをコンパイルし、クリックしてみてください。Interporationの設定については、こちらの記事が参考になると思います。プロパティ値によるアニメーションの違いを調べてみたこれで丸いボタンは完成となります。作ったデザインなので、保存しておきましょう。upLoginユーザーは見つかりませんでした。