jfeinstein10 / slidingmenu，使用CirclePageIndicator的viewpager无法正常工作

Question

I have got a strange situation. I am using Slidingmenu,viewpager with CirclePageIndicator. Currently view pager and sliding menu is working but CirclePageIndicator is not indicating the exact page. Any Idea why? The below is the activity code with screenshot. My Code-

public class MainActivity extends FragmentActivity {

// Declare Variables
ViewPager viewPager;
PagerAdapter adapter;   
CirclePageIndicator mIndicator; 
private int mWidthScreen;
private int mHeightScreen;  
private Bundle bundle;
private List<Fragment> frgScreens;
private int selectedtheme;
private Handler mHandler = new Handler();
//public  mlayoutForeground;

//Menu buttons
private ImageView mBtnMenu;
private SlidingMenu menu;



@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Get the view from viewpager_main.xml
    setContentView(R.layout.viewpager_main);

    getScreenHeightWidhth();    
    buildargument();

    //setting the required theme
    this.selectedtheme=1;       
    initialisePaging(selectedtheme); //Page creating function

    generateMenu();



}

private void initialisePaging(int theme) {  

    // Locate the ViewPager in viewpager_main.xml
    viewPager = (ViewPager) findViewById(R.id.pager);

    //#FIXME try to implement like theme.basic
    //clearing old entries
    frgScreens=new Vector<Fragment>();

    if(theme==1)
    {
        frgScreens=this.basicThemes();
    }

    if(theme==2)
    {   

        frgScreens=this.forecastThemes();
    }


  //Bind result to ViewPagerAdapter 
    adapter =new ViewPagerAdapter(this.getSupportFragmentManager(), frgScreens);

    // Binds the Adapter to the ViewPager
    this.viewPager.setAdapter(adapter);     
    addAndConfigureCirclePagerAdapter();



}


/*
 * forecast theme fragment
 */
private List<Fragment> forecastThemes()
{
    Fragment frgForecast1=Fragment.instantiate(this,ForecastScreen1.class.getName());

    //#FIXME forecast2 problematic
    //Fragment frgForecast2=Fragment.instantiate(this,ForecastScreen2.class.getName());

    frgForecast1.setArguments(bundle);
    //frgForecast2.setArguments(bundle);


    List<Fragment> frgForecastScreens = new Vector<Fragment>();

    frgForecastScreens.add(frgForecast1);
    //frgForecastScreens.add(frgForecast2);

    return frgForecastScreens;

}
/*
 * Basic theme fragments
 */
private List<Fragment> basicThemes()
{
    //declaring fragments Group Basic
    Fragment frgBasic1=Fragment.instantiate(this,Basic1.class.getName());
    Fragment frgBasic2=Fragment.instantiate(this,Basic2.class.getName());
    Fragment frgBasic3=Fragment.instantiate(this,Basic3.class.getName());
    Fragment frgBasic4=Fragment.instantiate(this,Basic4.class.getName());

    //Passing arguments
    frgBasic1.setArguments(bundle);
    frgBasic2.setArguments(bundle);
    frgBasic3.setArguments(bundle);
    frgBasic4.setArguments(bundle);


    //Loading screens into Fragment list
    List<Fragment> frgBasicScreens = new Vector<Fragment>();

    frgBasicScreens.add(frgBasic1);
    frgBasicScreens.add(frgBasic2);
    frgBasicScreens.add(frgBasic3);
    frgBasicScreens.add(frgBasic4);


    return frgBasicScreens;

}


 /*
  * Applying circlepageradapter color
  */
 private void addAndConfigureCirclePagerAdapter()
 {

     this.viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                            super.onPageSelected(position);
                            if (position == 0) {
                                menu.removeIgnoredView(viewPager);
                            } else {
                                menu.addIgnoredView(viewPager);
                            }
                        }
                    });

    mIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
    this.mIndicator.setBackgroundColor(Color.TRANSPARENT);
    this.mIndicator.setPadding(5, 5, 5, 5);
    this.mIndicator.setRadius(12);
    this.mIndicator.setFillColor(Color.argb(255, 175, 220, 243));
    final float density = getResources().getDisplayMetrics().density;
    this.mIndicator.setRadius(6 * density);
    this.mIndicator.setViewPager(viewPager); 


 }

/*
 * Function to get height and width
 * 
 */
private void getScreenHeightWidhth()
{
     DisplayMetrics localDisplayMetrics = new DisplayMetrics();
     getWindowManager().getDefaultDisplay().getMetrics(localDisplayMetrics);            
     this.mWidthScreen = localDisplayMetrics.widthPixels;
     this.mHeightScreen = localDisplayMetrics.heightPixels; 
     mHandler.post(new DisplayToast(this, "Width Screen:"+ mWidthScreen + ". Height Screen: "+ mHeightScreen+ "."));
}

/*
 * Bundle that bind extra arguments with every fragments
 * mWidthScreen : Putting 'mWidthScreen'as a pasing argument
 */
private void buildargument()
{
    this.bundle = new Bundle();
    bundle.putInt("mWidthScreen", this.mWidthScreen);
}

public void generateMenu()
{
    //enable button
    //buttonsOn();

    mBtnMenu = (ImageView) findViewById(R.id.btnMenu);

    menu = new SlidingMenu(this);
    menu.setMode(SlidingMenu.LEFT);
    menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
    menu.setShadowWidth(5);
    menu.setFadeDegree(0.0f);
    menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
    menu.setBehindWidth(500);
    menu.setMenu(R.layout.menu_frame);

    mBtnMenu.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View arg0) {
         // menu.showMenu();

          menu.toggle();
         mBtnMenu.setEnabled(true);
        }
    });





}

public void buttonsOff()
  {
    this.mBtnMenu.setEnabled(false);

  }

  public void buttonsOn()
  {

    this.mBtnMenu.setEnabled(true);
  }


 @Override
    protected void onResume() {
        super.onResume();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }

}

When I run the code I found the circlepageindicator indicating first page if I am swiping to different page also. Here is the snap short.

Normally It should be like this.

Any code help would be appreciated. Dear down voters kindly post your comments before vote please . Please allow me to rectify. Thanks for your co-operation. Regards Biswajit

Answer 1

You missed a key point in the documentation (my emphasis):

(Optional) If you use an OnPageChangeListener with your view pager you should set it in the indicator rather than on the pager directly.

I'll be a bit more specific. When you call ...

this.mIndicator.setViewPager(viewPager); 

... the indicator sets itself as OnPageChangeListener to the given ViewPager , effectively overriding any already set listener. That means that this listener you set up just before the indicator is useless:

 this.viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
        @Override
        public void onPageSelected(int position) {
                        super.onPageSelected(position);
                        if (position == 0) {
                            menu.removeIgnoredView(viewPager);
                        } else {
                            menu.addIgnoredView(viewPager);
                        }
                    }
                });

As the documentation states, you should set the listener to the indicator instead (it will basically proxy the events). So change your code to:

mIndicator.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { ... });

If you use a recent version of ViewPager , you'll see that its setOnPageChangeListener() method is actually deprecated in favour of addOnPageChangeListener() . The latter obviously supports attaching more than a single listener to the pager.

The last time I checked the ViewPager source code, the set and add methods worked independently from each other. As such, you may also be able to get away with:

this.viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { ... });

That wouldn't be my first choice though.