自定义广告图片轮播View——CarouselView

  因为一个广告机的需求,需要做一个广告轮播的效果,不需要什么特别的动画,正常的轮播就可以了。笔者看了网上很多文章,要么不好用,要么就是效果太多,太复杂,用不上。索性自己写了一个简单的View,可以支持普通的广告轮播,目的在轻量级,使用简单。

效果图:

简单说下需求:

  1. 底部Item指示器
  2. 图片文字描述显示
  3. 图片轮播
  4. 使用简单,使用者不需要考虑除了放图片以外的任何逻辑

重点实现:

  1. 首先是改View的xml,CarouselView中封装了ViewPager,利用了ViewPager实现轮播
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v4.view.ViewPager
            android:id="@+id/view_carousel_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:orientation="vertical"
            android:layout_alignParentBottom="true"
            android:padding="5dp"
            android:background="#6000"
            android:gravity="center_horizontal">
            <TextView
                android:id="@+id/view_carousel_tv_desc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#fff" />
            <LinearLayout
                android:id="@+id/view_carousel_ll_point"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="5dp">
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>
  1. 绘制指示器,样式是用的drawable做的enable和disenable两种状态的小圆点。然后放入ll_point的LinearLayout,利用Java代码绘制的ImageView。
  private void initView(){
        viewPager.setOnPageChangeListener(this);
        imageViews=new ArrayList<>();
        ImageView imageView;
        View pointView;
        for (int i = 0; i < beans.size(); i++){
            //添加图片到集合中
            imageView = new ImageView(mC);
            imageView.setBackgroundResource(beans.get(i).getImgResource());
            imageViews.add(imageView);

            //加小白点,指示器(这里的小圆点定义在了drawable下的选择器中了,也可以用小图片代替)
            pointView = new View(mC);
            pointView.setBackgroundResource(R.drawable.carousel_point); //使用选择器设置背景
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(8, 8);
            if (i != 0){
                //如果不是第一个点,则设置点的左边距
                layoutParams.leftMargin = 10;
            }
            pointView.setEnabled(false); //默认都是暗色的
            ll_point.addView(pointView, layoutParams);
        }
        if(imageViews.size()>0) Log.i(TAG,"initView完成");
    }
  1. 实现PageChangeListener的onPageSelected方法,这里虽然效果是轮播,单从代码逻辑来讲,是将图片*n然后按顺序排成一排,然后每次展示下一幅图。所以我们需要控制position的值防止下标越界。
 @Override
    public void onPageSelected(int position) {
        //当前的位置可能很大,为了防止下标越界,对要显示的图片的总数进行取余
        int newPosition = position % beans.size();
        //设置描述信息
        tv_desc.setText(beans.get(newPosition).getImgDescs());
        //设置小圆点为高亮或暗色
        ll_point.getChildAt(lastPosition).setEnabled(false);
        ll_point.getChildAt(newPosition).setEnabled(true);
        lastPosition = newPosition; //记录之前的点
    }
  1. 用循环+线程+handler实现轮播
 private  void startCarousel(){
        Log.i(TAG,"CarouselView轮播开启");
        new Thread(){
            @Override
            public void run() {
                while(isRunning){
                    try {
                        Thread.sleep(intervalsTime);
                        handler.sendEmptyMessage(0);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }.start();
    }
private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case 0:
                    viewPager.setCurrentItem(viewPager.getCurrentItem()+1);
                    break;
            }
        }
    };

使用方法:

  使用方法就很简单了,毕竟只是为了做一个轮播空间,没有更多的拓展和花样的动画。

  1. 首先在xml中引用CarouselView
 <com.wusy.adv.CarouselView
        android:id="@+id/activity_main_carouselView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
  1. 在Activity中获取引用的CarouselView,构建CarouselBean的ArrayList,调用CarouselView的init方法完成。
carouselView=findViewById(R.id.activity_main_carouselView);
ArrayList<CarouselView.CarouselBean> beans=new ArrayList<>();
beans.add(new CarouselView.CarouselBean(R.mipmap.img1,"第一张图"));
beans.add(new CarouselView.CarouselBean(R.mipmap.img2,"第二张图"));
beans.add(new CarouselView.CarouselBean(R.mipmap.img3,"第三张图"));
beans.add(new CarouselView.CarouselBean(R.mipmap.img4,"第四张图"));
beans.add(new CarouselView.CarouselBean(R.mipmap.img5,"第五张图"));
carouselView.init(beans,3000);//第一个参数是图片集合,第二个参数是轮播间隔时间,单位毫秒

源码:

carousel_point.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true"  android:drawable="@drawable/carousel_point_enable"/>
    <item android:state_enabled="false"  android:drawable="@drawable/carousel_point_disenable"/>
</selector>

carousel_point_disenable.xml:

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

carousel_point_enable.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="8dp"/>
    <solid android:color="#fff"/>
</shape>

CarouselView:

package com.wusy.adv;

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by XIAO RONG on 2018/8/8.
 */

