自定义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可能看不到效果