用viewpager实现图片轮播
2015-11-21 14:50
246 查看
应用中常常遇到图片轮播的需求,这时候就需要用到viewpager这个组件。viewpager是android support v4 中提供的一个组件。viewpager使用需要以下几步骤:
1.在布局文件中添加viewpager组件
ViewPager路径要写完整,否则会出现问题;
2.创建PagerAdapter,PagerAdapter是viewPager的内容提供者,这里我们的图片就是由PagerAdapter提供给viewpager展示的。同样PagerAdapter也在support v4包中。具体如下所示:
3.初始化ViewPager,PagerAdapter
待PagerAdapter填充图片数据后,ViewPager便可以将图片展示出来。
4.添加“.”。基本所有应用使用到ViewPager都会使用“.”标识当前坐标,即展示到哪一页。如下代码添加点号:
添加布局文件
在布局里面动态添加“点”的view
拖动ViewPager时,坐标点动态改变
5.自动轮播。大多数时候,我们展示图片时需要其自动轮播的。
启动线程,控制轮播时间,及发出轮播请求给UI线程
UI 线程收到请求后,对显示的图片进行更改
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);
相关文章推荐
- 对频率论(Frequentist)方法和贝叶斯方法(Bayesian Methods)的一个总结
- poj 3321 Apple Tree
- 通过组策略实现IE自动以当前域账号登录某站点
- UIView的userInteractionEnabled属性的意义
- c#绘制曲线图遇到的问题
- easyui datagrid 部分参数
- poj 1195 Mobile phones
- jQuery 获取屏幕高度、宽度
- php 严格控制session的过期时间
- 使用 jQuery Mobile 与 HTML5 开发 Web App (一) ——开发原则
- 录音的基本使用
- android64位机子兼容32位.so库文件
- iOS runtime运行时机制
- RedHat&CentOS 安装谷歌浏览器chrome 与创建桌面快捷方式
- django 报错问题集锦
- webStorm中的混乱代码格式化
- CSSREM插件
- C++控制台循环链表实现贪吃蛇
- linux下磁盘阵列配置方法
- Spoj 1716 Can you answer these queries III