具有 2 种不同颜色的 JavaFX 滑块，例如选定区域为绿色，未选定区域为红色 [英] JavaFX Slider with 2 different colors , for example green for selected area and red for unselected area
本文介绍了具有 2 种不同颜色的 JavaFX 滑块，例如选定区域为绿色，未选定区域为红色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要实现的是拥有一个如下所示的 JavaFX 滑块:
我希望选定区域为绿色，未选定区域为红色:
这可以用简单的 css 来完成吗，因为 JavaFX 很棒，我相信它可以，但现在如何:_)
<小时>我在做什么直到 ....
直到现在我只是添加一个 StackPane 并在其后面添加一个 ProgressBar ，与 Slider 的值同步，我的意思是什么?:)
，但是嘿，现在我需要两种颜色，我必须在 StackPane 中创建两个不同颜色(红色和绿色)的 ProgressBars .... 很多代码...
解决方案
1个滑块和2个进度条，下面我会贴出.fxml代码，.java代码以及外观和感觉所需的 .css :)
任何问题都可以回答:)
至于代码，这是为
.fxml:
<?xml version="1.0" encoding="UTF-8"?><?import java.lang.String?><?import javafx.geometry.Insets?><?import javafx.scene.control.ProgressBar?><?import javafx.scene.control.Slider?><?import javafx.scene.layout.BorderPane?><?import javafx.scene.layout.HBox?><?import javafx.scene.layout.StackPane?><fx:root prefHeight="389.0" prefWidth="228.0" style="-fx-background-color: #202020;"stylesheets="@../../style/application.css" type="StackPane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/9.0.1"><孩子们><BorderPane fx:id="borderPane" minHeight="0.0" minWidth="0.0"><底部><StackPane minHeight="0.0" minWidth="0.0" BorderPane.alignment="CENTER"><孩子们><HBox alignment="CENTER" maxHeight="-Infinity" minHeight="0.0" minWidth="0.0" prefHeight="15.0"><孩子们><ProgressBar fx:id="volumeProgress1" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" mouseTransparent="true" prefHeight="15.0" progress="1.0" HBox.hgrow="ALWAYS"><风格类><String fx:value="透明进度条"/><String fx:value="transparent-volume-progress-bar2-nostrip"/></styleClass></进度条><ProgressBar fx:id="volumeProgress2" layoutX="10.0" layoutY="10.0" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" mouseTransparent="true" prefHeight="15.0" progress="1.0" HBox.hgrow="总是"><风格类><String fx:value="透明进度条"/><String fx:value="transparent-volume-progress-bar3-nostrip"/></styleClass></进度条></孩子们></HBox><滑块 fx:id="masterVolumeSlider" majorTickUnit="15.0" max="150.0" maxWidth="1.7976931348623157E308" minorTickCount="55" value="75.0"><风格类><String fx:value="透明滑块"/><String fx:value="timer-slider"/></styleClass></滑块></孩子们><BorderPane.margin><插入左=5.0"右=5.0"/></BorderPane.margin></StackPane></底部></边框窗格></孩子们></fx:root>.java
import java.io.IOException;导入 javafx.fxml.FXML；导入 javafx.fxml.FXMLLoader；导入 javafx.scene.control.ProgressBar；导入 javafx.scene.control.Slider；导入 javafx.scene.layout.BorderPane；导入 javafx.scene.layout.StackPane；导入 main.java.com.goxr3plus.xr3player.application.tools.InfoTool；公共类 MixTabInterface 扩展 StackPane {//--------------------------------------------------------------@FXML私人边界窗格边界窗格；@FXML私人进度条volumeProgress1；@FXML私人进度条volumeProgress2；@FXML私人滑块 masterVolumeSlider;//-------------------------------------------------------------/*** 构造函数.*/公共 MixTabInterface() {//------------------------------------FXMLLOADER -----------------------------------------------------FXMLLoader loader = new FXMLLoader(getClass().getResource(InfoTool.PLAYERS_FXMLS + "MixTabInterface.fxml"));loader.setController(this);loader.setRoot(this);尝试 {加载器.load();} 捕捉(IOException ex){ex.printStackTrace();}}/*** fxml 初始化后立即调用*/@FXML私人无效初始化(){//masterVolumeSlidermasterVolumeSlider.boundsInLocalProperty().addListener((observable, oldValue, newValue) -> calculateBars());masterVolumeSlider.valueProperty().addListener((observable, oldValue, newValue) -> {计算条()；});}/*** 计算条形定位*/私人无效计算条(){//变量双值 = masterVolumeSlider.getValue();双半 = masterVolumeSlider.getMax()/2;双 masterVolumeSliderWidth = masterVolumeSlider.getWidth();//进度最大值1volumeProgress1.setProgress(1);volumeProgress2.setProgress(1);//下面是思维技巧如果((int)值==(int)一半){volumeProgress1.setMinWidth(masterVolumeSliderWidth/2);volumeProgress2.setMinWidth(masterVolumeSliderWidth/2);} else if (value < half) {双倍进度 = 1.0 - (价值/一半);双 minimumWidth = masterVolumeSlider.getWidth()/2 + ( masterVolumeSlider.getWidth()/2 ) * ( 进度 );volumeProgress1.setMinWidth(masterVolumeSliderWidth - minimumWidth);volumeProgress1.setMaxWidth(masterVolumeSliderWidth - minimumWidth);volumeProgress2.setMinWidth(minimumWidth);} else if (value > half) {双倍进度=(价值-一半)/一半；双 minimumWidth = masterVolumeSlider.getWidth()/2 + ( masterVolumeSlider.getWidth()/2 ) * ( 进度 );volumeProgress1.setMinWidth(minimumWidth);volumeProgress2.setMinWidth(masterVolumeSliderWidth - minimumWidth);volumeProgress2.setMaxWidth(masterVolumeSliderWidth - minimumWidth);}}/*** @return 边框*/公共BorderPane getBorderPane(){返回边界窗格；}/*** @return 主音量滑块*/公共滑块 getMasterVolumeSlider() {返回主音量滑块；}}.css
.transparent-volume-progress-bar2-nostrip >.bar,.transparent-volume-progress-bar2-nostrip:indeterminate .bar,.transparent-volume-progress-bar2-nostrip:determinate .track,.transparent-volume-progress-bar2-nostrip:indeterminate .track{-fx 重音:rgb(0.0, 144.0, 255.0);-fx-背景色:-fx-口音；-fx-背景-半径:0.0；-fx-边界半径:0.0；}.transparent-volume-progress-bar3-nostrip >.bar,.transparent-volume-progress-bar3-nostrip:indeterminate .bar,.transparent-volume-progress-bar3-nostrip:determinate .track,.transparent-volume-progress-bar3-nostrip:indeterminate .track{-fx 口音:#fc4f4f；-fx-背景色:-fx-口音；-fx-背景-半径:0.0；-fx-边界半径:0.0；}.进度条>.酒吧 {-fx-口音:耐火砖；/*-fx-背景色:耐火砖；*/-fx-背景色:线性渐变(从 0.0px 0.75em 到 0.75em 0.0px，重复，-fx 重音 0.0%,-fx 口音 49.0%,派生(-fx-accent，30.0%)50.0%，派生(-fx-accent, 30.0%) 99.0%);-fx-背景-插图:3.0；-fx-填充:0.2em；}.transparent-progress-bar:determinate .track,.transparent-progress-bar:indeterminate .track{-fx-背景色:rgb(0.0,0.0,0.0,0.5);}/* .透明进度条 */.透明进度条>.bar,.transparent-progress-bar: 不确定 .bar{-fx-口音:耐火砖；}What i want to achieve is the have a JavaFX Slider like the below :
I want the selected are to be green and the unselected area to be red :
Can this be done with let's say simple css because JavaFX is awesome i am sure it can but now how :_)
What i was doing till ....
Until now i was just adding a StackPane and behind that a ProgressBar , synchronized with the value of the Slider , what i mean? :)
, but hey now i need two colors and i have to create two ProgressBars in a StackPane with different colors (RED and Green) .... to much code ...
解决方案
1 slider and 2 progress bars , I will post below the .fxml code , .java code and the needed .css for look and feel :)
Any question feel free to answer :)
As for the code , this is created for XR3Player (Open Source Github Project)
.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.String?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<fx:root prefHeight="389.0" prefWidth="228.0" style="-fx-background-color: #202020;" stylesheets="@../../style/application.css" type="StackPane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/9.0.1">
<children>
<BorderPane fx:id="borderPane" minHeight="0.0" minWidth="0.0">
<bottom>
<StackPane minHeight="0.0" minWidth="0.0" BorderPane.alignment="CENTER">
<children>
<HBox alignment="CENTER" maxHeight="-Infinity" minHeight="0.0" minWidth="0.0" prefHeight="15.0">
<children>
<ProgressBar fx:id="volumeProgress1" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" mouseTransparent="true" prefHeight="15.0" progress="1.0" HBox.hgrow="ALWAYS">
<styleClass>
<String fx:value="transparent-progress-bar" />
<String fx:value="transparent-volume-progress-bar2-nostrip" />
</styleClass>
</ProgressBar>
<ProgressBar fx:id="volumeProgress2" layoutX="10.0" layoutY="10.0" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" mouseTransparent="true" prefHeight="15.0" progress="1.0" HBox.hgrow="ALWAYS">
<styleClass>
<String fx:value="transparent-progress-bar" />
<String fx:value="transparent-volume-progress-bar3-nostrip" />
</styleClass>
</ProgressBar>
</children>
</HBox>
<Slider fx:id="masterVolumeSlider" majorTickUnit="15.0" max="150.0" maxWidth="1.7976931348623157E308" minorTickCount="55" value="75.0">
<styleClass>
<String fx:value="transparency-slider" />
<String fx:value="timer-slider" />
</styleClass>
</Slider>
</children>
<BorderPane.margin>
<Insets left="5.0" right="5.0" />
</BorderPane.margin>
</StackPane>
</bottom>
</BorderPane>
</children>
</fx:root>
.java
import java.io.IOException;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import main.java.com.goxr3plus.xr3player.application.tools.InfoTool;
public class MixTabInterface extends StackPane {
//--------------------------------------------------------------
@FXML
private BorderPane borderPane;
@FXML
private ProgressBar volumeProgress1;
@FXML
private ProgressBar volumeProgress2;
@FXML
private Slider masterVolumeSlider;
// -------------------------------------------------------------
/**
* Constructor.
*/
public MixTabInterface() {
// ------------------------------------FXMLLOADER ----------------------------------------
FXMLLoader loader = new FXMLLoader(getClass().getResource(InfoTool.PLAYERS_FXMLS + "MixTabInterface.fxml"));
loader.setController(this);
loader.setRoot(this);
try {
loader.load();
} catch (IOException ex) {
ex.printStackTrace();
}
}
/**
* Called as soon as fxml is initialized
*/
@FXML
private void initialize() {
//masterVolumeSlider
masterVolumeSlider.boundsInLocalProperty().addListener((observable , oldValue , newValue) -> calculateBars());
masterVolumeSlider.valueProperty().addListener((observable , oldValue , newValue) -> {
calculateBars();
});
}
/**
* Calculate bars positioning
*/
private void calculateBars() {
//Variables
double value = masterVolumeSlider.getValue();
double half = masterVolumeSlider.getMax() / 2;
double masterVolumeSliderWidth = masterVolumeSlider.getWidth();
//Progress Max1
volumeProgress1.setProgress(1);
volumeProgress2.setProgress(1);
//Below is mind tricks
if ((int) value == (int) half) {
volumeProgress1.setMinWidth(masterVolumeSliderWidth / 2);
volumeProgress2.setMinWidth(masterVolumeSliderWidth / 2);
} else if (value < half) {
double progress = 1.0 - ( value / half );
double minimumWidth = masterVolumeSlider.getWidth() / 2 + ( masterVolumeSlider.getWidth() / 2 ) * ( progress );
volumeProgress1.setMinWidth(masterVolumeSliderWidth - minimumWidth);
volumeProgress1.setMaxWidth(masterVolumeSliderWidth - minimumWidth);
volumeProgress2.setMinWidth(minimumWidth);
} else if (value > half) {
double progress = ( value - half ) / half;
double minimumWidth = masterVolumeSlider.getWidth() / 2 + ( masterVolumeSlider.getWidth() / 2 ) * ( progress );
volumeProgress1.setMinWidth(minimumWidth);
volumeProgress2.setMinWidth(masterVolumeSliderWidth - minimumWidth);
volumeProgress2.setMaxWidth(masterVolumeSliderWidth - minimumWidth);
}
}
/**
* @return the borderPane
*/
public BorderPane getBorderPane() {
return borderPane;
}
/**
* @return the masterVolumeSlider
*/
public Slider getMasterVolumeSlider() {
return masterVolumeSlider;
}
}
.css
.transparent-volume-progress-bar2-nostrip > .bar,.transparent-volume-progress-bar2-nostrip:indeterminate .bar,.transparent-volume-progress-bar2-nostrip:determinate .track,.transparent-volume-progress-bar2-nostrip:indeterminate .track{
-fx-accent:rgb(0.0, 144.0, 255.0);
-fx-background-color: -fx-accent;
-fx-background-radius:0.0;
-fx-border-radius:0.0;
}
.transparent-volume-progress-bar3-nostrip > .bar,.transparent-volume-progress-bar3-nostrip:indeterminate .bar,.transparent-volume-progress-bar3-nostrip:determinate .track,.transparent-volume-progress-bar3-nostrip:indeterminate .track{
-fx-accent:#fc4f4f;
-fx-background-color: -fx-accent;
-fx-background-radius:0.0;
-fx-border-radius:0.0;
}
.progress-bar > .bar {
-fx-accent:firebrick;
/*-fx-background-color:firebrick;*/
-fx-background-color: linear-gradient(
from 0.0px 0.75em to 0.75em 0.0px,
repeat,
-fx-accent 0.0%,
-fx-accent 49.0%,
derive(-fx-accent, 30.0%) 50.0%,
derive(-fx-accent, 30.0%) 99.0%
);
-fx-background-insets: 3.0;
-fx-padding: 0.2em;
}
.transparent-progress-bar:determinate .track,.transparent-progress-bar:indeterminate .track{
-fx-background-color:rgb(0.0,0.0,0.0,0.5);
}
/* .transparent-progress-bar */
.transparent-progress-bar > .bar,.transparent-progress-bar:indeterminate .bar{
-fx-accent:firebrick;
}
这篇关于具有 2 种不同颜色的 JavaFX 滑块，例如选定区域为绿色，未选定区域为红色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
