添加擴展動畫的TreeView

Question

我的TreeView的這個例子：

import java.util.Arrays; 
import java.util.List; 
import javafx.application.Application; 
import javafx.beans.property.SimpleStringProperty; 
import javafx.event.EventHandler; 
import javafx.scene.Scene; 
import javafx.scene.control.TextField; 
import javafx.scene.control.TreeCell; 
import javafx.scene.control.TreeItem; 
import javafx.scene.control.TreeView; 
import javafx.scene.input.KeyCode; 
import javafx.scene.input.KeyEvent; 
import javafx.scene.layout.VBox; 
import javafx.scene.paint.Color; 
import javafx.stage.Stage; 
import javafx.util.Callback; 

public class MainApp extends Application 
{ 

    //private final Node rootIcon = new ImageView(new Image(getClass().getResourceAsStream("picture.png"))); 
    //private final Image depIcon = new Image(getClass().getResourceAsStream("picture.png")); 
    List<Employee> employees = Arrays.<Employee>asList(
     new Employee("Ethan Williams", "Sales Department"), 
     new Employee("Emma Jones", "Sales Department"), 
     new Employee("Michael Brown", "Sales Department"), 
     new Employee("Anna Black", "Sales Department"), 
     new Employee("Rodger York", "Sales Department"), 
     new Employee("Susan Collins", "Sales Department"), 
     new Employee("Mike Graham", "IT Support"), 
     new Employee("Judy Mayer", "IT Support"), 
     new Employee("Gregory Smith", "IT Support"), 
     new Employee("Jacob Smith", "Accounts Department"), 
     new Employee("Isabella Johnson", "Accounts Department")); 
    TreeItem<String> rootNode = new TreeItem<>("MyCompany Human Resources");//, rootIcon); // Set picture 

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

    @Override 
    public void start(Stage stage) 
    { 
     rootNode.setExpanded(true); 
     for (Employee employee : employees) 
     { 
      TreeItem<String> empLeaf = new TreeItem<>(employee.getName()); 
      boolean found = false; 
      for (TreeItem<String> depNode : rootNode.getChildren()) 
      { 
       if (depNode.getValue().contentEquals(employee.getDepartment())) 
       { 
        depNode.getChildren().add(empLeaf); 
        found = true; 
        break; 
       } 
      } 
      if (!found) 
      { 
       TreeItem<String> depNode = new TreeItem<>(
        employee.getDepartment()//,new ImageView(depIcon) // Set picture 
       ); 
       rootNode.getChildren().add(depNode); 
       depNode.getChildren().add(empLeaf); 
      } 
     } 

     stage.setTitle("Tree View Sample"); 
     VBox box = new VBox(); 
     final Scene scene = new Scene(box, 400, 300); 
     scene.setFill(Color.LIGHTGRAY); 

     TreeView<String> treeView = new TreeView<>(rootNode); 
     //treeView.setEditable(true); 
     treeView.setCellFactory(new Callback<TreeView<String>, TreeCell<String>>() 
     { 
      @Override 
      public TreeCell<String> call(TreeView<String> p) 
      { 
       return new TextFieldTreeCellImpl(); 
      } 
     }); 

     box.getChildren().add(treeView); 
     stage.setScene(scene); 
     stage.show(); 
    } 

    private final class TextFieldTreeCellImpl extends TreeCell<String> 
    { 

     private TextField textField; 

     public TextFieldTreeCellImpl() 
     { 
     } 

     @Override 
     public void startEdit() 
     { 
      super.startEdit(); 

      if (textField == null) 
      { 
       createTextField(); 
      } 
      setText(null); 
      setGraphic(textField); 
      textField.selectAll(); 
     } 

     @Override 
     public void cancelEdit() 
     { 
      super.cancelEdit(); 
      setText((String) getItem()); 
      setGraphic(getTreeItem().getGraphic()); 
     } 

     @Override 
     public void updateItem(String item, boolean empty) 
     { 
      super.updateItem(item, empty); 

      if (empty) 
      { 
       setText(null); 
       setGraphic(null); 
      } 
      else 
      { 
       if (isEditing()) 
       { 
        if (textField != null) 
        { 
         textField.setText(getString()); 
        } 
        setText(null); 
        setGraphic(textField); 
       } 
       else 
       { 
        setText(getString()); 
        setGraphic(getTreeItem().getGraphic()); 
       } 
      } 
     } 

     private void createTextField() 
     { 
      textField = new TextField(getString()); 
      textField.setOnKeyReleased(new EventHandler<KeyEvent>() 
      { 

       @Override 
       public void handle(KeyEvent t) 
       { 
        if (t.getCode() == KeyCode.ENTER) 
        { 
         commitEdit(textField.getText()); 
        } 
        else if (t.getCode() == KeyCode.ESCAPE) 
        { 
         cancelEdit(); 
        } 
       } 
      }); 
     } 

     private String getString() 
     { 
      return getItem() == null ? "" : getItem().toString(); 
     } 
    } 

    public static class Employee 
    { 

     private final SimpleStringProperty name; 
     private final SimpleStringProperty department; 

     private Employee(String name, String department) 
     { 
      this.name = new SimpleStringProperty(name); 
      this.department = new SimpleStringProperty(department); 
     } 

     public String getName() 
     { 
      return name.get(); 
     } 

     public void setName(String fName) 
     { 
      name.set(fName); 
     } 

     public String getDepartment() 
     { 
      return department.get(); 
     } 

     public void setDepartment(String fName) 
     { 
      department.set(fName); 
     } 
    } 
} 

我想，當我展開樹添加動畫。如何做到這一點？

Answer 1

看看這個我發現在網上搜索。我在谷歌搜索「javafx TreeView動畫」後發現它here。

好了，花幾分鐘的時間檢查代碼後，我推斷，該代碼的重要組成部分，是這樣的：

rootItem.expandedProperty().addListener(new ChangeListener<Boolean>() { 
    public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) { 
     new Timeline(
      new KeyFrame(Duration.seconds(0), new KeyValue(tree.opacityProperty(), 0)), 
      new KeyFrame(Duration.seconds(1), new KeyValue(tree.opacityProperty(), 1.0)) 
     ).play(); 
    } 
}); 

該代碼添加觸發執行所需的動畫每個代碼監聽器時間rootItem.expandedProperty()更改，即用戶展開或摺疊樹。

每當有東西導致expandedProperty改變時，它會構造一個新的Timeline對象，我假設它代表特定動畫中的實際步驟。當前的代碼正在修改樹的不透明度，導致rootItem的子樹在1秒的時間內「淡入」。

要實現關閉樹的單獨動畫，您可以在偵聽器中使用方法參數changed來區分這兩種情況。

爲了在每個子樹上都出現這樣的動畫，需要將這樣一個偵聽器添加到樹中每個有子節點的節點上。枚舉樹中的所有元素是您學習數據結構時學到的一項非常基本的操作，因此我不需要深入研究如何完成此任務。但是，如果淡入動畫對於您的應用程序來說不夠好，那麼我會建議使用嵌套式手風琴，如this question does。從您提供的樣品中，手風琴將是更好的方式來顯示員工名單。