利用viewPager实现的自动滑动的广告栏

首先上一下效果图

我们将实现图片与文字的手动切换与自动切换，以及指示圆点的自动切换。

这里主要的工作在ViewPagerAdapter.

步骤：

1. 在activity的布局文件中使用viewpager,

2. viewPager的子布局

3. 用布局方式画圆点。

4. 初始化adapter， 在onPagerChangeListener中控制小点的切换。

5. 定时器控制自动滑动。

activity的布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.jiang.wei.mypractice.BannersActivity">

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="200dp"></android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/llPots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="180dp"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>

viewPager的子布局， 一个ImageView,和一个TextView用户放图片与标题

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical">

<ImageView
android:id="@+id/ivPicture"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="150dp"
android:orientation="vertical">

<TextView
android:id="@+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="xxx" />
</LinearLayout>
</FrameLayout>

用布局方式画圆点，并做成选择器的形式，方便切换。

<?xml version="1.0" encoding="utf-8"?>
<shape
android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 填充颜色 -->
<solid android:color="@android:color/darker_gray" ></solid>
<size android:width="3dp" android:height="3dp"></size>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/select_spot" android:state_selected="true"></item>
<item android:drawable="@drawable/unselect_spot"></item>
</selector>
selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/select_spot" android:state_selected="true"></item>
<item android:drawable="@drawable/unselect_spot"></item>
</selector>

下面是主代码。

这里有两个计算的地方

int initPosition = (Integer.MAX_VALUE / 2) / size * size; 这里初始化位置为size的整数倍，

position %= pagerNames.length; 让position 一直保持在 [0-size]之间

public class BannersActivity extends AppCompatActivity {

private ViewPager viewPager;
private LinearLayout llPots;

private static String[] pagerNames = {"美女一", "美女二", "美女三", "美女四", "美女五"};

private static int[] pictrues = {R.drawable.girl1, R.drawable.girl2, R.drawable.girl3,
R.drawable.girl4, R.drawable.girl5};
private Timer timer;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_banners);

viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(new MyPagerAdapter());

int size = pagerNames.length;
int initPosition = (Integer.MAX_VALUE / 2) / size * size; //设置其实位置为Interger.MAX_VALUE的中间位置
viewPager.setCurrentItem(initPosition);
llPots = (LinearLayout) findViewById(R.id.llPots);

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//修改指示点
setSelect(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});

//设置手指触摸时停止自动滑动
viewPager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
stopLoopThread();
}
if (event.getAction() == MotionEvent.ACTION_UP) {
startLoopTherad();
}
return false;
}
});
initSpot();
startLoopTherad();
}

private void stopLoopThread() {
timer.cancel();
timer = null;
}
private void startLoopTherad() {
//设置定时器控制自动滑动
TimerTask task = new TimerTask() {
@Override
public void run() {
runOnUiThread(new Runnable() {
@Override
public void run() {
viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
}
});
}
};

timer = new Timer();
timer.schedule(task, 2000, 2000);
}

//初始化初示的小点
private void initSpot() {
for (int i = 0; i < pagerNames.length; i++) {
ImageView iv = new ImageView(this);
iv.setPadding(5, 0, 5, 0);
iv.setImageResource(R.drawable.selector_spot);
llPots.addView(iv);
}
setSelect(0);
}

//切换小点
public void setSelect(int positoin) {
for (int i = 0; i < pagerNames.length; i++) {
ImageView iv = (ImageView) llPots.getChildAt(i);
iv.setSelected(i == positoin % pagerNames.length);
}
}

private class MyPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return Integer.MAX_VALUE;
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
position %= pagerNames.length;

View view = View.inflate(BannersActivity.this, R.layout.item_banners, null);
ImageView ivPicture = (ImageView) view.findViewById(R.id.ivPicture);
ivPicture.setBackgroundResource(pictrues[position]);
TextView tvTitle = (TextView) view.findViewById(R.id.tvTitle);
tvTitle.setText(pagerNames[position]);
container.addView(view);
return view;
}
}
}