public class CarouselView extends LinearLayout implements ViewPager.OnPageChangeListener {
    private String TAG="CarouselView";
    private Context mC;
    private ViewPager viewPager;
    private LinearLayout ll_point;
    private TextView tv_desc;
    private ArrayList<ImageView> imageViews; //存放图片的集合
    private ArrayList<CarouselBean> beans;
    private int lastPosition;
    private boolean isRunning = true;
    private int intervalsTime=5000;
    private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case 0:
                    viewPager.setCurrentItem(viewPager.getCurrentItem()+1);
                    break;
            }
        }
    };
    public CarouselView(Context context) {
        this(context,null);
    }

    public CarouselView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CarouselView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        LayoutInflater.from(context).inflate(R.layout.view_carousel, this);
        this.mC=context;
        findView();
    }
    private void findView(){
        viewPager=findViewById(R.id.view_carousel_viewpager);
        tv_desc=findViewById(R.id.view_carousel_tv_desc);
        ll_point=findViewById(R.id.view_carousel_ll_point);
    }
    public void init(ArrayList<CarouselBean> beans,int intervalsTime){
        if(intervalsTime>1000)this.intervalsTime=intervalsTime;
        this.beans=beans;
        initView();
        initAdapter();
        startCarousel();
    }

    /**
     * 是否开启轮播
     * @param isRunning
     */
    public void isRunningCarousel(boolean isRunning){
        this.isRunning=isRunning;
    }

    /**
     * 初始化适配器
     */
    private void initAdapter() {
        ll_point.getChildAt(0).setEnabled(true);//初始化控件时,设置第一个小圆点为亮色
        tv_desc.setText(beans.get(0).getImgDescs()); //设置第一个图片对应的文字
        lastPosition=0;
        viewPager.setAdapter(new CarouseAdapter());
        Log.i(TAG,"initAdapter()完成");
    }

    /**
     * 初始化控件
     */
    private void initView(){
        viewPager.setOnPageChangeListener(this);
        imageViews=new ArrayList<>();
        ImageView imageView;
        View pointView;
        for (int i = 0; i < beans.size(); i++){
            //添加图片到集合中
            imageView = new ImageView(mC);
            imageView.setBackgroundResource(beans.get(i).getImgResource());
            imageViews.add(imageView);

            //加小白点,指示器(这里的小圆点定义在了drawable下的选择器中了,也可以用小图片代替)
            pointView = new View(mC);
            pointView.setBackgroundResource(R.drawable.carousel_point); //使用选择器设置背景
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(8, 8);
            if (i != 0){
                //如果不是第一个点,则设置点的左边距
                layoutParams.leftMargin = 10;
            }
            pointView.setEnabled(false); //默认都是暗色的
            ll_point.addView(pointView, layoutParams);
        }
        if(imageViews.size()>0) Log.i(TAG,"initView完成");
    }

    /**
     * 开启轮播
     */
    private  void startCarousel(){
        Log.i(TAG,"CarouselView轮播开启");
        new Thread(){
            @Override
            public void run() {
                while(isRunning){
                    try {
                        Thread.sleep(intervalsTime);
                        handler.sendEmptyMessage(0);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }.start();
    }
    //页面滑动
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }
    //新的页面被选中
    @Override
    public void onPageSelected(int position) {
        //当前的位置可能很大,为了防止下标越界,对要显示的图片的总数进行取余
        int newPosition = position % beans.size();
        //设置描述信息
        tv_desc.setText(beans.get(newPosition).getImgDescs());
        //设置小圆点为高亮或暗色
        ll_point.getChildAt(lastPosition).setEnabled(false);
        ll_point.getChildAt(newPosition).setEnabled(true);
        lastPosition = newPosition; //记录之前的点
    }
    //页面滑动状态发生改变
    @Override
    public void onPageScrollStateChanged(int state) {

    }
    private class CarouseAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //从集合中获得图片
            int newPosition = position % imageViews.size(); //数组中总共有5张图片,超过数组长度时,取摸,防止下标越界
            ImageView imageView = imageViews.get(newPosition);
            //把图片添加到container中
            container.addView(imageView);
            //把图片返回给框架,用来缓存
            return imageView;
        }
        //销毁条目
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            //object:刚才创建的对象,即要销毁的对象
            container.removeView((View) object);
        }

    }
    public static class CarouselBean{
        private int imgResource;
        private String imgDescs;

        public int getImgResource() {
            return imgResource;
        }

        public void setImgResource(int imgResource) {
            this.imgResource = imgResource;
        }

        public String getImgDescs() {
            return imgDescs;
        }

        public void setImgDescs(String imgDescs) {
            this.imgDescs = imgDescs;
        }

        public CarouselBean(int imgResource, String imgDescs) {
            this.imgResource = imgResource;
            this.imgDescs = imgDescs;
        }

    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

Android侧滑删除另一种实现,SwipeListView补充

前不久在在做聊天删除功能的时候使用SwipeListView进行侧滑删除有一点小问题,因为SwipeListView嵌套在Fragment内的时候,会报一个转换...

3485
来自专栏Android知识点总结

5-AVI--Fragment简单封装

1013
来自专栏向治洪

android 自定义Viewpager实现无限循环

前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环。本以为单纯的ViewPager就可以实现这些功能。但是蛋疼的事情来了...

3427
来自专栏向治洪

Android侧滑删除另一种实现,SwipeListView补充

前不久在在做聊天删除功能的时候使用SwipeListView进行侧滑删除有一点小问题,因为SwipeListView嵌套在Fragment内的时候,会报一个转换...

1989
来自专栏浅探ARKit

ARKit同时检测水平平面和竖直平面

ARKit1.5里,新增了检测竖直平面的功能。为此特意写一个demo。 下面是效果图: [IMG_3728.PNG] 和之前的水平平面相比 其实就是把多一个属性...

42010
来自专栏Samego开发资源

图片自动轮播图

3606
来自专栏Android干货

浅谈RecyclerView(完美替代ListView,GridView)

5236
来自专栏Android开发指南

3.CursorAdapter

39415
来自专栏肖蕾的博客

用这个,自定义日历控件各种效果都不是问题

1954
来自专栏developerHaoz 的安卓之旅

手把手教你从零开始做一个好看的 APP - Day four

本文为 手把手教你从零开始做一个好看的 APP - Day four ,如果想看该系列的其他文章,请点击以下连接

912

扫码关注云+社区

领取腾讯云代金券