web-dev-qa-db-ja.com

直径3xpの円形のjavafxボタンを作成するにはどうすればよいですか？

テキストのない非常に小さな丸いボタンを作りたいです。これが私が試した方法です。

_Button bt = new Button();
bt.setShape(new Circle(1.5));
bt.setMaxSize(3,3);
_


しかし、2つの問題があります。
1。ボタンの形状は完全に円形ではなく、楕円形のようです。
2。 bt.setMaxSize(1.5,1.5);は有効になりません。私が考えているように、その直径は3以上です...
小さい丸みのあるボタンをどのように作成できますか？感謝してください。

javabuttonjavafxsize
11
Yvainovski

更新：結果のボタンをよく確認すると、ホセの回答のように形状を設定すると、使用される-fx-background-radiusを設定するよりも、非常に小さなボタンでよりうまく機能するようですこの答え（形状が設定されている場合、結果のボタンはもう少し円形に見えます）。したがって、ここでのソリューションはおそらく大きなボタン（10px以上など）に最適ですが、形状の設定はおそらく3pxの非常に小さなボタンに最適です（ただし、かなり微妙な違いです）。

3pxはvery小さいボタンです。人々がそれをクリックすることをどのように期待するか私にはわかりません。

CSSを使用して作成できます。

30pxサイズの丸いボタンは次のとおりです。

30px

そして、あなたが要求した3pxサイズのボタン：

3px

丸めは、-fx-background-radiusに大きな値を設定することで実現されます。

スクリーンショットは網膜のMacで撮影されているため、元のサイズの2倍です。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Rounding extends Application {

    @Override 
    public void start(Stage stage) throws Exception {
        Button roundButton = new Button();

        roundButton.setStyle(
                "-fx-background-radius: 5em; " +
                "-fx-min-width: 3px; " +
                "-fx-min-height: 3px; " +
                "-fx-max-width: 3px; " +
                "-fx-max-height: 3px;"
        );

        StackPane layout = new StackPane(
                roundButton
        );
        layout.setPadding(new Insets(10));
        stage.setScene(new Scene(layout));

        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

ボタンは背景のレイヤーでレンダリングされることに注意してください。内側のレイヤーは実際のボタンで、その外側にフォーカスリングとわずかな輝きがあります。したがって、実際には、実際には3pxよりわずかに大きくなる可能性があります。正確に3pxを取得したい場合は、フォーカスの背景インセットを取り除く必要があります。以下のようなもの：

really small no focus

roundButton.setStyle(
        "-fx-background-radius: 5em; " +
        "-fx-min-width: 3px; " +
        "-fx-min-height: 3px; " +
        "-fx-max-width: 3px; " +
        "-fx-max-height: 3px; " +
        "-fx-background-color: -fx-body-color;" +
        "-fx-background-insets: 0px; " +
        "-fx-padding: 0px;"
);

インラインスタイルは、サンプルを小さく自己完結させるためにここで使用されています。実際のアプリケーションでは、スタイルをスタイルシートに配置します。

-fx-background-radiusを使用してボタンを丸めるという考えは、デフォルトのJavaFX modena.cssスタイルシートの丸いラジオボタンの実装に由来しています。スタイルシートは、JavaFXコードとリソースを含むjfxrt.jarファイル内を調べることで見つけることができます。

比較すると、これはホセの答えのような円形状ソリューションを使用して作成されたボタンの画像です。

circle button

なぜまだminSize（）.....をセットアップする必要があるのですか？.

JavaFXは妥当なデフォルトを提供しようとしているためです。空のボタンのデフォルトの最小サイズがない場合、シーンのサイズを小さくすると、一部のボタンが非表示になり、ユーザーがボタンをクリックできなくなるため、ユーザーエクスペリエンスが非常に悪くなります。したがって、ボタンにテキストが設定されていなくても、最小サイズはデフォルトで約1emに加えて、一部のパディング（たとえば、文字よりも大きい）になります。ただし、これは、Javaシステムによって設定されたデフォルトです。アプリが何を望んでいるかを正確に知ることができないためです。デフォルトが状況に合わない場合は、オーバーライドするか、コントロールの最小サイズを明示的に設定するなどのヒント。

「5em」は何の略ですか？

JavaFX 8 CSSリファレンスガイドを参照してください ：

em：関連するフォントの「フォントサイズ」

つまり、5emはフォントサイズの5倍を意味します。デフォルトのJavaFXスタイルシートのコントロールのサイズのほとんどは、em単位を使用して指定されています。このようにして、フォントまたはフォントサイズを変更すると、UIは適切にスケーリングされ、より大きいまたは小さいフォントに対応します。この特定のケースでは、5emの選択はかなり恣意的で、ボタンが完全に丸くなるように大きな値が必要でした。そうでない場合、-fx-background-radiusは完全な円ではなく、角が丸い長方形を作成します。 -fx-background-radiusに渡される半径の寸法がコントロールのサイズの半分より大きいことを確認することにより、コントロールは丸い円の外観になります。

これはやや混乱して直感的でないことを知っています。私は、デフォルトのJavaFXスタイルシートから概念をコピーしました。それがどんなに混乱しても、これらの種類の効果を実現するためのベストプラクティスであるか、デフォルトのスタイルシートでは使用されないという考えです。

主に私がそのようなアプローチで見ることができる利点は、コードが不要で、すべてのスタイル設定がCSSで直接実行できることです（Javaコード）を変更せずに外観を変更できます）。必要に応じて、em単位で座標を指定して、コントロールがフォントサイズに合わせて調整されるようにすることができます。

27
jewelsea

最小サイズも設定するだけです。これは行います：

double r=1.5;
btn.setShape(new Circle(r));
btn.setMinSize(2*r, 2*r);
btn.setMaxSize(2*r, 2*r);

そして、それはあなたに丸くて非常に小さなボタンを与えます。小さくしたいかどうかはわかりませんが、それも可能です。半径rを必要な値に変更するだけです。

6
José Pereda