一步一步实现自定义控件(三)

前言

今天我们来实现的是第二个案例,广告图片轮播

效果图

实现

OK 接下来我们就是一步一步实现这个效果

我们观察这个效果图,其实它主要可以分为三步:

• 让图片滑动起来
• 让图片和文字,指示器对应起来
• 让轮播器无限循环

好了,接下来我们就按照我们分析的三步走

让图片滑动起来

第一步就是让我们的图片滑动起来,这里用的是一个v4包下的控件:ViewPager (不熟悉的童鞋可以自行去百度查下),下面我也会简单介绍下这个控件的使用

OK,我们在我们的主布局中先添加一个ViewPager

"@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="160dp"/>

这里得说明下,用这个控件你必须要把全路径写下来,就是带包名的

紧接着我们会发现,我们的效果图下面还有一小条灰色的区域,里面要放我们的指示器的,所以我们还要在我们的布局中要把指示器的xml也添加进去,这里用相对布局最好,所以就直接把整个的布局贴出来了

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.hfs.lunboadvertisedemo.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="160dp">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_alignParentBottom="true"
            android:background="#66000000"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:padding="5dp">

            <TextView
                android:id="@+id/tv_desc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:text="天王盖地虎,宝塔镇河妖"
                android:textColor="@android:color/white"/>

            <LinearLayout
                android:id="@+id/ll_point_container"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:orientation="horizontal">

            LinearLayout>
        LinearLayout>
    RelativeLayout>


RelativeLayout>

Ok,整个布局贴出来之后,我们就要开始实现我们的第一个功能了,同时也简单介绍下ViewPager

我们首先要新建一个数组,这个数组里面存放的是我们要显示的图片资源

mImageResids = new int[]{R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e};

同时ViewPager里面我们这里放的是ImageView来显示图片,同时ImageView的个数是和我们定义的这个数组的长度相同的,所以这里我们还要定义一个集合,同时遍历我们这个数组,把ImageView添加进集合中

 //初始化要展示的ImageView
  mImageViewArrayList = new ArrayList<>();
  for (int i = 0; i < mImageResids.length; i++) {
            imageView = new ImageView(this);
            imageView.setBackgroundResource(mImageResids[i]);
            mImageViewArrayList.add(imageView);
  }       

之后要写一个类去继承PagerAdapter,同时重写4个方法(有点类似ListView的用法)

class MyAdapter extends PagerAdapter {

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

        //3.指定复用的判断逻辑,固定写法
        @Override
        public boolean isViewFromObject(View view, Object object) {
            //当滑倒新的条目.又返回来,view是否可以被复用
            return view == object;
        }

        //1.返回要显示的条目内容 创建条目
        //container 容器 ViewPager
        //position 当前要是显示条目位置
        @Override
        public Object instantiateItem(ViewGroup container, int position) {


            ImageView imageView = mImageViewArrayList.get(position);
            //a.把View对象添加到contain中
            container.addView(imageView);
            //b.把View对象返回给框架
            return imageView;//必须重写 这里是源码中建议的,有兴趣的童鞋可以去源码中查看下
        }

        //2.销毁条目
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            //object要销毁的对象
            container.removeView((View) object);
        }
    }

这里补充下,ViewPager默认是加载三张图片的,就是当前图片加上左右各一个,其实我们也可以通过代码来修改左右显示的个数

//参数的个数就是左右显示条目的个数
setOffscreenPageLimit(xxx);

OK,到这里我们的第一步基本就完成了

让图片和文字,指示器对应起来

第二步就是把图片和我们的指示器对应起来,也就是灰色框中的小圆点.
OK,首先我们得把这个小圆点加上把,通过代码的形式动态加进去,个数显然就是我们的图片的个数,这样的话我们在遍历图片资源的时候,就把小圆点(指示器)加进去就Ok了

这个圆点我们就自己画出来就好了,亮的表示可用,灰色的表示不可用:

可用:

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
    android:shape="oval">

    "5dp"/>
    "#FFFFFF"/>

不可用:

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
    android:shape="oval">

    "5dp"/>
    "@android:color/darker_gray"/>

然后给他们加到xml中:

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android">
    "true" android:drawable="@drawable/shape_point_enable_bg"/>
    "false" android:drawable="@drawable/shape_point_noable_bg"/>

