简单的实现自定义轮播图加小圆点控件

在Android的开发中,难免会遇到各种各样的技术型难题。一些比较新奇好玩的一些效果。原生的没有这些效果,so,我们只有自己写一些自定义控件,来满足我们的需求了。

轮播图控件,相信网上会有各种各样的控件,但是本着,学一点会一点的态度,发表代码,仅供参考

上代码

首先是视图布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="240dp">
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        >
        
    </android.support.v4.view.ViewPager>
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        >

    </LinearLayout>
</RelativeLayout>

当然,小圆点需要自己绘制

       选中状态的小圆点

<?xml version="1.0" encoding="utf-8"?>
<!--绘制选中状态下的图案,为圆形-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!--宽高分别为20dp-->
    <size android:height="20dp" android:width="20dp"></size>
    <!--红色代表选中-->
    <solid android:color="#ff00"></solid>

</shape>

    未选中状态的小圆点

<?xml version="1.0" encoding="utf-8"?>
<!--绘制未选中状态下的图案,为圆形-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!--宽高分别为20dp-->
    <size android:height="20dp" android:width="20dp"></size>
    <!--灰色代表未选中状态-->
    <solid android:color="#55999999"></solid>

</shape>
下面是判断选中状态的代码

<?xml version="1.0" encoding="utf-8"?>
<!--判断小圆点的选中状态-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--当state_selected为true时,判断为选中状态-->
    <item android:drawable="@drawable/click1" android:state_selected="true"></item>
    <!--当state_selected为false时,判断为未选中状态-->
    <item android:drawable="@drawable/click2" android:state_selected="false"></item>
</selector>



这里是自定义控件的代码

public class Banner extends RelativeLayout {
    private MyHandler myHandler = new MyHandler();
    //使用静态域,使其可以类名.调用方法
    private static LinearLayout ll;
    private static ViewPager vp;
    private static List<ImageView> imageViews = new ArrayList<>();//图片的集合
    private static List<ImageView> primes = new ArrayList<>();//小圆点的集合
    private static Context myContext;
    
    /**
     * 重写三个构造方法
     */
    public Banner(Context context) {
        this(context,null);

    }

    public Banner(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public Banner(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        myContext = context;
        //获取本类视图
        View view = View.inflate(context,R.layout.banner_layout,this);
        //获取控件
        vp = view.findViewById(R.id.vp);
        ll = view.findViewById(R.id.ll);
    }
    //设置适配器供调用
    public void setAdapter(PagerAdapter pagerAdapter){

        vp.setAdapter(pagerAdapter);
        vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            //当页面滑动的时候回调方法
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            //当松开的时候回调方法
            @Override
            public void onPageSelected(int position) {
                position = position%primes.size();
                for (int i=0; i<primes.size();i++){
                    if(position==i){
                        primes.get(position).setSelected(true);
                    }else{
                        primes.get(i).setSelected(false);
                    }
                }
            }
            //当状态改变时回调函数
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }
    //开启自动轮播
    public void autoPlay(){
        myHandler.sendEmptyMessageDelayed(0,2000);
    }
    //停止自动轮播
    public void stopPlay(){
        myHandler.removeCallbacksAndMessages(null);
    }
    //实现Hnadler方法
    public class MyHandler extends Handler{
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            //获取当前视图的item,进行加一后再赋值给当前item,实现视图改变
            vp.setCurrentItem(vp.getCurrentItem()+1);
            //开启handler,每隔2000毫秒执行一次
            myHandler.sendEmptyMessageDelayed(0,2000);
        }
    }

    //静态域实现内部类适配器
    public static class MyAdapter extends PagerAdapter{

        //获取传递过来的视图
        public MyAdapter (List<ImageView> list){
            //把获取到的视图赋值给本类视图
            imageViews = list;
            //设置小圆点,小圆点的数量要和视图一样多
            for(int i=0;i<imageViews.size();i++){
                //存放小圆点的视图控件
                ImageView p = new ImageView(myContext);
                //把判断好的小圆点放入控件中
                p.setImageResource(R.drawable.cl1);
                //设置两点间的距离
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
                params.setMargins(10,0,10,0);
                p.setLayoutParams(params);
                //添加到primes集合中
                primes.add(p);
                //添加到LinearLayout控件中
                ll.addView(p);
            }
            //设置默认选中的状态
            primes.get(0).setSelected(true);
        }

        //返回无限多的视图
        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            position = position % imageViews.size();//磨除防止内存溢出
            container.addView(imageViews.get(position));
            return imageViews.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }
}
下面是使用此控件的代码一个案例

//获取到的图片的集合
        List<GetAdBean.DataBean> data1 = getAdBean.getData();
        //得到一个存放图片(视图)的集合
        list = new ArrayList<ImageView>();
        //便利此集合 这里的data1是我获取的图片数据的集合
        for (int i=0;i<data1.size();i++){
            //获取到一个存放图片的控件
            ImageView img = new ImageView(this);
            //img.setImageResource(img1[i]);//用来存放本地图片
            ImageLoader.getInstance().displayImage(data1.get(i).getIcon(),img);//用来存放网络图片
            img.setScaleType(ImageView.ScaleType.CENTER_CROP);//对图片进行裁剪
            list.add(img);//把图片放入集合
        }
        //获取到自定义控件中的内部适配器
        Banner.MyAdapter adapter = new Banner.MyAdapter(list);
        //调用设置适配器的方法
        banner.setAdapter(adapter);
        //开启自动轮播
        banner.autoPlay();
好啦,这是一个简单的自定义控件,来实现轮播图+小圆点



猜你喜欢

转载自blog.csdn.net/zjc_null/article/details/79190450