自定义ViewGroup和FrameLayout实现轮播图（包括底部小圆点）

广告轮播图在现在的APP首页比较常见，主要的实现方式有两种，一种是通过ViewPager，一种是通过自定义ViewGroup。前者的实现方式比较简便，本篇文章讲的是第二种方法，有人说用ViewPager不是更方便吗，的确，但是我们通过自己定义ViewGroup，可以更深入了解ViewGroup内部的原理。用别人造的轮子确实方便，但有的时候拆开轮子看看，我们也许会学到更多。

效果图

主要的思路如下：
首先，轮播图可以理解为n张图片横向相连，并通过一个单张图片大小的的相框，一次移动一张图片的距离，我们可以通过一个ViewGroup容器来存放这n张图片，然后用Scroller类配合TimeTask和Handler来实现图片的滑动，至于小圆点，也就是一个横向存放圆点图片的LinearLayout布局，可以再继承一个FrameLayout类，把存放图片的ViewGroup和存放圆点的LinearLayout都放进去，并根据图片滑动的位置来设置圆点的切换。

这就需要对ViewGroup的测量过程（onMeasure），布局过程 （onLayout）和绘制过程（onDraw）以及onTouch点击事件的处理有所了解。

直接看代码
ViewGroup类：

package com.imagebanner;


import android.content.Context;
import android.graphics.Canvas;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;

import java.util.Timer;
import java.util.TimerTask;


/**
 * 该类是实现图片轮播核心类
 */
public class ImageBannerViewGroup extends ViewGroup {

    //子视图个数
    private int children ;

    //子视图宽度和高度
    private int childWidth ;
    private int childHeight ;

    private int x ;
    private int index = 0 ;

    private Scroller scroller ;

    //图片点击事件的监听器
    private ImageBannerListner listner ;

    //底部圆点切换的监听器
    private ImageBannerViewGroupListener bannerViewGroupListener ;

    public ImageBannerViewGroupListener getBannerViewGroupListener() {
        return bannerViewGroupListener;
    }

    public void setBannerViewGroupListener(ImageBannerViewGroupListener bannerViewGroupListener) {
        this.bannerViewGroupListener = bannerViewGroupListener;
    }

    //判断是点击事件还是移动事件的标识
    private boolean isClick ;

    public ImageBannerListner getListner() {
        return listner;
    }

    public void setListner(ImageBannerListner listner) {
        this.listner = listner;
    }

    public interface ImageBannerListner{
        void clickImageIndex( int pos );
    }

    //判断是否自动轮播的标识
    private boolean isAuto = true ;

    //自动轮播
    private Timer timer = new Timer();
    private TimerTask task ;
    private Handler autoHandler = new Handler(){

        @Override
        public void handleMessage(Message msg) {
            switch ( msg.what ){
                case 0:

                    //最后一张的时候返回第一张
                    if( ++index >= children ){
                        index = 0 ;
                    }

                    scrollTo( childWidth * index , 0 );
                    //图片切换完毕后通知FrameLayout切换底部圆点
                    bannerViewGroupListener.selectImage(index);
                    break;
            }
        }
    };

    private void startAuto(){
        isAuto = true ;
    }

    private void stopAuto(){
        isAuto = false ;
    }
    private void init(){

        scroller = new Scroller(getContext());

        task = new TimerTask() {
            @Override
            public void run() {
                if( isAuto ){
                    autoHandler.sendEmptyMessage(0);
                }
            }
        };

        timer.schedule(task , 100 , 3000 );

    }

    @Override
    public void computeScroll() {
        super.computeScroll();
        if( scroller.computeScrollOffset()){
            scrollTo(index * childWidth, 0);
            invalidate();
        }
    }

    public ImageBannerViewGroup(Context context) {
        super(context);
        init();
    }

