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

时间:2016-05-15 08:00:50

标签: android android-viewpager

我正在从事一个项目。我想用页面指示器显示滑动图像。 幻灯片和页面指示器都出现在我的应用程序中,当我滚动图像时,图像成功更改并正常工作。但我的页面指示器没有变化。当我在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 );


}


}

和我的活动:

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);


}
}

1 个答案:

答案 0 :(得分:2)

为什么要重新发明轮子?

您可以使用TabLayout轻松创建页面指示符。不需要自定义类或与活动中的页面指示器交互,只需要一点xml魔法即可。

为了清楚起见,我们正在转换这个:

enter image description here

这样的事情:

enter image description here

在您的活动中:

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>

tabPaddingStarttabPaddingEnd将定义点之间的分隔。

我在这里使用了一个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是点的大小。

完成!