リストビュー内の左右の画像とテキストJavaFX

Question

ListView<ChatModel> listView; 
ObservableList<ChatModel> items = FXCollections.observableArrayList(); 

private final Image IMAGE_MEN = new Image("men.png"); 
private final Image IMAGE_WOMEN = new Image("women.png"); 

private Image[] listOfImages = {IMAGE_MEN, IMAGE_WOMEN}; 

listView = new ListView<ChatModel>(); 
     listView.setPrefHeight(550); 
     listView.setItems(items); 

     listView.setCellFactory(param -> new ListCell<ChatModel>() { 
      private ImageView imageView = new ImageView(); 

      @Override 
      public void updateItem(ChatModel name, boolean empty) { 
       super.updateItem(name, empty); 
       if (empty) { 
        setText(null); 
        setGraphic(null); 
       } else { 
        if (name.getClientName().equals("testing")) 
         imageView.setImage(listOfImages[0]); 
        else if (name.getClientName().equals("testing1")) 
         imageView.setImage(listOfImages[1]); 
        setText(name.getClientMessage()); 
        setGraphic(imageView); 
       } 
      } 
     }); 

私は上記のコードを使用して画像とテキストを使用してリストビューに項目を追加していますが、リストビューのデザインは左にありますすべての行で私は、交互の行に異なるデザインが必要であるという要件を持っています。次の行には、右側の要素が必要です。ここで

は私が私が左右で交互に行をしたい今

まで達成してきたようなデザインです。

どのように私はこれを達成することができます教えてください。

Answer 1

あなたはCSSでそれを達成することができます：

.list-view .list-cell:odd { 
    -fx-content-display:left; 
} 

.list-view .list-cell:even { 
    -fx-content-display:right; 
} 

セレクタはListCellの疑似状態に基づいて-fx-content-displayプロパティを設定します。

• odd：テキスト左 - グラフィック右

• even：grahic left-text right