Android 广告条轮播的实现

　　生活中我们不难发现一些电商类的app里面都会有一些轮播的广告条出现，我有位好朋友他正巧就是做商城这方面的app，那时候他也要做一个类似淘宝界面上的轮播的滚动条，当时他是采用listview来实现此效果，最近有空研究了一下，发现Android有些原生控件完全可以实现此功能，并且还可以实现其它更强大的效果。
　　

---

　　

　　如上图所示我们可以使用Android原生控件ViewAnimator下的几个子控件去实现。通过官方文档我们可以发现ViewAnimator有两个直接子类（ViewFlipper、ViewSwitcher）和两个间接子类（ImageSwitcher、TextSwitcher）,说实话在之前的开发中，我竟然不知道这几个控件，真是汗颜。对于上图的效果我们可以通过其子类ViewFlipper来去实现。
　　

ViewFlipper实现上下轮播广告条

　　 ViewFlipper可以将动画添加到两个或多个试图之中，每次只能显示一个试图。当然我们可以控制试图之间的交换。

<ViewFlipper        android:id="@+id/viewFlipper"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:inAnimation="@anim/in"        android:outAnimation="@anim/out"        android:flipInterval="2000"        android:autoStart="true"/>

• android:inAnimation进入时动画
• android:outAnimation退出时动画
• android:flipInterval跳转的间隔时间
• android:autoStart是否自动启动
• startFlipping()启动一个定时器来循环子试图
• stopFlipping()停止子试图的循环

JAVA代码

        //这里我建了个News类  模拟从网络上获取数据 并展示        List<News> newsList = new ArrayList<>();        for (int i = 0; i < 3; i++) {            News news = new News();            news.setFirstNews("我是第一行第" + i + "条数据");            news.setTwoNews("我是第二行第" + i + "条数据");            newsList.add(news);        }        for (News news : newsList) {            //创建试图(这里我就简单的使用java代码进行简单的布局创建，当然你也可以在xml中去创建它)            LinearLayout linearLayout = new LinearLayout(this);            linearLayout.setOrientation(LinearLayout.VERTICAL);            linearLayout.setPadding(10,10,10,10);            TextView textView1 = new TextView(this);            TextView textView2 = new TextView(this);            textView1.setText(news.getFirstNews());            textView2.setText(news.getTwoNews());            linearLayout.addView(textView1);            linearLayout.addView(textView2);            //通过addView将试图添加进去(有几个试图就必须添加几个，否则无法展示)            viewFlipper.addView(linearLayout);        }

　　就这样我们的文本广告条就实现了，是不是很简单，使用此控件去实现广告条的效果真的很方便。当然它的功能远不止这些，下面我通过此控件模仿ViewPager实现生活中常见的banner效果。虽然实现了，但其效果还是不及ViewPager的好，如果你们感兴趣的话也可以自己研究研究，可能会有更好的方法去实现此功能。
　　
　　

ViewFlipper实现banner

<FrameLayout        android:layout_width="match_parent"        android:layout_height="200dp"        android:layout_marginTop="20dp">    <ViewFlipper        android:id="@+id/vf_banner"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:flipInterval="3000"        android:autoStart="true"/>        <LinearLayout            android:id="@+id/point"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:gravity="center"            android:layout_gravity="center_horizontal|bottom"            android:layout_marginBottom="10dp"            android:orientation="horizontal"/>    </FrameLayout>

Banner中的圆点

//选中时状态<shape xmlns:android="http://schemas.android.com/apk/res/android"        android:shape="oval">    <solid android:color="@android:color/holo_red_dark"/></shape>//默认状态<shape xmlns:android="http://schemas.android.com/apk/res/android"        android:shape="oval">    <solid android:color="@android:color/white"/></shape>//添加选择器<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_selected="true" android:drawable="@drawable/circle"/>    <item android:state_selected="false" android:drawable="@drawable/circle_pre"/></selector>

JAVA代码

　　这里对于轮播状态的监听，在ViewFlipper中确实没有发现可行的监听事件，于是我通过实现它的动画的监听事件根据ViewFlipper.getDisplayedChild()获取当前图片的下标，从而去改变圆点的状态。在实现左右滑动的效果时我采用的是实现onTouchEvent方法去判断它的起始点和结束点的距离，从而实现其左右切换，当然在切换的过程中我们可以添加动画（这里我没有去实现，直接进行跳转了），当然这里我们也可以通过GestureDetector来实现左右滑动，有兴趣的可以试试下，效果应该比这个好些。

  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);        params.leftMargin = 10;        //图片资源        int[] imagsList = {R.mipmap.one,R.mipmap.banner,R.mipmap.ban,R.mipmap.two};        //循环添加试图并创建圆点        for (int i : imagsList) {            ImageView imageView = new ImageView(this);            imageView.setScaleType(ImageView.ScaleType.FIT_XY);            imageView.setImageResource(i);            //将试图添加进去            flipperBanner.addView(imageView);            //创建圆点（有几张图片创建几个）            TextView textView = new TextView(this);            //设置选择器            textView.setBackgroundResource(R.drawable.choose_circle);            textView.setLayoutParams(params);            //添加圆点            linearLayout.addView(textView);        }        //默认选中第一个圆点        linearLayout.getChildAt(0).setSelected(true);        //添加动画        flipperBanner.setInAnimation(this,R.anim.in_left);        flipperBanner.setOutAnimation(this,R.anim.out_left);        //设置监听事件        flipperBanner.getOutAnimation().setAnimationListener(animationListener);        flipperBanner.setOnTouchListener(this);//实现动画的监听事件Animation.AnimationListener animationListener = new Animation.AnimationListener() {        @Override        public void onAnimationStart(Animation animation) {        }        @Override        public void onAnimationEnd(Animation animation) {        //获取当前下标，根据下标判断状态            point();        }        @Override        public void onAnimationRepeat(Animation animation) {        }    };//圆点的状态   private void point() {        for (int i = 0; i < imagsList.length; i++) {            if (i == flipperBanner.getDisplayedChild()) {                linearLayout.getChildAt(flipperBanner.getDisplayedChild()).setSelected(true);            }else {                linearLayout.getChildAt(i).setSelected(false);            }        }    }//模拟左右滑动状态下图片的改变@Override    public boolean onTouch(View view, MotionEvent motionEvent) {        switch (motionEvent.getAction()) {            case MotionEvent.ACTION_DOWN:                x1 = motionEvent.getX();//起始点                break;            case MotionEvent.ACTION_UP:                if(x1 - motionEvent.getX() > 20){                    flipperBanner.showNext();                }else if (x1 - motionEvent.getX() < -20){                    flipperBanner.showPrevious();                }else {                //实现其点击事件                    Toast.makeText(MainActivity.this,String.valueOf(flipperBanner.getDisplayedChild()),Toast.LENGTH_SHORT).show();                }                point();                break;        }        return true;    }

　　对于一些常见的广告条我们基本上都可以通过ViewAnimator下的子控件去实现它，其它的几个子控件的功能也是相当神奇的，这里也就试着写了一个。有兴趣的可以看下源码。哈哈！