JavaFX изменить иконки для TreeView. Простой пример как это сделать быстро. Приведено 2-а примера
И так начнем. Суть проблемы в следующем. В JavaFX есть компонент TreeView и по умолчанию там иконки для элементов списка. Эти иконки 2-е стрелки: одна для закрытого елемента и одна для открытого елемента.
Пример приведен на картинке:
Но очень часто хотчется изменить эти стандартные иконки на свои как на картнке(мне нужно было заменить на + и -):
При этом имея возможность втасвить какие угодно. Вроде ничего сложного. После пару минут поиска в нете Вам предложат следующее решение. Нужно просто изменть css фаил Вашего проэкта на следущее:
.tree-cell .tree-disclosure-node .arrow {
-fx-shape: null;
-fx-background-color: null;
-fx-background-image: url("plus-arrow.png");
}
.tree-cell:expanded .tree-disclosure-node .arrow {
-fx-shape: null;
-fx-background-color: null;
-fx-background-image: url("minus-arrow.png");
}
Все вроде хорошо, но первое нужно подключить этот файл к проэкту. Это сделать можно легко в главной файле Вашей программе с помощью слдеующих строк кода
Parent root = FXMLLoader.load(getClass().getResource("Forms/MainForm.fxml"));
primaryStage.setScene(new Scene(root, 700, 600));
primaryStage.getScene().getStylesheets().add(getClass().getResource("css/style.css").toExternalForm());
Вроде бы все супер. Но возникает вопросс а куда нуджно положить сами иконки и какие они должны быть. Что касаетс итконок то мне подошел вариант с размером 9х9 пикселей. Это идеальный вариант. А где они должны быть, судя по резултатам поиска они должны быть в том же месте где у Вас и файл css. Это стартовая точка.Или где нибудь в другом месте но путь Вы будете писать исходя с него, тоесть располодения файла css.
После всего прочитаного я сделал все как написано. И что же, в результате у меня старые пропаои иконки а новые не появились. Первая мысля что не стили не подтянулись. Добавил правило на изменение цвета текста для некоторых компонентов и чудо – стиль поменялся, тоесть проблема не в файле со стилями. Реши что проблема в том что не могут подтянуться сами картинки. У меня в проэкте была папка с ресурсами “resources” решил тянуть картинки оттуда. Получаем такой файл:
.tree-cell .tree-disclosure-node .arrow {
-fx-shape: null;
-fx-background-color: null;
-fx-background-image: url("file:resources/plus-arrow.png");
}
.tree-cell:expanded .tree-disclosure-node .arrow {
-fx-shape: null;
-fx-background-color: null;
-fx-background-image: url("file:resources/minus-arrow.png");
}
И наконец то получил новые иконки. Но возникла проблема с их располождением. Икона + как то искажалась и налазила на текст елемента. После пару минут эксперементов помогло следующее изменение css
.tree-cell .tree-disclosure-node .arrow {
-fx-shape: null;
-fx-background-color: null;
-fx-background-size:cover;
-fx-padding: 5px;
-fx-background-image: url("file:resources/plus-arrow.png");
}
.tree-cell:expanded .tree-disclosure-node .arrow {
-fx-shape: null;
-fx-background-color: null;
-fx-padding: 5px;
-fx-background-image: url("file:resources/minus-arrow.png");
}
И это пример финального файла со стилямы который мне был и нужнен.
Ну вот и все. Была проблема и она решена. Надеюсь кому то это пригодится и спасет Ваше время от ненужного поиска.