先看看效果图吧:
有些时候会在好多的地方用到轮播图,而且每一个轮播图都要写一堆的逻辑,写起来超级麻烦,所以就给它写成一个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可能看不到效果