I have a custom ListCell in which I have methods to move the position of the cell to the right or left, but I want a button to be shown similar to deleting a Conversation in Messages on iPhone.

If I add a new ImageView, which will act as the Button, then set it to the right position, and of course set the Graphic of the Cell, then it would just appear on the right side visible even without sliding it.

How would I add the ImageView underneath the Cell and when I slide and adjust the position of the Cell, reveal the Button?

Maybe... use a panel with the cell contents and the button, then animate it to slide left or right to reveal or hide the button?

Like a stackpane?

Here's my current code. How could I manipulate it to accomplish that?

//Package Code

//Other Project Imports
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.image.ImageView;
import javafx.scene.input.TouchEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

/**
 * ProfileCell.class
 *
 * Created by GeoDoX on 2015-05-23.
 */
public class ProfileCell extends ListCell<Profile>
{
    private ListSceneController parent;
    private ListView<Profile> parentListView;
    private Profile profile;

    private StackPane stackPane;
    private StackPane imagePane;
    private Text displayText;

    private final SwipeLeftEvent swipeLeftEvent = new SwipeLeftEvent(this);
    private final SwipeRightEvent swipeRightEvent = new SwipeRightEvent(this);
    private final LockSwipeEvent lockSwipeEvent = new LockSwipeEvent();

    public ProfileCell(ListSceneController parent)
    {
        this.parent = parent;
        this.parentListView = parent.getProfileList();
    }

    @Override
    protected void updateItem(Profile profile, boolean empty)
    {
        super.updateItem(profile, empty);

        this.profile = profile;

        if(profile != null)
        {
            stackPane = new StackPane();
            stackPane.setId("profilePane");

            imagePane = new StackPane();
            imagePane.setMaxWidth(48);
            imagePane.setMaxHeight(48);
            imagePane.setId("imagePane");

            if(profile.getProfileType() == Profile.FACEBOOK)
            {
                ImageView cellIcon = new ImageView(ImageLoader.getImageURLAsString("cellIcon.png"));
                facebookIcon.setFitWidth(48);
                facebookIcon.setFitHeight(48);
                facebookIcon.setSmooth(true);

                imagePane.getChildren().add(facebookIcon);
            }
            else if(profile.getProfileType() == Profile.TWITTER)
            {
                ImageView cellIcon = new ImageView(ImageLoader.getImageURLAsString("cellIcon.png"));
                twitterIcon.setFitWidth(64);
                twitterIcon.setFitHeight(64);
                twitterIcon.setSmooth(true);

                imagePane.getChildren().add(twitterIcon);
            }

            displayText = new Text(profile.getProfileName());
            displayText.setFont(Font.font("calibri", 24));

            setSwipeEvents();

            imagePane.setOnTouchReleased(new EventHandler<TouchEvent>()
            {
                @Override
                public void handle(TouchEvent event)
                {
                    //TODO: Edit Profile
                }
            });

            StackPane.setAlignment(imagePane, Pos.CENTER_RIGHT);
            StackPane.setMargin(imagePane, new Insets(0, 20, 0, 0));

            StackPane.setAlignment(displayText, Pos.CENTER_LEFT);
            StackPane.setMargin(displayText, new Insets(0, 0, 0, 10));

            stackPane.getChildren().addAll(imagePane, displayText);
            setGraphic(stackPane);

            setOnTouchPressed(new EventHandler<TouchEvent>()
            {
                @Override
                public void handle(TouchEvent event)
                {
                    setSwipeEvents();

                    if (swipeLeftEvent.hasMoved())
                    {
                        swipeLeftEvent.resetMoved();
                        setOnSwipeRight(lockSwipeEvent);
                    } else if (swipeRightEvent.hasMoved())
                    {
                        swipeRightEvent.resetMoved();
                        setOnSwipeLeft(lockSwipeEvent);
                    }
                }
            });
        }
    }

    private void setSwipeEvents()
    {
        setOnSwipeLeft(swipeLeftEvent);
        setOnSwipeRight(swipeRightEvent);
    }

    protected void deleteProfile()
    {
        profile.getProfileFile().delete();
        parentListView.getItems().remove(parentListView.getItems().indexOf(profile));
        parent.loadProfiles();
    }

    protected Profile getProfile()
    {
        return profile;
    }

}
This article has been dead for over six months. Start a new discussion instead.