Issue with onClickListener and ArrayAdapter in ListView (Event affecting multiple views)

Question

I'm using an ArrayAdapter with my ListView:

• What I'm trying to achive: I'm displaying a (endless scrolling) listview with lot's of images and captions. Captions are only allowed to have one line. A trimmed caption (that is actually longer than one line) has an onClickListener that removes the one-line-limitation to display the whole caption (setSingleLine( false ), setEllipsize( null )).

• The problem I'm facing: When I click on one of the captions chances are that some other captions are affected aswell. So when I click a caption and keep scrolling down I'll mostly likely discover captions that are already expanded, but that haven't been clicked. I assume that it's caused by the adapter's view-reusage, but I'm not looking through that whole concept yet, since I've just started programming in the android enviroment..

• The Code:

XML-Layout

<LinearLayout ... >

    ...

    <com.app.views.CaptionView
        android:id="@+id/caption" ... />

    ...

</LinearLayout>

ArrayAdapter

public class ImageArrayAdapter extends ArrayAdapter<Image>
{
    private static class ViewHolder
    {
        public TextView     caption;    
        ...
    }

    private final List<Image>   images;

    private LayoutInflater      inflater;

    ...

    @Override
    public View getView( int position, View contentView, ViewGroup parent )
    {
        ViewHolder holder;

        if( contentView == null )
        {
            holder = new ViewHolder();
            contentView = inflater.inflate( R.layout.image, null );

            holder.caption = (TextView) contentView.findViewById( R.id.caption );
            ...

            Typeface font = Typeface.createFromAsset( getContext().getAssets(), "fonts/EXO-ITALIC.TTF" );
            holder.caption.setTypeface( font );

            contentView.setTag( holder );
        }
        else
        {
            holder = (ViewHolder) contentView.getTag();
        }

        Image image = images.get( position );

        holder.caption.setText( image.getTitle() );
        ...

        return contentView;
    }
}

CaptionView

public class CaptionView extends TextView
{
    private boolean modified    = false;

    ...

    @Override
    protected void onDraw( Canvas canvas )
    {
        super.onDraw( canvas );

        if( !modified && getLineCount() > 1 )
        {
            modified = true;
            setClickable( true );
            setEllipsize( TruncateAt.END );
            setSingleLine( true );
            setOnClickListener( onClickListener );
        }
    }

    private OnClickListener onClickListener = new OnClickListener()
    {
        public void onClick( View view )
        {
            TextView caption = (TextView) view;

            if( caption.getLineCount() == 1 )
            {
                caption.setSingleLine( false );
                caption.setEllipsize( null );
            }
            else
            {
                caption.setSingleLine( true );
                caption.setEllipsize( TruncateAt.END );
            }
        }
    };
}

Answer 1

It probably is a result of the inflating views so the easiest solution would be to set

setSingleLine( true ); setEllipsize( where );

in your getView() method.

However this will result in a view becoming 'unexpanded' when it scrolls off the screen. To deal with that I recommend a separate data structure of some sort that keeps a boolean telling whether or not the view has been expanded. Maybe a hashMap or an array depending on what information you have about the view in getView().