Background
I'm using the PinterestLikeAdapterView library to show some images from the internet, which is like a gridView but with different height for each cell.
The problem
Since I use this library to show images from the internet, it's crucial that when calling notifyDatasetChanged won't cause a mess on the views.
For some reason, calling this function would call the getView() method with different positions for the views. for example, even though i didn't scroll at all, and call notifyDatasetChanged (or addAll in case it's an ArrayAdapter), for position 0 it will take what was the view of position 8, for position 1 it will take the view of position 7 , and so on...
This makes the whole grid to refresh its images, and so it ruins the UX.
Usually, in both gridView and listView, the way to overcome refreshing is to put the position that was used for the view inside the viewHolder, and if they are equal, it means that they still match.
for example:
... getView(...)
{
//<=inflate a new view if needed
//avoid refreshing view in case it's still the same position:
if(position==holder.position)
return rootView;
holder.position=position;
//<=update the view according to its data
...
}
However, here they re-use other views in a different order so this trick won't work here.
Because of this issue, not only i get refreshes of almost all of the visible views, but since i use DiskCacheLru library, it crashes since it tries to put 2 identical inputSteam data into the same key using 2 threads.
The question
What can I do?
Is this a known bug in the library?
Maybe I'm using a bad way to overcome refreshes?
for now, i use memory cache to at least get items that were cached before, but that's more like a "cure" than a "vaccine"...
Short answer:
Use an image loading library like Picasso that caches most recently used images in memory, so they don't need to be reloaded from the network.
Long answer:
AdapterView
does something called View
recycling, where Views
which are no longer needed to display a position are re-used to display another. (For example, as you scroll down, Views
that disappear off the top of the screen are reused for new positions at the bottom of the screen.) Because of this, it's normal for getView()
to be passed the same View
for more than one position.
This is done for performance reasons: Inflating new Views
is hard and takes time, so AdapterView
tries to do it as infrequently as possible.
When using a holder, you store references to ImageView
and TextView
children inside the item's View
, so you don't have to look them up with findViewById()
each time - you don't usually store anything specific to a particular position, because the View
and its holder will often be used for different positions.
Now, when you call notifyDataSetChanged()
, AdapterView
assumes that the data set has completely changed. The image that was associated with position 8 may no longer be present, or it may be associated with position 12 now. Consequently, all the existing Views
are scrapped - but because AdapterView
would still like to avoid inflating new Views
, they're re-used to display the new data, with no regard for what position they were displaying previously.
This explains why getView()
is being passed the same View
for different positions, and why visible positions are being refreshed when you call notifyDataSetChanged()
. But how to avoid having your images refresh, ruining the user experience?
Use an image loading library like Picasso that caches most recently used images in memory, so they don't need to be reloaded from the network. The refresh will still happen, but it'll be instantaneous.
View getView(int position, View view, ViewGroup parent)
will be always called ascendingly, after notifyDataSetChanged()
.
I guess that, the order of finishing download task will cause this problem.
As you mentioned in your question, keeping the position is a good way to avoid this problem.
Here is another way to solve it, also re-use the imageviews.
Keep a weak reference of each ImageView
in download task.
Then wrap the download task in a dummy ColorDrawable
.
When getView
is called, set the dummy ColorDrawable
to ImageView
, and start the download. When download is complete, set the downloaded image back to the referenced ImageView
in OnPostExecute()
.
Explanation
http://android-developers.blogspot.jp/2010/07/multithreading-for-performance.html
Source code
https://code.google.com/p/android-imagedownloader/source/checkout
There is a very good example on PinterestLikeListView in GitHub
Here is the library StaggeredGridView
A modified version of Android's experimental StaggeredGridView. Includes own OnItemClickListener and OnItemLongClickListener, selector, and fixed position restore.
You can get library project here library
and you can get Demo project Here
This is very good open source project, so you can use instead of PinterestLikeAdapterView
Hope this library is going to help you out.
seems that the authors of this library have fixed it, after some time i've reported about it:
https://github.com/huewu/PinterestLikeAdapterView/issues/8