जावाएफएक्स - छवि

Question

के साथ कस्टम बटन बनाएं मैं एक कस्टम बटन बनाना चाहता हूं, जिसमें टॉगल बटन की तरह दो राज्य दबाए गए हैं या नहीं। मुझे यह करने के लिए दो छवियां मिली हैं (दबाया गया है और दबाया नहीं गया है), तो मैं बटन कैसे बना सकता हूं और इसे अपनी छवियों के साथ प्रदर्शित कर सकता हूं? बटन को छवि का आकार लेना चाहिए।
मैं FXML का उपयोग नहीं कर रहा हूं। मदद के लिए धन्यवाद।

Answer 1

इसे पूरा करने के कुछ अलग तरीके हैं, मैं अपने पसंदीदा रूपरेखा तैयार करूंगा।

ToggleButton का उपयोग करें और इसमें एक कस्टम शैली लागू करें। मैं इसका सुझाव देता हूं क्योंकि आपका आवश्यक नियंत्रण "टॉगल बटन की तरह" है, लेकिन डिफ़ॉल्ट टॉगल बटन स्टाइल से अलग दिखता है।

मेरे पसंदीदा तरीका सीएसएस में बटन के लिए एक ग्राफिक परिभाषित करने के लिए है:

.toggle-button { 
    -fx-graphic: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png'); 
} 

.toggle-button:selected { 
    -fx-graphic: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Piece-of-cake-icon.png'); 
} 

या एक पृष्ठभूमि छवि को परिभाषित करने के लिए संलग्न सीएसएस का उपयोग करें।

// file imagetogglebutton.css deployed in the same package as ToggleButtonImage.class 
.toggle-button { 
    -fx-background-image: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png'); 
    -fx-background-repeat: no-repeat; 
    -fx-background-position: center; 
} 

.toggle-button:selected { 
    -fx-background-image: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Piece-of-cake-icon.png'); 
} 

मैं -fx-पृष्ठभूमि स्टाइल पृष्ठभूमि छवियों के लिए नियम के रूप में * विनिर्देशों से अधिक -fx-ग्राफिक विनिर्देश पसंद करते हैं मुश्किल कर रहे हैं और पृष्ठभूमि की स्थापना स्वचालित रूप से सेट जबकि, छवि के लिए बटन का आकार नहीं है ग्राफिक करता है।

और कुछ नमूना कोड:

import javafx.application.Application; 
import javafx.scene.*; 
import javafx.scene.control.ToggleButton; 
import javafx.scene.layout.StackPaneBuilder; 
import javafx.stage.Stage; 

public class ToggleButtonImage extends Application { 
    public static void main(String[] args) throws Exception { launch(args); } 
    @Override public void start(final Stage stage) throws Exception { 
    final ToggleButton toggle = new ToggleButton(); 
    toggle.getStylesheets().add(this.getClass().getResource(
     "imagetogglebutton.css" 
    ).toExternalForm()); 
    toggle.setMinSize(148, 148); toggle.setMaxSize(148, 148); 
    stage.setScene(new Scene(
     StackPaneBuilder.create() 
     .children(toggle) 
     .style("-fx-padding:10; -fx-background-color: cornsilk;") 
     .build() 
    )); 
    stage.show(); 
    } 
} 

ऐसा करने से कुछ लाभ हैं:

1. आप डिफ़ॉल्ट टॉगल बटन व्यवहार मिलता है और की जरूरत नहीं है यह अपने आप को फिर से लागू जोड़कर अपने अपने फोकस स्टाइल, माउस और की हैंडलर इत्यादि।
2. यदि आपका ऐप मोबाइल डिवाइस जैसे विभिन्न प्लेटफॉर्म पर पोर्ट हो जाता है, तो यह माउस ईवेंट इत्यादि के बजाय टच इवेंट्स का जवाब देने वाले बॉक्स से बाहर काम करेगा।
3. आपकी स्टाइल को आपके एप्लिकेशन तर्क से अलग किया गया है, इसलिए आपके एप्लिकेशन को पुन: स्थापित करना आसान है।