    public ImageBannerViewGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ImageBannerViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        //求出子视图的个数
        children = getChildCount();
        if( children == 0 ){
            setMeasuredDimension(0,0);
        }else{
            //测量子视图的高度和宽度
            measureChildren(widthMeasureSpec,heightMeasureSpec);

            //根据子视图的宽度和高度 ， 求出该ViewGroup的宽度和高度
            View view = getChildAt(0);

            childHeight = view.getMeasuredHeight() ;
            childWidth = view.getMeasuredWidth() ;
            //子视图的总宽度
            int width = childWidth * children ;
            setMeasuredDimension( width , childHeight );
        }
    }

    /**
     *
     * @param change 布局位置发生改变时为true
     * @param l  相对于父View的Left位置
     * @param t  相对于父View的Top位置
     * @param r  相对于父View的Right位置
     * @param b  相对于父View的Bottom位置
     */
    @Override
    protected void onLayout(boolean change, int l, int t, int r, int b) {
        if( change ){

            int leftMargin = 0 ;
            for( int i = 0 ; i < children ; i ++ ){
                View view = getChildAt(i);

                view.layout(leftMargin, 0 , leftMargin + childWidth , childHeight );
                leftMargin += childWidth ;

            }

        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    /**
     * 该方法返回true , ViewGroup会处理此次拦截事件
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return true ;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch ( event.getAction() ){
            case MotionEvent.ACTION_DOWN:
                isClick = true ;
                 stopAuto();
                if( !scroller.isFinished() ){
                    scroller.abortAnimation();
                }

                x = (int) event.getX();
                break ;
            case MotionEvent.ACTION_MOVE:
                int moveX = (int) event.getX();
                int distance = moveX - x ;
                scrollBy( -distance , 0 );
                x = moveX ;
                isClick = false ;
                break ;
            case MotionEvent.ACTION_UP:

                int scrollX = getScrollX() ;
                index = ( scrollX + childWidth/2 ) / childWidth ;

                if( index < 0 ){
                    index = 0 ;
                }else if( index > children - 1 ){
                    index = children - 1 ;
                }
                if( isClick ){
                    //如果是点击事件
                    listner.clickImageIndex(index);
                }
                else{
                    int dx = index * children - scrollX ;
                    scroller.startScroll(scrollX , 0 , dx , 0 );
                    postInvalidate();
                    bannerViewGroupListener.selectImage(index);
                }

                startAuto();

            /*    scrollTo( index * childWidth , 0 );*/
                break ;
            default:

                break ;

        }

        //返回true的目的是告诉该ViewGroup的父View已经处理该事件
        return true ;
    }

    //
    public interface ImageBannerViewGroupListener{
        void selectImage( int index ) ;
    }

}

FrameLayout类

package com.imagebanner;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.os.Build;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.List;

/**
 * Created by Administrator on 2017/7/9.
 */

public class ImageBannerFrameLayout extends FrameLayout implements ImageBannerViewGroup.ImageBannerViewGroupListener , ImageBannerViewGroup.ImageBannerListner{

    private ImageBannerViewGroup imageBannerViewGroup ;

    private LinearLayout linearLayout ;

    //自定义轮播图的监听器
    public FrameLayoutListener listener ;

    public FrameLayoutListener getListener() {
        return listener;
    }

    public void setListener(FrameLayoutListener listener) {
        this.listener = listener;
    }

    public ImageBannerFrameLayout(Context context) {
        super(context);
        initViewGroup();
        initDotLinearLayout();
    }

