仿转转首页banner

作者: 玖玖君 | 来源:发表于2019-08-01 09:22 被阅读168次

    可独立拆分使用,设置属性可变为普通banner,修改如需特殊要求可修改源码item_banner.xml布局即可

    • 具体效果


      效果
    • 底部背景图片随着banner滚动实现reveal效果
      banner上层图片缩放效果

    实现原理

    • 上层banner用viewPager实现,通过handler定时发送消息实现可循环自动播放的banner
    • 下层背景图片通过多张图片折叠,然后通过viewPager滚动监听来操作底部图片的显示和隐藏
    • 缩放动画用属性动画实现,根据viewPager滑动停止和移动判断是否放大或缩小

    特性

    • 可独立拆分使用,设置属性可变为普通banner,修改如需特殊要求可修改源码item_banner.xml布局即可

    在 app的build.gradle 里面引用

    implementation 'com.tokiii:reveal-banner:1.0.0'
    

    2、写布局

    
        <com.wikikii.bannerlib.banner.view.BannerBgContainer
            android:id="@+id/banner_bg_container"
            android:layout_width="match_parent"
            android:layout_height="240dp" />
    
    
        <com.wikikii.bannerlib.banner.LoopLayout
            android:id="@+id/loop_layout"
            android:layout_width="match_parent"
            android:layout_marginTop="@dimen/qb_px_80"
            android:layout_height="168dp"
            android:layout_gravity="bottom" />
    

    3、实现代码

            bannerBgContainer = (BannerBgContainer) inflate.findViewById (R.id.banner_bg_container);
            loopLayout = (LoopLayout) inflate.findViewById (R.id.loop_layout);
    
            loopLayout.setLoop_ms (3000);//轮播的速度(毫秒)
            loopLayout.setLoop_duration (400);//滑动的速率(毫秒)
            loopLayout.setScaleAnimation (true);// 设置是否需要动画
            loopLayout.setLoop_style (LoopStyle.Depth);//轮播的样式-默认empty
            loopLayout.setIndicatorLocation (IndicatorLocation.Center);//指示器位置-中Center
            loopLayout.initializeData (getActivity ());
            
            // 准备数据
            ArrayList<BannerInfo> bannerInfos = new ArrayList<> ();
            List<Object> bgList = new ArrayList<> ();
            bannerInfos.add (new BannerInfo (R.mipmap.banner_1, "first"));
            bannerInfos.add (new BannerInfo (R.mipmap.banner_2, "second"));
            bgList.add (R.mipmap.banner_bg1);
            bgList.add (R.mipmap.banner_bg2);
            // 设置监听
            loopLayout.setOnLoadImageViewListener (new OnDefaultImageViewLoader () {
                @Override
                public void onLoadImageView(ImageView view, Object object) {
                    Glide.with (view.getContext ())
                            .load (object)
                            .into (view);
                }
            });
            loopLayout.setOnBannerItemClickListener (this);
            if (bannerInfos.size () == 0) {
                return;
            }
            loopLayout.setLoopData (bannerInfos);
            bannerBgContainer.setBannerBackBg (getActivity (), bgList);
            loopLayout.setBannerBgContainer (bannerBgContainer);
            loopLayout.startLoop ();
        }
    
        @Override
        public void onBannerClick(int index, ArrayList<BannerInfo> banner) {
    
        }
    
        void setFullScreen() {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                Window window = getActivity ().getWindow ();
                // Translucent status bar
                window.setFlags (
                        WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                        WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    
            }
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                Window window = getActivity ().getWindow ();
                window.clearFlags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
                        | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
                window.getDecorView ().setSystemUiVisibility (View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                        | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                        | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
                window.addFlags (WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
                window.setStatusBarColor (Color.TRANSPARENT);
            }
    
    
    
    

    相关文章

      网友评论

        本文标题:仿转转首页banner

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