绘制轮播图小圆点

绘制轮播图的小圆点

一、绘制圆点

灰色圆点

首先在res目录下创建drawable目录 然后创建根节点为shape的dots_normal.xml文件 如下:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >               //选择形状  圆形
    <corners android:radius="8dp"/>        //圆点的半径
    <solid android:color="#D3D3D3"/>     //圆点的颜色  这里是灰色
</shape>

白色圆点

首先在res目录下创建drawable目录 然后创建根节点为shape的dots_focus.xml文件 如下:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >               //选择形状  圆形
    <corners android:radius="8dp"/>        //圆点的半径
    <solid android:color="#FFF"/>     //圆点的颜色  这里是白色
</shape>

二、为ViewPager设置无限轮播

       首先是布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/llt_dots"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="390dp" >
    </LinearLayout>

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

</RelativeLayout>

             接下来是代码

               //在onCreate方法里找控件这一步我就省略了哈.....     1. vp      2.llt_dots

  

 //消息处理机制handler

     Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            if(msg.what==0){
                //获取当前ViewPager的位置
                int currentItem = vp.getCurrentItem();
                //让ViewPager向后移一页
                vp.setCurrentItem(++currentItem);
                //移除handler里的所有消息 防止handler被干扰
                handler.removeCallbacksAndMessages(null);
                //让ViewPager每三秒切换一次
                handler.sendEmptyMessageDelayed(0, 3000);
            }
        };
    };

//===========================这些在onCreate方法里面写=====================================

               //为ViewPager设置适配器

              

vp.setAdapter(new PagerAdapter() {

                @Override
                public Object instantiateItem(ViewGroup container,
                        final int position) {
                    ImageView iv = new ImageView(getActivity());
                  //这个地方我用的ImageLoader加载的图片
                  //可以使用自己熟悉的加载图片的方法
                  //url 图片的路径  iv ImageView控件
                    ImageLoader.getInstance().displayImage(
                            list.get(url, iv, options);

                    container.addView(iv);
                    return iv;
                }

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

                @Override
                public boolean isViewFromObject(View arg0, Object arg1) {
                    return arg0 == arg1;
                }

                @Override
                public int getCount() {
                    return Integer.MAX_VALUE;
                }
            });

                                                              //初始化小圆点
                 initDots();
           //开始无限轮播
            handler.sendEmptyMessageDelayed(0, 3000);


      //为ViewPager监听
        vp.setOnPageChangeListener(new OnPageChangeListener() {

                @Override
                public void onPageSelected(int position) {
                  //遍历存有绘制好的小圆点的集合
                  for (int i = 0; i < ivList.size(); i++) {
                 //ViewPager滑动或自动切换到哪一页就把哪一页对应的小圆点换成白色小圆点
                   if(i==position%ivList.size()){
                    ivList.get(i).setImageResource(R.drawable.dots_focus);
                   }
                  //否则换成灰色小圆点
                  else{
                    ivList.get(i).setImageResource(R.drawable.dots_normal);
                   }
                  }

                }

                @Override
                public void onPageScrolled(int arg0, float arg1, int arg2) {

                }

                @Override
                public void onPageScrollStateChanged(int arg0) {

                }
            });

   

/**
     * 初始化小圆点的方法
     */
    private void initDots() {
        // 创建一个存放ImageView的集合
        ivList = new ArrayList<ImageView>();
        //移除线性布局里面的所有控件
        llt_dots.removeAllViews();

       //list是网络上请求的数据 里面存放的是ViewPager轮播用的图片 小圆点的个数和图片个数相同

        for (int i = 0; i < list.size(); i++) {
            //创建一个ImageView用于存放一个小圆点
            ImageView iv = new ImageView(getActivity());
            if(i==0){
                iv.setImageResource(R.drawable.dots_focus);
            }else{
                iv.setImageResource(R.drawable.dots_normal);
            }
            //设置小圆点的宽高  注意导包 导LinearLayout包
            LayoutParams params = new LayoutParams(10,10);
            //设置小圆点之间的间距
            //参数一和参数三是水平间距
            //参数二和参数四是垂直间距
            params.setMargins(5, 0, 5, 0);
            //把绘制好的小圆点存入集合和线性布局中
            ivList.add(iv);
            //添加到llt_dots线性布局中
            llt_dots.addView(iv, params);

        }
    }