指示器画出来之后,就可以添进去了:

private ArrayList mViewPoints;
mViewPoints = new ArrayList<>();
 ImageView imageView;
        View pointView;
        for (int i = 0; i < mImageResids.length; i++) {
            imageView = new ImageView(this);
            imageView.setBackgroundResource(mImageResids[i]);
            mImageViewArrayList.add(imageView);

            //TODO 2加指示器
            pointView = new View(this);
            pointView.setBackgroundResource(R.drawable.select_point_bg);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(5, 5);//设置大小
            if (i != 10) {
                params.leftMargin = 10;//设置间隔
            }
            pointView.setEnabled(false);
            mLinearLayout.addView(pointView, params);//没给宽高指示器会被拉伸

        }

这里注意下,一定要用LinearLayout下的LayoutParams,不要用ViewGroup下的

OK,指示器添加成功了,默认都不是选中的,但是我们发现我们的效果图默认第一个指示器是选中状态,所以我们要把第一个设置为选中状态

mLinearLayout.getChildAt(0).setEnabled(true);

还有就是在滑动图片的时候,下面的指示器要跟着改变状态,这里就需要对ViewPager做滑动监听了,重写三个方法:

mViewPager.addOnPageChangeListener(this);//设置滚动监听

@Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        //滚动时调用
    }

    @Override
    public void onPageSelected(int position) {
        //新的条目被选中时调用
        mTextView.setText(contentDescs[position]);//文字也要跟着变化
        for (int i = 0; i < mLinearLayout.getChildCount(); i++) {
            mLinearLayout.getChildAt(i).setEnabled(false);
        }
        mLinearLayout.getChildAt(position).setEnabled(true);

    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //滚动状态变化时调用

    }

OK,这样我们的第二个功能也实现了

让轮播器无限循环

现在就剩下最后一个功能了,让我们的控件无限轮播
这里要说明下,现在好多类似控件的无限循环都是伪无限循环,就是把adapter中getCount方法的返回值设置一个很大的数,这样用户怎么滑也滑不到头,感觉就是无限循环一样,我们这里也是用的这个方法

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

这个值如果你不停的滑动,一秒一次的话大约60多年…..
但是这里还有个问题,在adapter的instantiateItem()方法中,我们用mImageViewArrayList.get(position);拿到对应的ImageView,但是我们实际只有5个,而我们getCount()的返回值确大于5个,所以如果这里不改的话就出报角标越界的错误,所以我们要重新计算这个position,要根据新的position拿到ImageView

int newPositon = position % mImageViewArrayList.size();
ImageView imageView = mImageViewArrayList.get(newPositon);

还有一个地方也要改以下,就是滑动监听的onPageSelected()方法,也就是指示器的索引

 int newPositon = position % mImageViewArrayList.size();
        mTextView.setText(contentDescs[newPositon]);

OK,上面说的都是向右无限滑动的解决办法,那么怎么实现向左无限滑动呢?
我们可以让ViewPager一开始跳到中间的某个位置,因为我们getCount()返回值很大,即使跳到中间,这个位置也很大,所以就可以无限向左划动了

 //默认设置到中间的莫个位置
        int position = Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % mImageViewArrayList.size());
        mViewPager.setCurrentItem(position);

这里有个小BUG,有的时候我一点击图片就切换了,如果出现这个BUG,就把Integer.MAX_VALUE
换成一个很大的数,比如5000000等等

一般轮播都是自动的,所以我们要让它开启自动轮询,可以有好多办法实现,这里我们用一个简单的办法

 //TODO 3自动轮询
        //开启轮询
        new Thread(new Runnable() {
            @Override
            public void run() {
            isRunning=true;
                while (isRunning) {
                    try {
                        Thread.sleep(1000 * 2);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }

                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            //往下跳一位
                            mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);
                        }
                    });

                }
            }
        }).start();

解释下isRunning:
我们发现我们退出之后,它还在跑,因为我们设置的是死循环,所以我们要加一个boolean值做判断,在界面销毁时,把它置为false,

 @Override
    protected void onDestroy() {
        super.onDestroy();
        isRunning=false;
    }

OK这样我们的这个轮播控件就做完了

源码:
https://github.com/Greathfs/LunBoAdvertiseDemo