Help us understand the problem. What is going on with this article?

Delphiで丸いボタンを作る

はじめに

しばらくDelphiを触っていなかったのですが、Delphi Community Edition の登場でまた勉強を始めました。
FireMonkey学び始めた人による、初心者向けの記事になります。

今回はスマートフォンアプリでよく見かける丸いボタンを、スタイルデザイナにて作成する例です。
Delphi 10.3 Community Edition 上で確認しています。

00.png(こういうやつ)

参考資料
スタイルを使ったFireMonkeyアプリケーションのカスタマイズ
FireMonkey: 設計時にデフォルトのスタイルを変更する
FireMonkey: 設計時にカスタムスタイルを定義する
FireMonkey: スタイルのプロパティの変更やメソッドの実行を動的に行う

方針

ボタンを円で表現するには、ビットマップスタイルにて丸い画像を貼り付ける方法と、Shape系コントロールのTCircleを使用する方法があります。今回は後者について説明します。

ビットマップスタイルを使用する方法については、こちらの記事が参考になります。
ビットマップスタイルデザイナの使い方

手順

丸の作成

①フォームにTStyleBookを配置し、ダブルクリックします(スタイルデザイナが開きます)。

②パレットからTLayoutをドラッグし、SytleContainerにドロップします。
02.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

⑤この状態で適用ボタンを押し、一度フォームデザイン画面上で確認してみましょう。
11.png(適用ボタン)

フォームデザイン画面に戻り、FormのStyleBookプロパティに「StyleBook1」を設定します。
次に、TButtonを配置し、StyleLookUpに「AddItemCircleButton」を設定します。
05.png
06.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

※注意 スタイルデザイナ上で要素のコピー&ペーストを行うと、同一要素が生成されてしまい、IDEの挙動がおかしくなります。一回ごとにパレットからドロップするようにしてください。

適用ボタンを押し、フォーム画面にて確認。
今回の方法だと、フォーム上のレイアウトが長方形になっていると十字が崩れるため、正方形になるように注意が必要です。
10.png

装飾(影をつける)

パレットからTShadowEffectをCircle1Styleにドロップします。
そのままでも良い具合ですが、影の大きさ・方向を変更できます。(割愛)
08.png

動きの設定

おおよそ完成ですが、クリック時・フォーカスなどに何も反応が無いとボタンとしては寂しい所です。
アニメーション機能を使って、クリック時に大きさを変化させてみます。(拡大方向が右下に偏ってしまいますが・・)
anime.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
こちらはフォームデザイナ上では動作を確認できません。プログラムをコンパイルし、クリックしてみてください。

Interporationの設定については、こちらの記事が参考になると思います。
プロパティ値によるアニメーションの違いを調べてみた

これで丸いボタンは完成となります。

スタイルの保存

折角作ったデザインなので、保存しておきましょう。
12.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした