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

前言

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

效果图

实现

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

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

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

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

让图片滑动起来

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

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

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

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

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

<?xml version="1.0" encoding="utf-8"?><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了

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

可用:

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval">    <corners android:radius="5dp"/>    <solid android:color="#FFFFFF"/></shape>

不可用:

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval">    <corners android:radius="5dp"/>    <solid android:color="@android:color/darker_gray"/></shape>

然后给他们加到xml中:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:drawable="@drawable/shape_point_enable_bg"/>    <item android:state_enabled="false" android:drawable="@drawable/shape_point_noable_bg"/></selector>

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

private ArrayList<View> 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