viewpager在开发app过程中特别常用，做引导页，做轮播图等。很多时候需要添加指示器，引导页很多时候也为了省事会将指示器做到图片上面，轮播图则会引用第三方的指示器。于是就想自己添加一个指示器。
下面是效果图：
模拟器上显示效果可能不是很好。
布局代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.kevin.tech.myviewpager.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<LinearLayout
android:id="@+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:orientation="horizontal" />
</RelativeLayout>
</RelativeLayout>
|
指示器的动态添加：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
private void initIndicator() {
mImageView = new ImageView[mImageArr.length];
for (int i = 0; i < mImageArr.length; i++) {
View view = LayoutInflater.from(this).inflate(R.layout.indicator_image, null);
view.findViewById(R.id.indicator_iamge).setBackgroundResource(R.drawable.shape_origin_point_pink);
mImageView[i] = new ImageView(this);
if (i == 0) {
mImageView[i].setBackgroundResource(R.drawable.shape_origin_point_pink);
} else {
mImageView[i].setBackgroundResource(R.drawable.shape_origin_point_white);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(20, 0, 0, 0);
mImageView[i].setLayoutParams(layoutParams);
}
mIndicator.addView(mImageView[i]);
}
}
|
滑动时候指示器颜色的变化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
setIndicator(position);
Log.i("kevin", position + "");
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
private void setIndicator(int position) {
position %= mImageArr.length;
for (int i = 0; i < mImageArr.length; i++) {
mImageView[i].setBackgroundResource(R.drawable.shape_origin_point_pink);
if (position != i) {
mImageView[i].setBackgroundResource(R.drawable.shape_origin_point_white);
}
}
|
设置无限轮播
这里我用最常用的那种方法,即在PagerAdapter里用如下代码实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(mContext);
position %= mImageArr.length;
if(position<0){
position = mImageArr.length+position;
}
imageView.setImageResource(mImageArr[position]);
container.addView(imageView);
return imageView;
}
|
解决第一页不能向左滑动的问题
1
2
|
mViewPager.setCurrentItem(5000*(mImageArr.length));
|
