用于滑动图像的 Android 页面指示器

Question

我正在做一个项目。我想显示带有页面指示器的滑动图像。 幻灯片和页面指示器都出现在我的应用程序中，当我滚动图像时，图像成功更改并且工作正常。但我的页面指示器没有改变。当我在 eclipse 中运行代码时，它让我感到困惑它工作正常但在 android studio 中却没有。这是我的 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 < count; i++) {
        Paint paint = strokePaint;
        float radius = CIRCLE_RADIUS;

        boolean canDrawFill = false;
        if (i == currentPageIndex) {
            fillPaint.setAlpha((int) ((1.0f - percent) * 255));
            //radius *= 2;
            canDrawFill = true;
        }

        if (percent > 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;
}

}

还有我的 ImagePageAdapter

public class ImagePagerAdapter extends PagerAdapter {

public ArrayList<Integer> imageIds;
public ArrayList<String> imageTitles;

public ImagePagerAdapter(ArrayList<Integer> imageIds , ArrayList<String>     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 );


}


}

还有我的 Activity :

public class HomeActivity extends AppCompatActivity {

ViewPager pager;
PageIndicator indicator;
ArrayList<Integer> imageIds = new ArrayList<>();
ArrayList<String> imageTitles = new ArrayList<>();

@TargetApi(12)
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.home_activity);
    pager = (ViewPager)findViewById(R.id.Pager);
    indicator = (PageIndicator)findViewById(R.id.Indicator);

    indicator.setIndicatorsCount(3);

    addImageSliding("ofogh_mehr","به افق مهر خوش آمدید");
    addImageSliding("sliding_1","تصویر 2");
    addImageSliding("sliding_2","تصویر 3");




    pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

        public void onPageSelected(int arg0) {
            // TODO Auto-generated method stub

        }

        public void onPageScrolled(int startIndex, float percent, int pixel) {
            // TODO Auto-generated method stub
            indicator.setPercent(percent);
            indicator.setCurrentPage(startIndex);
            Log.i("Scroll", percent+ " " + startIndex  );

        }

        public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub

        }
    });


    ImagePagerAdapter adapter = new ImagePagerAdapter(imageIds, imageTitles);
    pager.setAdapter(adapter);

}

@Override
protected void onResume() {
    super.onResume();
    G.currentActivity = this;
}

private  void addImageSliding(String name, String title){

    int imageID = getApplicationContext().
            getResources().
            getIdentifier(name,
                    "drawable", getApplicationContext().getPackageName());
    imageIds.add(imageID);
    imageTitles.add(title);


}
}

Answer 1

为什么要重新发明轮子？

您可以使用 TabLayout 轻松创建页面指示器。无需自定义类或与 Activity 中的页面指示器交互，只需一点 xml 魔术就可以解决问题。

明确一点，我们正在转换它:

像这样:

在您的 Activity 中:

TabLayout dots = (TabLayout)findViewById(R.id.dots);
dots.setupWithViewPager(viewPager, true); // <-- magic here!

布局:

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingBottom="@dimen/activity_horizontal_margin">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_marginBottom="5dp"/>
    <android.support.design.widget.TabLayout
        android:id="@+id/dots"
        android:layout_width="match_parent"
        android:layout_height="26dp"
        local:tabBackground="@drawable/dot_selector"
        local:tabGravity="center"
        local:tabIndicatorHeight="0dp"
        local:tabPaddingStart="7dp"
        local:tabPaddingEnd="7dp"/>
</LinearLayout>

tabPaddingStart 和 tabPaddingEnd 将定义点之间的分隔。

为简洁起见，我在这里使用了 LinearLayout，但您可以使用您需要的任何布局。这真的没关系。

dot_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/selected_dot" android:state_selected="true"/>
  <item android:drawable="@drawable/default_dot"/>
</selector>

selected_dot.xml:

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape
      android:innerRadius="0dp"
      android:shape="ring"
      android:thickness="4dp"
      android:useLevel="false">
      <solid android:color="@color/page_indicator_selected_color"/>
    </shape>
  </item>
</layer-list>

default_dot.xml:与selected_dot.xml完全相同，但颜色不同。

你可能猜到了，android:thickness 是圆点的大小。

完成!