    public ImageBannerFrameLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initViewGroup();
        initDotLinearLayout();
    }

    public ImageBannerFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initViewGroup();
        initDotLinearLayout();
    }

    //初始化图片轮播功能的核心类
    private void initViewGroup(){
        imageBannerViewGroup = new ImageBannerViewGroup(getContext());
        //设置布局属性
        FrameLayout.LayoutParams fp = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
        imageBannerViewGroup.setLayoutParams(fp);
        //为ViewGroup设置底部圆点切换的监听器
        imageBannerViewGroup.setBannerViewGroupListener(this);
        //为ViewGroup设置图片点击事件的监听器
        imageBannerViewGroup.setListner(this);
        addView(imageBannerViewGroup);
    }

    //初始化底部圆点布局
    private void initDotLinearLayout(){

        linearLayout = new LinearLayout(getContext());
        //设置布局属性
        FrameLayout.LayoutParams fp = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, 40);
        linearLayout.setLayoutParams(fp);
        linearLayout.setOrientation(LinearLayout.HORIZONTAL);
        linearLayout.setGravity(Gravity.CENTER);

        linearLayout.setBackgroundColor(Color.GRAY);

        addView(linearLayout);

        FrameLayout.LayoutParams layoutParams = (LayoutParams) linearLayout.getLayoutParams();
        layoutParams.gravity = Gravity.BOTTOM ;

        linearLayout.setLayoutParams(layoutParams);

        if( Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB){
            linearLayout.setAlpha( 0.5f );
        }else{
            linearLayout.getBackground().setAlpha(100);
        }

    }

    //公共方法，向FrameLayout中添加图片
    public void addBitmap( List<Bitmap> list ){

        for( int i = 0 ; i < list.size() ; i ++ ){

            Bitmap bitmap = list.get(i);

            addBitmapToViewGroup(bitmap);

            addDots();
        }
    }

    //向ViewGroup中添加图片
    private void addBitmapToViewGroup(Bitmap bitmap){
        ImageView iv = new ImageView(getContext());
        iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
        iv.setLayoutParams( new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        iv.setImageBitmap(bitmap);
        imageBannerViewGroup.addView(iv);
    }

    //向底部linearlayout中添加圆点
    private void addDots(){
        ImageView iv = new ImageView(getContext());
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        lp.setMargins(15,5,15,5);
        iv.setLayoutParams(lp);
        iv.setImageResource(R.drawable.dot_normal);
        linearLayout.addView(iv);
    }

    //实现该接口,完成底部圆点的切换
    @Override
    public void selectImage(int index) {
        int count = linearLayout.getChildCount();
        for( int i = 0 ; i < count ; i ++ ){
            ImageView iv = (ImageView) linearLayout.getChildAt(i);
            if( i == index ){
                iv.setImageResource(R.drawable.dot_select);
            }else {
                iv.setImageResource(R.drawable.dot_normal);
            }
        }
    }


    @Override
    public void clickImageIndex(int pos) {
        listener.clickImageIndex(pos);
    }

    //定义FrameLayout的监听器接口
    public interface FrameLayoutListener{

        void clickImageIndex( int pos ) ;
    }
}

MainActivity代码

package com.imagebanner;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements ImageBannerFrameLayout.FrameLayoutListener{

    private ImageBannerFrameLayout mGroup ;

    private int[] ids = new int[]{
            R.drawable.banner1,
            R.drawable.banner2,
            R.drawable.banner3
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //计算出当前手机的宽度
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int width = dm.widthPixels;

        mGroup = (ImageBannerFrameLayout) findViewById(R.id.image_banner);
        mGroup.setListener(this);

        List<Bitmap> list = new ArrayList<>();
        for( int i = 0 ; i < ids.length ; i ++ ){
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(),ids[i]);
            list.add(bitmap);
        }

        mGroup.addBitmap(list);

    }

    //此处填写点击事件相关的业务代码
    @Override
    public void clickImageIndex(int pos) {
          Toast.makeText(this,"点击了第" + pos +  "张图片" , Toast.LENGTH_SHORT).show();
    }
}

圆点布局文件dot_normal.xml

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

    <size android:height="10dp"
        android:width="10dp"></size>

</shape>

dot_select.xml

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

    <size android:height="10dp"
        android:width="10dp"></size>

</shape>

MainActivity布局文件

<?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.imagebanner.MainActivity">

    <com.imagebanner.ImageBannerFrameLayout
        android:id="@+id/image_banner"
        android:layout_width="match_parent"
        android:layout_height="200dp"></com.imagebanner.ImageBannerFrameLayout>
</RelativeLayout>