美文网首页自定义View
自定义Banner使用

自定义Banner使用

作者: 夜沐下的星雨 | 来源:发表于2020-08-17 11:48 被阅读0次

    如何使用banner ,每个用户对banner的需求都不同,如何在原有的基础上让用户自己定义相要的效果

    1.在valuse 下创建 .xml 文件
    2.在banner 类中根据构造方法的属性集来获取相应的属性
    3.使用banner

    在valuse 下创建 .xml 文件


    创建的属性及默认值

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <declare-styleable name="Banner">
        <!--  private int mIndicatorEndMargin;
             *         private int mScrollTime;//动画执行时间
             *         private int mScrollMode;//切换模式   垂直或水平方向
             *          private int mInterval=3000;  // 切换间隔时间  (滑动管理器   点进去注释了)
             *         private int mMarginTitleStart;
             *         private int mTitleTextSize;
             *         private int mTitleTextColor;
             *         private int mTitleByViewHeight;
             *         private int mIndicatorRadio;
             *         private int mIndicatorSelectColor;
             *         private int mIndicatorUnSelectColor;
             *          private int mTitleMarginTop;
             *        private int mTitleMarginBottom;
             *         private int mShowTitleByView=true;
             *         private boolean isAutoLoop = true;
             */
    -->
            <attr name="bannerIndicatorEndMargin" format="dimension|reference"/>
            <attr name="bannerPageSwitchInterval" format="integer"/>
            <attr name="bannerPageScrollTime" format="integer"/>
            <attr name="bannerMarginTitleStart" format="dimension|reference"/>
            <attr name="bannerTitleTextSize" format="dimension|reference"/>
            <attr name="bannerTitleMarginTop" format="dimension|reference"/>
            <attr name="bannerTitleMarginBottom" format="dimension|reference"/>
            <attr name="bannerTitleTextColor" format="color|reference"/>
            <attr name="bannerTitleBgViewHeight" format="dimension|reference"/>
            <attr name="bannerIndicatorMargin" format="dimension|reference"/>
            <attr name="bannerIndicatorRadio" format="dimension|reference"/>
            <attr name="bannerIndicatorSelectColor" format="color|reference"/>
            <attr name="bannerIndicatorUnSelectColor" format="color|reference"/>
            <attr name="bannerIsShowTitleByView" format="boolean"/>
            <attr name="bannerIsAutoLoop" format="boolean"/>
            <attr name="bannerTitleMarquee" format="boolean"/>
            <attr name="bannerPageScrollMode">
                <enum name="vertical" value="1"/>
                <enum name="horizontal" value="0"/>
            </attr>
        </declare-styleable>
    </resources>
    

    在banner 类中根据构造方法的属性集来获取相应的属性

    
    public class Banner extends ConstraintLayout {
       private static final int DEFAULT_INTERVAL = 3000;//时间间隔
       private static final int DEFAULT_TIME = 3000;//时间间隔
    
        private static final int DEFAULT_MARGIN_DP=12;
        private static final int DEFAULT_INDICATION_RADIO=3;
        private static final int DEFAULT_TITLE_SIZE_DP=12;
    
        private static final int SCROLL_MODE_VERTICAL=1;
        private static final int SCROLL_MODE_HORIZONTAL=0;
    
        private int mMarginTitleStart;
        private int mTitleTextSize;
        private int mTitleTextColor;
        private int mTitleByViewHeight;
        private int mIndicatorRadio;
        private int mIndicatorSelectColor;
        private int mIndicatorUnSelectColor;
        private int mTitleMarginTop;
        private int mTitleMarginBottom;
        private int mIndicatorMargin;
    
        private ViewPager2 viewPager2;
        private TextView title;
        private Indicator mIndicator;
        private ArrayList<? extends IBannerData> mData;//适配器使用
        private static int mIds=0x1000;//变量
        private int mIndicatorEndMargin;//指示器端部边距
        private int mInterval;  // 切换间隔时间
        private int mScrollTime ;// 轮播切换时间
    
        private int mScrollMode;//切换模式   垂直或水平方向
    
        private boolean mTitleMarquee;//设置跑马灯
        private boolean mShowTitleByView=true;//是否显示title那个半透明背景
        private boolean isAutoLoop = true; // 是否自动循环
    
    
    
        public Banner(Context context) {
            super(context);
        }
    
        public Banner(Context context, AttributeSet attrs) {
            super(context, attrs);
            initValue(attrs);
        }
    
        public Banner(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            initValue(attrs);
        }
    
        @Override
        protected void onFinishInflate() {
            super.onFinishInflate();
    
            initView();
        }
    
        private void initValue(AttributeSet attributeSet ){
            TypedArray array=getContext().obtainStyledAttributes(attributeSet, R.styleable.Banner);
            /**
             *  private int mIndicatorEndMargin;
             *         private int mScrollTime;//动画执行时间
             *         private int mScrollMode;//切换模式   垂直或水平方向
             *          private int mInterval=3000;  // 切换间隔时间  (滑动管理器   点进去注释了)
             *         private int mMarginTitleStart;
             *         private int mTitleTextSize;
             *         private int mTitleTextColor;
             *         private int mTitleByViewHeight;
             *         private int mIndicatorRadio;
             *         private int mIndicatorSelectColor;
             *         private int mIndicatorUnSelectColor;
             *          private int mTitleMarginTop;
             *        private int mTitleMarginBottom;
             *         private int mShowTitleByView=true;
             *         private boolean isAutoLoop = true;
             */
            mTitleMarginTop=array.getDimensionPixelSize(R.styleable.Banner_bannerTitleMarginTop,DEFAULT_MARGIN_DP);
            mTitleMarginBottom=array.getDimensionPixelOffset(R.styleable.Banner_bannerTitleMarginBottom,DEFAULT_MARGIN_DP);
    
            mShowTitleByView=array.getBoolean(R.styleable.Banner_bannerIsShowTitleByView,true);
            isAutoLoop=array.getBoolean(R.styleable.Banner_bannerIsAutoLoop,true);
    
            mIndicatorSelectColor=array.getColor(R.styleable.Banner_bannerIndicatorSelectColor,Color.GRAY);
            mIndicatorUnSelectColor=array.getColor(R.styleable.Banner_bannerIndicatorUnSelectColor,Color.WHITE);
    
    
            mIndicatorEndMargin=array.getDimensionPixelSize(R.styleable.Banner_bannerIndicatorEndMargin,dip2px(DEFAULT_MARGIN_DP));
            mIndicatorMargin=array.getDimensionPixelSize(R.styleable.Banner_bannerIndicatorMargin,dip2px(DEFAULT_INDICATION_RADIO));
    
            mInterval=array.getInt(R.styleable.Banner_bannerPageSwitchInterval,DEFAULT_INTERVAL);
            mScrollTime=array.getInt(R.styleable.Banner_bannerPageScrollTime,DEFAULT_TIME);
            mScrollMode = array.getInt(R.styleable.Banner_bannerPageScrollMode,SCROLL_MODE_HORIZONTAL);
            mMarginTitleStart=array.getDimensionPixelSize(R.styleable.Banner_bannerTitleTextSize,DEFAULT_MARGIN_DP);
            mTitleTextSize=array.getDimensionPixelSize(R.styleable.Banner_bannerTitleTextSize,dip2px(DEFAULT_TITLE_SIZE_DP));
            mTitleTextColor=array.getColor(R.styleable.Banner_bannerTitleTextColor,Color.WHITE);
            mIndicatorRadio=array.getDimensionPixelOffset(R.styleable.Banner_bannerIndicatorRadio,DEFAULT_INDICATION_RADIO);
    
            mTitleMarquee=array.getBoolean(R.styleable.Banner_bannerTitleMarquee,true);
    
            array.recycle();
    
    
            mIndicatorEndMargin= dip2px(15);
            mInterval=DEFAULT_INTERVAL;
            mScrollTime=DEFAULT_TIME;
        }
    
        public ViewPager2 getViewPager2() {
            return viewPager2;
        }
    
        public int getScrollTime() {
          return mScrollTime;
        }
    
        private void initView() {
            //添加一个viewPager2
            viewPager2 = new ViewPager2(getContext());
            //创建id
            viewPager2.setId(mIds++);
            //view Page2 监听
            viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
                @Override
                public void onPageSelected(int position) {
    
                    title.setText(mData.get(position % mData.size()).getTitle());
                    mIndicator.setCurrent(position % mData.size());
                }
            });
            //添加
            addView(viewPager2);
            //创建约束集
            ConstraintSet constraintSet = new ConstraintSet();
            //克隆约束集
            constraintSet.clone(this);
            constraintSet.connect(viewPager2.getId(),ConstraintSet.START,ConstraintSet.PARENT_ID,ConstraintSet.START);
            constraintSet.connect(viewPager2.getId(),ConstraintSet.END,ConstraintSet.PARENT_ID,ConstraintSet.END);
            constraintSet.connect(viewPager2.getId(),ConstraintSet.BOTTOM,ConstraintSet.PARENT_ID,ConstraintSet.BOTTOM);
            constraintSet.connect(viewPager2.getId(),ConstraintSet.TOP,ConstraintSet.PARENT_ID,ConstraintSet.TOP);
    
            constraintSet.constrainWidth(viewPager2.getId(),ConstraintSet.MATCH_CONSTRAINT);
            constraintSet.constrainHeight(viewPager2.getId(),ConstraintSet.MATCH_CONSTRAINT);
    
            //添加一个title 半透明背景
            ImageView background = new ImageView(getContext());
            background.setBackgroundColor(Color.parseColor("#40000000"));
            background.setId(mIds++);
            addView(background);
            constraintSet.connect(background.getId(),ConstraintSet.START,ConstraintSet.PARENT_ID,ConstraintSet.START);
            constraintSet.connect(background.getId(),ConstraintSet.END,ConstraintSet.PARENT_ID,ConstraintSet.END);
            constraintSet.connect(background.getId(),ConstraintSet.BOTTOM,ConstraintSet.PARENT_ID,ConstraintSet.BOTTOM);
            constraintSet.constrainWidth(background.getId(),ConstraintSet.MATCH_CONSTRAINT);
            TextView textView = new TextView(getContext());
            textView.setTextSize(TypedValue.COMPLEX_UNIT_PX,mTitleTextSize);
            textView.setSingleLine(true);
    
            int meauseWidth = MeasureSpec.makeMeasureSpec(1080, MeasureSpec.AT_MOST);
            int meauseHeight = MeasureSpec.makeMeasureSpec(1920, MeasureSpec.AT_MOST);
    
            textView.measure(meauseWidth,meauseHeight);
    
            int height = textView.getMeasuredHeight();
    
            constraintSet.constrainHeight(background.getId(),height+mTitleMarginTop+mTitleMarginBottom);
    
    
            if(!mShowTitleByView){
                background.setVisibility(INVISIBLE);
            }
    
    
    
    
            //添加一个圆点容器
            mIndicator=new CircleIndicator(getContext());
            mIndicator.setRadio(mIndicatorRadio);
            mIndicator.setMargin(mIndicatorMargin);
            mIndicator.setSelectColor(mIndicatorSelectColor);
            mIndicator.setUnSelectColor(mIndicatorUnSelectColor);
            mIndicator.setId(mIds++);
            addView((View) mIndicator);
            constraintSet.connect(mIndicator.getId(),ConstraintSet.END,ConstraintSet.PARENT_ID,ConstraintSet.END,mIndicatorEndMargin);
            constraintSet.connect(mIndicator.getId(),ConstraintSet.BOTTOM, background.getId(),ConstraintSet.BOTTOM);
            constraintSet.connect(mIndicator.getId(),ConstraintSet.TOP, background.getId(),ConstraintSet.TOP);
            constraintSet.constrainWidth(mIndicator.getId(),ConstraintSet.MATCH_CONSTRAINT);
            constraintSet.constrainHeight(mIndicator.getId(),ConstraintSet.MATCH_CONSTRAINT);
    
    
    
            //添加一个title
            title = new TextView(getContext());
            title.setId(mIds++);
            title.setTextColor(mTitleTextColor);
            title.setSingleLine(true);//单行跑起来
            if (mTitleMarquee){
                title.setEllipsize(TextUtils.TruncateAt.MARQUEE);
                title.setSelected(true);
                title.setMarqueeRepeatLimit(-1);//无线循环
            }else {
                title.setEllipsize(TextUtils.TruncateAt.END);//文字跑马灯
            }
            title.setTextSize(TypedValue.COMPLEX_UNIT_PX,mTitleTextSize);
            title.setTextColor(mTitleTextColor);
            addView(title);
            constraintSet.connect(title.getId(),ConstraintSet.START,ConstraintSet.PARENT_ID,ConstraintSet.START);
            constraintSet.connect(title.getId(),ConstraintSet.END,mIndicator.getId(),ConstraintSet.END,mIndicatorEndMargin);
            constraintSet.connect(title.getId(),ConstraintSet.BOTTOM, background.getId(),ConstraintSet.BOTTOM);
            constraintSet.connect(title.getId(),ConstraintSet.TOP, background.getId(),ConstraintSet.TOP);
            constraintSet.constrainWidth(title.getId(),ConstraintSet.MATCH_CONSTRAINT);
            constraintSet.constrainHeight(title.getId(),ConstraintSet.MATCH_CONSTRAINT);
           /* int widthMode=MeasureSpec.getMode(meauseWidth);
            int width=MeasureSpec.getSize(meauseWidth);*/
            constraintSet.applyTo(this);
        }
        //触摸停止  dispatchTouchEvent
        @Override
        public boolean dispatchTouchEvent(MotionEvent ev) {
    
            switch (ev.getAction()){
                case MotionEvent.ACTION_DOWN:{
                    stopLoop();
                    break;
                }
                case MotionEvent.ACTION_UP:{
                    startLoop();
                }
            }
            return super.dispatchTouchEvent(ev);
        }
        public void setData(BannerAdapter adapter){
            mData = adapter.getData();
            if (mData==null||mData.size()==0){
                return;
            }
            viewPager2.setAdapter(adapter);
            viewPager2.setUserInputEnabled(true);//允许用户触摸
            if (mScrollMode ==SCROLL_MODE_HORIZONTAL){
                viewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);//横向
            }else {
                viewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);//竖向
            }
            ScrollSpeedManger.reflectLayoutManager(this);
            //取中间数来作为起始位置
            int index = (Integer.MAX_VALUE / 2) - (Integer.MAX_VALUE / 2 % mData.size());
            viewPager2.setCurrentItem(index,false);
    
            mIndicator.setCount(mData.size());
            mIndicator.setCurrent(index % mData.size());
    
        }
        public void setData(ArrayList<? extends IBannerData> bannerData){
           setData(new BannerAdapter(bannerData));
        }
        //事件分发  的可见性改变   如果能见度为 可见 就开始启动循环   否则就暂停循环   返回销毁
        @Override
        protected void onVisibilityChanged(@NonNull View changedView, int visibility) {
            super.onVisibilityChanged(changedView, visibility);
            if(visibility == VISIBLE){
                startLoop();
            }else{
                stopLoop();
            }
        }
    
    
        private Runnable mLoopTask = new Runnable() {//创建多线程
            @Override
            public void run() {
                //获取当前项目item
                int currentItem = viewPager2.getCurrentItem();
                //给当前项目  传入item .和 smoothScroll  是否平滑滚动
                viewPager2.setCurrentItem(++currentItem, true);
                //getHandler()使用PostDelayed方法,切换间隔时间后调用此Runnable对象
                getHandler().postDelayed(mLoopTask,mInterval);
            }
        };
    
        private void startLoop(){
            if (isAutoLoop&&mData.size()>0&&mData!=null){
                getHandler().postDelayed(mLoopTask,mInterval);
            }
        }
        private void stopLoop(){
            //删除回调mLoopTask
            getHandler().removeCallbacks(mLoopTask);
        }
    
        //dp  转px
        public  int dip2px(float dpValue) {
            final float scale = getContext().getResources().getDisplayMetrics().density;
            return (int) (dpValue * scale + 0.5f);
        }
    }
    
    

    在.xml文件中使用自定义banner

    <com.wds.bannerlib.banner.Banner
        android:id="@+id/banner"
        android:layout_width="0dp"
        android:layout_height="200dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:bannerTitleTextSize="14dp"
        app:bannerMarginTitleStart="13dp"
        app:bannerTitleTextColor="@color/white"
        app:bannerIndicatorRadio="3dp"
        app:bannerIndicatorSelectColor="@color/white"
        app:bannerIndicatorUnSelectColor="@color/gray"
        app:bannerIndicatorEndMargin="13dp"
        app:bannerPageScrollTime="1000"
        app:bannerPageSwitchInterval="3000"
        app:bannerPageScrollMode="horizontal"
    
        />
    

    相关文章

      网友评论

        本文标题:自定义Banner使用

        本文链接:https://www.haomeiwen.com/subject/tkafjktx.html