Android Page Indicator for Sliding Image

问题:

I'm working on a project. I want to show sliding image with page indicator. both slideshow and page indicator appear in my app and when I scroll the image, images successfully change and work fine. but my page indicator doesn't change. it makes me confused when I run the code in eclipse it works fine but in android studio doesn't. here is my PageIndicator:

public class PageIndicator extends ImageView{  private Paint            fillPaint; private Paint            strokePaint; private int              count; private int              indicatorWidth; private static final int CIRCLE_RADIUS       = 8; private static final int CIRCLE_SPACE        = 10; private static final int CIRCLE_STROKE_COLOR = Color.GRAY; private static final int CIRCLE_FILL_COLOR   = Color.LTGRAY; private int              screenWidth; private float            offsetX; private int              currentPageIndex; private float            percent;   public PageIndicator(Context context) {     super(context);     initialize(); }   public PageIndicator(Context context, AttributeSet attrs) {     super(context, attrs);     initialize(); }   public PageIndicator(Context context, AttributeSet attrs, int defStyle) {     super(context, attrs, defStyle);     initialize(); }   private void initialize() {     fillPaint = new Paint();     fillPaint.setStyle(Style.FILL);     fillPaint.setColor(CIRCLE_FILL_COLOR);     fillPaint.setAntiAlias(true);      strokePaint = new Paint();     strokePaint.setStyle(Style.STROKE);     strokePaint.setColor(CIRCLE_STROKE_COLOR);     strokePaint.setAntiAlias(true);       screenWidth = G.appContext.getResources().getDisplayMetrics().widthPixels; }   public void setIndicatorsCount(int value) {     count = value;     computeIndicatorWidth(); }   public void setCurrentPage(int value) {     currentPageIndex = value; }   public void setPercent(float percent) {     this.percent = percent; }   @Override protected void onDraw(Canvas canvas) {     super.onDraw(canvas);     for (int i = 0; i  0) {             if (i == currentPageIndex + 1) {                 fillPaint.setAlpha((int) (percent * 255));                 canDrawFill = true;             }         }         canvas.drawCircle(offsetX + i * (CIRCLE_RADIUS + CIRCLE_SPACE), 10, radius / 2.0f, strokePaint);          if (canDrawFill) {             canvas.drawCircle(offsetX + i * (CIRCLE_RADIUS + CIRCLE_SPACE), 10, radius / 2.0f, fillPaint);         }     } }   private void computeIndicatorWidth() {     indicatorWidth = count * (CIRCLE_RADIUS + CIRCLE_SPACE);     offsetX = (screenWidth - indicatorWidth) / 2; }  } 

And My ImagePageAdapter

public class ImagePagerAdapter extends PagerAdapter {  public ArrayList imageIds; public ArrayList imageTitles;  public ImagePagerAdapter(ArrayList imageIds , ArrayList     imageTitles){      this.imageIds = imageIds;     this.imageTitles = imageTitles;   }  @Override public int getCount() {     // TODO Auto-generated method stub     return imageIds.size(); }  @Override public boolean isViewFromObject(View view, Object object) {     // TODO Auto-generated method stub     return view.equals(object); }    @Override public Object instantiateItem(ViewGroup container, final int position) {     // TODO Auto-generated method stub      View view = G.inflater.inflate(R.layout.sliding, null);     ImageView image = (ImageView) view.findViewById(R.id.image_sliding);     TextView title = (TextView) view.findViewById(R.id.title_sliding);      image.setImageResource(imageIds.get(position));     title.setText(imageTitles.get(position));         container.addView(view);      return view; }    @Override public void destroyItem(ViewGroup container, int position, Object object) {     // TODO Auto-generated method stub      container.removeView((View)object );   }   } 

And My Activity:

回答1:

Why trying to reinvent the wheel?

You can easily create a page indicator with a TabLayout. No need for a custom class or interacting with your page-indicator from the activity, just a little of xml magic will do the trick.

Just to be clear, we are converting this:

to something like this:

In your activity:

TabLayout dots = (TabLayout)findViewById(R.id.dots); dots.setupWithViewPager(viewPager, true); // 

Layout:

tabPaddingStart and tabPaddingEnd will define the separation between the dots.

dot_selector.xml:

selected_dot.xml:

default_dot.xml: exactly the same as selected_dot.xml but changing the color.

As you may guess, android:thickness is the size of the dot.

Done!

文章来源: Android Page Indicator for Sliding Image