美文网首页
自定义Banner

自定义Banner

作者: HOLLE_karry | 来源:发表于2020-08-11 08:21 被阅读0次

•Banner由图片,标题组成,有的还有四个点
•除了第三方的,还可以用viewpager来实现,只需要给viewpager外面套一个容器
•原因:里面有title和viewpager2
•还有一种是自己定义一个viewgroup,滑动和监听(事件分发)
•设置一个adapter,在adapter绑定一个banner
•adapter是一个经典模式,很多地方都会用到,viewgroup,recyclerview...
viewpager2支持垂直滑动,支持RTL布局,支持notifyDataSetChanged
•banner的容器是约束布局,在里面添加内容,在onFinishInflate里面添加图片,标题,
•先创建ConstrainSet的对象,将布局克隆,执行constrainSet.clone()方法,然后绘制布局,将各个方向连起来,并且给该控件设置大小addview,在该容器中添加imageview。
•在一棵view树,ID只要在里面不重复就行,在其他分支重复不影响
•初始化view就是为了把view添加进去,viewpager2,imageview,textview
执行顺序:解析xml,创建对象,绘制布局,设置宽高,添加进容器中,把设置好的条件用在viewpager上
•启动俩种用法:把图片和title的数组传过去,或者自己提供布局
•实体类中必须有接口中的俩个方法 getImageUrl(),getTitle();
•adapter中创建onCreateViewHolder方法,直接创建imageview的对象,设置布局的大小,在onBindViewHolder中判断id来添加图片,绑定布局。
•图片切换的时候title也会切换,所以要设置一个监听pager2.registerOnPageChangeCallback,在监听里面添加
textView.setText(mDatas.get(position%mDatas.size()).getTitle());
•滑动循环:滑动到最后一页时,无法继续往下滑,把count改成最大,将下标设置为position%mDatas.size(),
•创建5个view,有4个图片,当第四个图片滑出去时,第一个图片就会进去第五个view,展示出来;想要从banner1滑到banner4,要通过最大值item/2%data.size来判断

•banner指示器可以用RadioGroup和RadioButton来实现,还可以用自定义view来实现
•用RadioGroup和RadioButton来实现,高是圆点的直径,长是4个圆点的直径+间距
•banner数量不限制,指示器要设置一个最大值,不能超过最大值
•指示器需要设置半径,数量,间距,选中的颜色,未选中的颜色
坐标:绝对坐标:相对于屏幕
相对坐标:相对于其他控件
•约束布局连线时需要id,所以要写getId
•需要在Indicator接口中定义指示器需要的属性,通过CircleIndicator继承view实现这个接口,为了有这个方法,
•view中有getId和setId方法,还要定义getId和setId方法,是为了在banner中添加到屏幕上pager.getId()
•多态:用父类指向子类,会传不同的子类,实现不同的方法
new CircleIndicator(getContext());返回private Indicator mIndicator;适用于各种指示器
•用private来定义变量,不想让别人随意访问的变量就用private,第三方的SDK,想对外暴露的用public,不想暴露的,用private
•先计算出控件的宽和高,然后画,需要画笔,要new一个paint,初始化画笔,去锯齿(setAntiAlias(true)),实心圆(setStyle(Paint.Style.FILL)),圆的颜色(setColor(Color.WHITE)),在每个CircleIndicator方法里都需要初始化画笔,半径修改了,就会重新计算,invalidate(); 就是为了 刷新页面,使之前的无效,重新onMeasure onLayout,onDraw,
•当它添加到window上时,会计算,在onMeasure方法中,设置自己的宽和高,在onDraw方法中通过画笔绘制。创建CircleIndicator对象,设置id,添加在view中addview,设置约束条件,将四个方向连接起来。
•要先设置指示器的数量,才能设置宽和高,否则没有效果
•滑动图片,展示第二张图片,需要重新执行onDraw,需要在setCurrent方法里执行invalidate()方法
跑马灯效果:
textView.setEllipsize(TextUtils.TruncateAt.MARQUEE);
textView.setSelected(true);
textView.setMarqueeRepeatLimit(-1);
textView.setSingleLine(true);
轮播:
用handle来实现,停止时移除 getHandler().removeCallbacks(mLoopTask);
开始时, getHandler().postDelayed(mLoopTask, mInterval);
•时间较长时,会一直存在handle中,导致内存泄漏,所以要移除

private Runnable mLoopTask = new Runnable() {
        @Override
        public void run() {
            int item = pager2.getCurrentItem();
            pager2.setCurrentItem(++item, true);
            getHandler().postDelayed(this, mInterval);
        }
    };

    private void stopLoop() {
        getHandler().removeCallbacks(mLoopTask);
    }

    private void startLoop() {
        if (isAutoLoop && mDatas != null && mDatas.size() > 1) {
            getHandler().postDelayed(mLoopTask, mInterval);
        }
    }

•手指触摸屏幕时,banner不会轮播,事件分发的第一个方法dispatchTouchEvent,设置监听MotionEvent.ACTION_DOWN
手指按下,执行stopLoop(),MotionEvent.ACTION_UP手指抬起,执行startLoop()

@Override
    protected void onVisibilityChanged(@NonNull View changedView, int visibility) {
        super.onVisibilityChanged(changedView, visibility);
        if (visibility == VISIBLE) {
            startLoop();
        } else {
            stopLoop();
        }
    }

相关文章

网友评论

      本文标题:自定义Banner

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