RadioButtonのラベルの位置を変更する方法は？

Question

デフォルトではRadioButtonには、ボタンの右側にテキストラベルがあります。代わりにボタンの下にラベルを表示します。私はold discussion on the Oracle forumsを見つけましたが、解決策は素晴らしいものではなく、ちょうどうまくいきません。

テキストレスのラジオボタンと別のテキストラベルを使用してカスタムコンポーネントを作成し、VBoxのように配置することができます。しかし、それだけではボタン自体はユーザーの事象に反応し、すべての事象には反応しません。

ラベルの位置を変更する簡単な方法はありませんか？

Answer 1

これを行う簡単な方法はありません（単純なことは、このような単一のプロパティを設定することを意味します）。

あなたは VBoxで述べたようにあなたが何かを行うことができます回避策として

が、Labelて：あなたはLabelのグラフィックとしてRadioButtonを設定し、contentDisplayPropertyからTOP（RadioButtonはLabelの上に置かれている）を設定することができます。そして、Labelにイベントハンドラを追加して、クリック時にRadioButtonを選択することができます。

このアプローチ

public class Main extends Application { 
    @Override 
    public void start(Stage primaryStage) { 
     try { 
      BorderPane root = new BorderPane(); 
      Scene scene = new Scene(root, 400, 400); 

      HBox hbox = new HBox(); 
      hbox.getChildren().add(createRadioLabel("Radio on the left", ContentDisplay.LEFT)); 
      hbox.getChildren().add(createRadioLabel("Radio on the top", ContentDisplay.TOP)); 
      hbox.getChildren().add(createRadioLabel("Radio on the bottom", ContentDisplay.BOTTOM)); 
      hbox.getChildren().add(createRadioLabel("Radio on the right", ContentDisplay.RIGHT)); 
      hbox.setSpacing(30); 
      root.setCenter(hbox); 

      primaryStage.setScene(scene); 
      primaryStage.show(); 
     } catch (Exception e) { 
      e.printStackTrace(); 
     } 
    } 

    private Label createRadioLabel(String text, ContentDisplay cd) { 
     Label label = new Label(text); 
     label.setGraphic(new RadioButton()); 
     label.setContentDisplay(cd); 
     label.addEventHandler(MouseEvent.MOUSE_CLICKED, e -> { 
      RadioButton radioButton = (RadioButton) ((Label) e.getSource()).getGraphic(); 
      radioButton.requestFocus(); 
      radioButton.setSelected(!radioButton.isSelected()); 

     }); 
     return label; 
    } 


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

そして生産RadioButtonのと例：あなたが持っているしたい場合は

また、はRadioButtonのテキストが周りの回転のドット、あなたはCSSの回転、ウィットを使用することができます時間属性​​：

.radio-button { -fx-rotate:180; } 
.radio-button > .text { -fx-rotate: 180; } 

テキストが逆さまに、「ドット」の左側に配置される結果に、全体RadioButtonを回転する第1のセレクタ。第2のセレクタはテキストを法線方向に回転させる。

例

この例では、そのTextComboBox選択によって指定された「ドット」のいずれかの側に配置することができるRadioButtonを示しています。

public class Main extends Application { 
    @Override 
    public void start(Stage primaryStage) { 
     try { 
      BorderPane root = new BorderPane(); 
      Scene scene = new Scene(root, 400, 400); 

      scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm()); 

      RadioButton rb = new RadioButton("In all directions); 

      ComboBox<PseudoClass> combo = new ComboBox<>(); 
      combo.getItems().addAll(PseudoClass.getPseudoClass("left"), 
        PseudoClass.getPseudoClass("top"), 
        PseudoClass.getPseudoClass("right"), 
        PseudoClass.getPseudoClass("bottom")); 

      combo.valueProperty().addListener((obs, oldVal, newVal) -> { 

       if (oldVal != null) 
        rb.pseudoClassStateChanged(oldVal, false); 

       rb.pseudoClassStateChanged(newVal, true); 
      }); 

      root.setTop(combo); 
      root.setCenter(rb); 

      primaryStage.setScene(scene); 
      primaryStage.show(); 
     } catch (Exception e) { 
      e.printStackTrace(); 
     } 
    } 

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

application.css

.radio-button:left > .text { -fx-rotate: 180; } 
.radio-button:left { -fx-rotate:180; } 

.radio-button:right > .text { -fx-rotate: 0; } 
.radio-button:right { -fx-rotate:0; } 

.radio-button:top > .text { -fx-rotate: 0; } 
.radio-button:top { -fx-rotate:-90; } 

.radio-button:bottom > .text { -fx-rotate: 0; } 
.radio-button:bottom { -fx-rotate:90; } 

と表示さRadioButton：