JavaFX изменить иконки для TreeView

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");
}

И это пример финального файла со стилямы который мне был и нужнен.

Ну вот и все. Была проблема и она решена. Надеюсь кому то это пригодится и спасет Ваше время от ненужного поиска.

Please follow and like us:

Leave a Comment Cancel reply