एक वैकल्पिक सीएसएस का उपयोग नहीं है और अभी भी एक ToggleButton उपयोग करें, लेकिन कोड में छवि ग्राफिक सेट किया गया है:

import javafx.application.Application; 
import javafx.beans.binding.Bindings; 
import javafx.scene.*; 
import javafx.scene.control.ToggleButton; 
import javafx.scene.image.*; 
import javafx.scene.layout.StackPaneBuilder; 
import javafx.stage.Stage; 

public class ToggleButtonImageViaGraphic extends Application { 
    public static void main(String[] args) throws Exception { launch(args); } 
    @Override public void start(final Stage stage) throws Exception { 
    final ToggleButton toggle  = new ToggleButton(); 
    final Image  unselected = new Image(
     "http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png" 
    ); 
    final Image  selected = new Image(
     "http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Piece-of-cake-icon.png" 
    ); 
    final ImageView toggleImage = new ImageView(); 
    toggle.setGraphic(toggleImage); 
    toggleImage.imageProperty().bind(Bindings 
     .when(toggle.selectedProperty()) 
     .then(selected) 
     .otherwise(unselected) 
    ); 

    stage.setScene(new Scene(
     StackPaneBuilder.create() 
     .children(toggle) 
     .style("-fx-padding:10; -fx-background-color: cornsilk;") 
     .build() 
    )); 
    stage.show(); 
    } 
} 

कोड आधारित दृष्टिकोण लाभ यह है कि आप सीएसएस का उपयोग करने की जरूरत नहीं है नहीं है यदि आप इसके साथ असहज हैं।

सर्वश्रेष्ठ प्रदर्शन और हस्ताक्षर किए गए एप्लेट और वेबस्टार्ट सैंडबॉक्स पर पोर्टिंग करने में आसानी के लिए, अपने ऐप के साथ छवियों को बंडल करें और उन्हें नेट से डाउनलोड करने के बजाय रिश्तेदार पथ यूआरएल द्वारा संदर्भित करें।

Answer 2

तुम सिर्फ माता-पिता से विरासत में मिला अपने ही वर्ग बनाने के लिए की जरूरत है। उस पर एक छवि दृश्य रखें, और mousedown और माउस अप घटनाओं पर बस ImageView की छवियों को बदलें।

public class ImageButton extends Parent { 

    private static final Image NORMAL_IMAGE = ...; 
    private static final Image PRESSED_IMAGE = ...; 

    private final ImageView iv; 

    public ImageButton() { 
     this.iv = new ImageView(NORMAL_IMAGE); 
     this.getChildren().add(this.iv); 

     this.iv.setOnMousePressed(new EventHandler<MouseEvent>() { 

      public void handle(MouseEvent evt) { 
       iv.setImage(PRESSED_IMAGE); 
      } 

     }); 

     // TODO other event handlers like mouse up 

    } 

} 

Answer 3

पिछले 2 जवाब का एक संयोजन चाल किया था। धन्यवाद। बटन से विरासत में एक नई कक्षा। नोट: बटन दिखाए जाने से पहले अपडेट इमेज() को कॉल किया जाना चाहिए।

import javafx.event.EventHandler; 
import javafx.scene.control.Button; 
import javafx.scene.image.Image; 
import javafx.scene.image.ImageView; 
import javafx.scene.input.MouseEvent; 

public class ImageButton extends Button { 

    public void updateImages(final Image selected, final Image unselected) { 
     final ImageView iv = new ImageView(selected); 
     this.getChildren().add(iv); 

     iv.setOnMousePressed(new EventHandler<MouseEvent>() { 
      public void handle(MouseEvent evt) { 
       iv.setImage(unselected); 
      } 
     }); 
     iv.setOnMouseReleased(new EventHandler<MouseEvent>() { 
      public void handle(MouseEvent evt) { 
       iv.setImage(selected); 
      } 
     }); 

     super.setGraphic(iv); 
    } 
}