忙的太久啦,也没有写一篇博客,最近闲下来啦,准备写我的处女做。轮播图在常见不过啦,如果你是一个程序员宝宝的话,网上也有很多demo,也是五花八门的,让人看起来头疼,下面我来写一个我自己的思路分享给大家。宝宝们,你们准备好走进我的套路里面啦吗?哈哈哈。。。。。
主要思路
ViewPager加线程,利用Handler通知ViewPager滑动。
布局文件(废话太多啦,我决定上代码啦宝宝们)
<span style="font-size:14px;"></span><pre style="background-color: rgb(255, 255, 255); font-family: Menlo;"><pre name="code" class="java"><!--放轮播图的-->
<android.support.v4.view.ViewPager
android:id="@+id/carousel_view_page"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@mipmap/ic_launcher"
android:layout_marginRight="50dp"
android:layout_marginLeft="50dp"
android:clipChildren="false" />
<!--放与轮播图联动的圆点-->
<LinearLayout
android:id="@+id/carousel_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="-25dp"
android:orientation="horizontal" />
android:clipChildren="false"这里我设置了false,默认是true
核心代码
<span style="font-size:14px;">public class MainActivity extends AppCompatActivity { private ViewPager viewPager; private ViewGroup viewGroup;//里面放与轮播图联动的线性布局,(小圆点) private ImageView[] imgCircles;//放小圆点的集合 private boolean userTouch = false;//判断用户是否触摸 private Handler handler;//刷新UI private boolean threadAlive = true;//用来销毁线程的 private CarouselAdapter carouselAdapter; //轮播图中的图片来源,只是一个例子,也可以是从网络拉取的图片 private int photos[] = {R.mipmap.page_one, R.mipmap.page_two, R.mipmap.page_three,}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewGroup = (ViewGroup) findViewById(R.id.carousel_layout); viewPager = (ViewPager) findViewById(R.id.carousel_view_page); carouselAdapter = new CarouselAdapter(); carouselAdapter.setImageViews(photos, this); viewPager.setAdapter(carouselAdapter); getCircle(); } //添加联动的圆点 public void getCircle() { final int size = photos.length;//应该添加的小圆点数量 imgCircles = new ImageView[size];//初始化放小圆点的集合 for (int i = 0; i < imgCircles.length; i++) { ImageView iv = new ImageView(this); //设置小圆点的大小 iv.setLayoutParams(new ViewGroup.LayoutParams(10, 10)); //设置进去 imgCircles[i] = iv; //设置默认第一个圆点为蓝色,其他为黑色 if (i == 0) { imgCircles[i].setImageResource(R.mipmap.blue_view); } else { imgCircles[i].setImageResource(R.mipmap.black_view); } //设置放小圆点的线性布局的大小 LinearLayout.LayoutParams layoutparams = new LinearLayout.LayoutParams( new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); //圆点左右相距为10 layoutparams.leftMargin = 10; layoutparams.rightMargin = 10; viewGroup.addView(iv, layoutparams); } viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { /* onPageScrolled(int arg0,float arg1,int arg2),当页面在滑动的时候会调用此方法, 在滑动被停止之前,此方法回一直得到调用。其中三个参数的含义分别为: arg0 :当前页面,及你点击滑动的页面 arg1:当前页面偏移的百分比 arg2:当前页面偏移的像素位置 */ @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } /* onPageSelected(int position):此方法是页面跳转完后得到调用, position是你当前选中的页面的Position(位置编号) */ @Override public void onPageSelected(int position) { for (int i = 0; i < size; i++) { if (i == position % size) { imgCircles[i].setImageResource(R.mipmap.blue_view); } else { imgCircles[i].setImageResource(R.mipmap.black_view); } } } /* onPageScrollStateChanged(int arg0) ,此方法是在状态改变的时候调用,其中arg0这个参数 有三种状态(0,1,2)。arg0 ==1的时辰默示正在滑动,arg0==2的时辰默示滑动完毕了,arg0==0的时辰默示什么都没做。 */ @Override public void onPageScrollStateChanged(int state) { } }); viewPager.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: //当用户触摸轮播图的时候 userTouch = true; break; case MotionEvent.ACTION_UP: //用户手离开手机 userTouch = false; break; } return false; } }); new Thread(new Runnable() { @Override public void run() { while (threadAlive) { //每隔3秒自动滑动一次 try { Thread.sleep(3000); } catch (InterruptedException e) { e.printStackTrace(); } if (!userTouch) { handler.sendEmptyMessage(0); } } } }).start(); handler = new Handler(new Handler.Callback() { @Override public boolean handleMessage(Message msg) { //获取当前的位置,再将ViewPager刷新到下一页 int current = viewPager.getCurrentItem(); //刷新轮播 viewPager.setCurrentItem(current + 1); return false; } }); } //记得把线程杀死 @Override protected void onDestroy() { super.onDestroy(); threadAlive = false; } }</span>
适配器
<span style="font-size:14px;">public class CarouselAdapter extends PagerAdapter { //PagerAdapter 的Item 是View private List<ImageView> imageViews; public void setImageViews(int[] photos, Context context) { imageViews = new ArrayList<>(); for (int photo : photos) { ImageView imageView = new ImageView(context); imageView.setImageResource(photo); imageView.setScaleType(ImageView.ScaleType.FIT_XY); imageViews.add(imageView); } notifyDataSetChanged(); } @Override public int getCount() { //设置成无上限的数量,可以无限的滑动 return imageViews != null ? Integer.MAX_VALUE : 0;//返回Integer的最大值 } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { //取出指定位置的图片,对集合取余 ImageView imageView = imageViews.get(position % imageViews.size()); /* 当图片少的时候,不会触发destroyItem 这个时候去向container中addView会报错 手动捕获这个异常 */ try { container.addView(imageView); } catch (IllegalStateException e) { container.removeView(imageView);//先移除 container.addView(imageView);//然后添加进去 } return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { if (container.getChildAt(position % imageViews.size()) == object) { //销毁指定位置的ImageView,回收内存 container.removeViewAt(position % imageViews.size()); } } }</span>
代码写到这啦,轮播图就Ok啦,注解写的挺详细的,我相信你们能看懂,代码写起来很随意,只要你讲道理。
demo下载地址https://github.com/liujingdong/CarouselImage.git