I am trying to inflate several ViewPagers in a ScrollView , where each ViewPager uses a FragmentStatePagerAdapter.
ViewPager consists of fragments with three ImageViews for each page.
Im using UniversalImageLoader to asynchronously load images, but I can't get the lazy load.
The problem is when my application is bloated, say 10 ViewPagers with 3 ImageViews for each TripplePosterFragment1 , and another 10 ViewPagers with 3 ImageViews for TripplePosterFragment2 , since mPager.setOffscreenPageLimit(1) fires.
A total of 60 asynchronous request requests are available during my progressLayout .
My MainFragment with the following method:
private void renderSubCarousels(ArrayList<Carousel> carousels) { LayoutInflater mInflater = (LayoutInflater)getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE); int i = 1; LinearLayout subCarouselLayout = (LinearLayout) mScrollView.findViewById(R.id.index_subcategory_carousel_container); for (final Carousel carousel : carousels) { RelativeLayout carouselWrapper = (RelativeLayout) mInflater.inflate(R.layout.main_pager_layout, null); LinearLayout mContainer = (LinearLayout) carouselWrapper.findViewById(R.id.main_pager_container); mContainer.setId(Constants.BASEID_LINEARLAYOUT + i); ViewPager mPager = (ViewPager) mContainer.findViewById(R.id.main_pager); mPager.setId(Constants.BASEID_VIEWPAGER + i); mPager.setAdapter(new PagerPosterAdapter(getFragmentManager(),Constants.TRIPLE_POSTERS, carousel)); subCarouselLayout.addView(carouselWrapper); i++; } progressLayout.setVisibility(View.GONE); }
My FragmentStatePagerAdapter :
public class PagerPosterAdapter extends FragmentStatePagerAdapter { private int mPageSize; private Carousel mCarousel; public PagerPosterAdapter(FragmentManager fm, int pageSize, Carousel carousel) { super(fm); this.mPageSize = pageSize; this.mCarousel = carousel; } @Override public int getCount() { int maxPageIndex = (int) Math.ceil((float) mCarousel.getAssets().size() / mPageSize); return maxPageIndex; } @Override public Fragment getItem(int position) { ArrayList<Asset> assets = mCarousel.getAssets(); int from = position*mPageSize; int to = (position+1)*(mPageSize); if(to > assets.size()-1) to = assets.size(); return (TripplePosterFragment.newInstance(assets.subList(from, to))); } }
TripplePosterFragment where ImageView is being rendered:
private void initViews() { ImageView mFirstImageView = (ImageView) mLinearLayout.findViewById(R.id.first_pager_poster); ImageView mSecondImageView = (ImageView)mLinearLayout.findViewById(R.id.second_pager_poster); ImageView mThirdImageView = (ImageView)mLinearLayout.findViewById(R.id.third_pager_poster); for(int i = 0;i < assets.size(); i++){ ImageView image = null; switch(i){ case 0: image = (ImageView) mLinearLayout.findViewById(R.id.first_pager_poster); break; case 1: image = (ImageView) mLinearLayout.findViewById(R.id.second_pager_poster); break; case 2: image = (ImageView) mLinearLayout.findViewById(R.id.third_pager_poster); break; default: continue; }
I need to check if images are visible and load them when they are. But System.out.println("Im NOT within"); Spamming Log . I am sure there is a way to make it look like this, but I need help.
I tried to quickly use most of the meat inside the ListView, but its not optimal, at least after some reading, the ViewPager inside the ListView
UPDATE
The same underlying problem as before, but using the new HorizontalListViews instad pager approach.
ListViews seems to be the way to go. Using the ArrayAdapter to populate a regular vertical ListView with multiple HListViews lazy image loads vertically for each new row and horizontally for each image inside, as intended.
Problem: Horizontal positions are lost. horizontalAdapter inherited from the redesigned view to the next item in the list. This positions the new list item where the recycled list item was.
public View getView(int position, View convertView, ViewGroup parent) { final ViewHolder holder; View view = convertView; if (view == null) { holder = new ViewHolder(); view = mInflater.inflate(R.layout.carousel_frame_layout, null); holder.carouselList = (HListView) view.findViewById(R.id.hListView); view.setTag(holder); } else { holder = (ViewHolder) view.getTag(); } Carousel mCarousel = mData.get(position); // Problem: Re-uses adapters from convertview if (holder.carouselList.getAdapter() == null) { SubCategoryCarouselAdapter horizontalAdapter = new SubCategoryCarouselAdapter(mContext, mCarousel.getAssets()); holder.carouselList.setAdapter(horizontalAdapter); } else { ((SubCategoryCarouselAdapter) holder.carouselList.getAdapter()).update(mCarousel.getAssets()); } return view; }
The solution might be to keep the internal horizontalAdapter at the designated position of the list position, but I don't know how to do this when the HListView itself is HListView processed.
UPDATE 3
Found a working solution for HListViews . But I still need to check if this works for ViewPagers .
Its lazy loading images both horizontally and vertically when using addHeaderView for the parent ListView for each internal HListView . I used HorizontalVariableListView along with UniversalImageLoader for carousels.
LayoutInflater mInflater = (LayoutInflater) getActivity().getSystemService (Context.LAYOUT_INFLATER_SERVICE); for (final Carousel carousel : carousels) { View carouselWrapper = mInflater.inflate(R.layout.carousel_sub_category_layout, null); listView.addHeaderView(carouselWrapper); listView.setAdapter(null); HListView horizontalList = (HListView) carouselWrapper.findViewById(R.id.hListView); SubCategoryCarouselAdapter mAdapter = new SubCategoryCarouselAdapter(getActivity(), carousel.getAssets()); horizontalList.setAdapter(mAdapter); }