1. himajin_sekky

    Posted

    himajin_sekky
Changes in title
+Delphiで丸いボタンを作る
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,121 @@
+#はじめに
+スマートフォンアプリでよく見かける丸いボタンを、スタイルデザイナにて作成する例です。
+Delphi 10.3 Community Edition 上で確認しています。
+
+詳しくは[公式ドキュメント](http://docwiki.embarcadero.com/RADStudio/Rio/ja/%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F_FireMonkey_%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA "スタイルを使った FireMonkey アプリケーションのカスタマイズ")を参照ください。
+
+![00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/c890f19e-53bc-f328-3a7c-7cacc3975d25.png)(こういうやつ)
+
+
+#方針
+ボタンを円で表現するには、ビットマップスタイルにて丸い画像を貼り付ける方法と、Shape系コントロールのTCircleを使用する方法があります。今回は後者について説明します。
+
+ビットマップスタイルを使用する方法については、こちらの記事が参考になります。
+[ビットマップスタイルデザイナの使い方](https://qiita.com/CYonezawa/items/61a5272e07cc7313aaff)
+
+##手順
+###丸の作成
+
+①フォームにTStyleBookを配置し、ダブルクリックします(スタイルデザイナが開きます)。
+
+②パレットからTLayoutをドラッグし、SytleContainerにドロップします。
+![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/05c4e3b3-3832-5075-830e-fad4b0951fdb.png)
+
+③作成されたLayout1Styleをクリックし、オブジェクトインスペクタにて以下のように設定します。
+StyleName:AddItemCircleButton
+Size.Width:50
+Size.Height:50
+
+
+④パレットからTCircleをドラッグし、AddItemCircleButtonにドロップします。
+オブジェクトインスペクタにて、以下のように変更します。
+Align:Contents
+Fill.Color:任意の色
+Stroke.Color:任意の色 (境界線を表示しない場合、Stroke.KindをNoneとします)
+HitTest:False
+![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/0bb1739d-9d33-8b4f-2094-58f0513f664c.png)
+
+
+⑤この状態で適用ボタンを押し、一度フォームデザイン画面上で確認してみましょう。
+![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/4723f207-f432-99ea-2058-708a90496696.png)(適用ボタン)
+
+フォームデザイン画面に戻り、FormのStyleBookプロパティに「StyleBook1」を設定します。
+次に、TButtonを配置し、StyleLookUpに「AddItemCircleButton」を設定します。
+![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/4f1ffabc-3f2a-a16a-9054-837270e77241.png)
+![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/cf473777-b490-ab79-b0a6-3b1269598450.png) 大きさが変えられるかも確認しましょう
+
+###表面の作成
+丸ボタンの表面の十字はRoundRectangleを2つ使用して表現します。
+(ビットマップで表現することもできます。他のボタンスタイルが参考になります。)
+
+(縦棒)
+Fill.Color:White
+Stroke.Kind:None
+Position.X:22
+Position.Y:6
+Size.Width:5
+Size.Height:37
+Alien:Scale
+HitTest:False
+
+(横棒)
+Fill.Color:White
+Stroke.Kind:None
+Position.X:6
+Position.Y:22
+Size.Width:37
+Size.Height:5
+Alien:Scale
+HitTest:False
+
+![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/638db313-c3fe-6d40-6860-401f14dece1b.png)
+
+※注意 スタイルデザイナ上で要素のコピー&ペーストを行うと、同一要素が生成されてしまい、IDEの挙動がおかしくなります。一回ごとにパレットからドロップするようにしてください。
+
+適用ボタンを押し、フォーム画面にて確認。
+今回の方法だと、フォーム上のレイアウトが長方形になっていると十字が崩れるため、正方形になるように注意が必要です。
+![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/dc1bde99-900e-1f8e-98ec-c7dc05f1133a.png)
+
+
+###装飾(影をつける)
+パレットからTShadowEffectをCircle1Styleにドロップします。
+そのままでも良い具合ですが、影の大きさ・方向を変更できます。(割愛)
+![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/fef4e856-9f26-ede7-cdd2-b76d4efc4ca7.png)
+
+
+
+###動きの設定
+おおよそ完成ですが、クリック時・フォーカスなどに何も反応が無いとボタンとしては寂しい所です。
+アニメーション機能を使って、クリック時に大きさを変化させてみます。(拡大方向が右下に偏ってしまいますが・・)
+![anime.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/0e35eac3-6f5f-d20f-7296-e3895806321f.gif)
+
+FloatAnimetionをAddItemCircleButtonに2個ドロップします。
+
+StyleName:FloatAnimationXStyle
+PropertyName:Scale.X
+StartPosition:1
+EndPostion:1.1
+Inverse:True
+Trigger:IsPressed=True;
+Interporation:任意の値を設定
+
+StyleName:FloatAnimetionYStyle
+Xと同様。PropertyNameをScale.Yにする。
+
+![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/86b5afb0-0dc3-5abc-ff35-860c7c52d538.png)
+こちらはフォームデザイナ上では動作を確認できません。プログラムをコンパイルし、クリックしてみてください。
+
+
+Interporationの設定については、こちらの記事が参考になると思います。
+[プロパティ値によるアニメーションの違いを調べてみた](https://qiita.com/CYonezawa/items/6d0f016fc8ea3afbe472)
+
+これで丸いボタンはひとまず完成となります。
+
+##スタイルの保存
+折角作ったデザインなので、保存しておきましょう。
+![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/94a71d2a-8d33-1583-a1b7-34722336b00c.png)
+
+
+#おわりに
+まだまだ触り始めなのですが、Delphiのスタイルは強力な機能だなと感じました。
+Delphi Community Edition の登場で 勉強しやすくなりましたし、皆さんもぜひ触ってみてください!