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

Android Page Indicator for Sliding Image(用于滑动图像的 Android 页面指示器)
本文介绍了用于滑动图像的 Android 页面指示器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在做一个项目.我想显示带有页面指示器的滑动图像.幻灯片和页面指示器都出现在我的应用程序中,当我滚动图像时,图像成功更改并且工作正常.但我的页面指示器没有改变.当我在 eclipse 中运行代码时,它让我感到困惑,它工作正常,但在 android studio 中却没有.这是我的 PageIndicator:

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

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


}
}

推荐答案

为什么要重新发明轮子?

Why trying to reinvent the wheel?

您可以使用 TabLayout 轻松创建页面指示器.无需自定义类或与活动中的页面指示器进行交互,只需一点 xml 魔术就可以了.

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:

到这样的事情:

在你的活动中:

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 将定义点之间的分隔.

tabPaddingStart and tabPaddingEnd will define the separation between the dots.

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

I´ve used a LinearLayout here for brevety but you could use whatever layout you need. It really doesn´t matter.

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一模一样,只是改变了颜色.

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

您可能猜到了,android:thickness 是点的大小.

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

完成!

这篇关于用于滑动图像的 Android 页面指示器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

How to target newer versions in .gitlab-ci.yml using auto devops (java 11 instead of 8 and Android 31 instead of 29)(如何在.gitlab-ci.yml中使用自动开发工具(Java 11而不是8,Android 31而不是29)瞄准较新的版本)
Android + coreLibraryDesugaring: which Java 11 APIs can I expect to work?(Android+core LibraryDesugering:我可以期待哪些Java 11API能够工作?)
How to render something in an if statement React Native(如何在If语句中呈现某些内容Reaction Native)
How can I sync two flatList scroll position in react native(如何在本机Reaction中同步两个平面列表滚动位置)
Using Firebase Firestore in offline only mode(在仅脱机模式下使用Firebase FiRestore)
Crash on Google Play Pre-Launch Report: java.lang.NoSuchMethodError(Google Play发布前崩溃报告:java.lang.NoSuchMethodError)