您的位置:首页 > 其它

用viewpager实现图片轮播

2015-11-21 14:50 246 查看
应用中常常遇到图片轮播的需求,这时候就需要用到viewpager这个组件。viewpager是android support v4 中提供的一个组件。viewpager使用需要以下几步骤:

1.在布局文件中添加viewpager组件

<android.support.v4.view.ViewPager
android:id="@+id/vp_adv"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>


ViewPager路径要写完整,否则会出现问题;

2.创建PagerAdapter,PagerAdapter是viewPager的内容提供者,这里我们的图片就是由PagerAdapter提供给viewpager展示的。同样PagerAdapter也在support v4包中。具体如下所示:

public class AdvertisingAdapter extends PagerAdapter {

private List<View> mList;

public AdvertisingAdapter() {
mList = new ArrayList<View>();
}

public void setData(List<View> list) {
if (list != null) {
mList.clear();
mList.addAll(list);
notifyDataSetChanged();
}
}

@Override
public int getCount() {
return mList.size();
}

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

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

@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mList.get(position), 0);
return mList.get(position);
}
}


3.初始化ViewPager,PagerAdapter

protected void setupView() {
mPagerAdapter = new AdvertisingAdapter();
mViewPager = (ViewPager) findViewById(R.id.vp_adv);
mViewPager .setAdapter(mPagerAdapter );
mAdvertising.addOnPageChangeListener(this);
}


待PagerAdapter填充图片数据后,ViewPager便可以将图片展示出来。

4.添加“.”。基本所有应用使用到ViewPager都会使用“.”标识当前坐标,即展示到哪一页。如下代码添加点号:

添加布局文件

<LinearLayout
android:id="@+id/viewGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:orientation="horizontal"></LinearLayout>


在布局里面动态添加“点”的view

imageViews = new ImageView[advPics.size()];
ImageView imageView;
for (int i = 0; i < advPics.size(); i++) {
imageView = new ImageView(this);
imageView.setLayoutParams(new LinearLayout.LayoutParams(50, 50));
imageView.setPadding(15, 15, 15, 15);
imageViews[i] = imageView;
if (i == 0) {
imageViews[i].setImageResource(R.drawable.dot_focus);
} else {
imageViews[i].setImageResource(R.drawable.dot_blur);
}
llDot.addView(imageViews[i]);
}


拖动ViewPager时,坐标点动态改变

  @Override
public void onPageSelected(int position) {
LogUtils.d("enter onPageSelected method");

for (int i = 0; i < advPics.size(); i++) {
imageViews[position].setImageResource(R.drawable.dot_focus);
if (position != i) {
imageViews[i].setImageResource(R.drawable.dot_blur);
}
}
}


5.自动轮播。大多数时候,我们展示图片时需要其自动轮播的。

启动线程,控制轮播时间,及发出轮播请求给UI线程

private void initAutoThread() {
Runnable runnable = new Runnable() {
@Override
public void run() {
while (true) {
if (!isPlayPaused.get()) {
sendUiMessage(MSG_UI_CHANGE_ADV_PIC, what.get(), 0, null);
what.incrementAndGet();
if (what.get() > advPics.size() - 1) {
what.getAndAdd(-advPics.size());
}
}
if (needExit.get()) {
break;
}
try {
Thread.sleep(8000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
};
Thread thread = new Thread(runnable);
thread.setName("Carousel");
thread.start();
}


UI 线程收到请求后,对显示的图片进行更改

mViewPager.setCurrentItem(msg.arg1);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: