用于滑动图像的 Android 页面指示器 [英] Android Page Indicator for Sliding Image
本文介绍了用于滑动图像的 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>
tabPaddingStart 和 tabPaddingEnd 将定义点之间的分隔.
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 页面指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
