自定义View----自定义轮播图

先看看效果图吧：

有些时候会在好多的地方用到轮播图，而且每一个轮播图都要写一堆的逻辑，写起来超级麻烦，所以就给它写成一个View拿去用。一个轮播图需要一个ViewPager和一个指示器，所以我们需要写一个View里面有ViewPager和一个放指示器的LinearLayout。

核心

public class MyViewPager extends LinearLayout {

    private Context mContext;
    private ViewPager mViewPager;
    private LinearLayout mLinearLayout;
    private List<ImageView> contentImages;
    private MyHandler myHandler = new MyHandler();

    public MyViewPager(Context context) {
        this(context,null);
    }

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

    public MyViewPager(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;
        //注意这里初始化界面
        LayoutInflater.from(mContext).inflate(R.layout.layout_my_viewpager,this);
        mViewPager = (ViewPager) findViewById(R.id.layout_viewpager);
        mLinearLayout = (LinearLayout) findViewById(R.id.layout_indicator);
    }

    //为轮播图设置数据，初始化指示器
    public void setAdapter(List<String> urls){

        contentImages = new ArrayList<>();
        for(int i = 0;i<urls.size();i++){
            ImageView imageView = new ImageView(mContext);
            Glide.with(mContext).load(urls.get(i)).into(imageView);
            imageView.setLayoutParams(new LinearLayout.LayoutParams(ViewPager.LayoutParams.MATCH_PARENT, ViewPager.LayoutParams.MATCH_PARENT));
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            contentImages.add(imageView);

            ImageView dotView = new ImageView(mContext);
            dotView.setImageResource(R.drawable.select_dot);
            dotView.setLayoutParams(new LayoutParams(60,60));
            ((LinearLayout.LayoutParams)dotView.getLayoutParams()).setMargins(20,0,20,0);
            mLinearLayout.addView(dotView);
        }

        mViewPager.setAdapter(new MyViewPagerAdaper(contentImages));
        //默认选中第一个
        mLinearLayout.getChildAt(0).setSelected(true);

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //指示器设置
                for(int i = 0;i<contentImages.size();i++){
                    mLinearLayout.getChildAt(i).setSelected(false);
                }
                mLinearLayout.getChildAt(position).setSelected(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        //发消息没3秒自动滑到下一张
        Message message = Message.obtain();
        message.obj = mViewPager;
        message.arg1 = contentImages.size();
        myHandler.sendMessageDelayed(message,3000);
    }

    //ViewPager的适配器
    private static class MyViewPagerAdaper extends PagerAdapter{

        private List<ImageView> contentImages;

        public MyViewPagerAdaper(List<ImageView> contentImages) {
            this.contentImages = contentImages;
        }

        @Override
        public int getCount() {
            return contentImages.size();
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(contentImages.get(position));
            return contentImages.get(position);
        }

        //一定去掉super的那个代码
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(contentImages.get(position));
        }
    }

    //这个handler是为了可以实现自动滑动的效果
    private static class MyHandler extends Handler{

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);

            ViewPager mViewPager = (ViewPager) msg.obj;
            int size = msg.arg1;
            int currentPosition = mViewPager.getCurrentItem();
            if(currentPosition == size-1){
                mViewPager.setCurrentItem(0,false);
            }else {
                mViewPager.setCurrentItem(currentPosition+1);
            }

            Message message = Message.obtain();
            message.arg1 = size;
            message.obj = mViewPager;
            sendMessageDelayed(message,3000);
        }
    }
}

轮播图的界面

<?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="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/layout_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/layout_indicator"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:gravity="center_vertical|right"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        >

    </LinearLayout>

</RelativeLayout>

指示器的drawable文件，及select_dot：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/dot_black" android:state_selected="true"/>
    <item android:drawable="@drawable/dot_white" android:state_selected="false"/>
</selector>

里面的两个图片，及dot_black和dot_white：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/color_000000" />
    <stroke android:color="@color/color_ffffff"
        android:width="2dp"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/dot_black" android:state_selected="true"/>
    <item android:drawable="@drawable/dot_white" android:state_selected="false"/>
</selector>

看看怎么使用吧：
这个是图上的界面

<?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_custom_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.ws.www.rxandroiddemo.activity.view.CustomViewActivity">

    <Button
        android:id="@+id/a_customview_btn_lunbo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="自定义轮播图View"/>

    <com.ws.www.rxandroiddemo.customview.MyViewPager
        android:id="@+id/a_customview_viewpager"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_below="@id/a_customview_btn_lunbo">

    </com.ws.www.rxandroiddemo.customview.MyViewPager>
</RelativeLayout>

调用的时候：

public class CustomViewActivity extends AppCompatActivity implements View.OnClickListener {

    private Button mBtnLunBoView;
    private MyViewPager mViewPagerLunBo;
    private List<String> mLunBoUrls;

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

        initViews();
        initListeners();
        initDatas();
    }

    private void initViews() {
        mBtnLunBoView = (Button) findViewById(R.id.a_customview_btn_lunbo);
        mViewPagerLunBo = (MyViewPager) findViewById(R.id.a_customview_viewpager);
    }

    private void initListeners() {
        mBtnLunBoView.setOnClickListener(this);
    }

    private void initDatas() {

        mLunBoUrls = new ArrayList<>();
        mLunBoUrls.add("http://img3.imgtn.bdimg.com/it/u=683464545,233057070&fm=26&gp=0.jpg");
        mLunBoUrls.add("http://img1.imgtn.bdimg.com/it/u=1108433484,1432586959&fm=26&gp=0.jpg");
        mLunBoUrls.add("http://img4.imgtn.bdimg.com/it/u=3369628530,1830134174&fm=11&gp=0.jpg");
        mLunBoUrls.add("http://img1.imgtn.bdimg.com/it/u=1589988602,201090737&fm=26&gp=0.jpg");

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.a_customview_btn_lunbo:
                mViewPagerLunBo.setAdapter(mLunBoUrls);
                break;
        }
    }
}

注意继承的是LinearLayout如果继承ViewGroup可能看不到效果